logo

Bootstrap 4 alpha

Mega Menue Sidebar


Bootstrap 4 Tutorial: 6. Inhalte, neue Bootstrap 4 - Elemente.

In diesem vorerst letzten und abschliessenden Schritt werden die vorher angelegten Sections mit Inhalten, Elementen, vornehmlich neuen Elementen aus Bootstrap 4 befüllt.

Neben den inhaltlichen Ergänzungen habe ich die einzelnen neuen Elemente auch mit Hilfe von Grafiken und CSS3 formatiert.

Durch die vielen Veränderungen in diesem Schritt habe ich mich dazu entschlossen die Dokumentation aufzuteilen. Grundlegende generelle Änderungen dokumentiere ich hier, wie in den letzten Schritten. Die Dokumentation der neu angelegten Bootstrapelemente dokumetiere ich direkt auf der Seite des letzten Schrittes inline, auch mit kompletten Quellcodes zu den einzelnen Sections.

 

Aufbau der Seite im Tutorial

 

Webseitenaufbau

Die Seite sieht nun nach dem 6. Schritt wie im Screenshot zu sehen aus.

Da es sich bei der verwendeten Version um bootstrap 4 alpha 6 handelt sind Änderungen / Anpassungen für die Zukunft bis zum Final Release 4 anzunehmen..

Im nachfolgenden, auskommentierten Quelltext läßt sich die Struktur nachvollziehen und über den jeweiligen Downloadbereich die betreffende(n) Datei(en) auch downloaden.

 

Quelltext auskommentiert mit Beschreibung

 

Das Glyphicon Icon Set wird in Bootstrap 4 nicht mehr unterstützt. Deshalb habe ich zwei andere Icon-Sets im Tutorial benutzt um die Seite "aufzuhübschen". Zum einen verwende ich das Ionicons Icon Set und das Font-Awesome Icon Set. Um die Icon Sets verfügbar zu machen habe ich das jeweilige Icon Set vom Anbieter heruntergeladen und in den neu erstellten /fonts Ordner auf den Server hochgeladen.

Nun muss nur noch die jeweilige css-Datei im Headbereich verlinkt werden


<link href="fonts/ionicons/css/ionicons.min.css" rel="stylesheet" />
<link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet" />

Da ich mich entschieden habe die Überschriften auch in einer anderen Schriftart darzustellen, greife ich auf die Google-Fonts-Api zu indem ich folgende Verlinkung im Head vornehme.


<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">

Ich habe mich für die Schrift "Kaushan" entschieden und hierfür in der "tutorialstyle-nav.footer-grid-section-elemente.css" folgende Ergänzungen hinzugefügt.


h4 {
font-family: 'Kaushan Script', cursive; 
text-shadow:1px 1px 3px #fff; 
text-transform:uppercase;
margin-top:2.0rem; 
}
h1, h2, h3, h5, h6 {
font-family: 'Kaushan Script', cursive; 
text-shadow:1px 1px 3px #fff;
}

Hierbei ändere ich nicht nur die Schriftart sondern gebe allen Überschriften auch noch einen Textschatten und der h4 Abstände von oben und die Darstellung nur in Großbuchstaben.

Popover Tooltips

Um die Funktionalität der Bootstrap Tooltips und Popover herzustellen, müssen diese über folgendes Script initialisiert werden


	<!-- Initialize Bootstrap functionality -->
    <script>
    // Initialize tooltip component
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })

    // Initialize popover component
    $(function () {
      $('[data-toggle="popover"]').popover()
    })
    </script>

 

Wechselnde Pfeile im Accordion

In der Section Dynamic Content habe ich im Accordion (collapse) Pfeile zur Navigation eingebaut, die zum Öffnen und Schliessen der Bereiche wechseln. Hierfür ist folgendes kleine Javascript nötig.


	<script>
      function toggleIcon(e) {
        $(e.target)
            .prev('.card-header')
            .find(".more-less")
            .toggleClass('ion-arrow-down-a ion-arrow-up-a');
    }
    $('.card').on('hidden.bs.collapse', toggleIcon);
    $('.card').on('shown.bs.collapse', toggleIcon);	

	</script>

 

In Zeile ~1308, ~1452 und ~1593, des Tutorial 6 Seite muss das Icon dann gesetzt werden.


<a data-toggle="collapse" data-parent="#faq" href="#answerOne" aria-expanded="false" aria-controls="answerOne">
<i class="ion-arrow-down-a more-less"></i> Buttons</a>

<a data-toggle="collapse" data-parent="#faq" href="#answerOne" aria-expanded="false" aria-controls="answerOne">
<i class="ion-arrow-down-a more-less"></i> Navs</a>

<a data-toggle="collapse" data-parent="#faq" href="#answerOne" aria-expanded="false" aria-controls="answerOne">
<i class="ion-arrow-down-a more-less"></i> Modal</a>			   

 

Um das Icon richtig zu plazieren und zu stylen ist folgende zusätzliche kleine css-Anweisung in der "tutorial-nav-footer-grid-section-elemente.css" nötig.


/*Style of ion-arrow down*/
 .more-less {
    float: right;
    color: #222;
	text-shadow:1px 1px 3px #111;
}

 

Reihenfolge der Scripts

Manchmal kommt es vor das die Reihenfolge des Aufrufs der verschienen Javascriptsateien und Scripts wichtig ist um die Funktionalität zu gewährleisten. Wichtig ist, das z.B. die bootstrap.js nach der jquery.js aufgerufen werden sollte.
Die Reihenfolge, die hier eingehalten weden sollte ist:

Kompletter Scriptbereich am Ende des body's.


<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery-3.1.1.min.js"></script>
	<script src="js/jquery.easing.min.js"></script>
	<script src="js/tether.min1.js"></script>	
    <script src="js/wow.js"></script>
	<!-- Initialize Bootstrap functionality -->
    <script>
    // Initialize tooltip component
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })

    // Initialize popover component
    $(function () {
      $('[data-toggle="popover"]').popover()
    })
    </script>
	<script>
      function toggleIcon(e) {
        $(e.target)
            .prev('.card-header')
            .find(".more-less")
            .toggleClass('ion-arrow-down-a ion-arrow-up-a');
    }
    $('.card').on('hidden.bs.collapse', toggleIcon);
    $('.card').on('shown.bs.collapse', toggleIcon);	

	</script>
	<script src="js/bootstrap.min.js"></script>
    <script src="js/scripts.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="js/ie10-viewport-bug-workaround.js"></script>

Da ich die einzelnen Sections mit verschiedenen Bootstrap Elementen befüllt habe, habe ich diesbezüglich die Navigation (Navlinks) und diesbezüglichen section-classes zur besseren Übersicht angepasst.

NEUE:Nav-Links / Sections Classes

  • home
  • tables
  • media
  • dynamic-content
  • forms
  • typography

 

In der Navigation ergeben sich dann folgende Änderungen.

....
<li class="nav-item active">
<a class="nav-link page-scroll" href="#one">tables <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#two">media</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#three">dynamic content</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#four">forms</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#last">typography</a>
</li>
.....

 

In den einzelnen Sections muss diesbezüglich die "class=..." auch ausgetauscht werden


...
<section class="home"> <!--ca. Zeile 76 -->
...
<section id="one" class="tables"> <!--ca. Zeile 409 -->
...
<section id="two" class="media"> <!--ca. Zeile 1030 -->
...
<section id="three" class="dynamic-content"> <!--ca. Zeile 1277 -->
...
<section id="four" class="forms"> <!--ca. Zeile 2621 -->
...
<section id="last" class="typography"> <!--ca. Zeile 3104 -->
...

 

Section Styles

Den einzelnen Sections habe ich dann über CSS verschiene Styleanweisungen (Hintergrund,-Farben,Grafiken und Textfarben )gegeben.


/* Section styles 
-------------------------------------------------- */
section {
    padding: 20px 0;
}
.tables {background:#f5f5f5; color:#222;}
.media {background: #eee url(http://web-complett.de/bootstrap-tutorial/images/bg_media.jpg) repeat;color:#222;}
.dynamic-content {background: #eee url(http://web-complett.de/bootstrap-tutorial/images/bg.jpg) no-repeat;color:#222;}
.forms {background:#fff; color#222;}
.typography {background:#f5f5f5; color:#222;}

 

Jede Section bekommt dann zur h1 noch eine Leading-Grafik, beginnend mit der home section wo ich bootstrap cards vorstelle.


...
<h1><img src="images/cards.png" class="img-fluid object-shadow" alt="bootstrap cards"></h1>
<!--ca. Zeile 94 -->
...
<h1><img src="images/tables.png" class="img-fluid" alt="typography"></h1>
<!--ca. Zeile 413 -->
...
<h1><img src="images/media.png" class="img-fluid" alt="Media"></h1>
<!--ca. Zeile 1034 -->
...
<h1><img src="images/dynamic-content.png" class="img-fluid" alt="slider1"></h1>
<!--ca. Zeile 1281 -->
...
<h1><img src="images/forms.png" class="img-fluid" alt="slider1"></h1>
<!--ca. Zeile 2625 -->
...
<h1><img src="images/typography.png" class="img-fluid" alt="typography"></h1>
<!--ca. Zeile 3108 -->
...

 

Tutorial Links: Dropdown

Das Dropdownmenu habe ich im letzten Schritt auch angepasst, sodass Zugriff auf die einzelnen 6 Tutorial-Schritt-Seiten möglich ist


....
<div class="dropdown-menu page-scroll" aria-labelledby="dropdown01">
<a class="dropdown-item page-scroll" href="http://web-complett.de/bootstrap-tutorial/index-roh.html" target="_blank">Tutorial 1</a>
<a class="dropdown-item page-scroll" href="http://web-complett.de/bootstrap-tutorial/index-nav.html" target="_blank">Tutorial 2</a>
<a class="dropdown-item page-scroll" href="http://web-complett.de/bootstrap-tutorial/index-nav-footer.html" target="_blank">Tutorial 3</a>
<a class="dropdown-item page-scroll" href="http://web-complett.de/bootstrap-tutorial/index-nav-footer-grid.html" target="_blank">Tutorial 4</a>
<a class="dropdown-item page-scroll" href="http://web-complett.de/bootstrap-tutorial/index-nav-footer-grid-section.html" target="_blank">Tutorial 5</a>
<a class="dropdown-item page-scroll" href="http://web-complett.de/bootstrap-tutorial/index-nav-footer-grid-section-elemente.html" target="_blank">Tutorial 6</a>
</div>
....

 

Styling Boostrap Cards

Card-Header

Für den Card-Header habe ich eine Hintergrundgrafik erstellt undüber CSS formatiert. Ebeso bekommt der Header einen Schatten zugewiesen:


.card-header {
    background: transparent url(http://web-complett.de/bootstrap-tutorial/images/card-header-gen.png) no-repeat bottom;
	-webkit-box-shadow: inset 1px -1px 1px rgba(255, 255, 255, 0.65);
	-moz-box-shadow: inset 1px -1px 1px rgba(255, 255, 255, 0.65);
	box-shadow: inset 1px -1px 1px rgba(255, 255, 255, 0.65);
	border:none;
	padding-bottom: 2rem;
}

 

Card

Der Card selber gebe ich auch eine Hintergrundgrafik und einen Schatten. Bei Mouseover ist ein leichter Effect für den Schatten hinterlegt.


.card {
	background: transparent url(http://web-complett.de/bootstrap-tutorial/images/card-bg.jpg) no-repeat bottom;
	text-shadow:1px 1px 3px #fff;
	border:none;
	overflow: hidden;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -webkit-transition: .25s box-shadow;
    transition: .25s box-shadow;
    margin-top:1rem;
	}
	
.card:focus, .card:hover {
     box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

 

Card-Footer

Dem Card-Footer gebe ich auch eine Hintergrundgrafik mit Schatten.


.card-footer {
	background: transparent url(http://web-complett.de/bootstrap-tutorial/images/card-footer-gen.png) no-repeat top;
	-webkit-box-shadow: inset 1px -1px 1px rgba(255, 255, 255, 0.65);
	-moz-box-shadow: inset 1px -1px 1px rgba(255, 255, 255, 0.65);
	box-shadow: inset 1px -1px 1px rgba(255, 255, 255, 0.65);
	border:none;
	padding-top:1.8rem;
}

 

Card-Flush

Für die Card-Flush (ohne left und right-padding der Grafik innerhalb der Card) habe ich,um Abstände zu regeln, der class=card eine neue class class=card-flush hinzugefügt.


<div class="card card-flush" style="max-width: 202px;">

 

Die CSS Anweisung dafür:


.card-flush {margin-top:3rem;}

 

Der Bereich Card-Flush beinhaltet 3 Spalten. Hier habe ich für mobile Endgeräte (kleinere Bildschirme) die 3. Spalte über "hidden-xs-up" versteckt sodass Sie nur für Desktopbildschirme angezeigt wird.


...
<div class="col-6 col-sm-4 hidden-xs-down">
<div class="card card-flush" style="max-width: 202px;">

<!-- Heading -->
<div class="card-block">
<h4 class="card-title">card flush</h4>
<h6 class="card-subtitle text-muted">hidden XS</h6>
</div>
				 
<!-- Image flush, no padding because not in card-block-->
<img src="images/flush3.png" alt="Bootstrap Flush Card">

<!-- Text Content -->
<div class="card-block">
<p class="card-text">there is also the class .card-img-top available.</p>
</div>
<img class="card-img-bottom" src="images/card-footer.jpg" alt="card-footer">

</div> <!-- end card flush 3 -->
...

 

Card-Inverse

Am Ende der Seite habe ich Inverse Cards mit Image Overlay verwendet.


....
<div class="card card-inverse text-center">
<!-- Image -->
<img class="card-img-top" src="images/bootstrapping.png" alt="Bootstrapping">
<!-- Text Overlay -->
<div class="card-img-overlay">
<h4 class="card-title">Why using<br>boostrap?</h4>
<p class="card-text">the easiest way to create responsive websites?</p>
</div><!-- end card-img-overlay -->
<div class="card-block">
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<small><strong>Congrats!</strong><br> you've finished the tutorial!</small>
</div>             
</div><!-- end card-block -->             
</div><!-- end card inverse -->
....

 

Um die Hintergrundgrafiken, Texte und Overlay Effekte anzupassen, sind folgende css-Anweisungen nötig:

.card-inverse .card-title {color:#000; font-size: 18px;}
.card-inverse .card-text {color:#000;}
.card-inverse .card-block {color:#000;}

.card-inverse .card-img-overlay {
 background-color: rgba(244, 244, 244, 0.85);
	border-color: rgba(244, 244, 244, 0.85);
	opacity:0.5}

 

Tabbable Pane

In der Section dynamic-content habe ich auch tabbable-panes vorgestellt die geringfügige Stylesheet-Anpassungen verlangen. (Abstände, Hintergrundgrafik und Schatten)


.tabbable-panes {margin-top:1rem;}
.tabbable-panes .nav {
 background: transparent url(http://web-complett.de/bootstrap-tutorial/images/tabbable-panes-nav-bg.png) no-repeat bottom;
 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
 -webkit-transition: .25s box-shadow;
 transition: .25s box-shadow;

 

Media-Objects

In der Section Media (nested-media-objects) sind folgende CSS-Anweisungen notwendig um hauptsächlich Abstände und Alignements zu regeln


/* Additional Styles for Media Objects */

.media, .media-body {
    overflow: hidden;
}
.media-left {
    padding-right: 10px;
}
.media-right {
    padding-left: 10px;
}
.media-body, .media-left, .media-right {
    display: table-cell;
    vertical-align: top;
}
.media-object {
    display: block;
}
.media-heading {margin-top:20px;}

 

Um die vorhandenen Thumbnail-Grafiken mit Effect zu versehen, sind folgende CSS-Anweisungen über die classe object-shadow nötig


.object-shadow {	 overflow: hidden;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -webkit-transition: .25s box-shadow;
    transition: .25s box-shadow;
    margin-top:1rem;
}

.object-shadow:focus, .object-shadow:hover {
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

 

 

Dies war vorerst der letzte Schritt des Bootstrap 4 Tutorials. Bitte beachten Sie das es sich um einen Playground handelt und mit der Boostrap Version 4 Alpha erstellt wurde, was bedeutet, das Änderungen im Laufe der Zeit zwingend notwendig werden. Z.B. werden momentan auch die Visibility und Hidden Anweisungen überarbeitet, was bedeutet das die Funktion hidden-xs-down" auch geändert wird. Die Funktion bleibt zwar generell, wird aber anders benannt.
Manche Seiten, incl. der letzten Tutorialseite, laden lange, da sehr viel Content incl. allen Sourcecodes mit angeboten werden. Deshalb und auch andersweitig gibt es noch einige ToDo's

ToDo's

Performance
Codeoptimierungen, Codebereinigung
Crossbrowser Combatibiity
Anpassungen für alle neuen, aktuellen Browser
SCSS, SASS
Mit Ereichen der Finale Release Bootstrap 4, werde ich auch auf SCSS, SASS kompeltt umsteigen.
Dokumentationen
Externe PDF Dokumentation, oder Online-Book
Preview/Code
Modal Modal Modal Extern
CSS HTML Preview Preview

Tags

HTML5 META Artikel Doctype Header Footer