logo

Bootstrap 4 alpha

Mega Menue Sidebar


Bootstrap 4 Tutorial: 4. Mixed Grid System.

Als nächstes legen wir für den Contentbereich innerhalb des Content-Container im vorbereiteten Content div (class="tutorial-tenmplate) ein mixed grid system für Desptop, Tablet und Smarthone an.

Im Bootstrap 4 wurde das Gridstystem um eine weitere Variante vom 4-grid system zum 5-grid-system erweitert. Näheres hierzu finden sie z.B. unter bootstrap 4 grid-system.

 

Grundaufbau der Seite im Tutorial

 

Webseitenaufbau

Als grundsätzlichen Seitenaufbau habe ich mir den Inhalt der Grafik vorgestellt.

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

Fügen sie nun bzw. ersetzen Sie den bestehenden Quellcode mit folgendem Code-Snippet (Content-Container). Die erste div innerhalb des Content-Container's bekommt die Klasse "tutorial-template zugewiesen, die über CSS die Abstände erstmal regelt."

 

Quelltext des Content Containers

 


<div class="container">

      <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">.col-12 .col-sm-6 .col-lg-8</div>
        <div class="col-6 col-lg-4">.col-6 .col-lg-4</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 -->

 

Um die Abstände des Grid-Systems anzulegen, ergänzen Sie bitte in der tutorialstyle-nav-footer-grid.css folgende padding-Anweisung

 


.tutorial-template {
  padding: 3rem 1.5rem;
}

 

Im nachfolgenden Schritt legen wir im Inahltsbereich verschieden Section's an die später über Javascript dynamisch anzunavigieren sind

Preview/Code
Modal Modal Modal Extern
CSS HTML Preview Preview