logo

Bootstrap 4 alpha

Mega Menue Sidebar


Bootstrap 4 Tutorial: 5. Sections mit dynamischem Anscrollen

In diesem Schritt werden die die einzelnen Bereiche in section's gegliedert und diese farblich voneinander abgehoben. Zur besseren Übesicht werden manche Bereiche mit Lückentext befüllt. Weiter in diesem Schritt werden die einzelnen section's dynamisch anscrollbar gemacht und über weitere Javascripts und CSS animiert.

Manchmal ist es sinnvoll bestimmte Bereiche für mobile Ansichten nicht sichtbar zu machen, welches zusätzlich in diesem Schritt über "hidden-xs-up" realisiert wird.

Für das dynamische Anscrollen und Animieren der einzelnen Bereiche (section's) sind externe Javascript und CSS Anweisungen/Dateien nötig.

 

Aufbau der Seite im Tutorial

 

Webseitenaufbau

Die Seite sieht im Moment so aus wie auf dem Screenshot.

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..

Beginnen wir nun mit der Vorbereitung und verlinken die externen Javascript und CSS Dateien im head und ende body-Bereich.

 


Suchen Sie im head folgende Verlinkung

<link href="css/tutorialstyle-nav-footer-grid.css" rel="stylesheet">

diese wird ersetzt durch.


<link href="css/tutorialstyle-nav-footer-grid-section.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet" />

Bitte nicht vergessen die beiden Dateien auch auf den Server zu laden (Verzeichnisstruktur beachten)

 

Suchen Sie im footer folgende Passage


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

 

diese ersetzen durch


<!-- 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/bootstrap.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/wow.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>

 

Für die Funktionalitätdes Scrollens und der Animation ist neben der Verlinkung obiger Javascript Dateien folgendes kleine Javascript nötig (Script.js).

Beim Klick auf einen Drowdownlick schliesst sich momantan noch die Navi, hier muss noch nachgearbeitet werden. Tipps gerne gesehen.



(function($) {
    "use strict";

    $('body').scrollspy({
        target: '.navbar-fixed-top',
        offset: 60
    });
   /* Javascript Inizialisierung für die Animation */
    new WOW().init();
    
    $('a.page-scroll').bind('click', function(event) {
        var $ele = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($ele.attr('href')).offset().top - 60)
        }, 1450, 'easeInOutExpo');
        event.preventDefault();
    });
    /* Schliessen des Responsive Menue bei Klick */
    $('#collapsingNavbar li a').click(function() {
        /* always close responsive nav after click */
        $('.navbar-toggler:visible').click();
    });
	
$('.navbar .dropdown').find('a').not('.dropdown-toggle').on('click',function(e){
  e.stopImmediatePropagation();
});

    $('#galleryModal').on('show.bs.modal', function (e) {
       $('#galleryImage').attr("src",$(e.relatedTarget).data("src"));
    });

})(jQuery);

Damit die Naviagation zu den einzelnen Links funktioniert müssen die Anker gesetzt werden und die bootstrapeigene Klasse "page-scroll" den Linkklassen zugefügt werden. Ebenso haben ich der Naviagation ein paar Links hinzugefügt und die id der navbar collapse der click_function aus der script.js angeglichen.

im Einzelnen


<ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>

wird ersetzt durch


<ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link page-scroll" href="#one">about <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link page-scroll" href="#two">portfolio</a>
          </li>
		  <li class="nav-item">
            <a class="nav-link page-scroll" href="#three">service</a>
          </li>
		  <li class="nav-item">
            <a class="nav-link page-scroll" href="#four">contact</a>
          </li>
		  <li class="nav-item">
            <a class="nav-link page-scroll" href="#last">impressum</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu page-scroll" aria-labelledby="dropdown01">
              <a class="dropdown-item page-scroll" href="#">Submenu 1</a>
              <a class="dropdown-item page-scroll" href="#">Submenu 2</a>
              <a class="dropdown-item page-scroll" href="#">Submenu 3</a>
            </div>
          </li>
        </ul>
		

 

Die einzelenen Linkklassen bekommen "page-scroll" ergänzt und die href der einzelnen Link bekommen den Ankerlink z.B. "#one"

folgender Codesnippet


      <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">Bootstrap 4 Tutorial</a>

      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
	  

wird ersetzt durch


	  <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar" aria-controls="collapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand page-scroll" href="#first">Bootstrap 4 Tutorial</a>

      <div class="collapse navbar-collapse" id="collapsingNavbar">
	  

 

Der navbar-brand wird die Klasse page-scroll zugewiesen und an drei Stellen die ID der Navigation (collabsingNavbar) der ID aus der script.js angeglichen.

 

Der komplette Quellcode der Navigation lautet dann


      <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar" aria-controls="collapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand page-scroll" href="#first">Bootstrap 4 Tutorial</a>

      <div class="collapse navbar-collapse" id="collapsingNavbar">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link page-scroll" href="#one">about <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link page-scroll" href="#two">portfolio</a>
          </li>
		  <li class="nav-item">
            <a class="nav-link page-scroll" href="#three">service</a>
          </li>
		  <li class="nav-item">
            <a class="nav-link page-scroll" href="#four">contact</a>
          </li>
		  <li class="nav-item">
            <a class="nav-link page-scroll" href="#last">impressum</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu page-scroll" aria-labelledby="dropdown01">
              <a class="dropdown-item page-scroll" href="#">Submenu 1</a>
              <a class="dropdown-item page-scroll" href="#">Submenu 2</a>
              <a class="dropdown-item page-scroll" href="#">Submenu 3</a>
            </div>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Suche">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suche</button>
        </form>
      </div>
    </nav>

Um die Änderungen und Verlinkungen in der Navigation wirksam zu machen müssen im body aauch ein paar Änderungen vollzogen werden.

Die einzelnen body container werden mit einer section umgeben die eine eindeutige, zugehörige ID bekommt, die wir in der Navigation festgelegt haben, den einzelnen containern wird eine Animationsklasse aus der animate.min.ss und die wow funtion zugewiesen und den einzelnen Containern der Fülltext hinzugefügt.

Da es manchmal sinvoll ist für mobile Geräte manche Inhalte zu verstecken haben ich ein Beispiel eingefügt die "col-6 col-lg-4" - div für mobile Ansichten zu verstecken über die bootsrapeigene Klasse "hidde.xs-down"

Die einzelnen sections bekommen dann auch noch eine Klasse über die tutorialstyle-nav-footer-grid-section.css zugewiesen um Hintergründe und Schriften der einzelnen Sections voneinander abzuheben

 

im Einzelnen

aus den einzelnen Containern

 


<div class="container">
wird z.B.:

<section id="one" class="about">	
<div class="container wow slideInLeft">

 

Die einzelenen Section bekommen eine ID (die Id die in der Navigation angelegt wurde) und eine class zur Formatierung von Hintergrund und Schrift. Der container bekommt die animationklasse "wow" und die Animationsart in diesem Fall "slideinLeft".

 

Die zugehörigen StyleSheet Angaben sind erstmal:


section {
    padding: 20px 0;
}
.about {background:#f5f5f5; color:#222;}
.portfolio {background:#181932; color:#fff;}
.service {background:#f5f5f5; color:#222;}
.contact {background:#181932; color:#fff;}
.impressum {background:#f5f5f5; color:#222;}

 

Den sections geben wir jeweils einen Abstand von 20px und jede Section bekommt Hintergrundfarben und Schriftfarben zugewiesen.

 

Um die div=col-6 col-lg-4 bei mobilen geräten zu verstecken wird aus:


<div class="col-6 col-lg-4">

 

Um die div=col-6 col-lg-4 bei mobilen geräten zu verstecken wird aus:


<div class="col-6 col-lg-4 hidden-xs-down">

 

die hidden-xs-down - klasse (bootstrapeigen) verhindert das Anzeigen des Objekts bei kleinen Bildschirmen, z.B. Smartphones. Wenn Sie das Browserfenster im Preview verkleinern merken sie wie die div ab einer bestimmten Größe des Bildschirms verschwindet.

Gesamter Queelcode des Body's nach der Navigation


<section>
    <div class="container wow pulse">

      <div class="tutorial-template">
        <h1>Bootstrap Tutorial Template</h1>
        <p class="lead">The grid-system-layout:<br>mixed mobile tablet and desktop grid.</p>
		
		<div class="row">
        <div class="col-12 col-sm-6 col-lg-8"><h5>.col-12 .col-sm-6 .col-lg-8</h5>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        <div class="col-6 col-lg-4 hidden-xs-down"><h5>.col-6 .col-lg-4 (desktop only)</h5>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
      </div>
      <div class="row">
        <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
        <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
        <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
      </div>
      </div>
	  
	  

    </div><!-- /.container -->
	</section>
<section id="one" class="about">	
	<div class="container wow slideInLeft">

      <div class="tutorial-template">
        <h1>about</h1>
        <p class="lead">The grid-system-layout:<br>mixed mobile tablet and desktop grid.</p>
		
		<div class="row">
        <div class="col-12 col-sm-6 col-lg-8"><h5>.col-12 .col-sm-6 .col-lg-8</h5>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        <div class="col-6 col-lg-4 hidden-xs-down"><h5>.col-6 .col-lg-4 (desktop only)</h5>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
      </div>
      <div class="row">
        <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
        <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
        <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
      </div>
      </div>
  
	  

    </div><!-- /.container -->
	</section>	
<section id="two" class="portfolio">	
	<div class="container wow rotateInDownRight">

      <div class="tutorial-template">
        <h1>portfolio</h1>
        <p class="lead">The grid-system-layout:<br>mixed mobile tablet and desktop grid.</p>
		
		<div class="row">
        <div class="col-12 col-sm-6 col-lg-8"><h5>.col-12 .col-sm-6 .col-lg-8</h5>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        <div class="col-6 col-lg-4 hidden-xs-down"><h5>.col-6 .col-lg-4 (desktop only)</h5>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
      </div>
      <div class="row">
        <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
        <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
        <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
      </div>
      </div>
	  
	  

    </div><!-- /.container -->
</section>	
<section id="three" class="service">
	<div class="container wow rotateInDownLeft">

      <div class="tutorial-template">
        <h1>service</h1>
        <p class="lead">The grid-system-layout:<br>mixed mobile tablet and desktop grid.</p>
		
		<div class="row">
        <div class="col-12 col-sm-6 col-lg-8"><h5>.col-12 .col-sm-6 .col-lg-8</h5>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        <div class="col-6 col-lg-4 hidden-xs-down"><h5>.col-6 .col-lg-4 (desktop only)</h5>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
      </div>
      <div class="row">
        <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
        <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
        <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
      </div>
      </div>
	  
	  

    </div><!-- /.container -->
</section>
<section id="four" class="contact">
	<div class="container wow rotateInDownRight">

      <div class="tutorial-template">
        <h1>contact</h1>
        <p class="lead">The grid-system-layout:<br>mixed mobile tablet and desktop grid.</p>
		
		<div class="row">
        <div class="col-12 col-sm-6 col-lg-8"><h5>.col-12 .col-sm-6 .col-lg-8</h5>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        <div class="col-6 col-lg-4 hidden-xs-down"><h5>.col-6 .col-lg-4 (desktop only)</h5>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
      </div>
      <div class="row">
        <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
        <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
        <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
      </div>
      </div>
	  
	  

    </div><!-- /.container -->
</section>
	
<section id="last" class="impressum">	
	<div class="container wow rotateInDownLeft">

      <div class="tutorial-template">
        <h1>impressum</h1>
        <p class="lead">The grid-system-layout:<br>mixed mobile tablet and desktop grid.</p>
		
		<div class="row">
        <div class="col-12 col-sm-6 col-lg-8"><h5>.col-12 .col-sm-6 .col-lg-8</h5>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        <div class="col-6 col-lg-4 hidden-xs-down"><h5>.col-6 .col-lg-4 (desktop only)</h5>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
      </div>
      <div class="row">
        <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
        <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
        <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
      </div>
      </div>
	  
	  

    </div><!-- /.container -->
</section>

 

Im nächsten Schritt füllen wir die einzelnen Section mit Bootstrap Elementen, vorangig neue Elemente der Version 4.

 

Preview/Code
Modal Modal Modal Extern
CSS HTML Preview Preview