====== Website-Layout mit Bootstrap ======
Diese Seite wurde aktualisiert für Bootstrap 4.
Standardmässig werden HTML-Elemente auf zwei Arten angeordnet: **Blockelemente** beginnen immer in einer neuen Zeile. Beispiele für Blockelemente sind ''%%
%%'', ''%%

%%'', ''%%

%%'' und ''%%

  • %%''. {{block-elements.png?nolink|Blockelemente}} **Inline-Elemente** stehen in der gleichen Zeile. Beispiele für Inline-Elemente sind ''%%%%'', ''%%%%'', ''%%%%'', ''%%%%'' und ''%%%%''. {{inline-elements.png?nolink|Inline-Elemente}} Diese zwei Möglichkeiten reichen jedoch nicht, um ein richtiges Layout für eine Webseite zu erstellen. Die meisten Webseiten haben entweder ein Layout mit **zwei Spalten** ... {{two-columns.png?nolink|Zwei-Spalten Layout}} ... oder ein Layout mit **drei Spalten**. {{three-columns.png?nolink|Drei-Spalten Layout}} So etwas hinzubekommen ohne ein CSS-Framework wie //Bootstrap// wäre eine rechte Herausforderung. Mit Bootstrap wird es einfacher. Zusätzlich wird das Layout in Bootstrap automatisch auf die Bilschirmgrösse angepasst (sogenanntes [[http://de.wikipedia.org/wiki/Responsive_Webdesign|Responsive Layout]]). Wir können zum Beispiel angeben, dass auf kleinen Bilschirmen die Spalten untereinander angezeigt werden sollen, weil sie nebeneinander nicht mehr Platz hätten. ===== Das Bootstrap Raster =====
    Falls Sie Bootstrap in Ihrem Projekt noch nicht integriert haben, lesen Sie zuerst den Teil über Bootstrap Framework verwenden aus dem HTML & CSS Tutorial.
    Bootstrap beinhaltet ein **12-spaltiges Rastersystem** für das Layout (siehe [[https://getbootstrap.com/docs/4.1/layout/grid/|Dokumentation des Bootstrap-Rasters]]). Ein Raster kann man sich vorstellen wie eine unsichtbare Tabelle mit zwölf Spalten: {{bootstrap-twelve-columns.png?nolink|Zwölf Spalten}} Wir können nun unsere eigenen Spalten definieren, indem wir angeben, wie breit sie in diesem Raster sein sollen. ==== Beispiel für ein 2-spaltiges Layout ==== In diesem Beispiel definieren wir eine linke Spalte mit der Breite von 4 und eine rechte Spalte mit der Breite von 8. Links könnte man zum Beispiel eine Navigation einfügen und rechts den Seiteninhalt. {{bootstrap-two-columns.png?nolink|2-Spalten Layout}} Im HTML-Code würde dieses Layout wie folgt aussehen: 
    <div class="container">
  <div class="row">
    <div class="col-sm-4">
      Hier kommt der Inhalt der linken Spalte.
    </div>
    <div class="col-sm-8">
      Hier kommt der Inhalt der rechten Spalte.
    </div>
  </div>
</div>
    Zu Beachten beim Bootstrap-Raster:
    • Das Raster sollte immer in einem <div> mit einer container-Klasse sein. (Wenn die Breite immer bis ganz zum Rand ausgefüllt werden soll, kann man alternativ die container-fluid-Klasse verwenden.)
    • Innerhalb des Containers kommt ein <div> mit der Klasse row. Damit definieren wir eine Zeile im Raster.
    • Innerhalb der Zeilen kommen schliesslich die Spalten mit den col-Klassen.
    ==== Bildschirmgrössen ==== Eine Spaltenangabe beinhaltet jeweils eine Angabe über die Bildschirmgrösse. Es gibt die folgenden vier Bildschirmgrössen: * ''%%col%%'' - Spalte für Extra-Small-Geräte (Smartphones, schmaler als 576px) * ''%%col-sm%%'' - Spalte für Small-Geräte (Smartphones, breiter als 576px) * ''%%col-md%%'' - Spalte für Medium-Geräte (Tablets, breiter als 768px) * ''%%col-lg%%'' - Spalte für Large-Geräte (Desktops, breiter als 992px) * ''%%col-xl%%'' - Spalte für Extra-Large-Geräte (grosse Desktops, breiter als 1200px) Die Angabe ''%%col-sm-4%%'' aus unserem Beispiel oben bedeutet also, dass ungefähr ab der Grösse eines Tablets eine Spalte der Breite 4 dargestellt wird. Alle Bildschirme, welche kleiner sind als die angegebene Grösse, stellen die Spalten automatisch untereinander dar. So sieht unser Beispiel für das 2-spaltige Layout auf einem Smartphone aus: {{bootstrap-two-columns-smartphone.png?nolink|2-Spalten Layout Smartphone}} ==== Beispiel für ein 3-spaltiges Layout ==== In diesem Beispiel definieren wir drei Spalten. {{bootstrap-three-columns.png?nolink|3-Spalten Layout}} Im HTML-Code würde dieses Layout wie folgt aussehen: 
    <div class="container">
  <div class="row">
    <div class="col-sm-3">
      Hier kommt der Inhalt der linken Spalte.
    </div>
    <div class="col-sm-6">
      Hier kommt der Inhalt der mittleren Spalte.
    </div>
    <div class="col-sm-3">
      Hier kommt der Inhalt der rechten Spalte.
    </div>
  </div>
</div>
    ===== Anwendung auf Portfolio-Blog ===== Im [[modul:m293:tutorials:html-css:start|HTML & CSS Tutorial]] haben wir ein Portfolio entwickelt mit einer Blog-Seite. Das folgende Beispiel zeigt ein **2-Spalten-Layout** für diese Blog-Seite. In der linken Spalte ist der bisherige Inhalt. In der rechten Spalte haben wir neu Platz zum Beispiel für ein paar Links. {{portfolio-two-columns.de.png?nolink|Portfolio}} == blog/index.html == 
    <div class="container">
  <h1 class="title">Blog</h1>

  <p>Hier schreibe ich über alles, was mir beim Lernen von Webprogrammierung begegnet.</p>

  <div class="row">
    <div class="col-sm-8">
      <h2>Blogeinträge</h2>
      <ul>
        <li>Weitere Einträge folgen...</li>
        <li><a href="zweiter-eintrag/">Zweiter Eintrag</a></li>
        <li><a href="erster-eintrag/">Erster Eintrag</a></li>
      </ul>
    </div>

    <div class="col-sm-3 offset-sm-1">
      <h3>Empfehlungen</h3>
      <p>
        Die folgenden Blogs von Kollegen kann ich sehr empfehlen:
      </p>
      <ul class="list-unstyled">
        <li><a href="#">Blog 1</a></li>
        <li><a href="#">Blog 2</a></li>
        <li><a href="#">Blog 3</a></li>
        <li><a href="#">Blog 4</a></li>
      </ul>
    </div>
  </div>

</div>
    === Hinweise === * Bei der rechten Spalte wurde noch eine zweite CSS-Klasse hinzugefügt: ''%%offset-sm-1%%''. Dies bedeutet, dass die rechte Spalte um eins nach rechts gerückt werden soll. Damit erhalten wir einen etwas grösseren Abstand zwischen den beiden Spalten. * Testen Sie das Layout in unterschiedlichen Browsergrössen. * Die Klasse ''%%list-unstyled%%'' bewirkt, dass die Listenelemente ohne Punkt angezeigt werden (siehe [[https://getbootstrap.com/docs/4.1/content/typography/#unstyled|Bootstrap Listen]]). ===== Weitere Informationen zu Layout ===== Lesen Sie den Abschnitt über das [[https://getbootstrap.com/docs/4.1/layout/grid/|Raster-System]] in der Bootstrap Dokumentation. Eine ausführliche Erklärung, wie das Raster-System funktioniert, finden Sie in [[https://uxplanet.org/how-the-bootstrap-4-grid-works-a1b04703a3b7|How the Bootstrap 4 Grid Works]]. ---- ---- Diese Seite ist abgeleitet von [[https://code.makery.ch/|code.makery]] von [[https://code.makery.ch/about/|Marco Jakob]], verwendet unter [[https://creativecommons.org/licenses/by/4.0/|CC BY]].\\ Sie ist lizenziert unter [[https://creativecommons.org/licenses/by-nc-sa/4.0/|CC BY-NC-SA]] von Daniel Fahrni .