Theme-Beispiel

Dies ist eine Vorlage, die das optionale Theme-Stylesheet vorstellt, das zu Bootstrap dazugehört. Verwende sie als Startpunkt, um etwas einzigartigeres zu erstellen, indem du Dinge hinzufügst oder bearbeitest.

Gesagt und getan:
Meine Farben sind Blau und Sand. Blau wird mit der Schrift in "#36F" dargestellt, der sandfarbene Hintergrund erhält "#FDF5E6" mit Namen OldLace. Inspiriert wurde ich durch das schöne Strandbild von https://pixabay.com/de/
Diese Seite kann komplett als ZIP-Datei heruntergeladen werden: DOWNLOAD 4 MB
Einfach mal ausprobieren! Es lohnt sich, wenn man sieht, was alles damit möglich ist.

Als Erstes ändere ich die Schriftfarbe auf "#36F". Dies geschieht in der Datei "theme.css".
Dafür die Zeile color: #36F; im "body" Bereich einfügen, damit es so aussieht:

body {
  padding-top: 70px;
  padding-bottom: 30px;
  color: #36F;
}

Als Nächstes ändere ich die Schriftgröße auf "1.6em". Dies geschieht in der Datei "theme.css".
Dafür die Zeile font-size: 1.6em; im "body" Bereich einfügen, damit es so aussieht:

body {
  padding-top: 70px;
  padding-bottom: 30px;
  color: #36F;
  font-size: 1.6em;
}

Die Hintergrundfarbe fügen wir auch noch ein background-color: #FDF5E6;

body {
  padding-top: 70px;
  padding-bottom: 30px;
  color: #36F;		
  background-color: #FDF5E6; /* Sandfarbe: OldLace */
  font-size: 1.6em;
}

Hier kommt ein Video-Player unter HTML 5 zum Einsatz, der vom User selbst gestartet werden muss.
Beachtung sollte auch die Möglichkeit finden, das Video auf Vollbild schalten zu können.

<video width="200" controls>
   <source src="sea - 6393.mp4" type="video/mp4">
   Your browser does not support HTML5 video.
</video>

Soll im Textbereich selbst ein Code-Schnipsel eingefügt werden, so ist dieses mit <code> und </code> einzuschließen.
So zum Beispiel:

Mitten im Text steht <code> <a href="#"></a> </code> in der Zeile.

body {
  padding-top: 70px;
  padding-bottom: 30px;
  color: #36F;
}

Der Text ändert seine Größe nicht, er wird nur dem Monitorbereich angepasst.
Mit dem Bild geschieht die ebenso, wenn es mit

<img src="bootstrap/sand.jpg" alt="Ein schönes Strandbild" class="img-responsive">

	
<div class="row">

  <div class="col-sm-4">
    <div class="list-group">
	
      <div class="list-group-item active">
      <h4 class="list-group-item-heading"> Überschrift OBEN </h4>
      <p class="list-group-item-text">Text mit 4 Spalten Breite und alles in der Farbe BLAU unterlegt </p>
      </div>
				
      <div class="list-group-item">
      <h4 class="list-group-item-heading"> Überschrift UNTEN </h4>
      <p class="list-group-item-text">Normaler Text 4 Spalten Breite </p>
      </div>
    </div>
  </div><!-- Ende: col-sm-4 -->

  <div class="col-sm-8">
    <div class="list-group">
  
      <div class="list-group-item active">
      <h4 class="list-group-item-heading">Überschrift OBEN</h4>
      <p class="list-group-item-text"> Text nun mit 8 Spalten Breite und in BLAU unterlegt</p>
      </div>
				
      <div class="list-group-item">
      <h4 class="list-group-item-heading">Und hier der Code:</h4>
      <p class="list-group-item-text"> Code: siehe oben! </p>
      </div>
    </div>
  </div><!-- Ende: col-sm-8 -->

</div>	   <!-- Ende: class: row -->
	

<div class="row">
  <div class="col-sm-4">
  
    <ul class="list-group">

      <li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item">Dapibus ac facilisis in</li>
      <li class="list-group-item">Morbi leo risus</li>
      <li class="list-group-item">Porta ac consectetur ac</li>
      <li class="list-group-item">Vestibulum at eros</li>
    </ul>
  </div>  <!-- Ende: col-sm-4 -->
  ...

...
<div class="col-sm-4">
  <div class="list-group">

  <a href="#" class="list-group-item active">Cras justo odio </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>

  </div>  <!-- Ende: list-group -->
</div>  <!-- Ende: col-sm-4 -->
...

...
<div class="col-sm-4">
<div class="list-group">

<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">Listengruppen-Eintragsüberschrift</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
            </a>
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">Listengruppen-Eintragsüberschrift</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
            </a>
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">Listengruppen-Eintragsüberschrift</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
            </a>

</div>  <!-- Ende: col-sm-4 -->
</div>  <!-- Ende: list-group -->
</div>  <!-- Ende: row  -->

<div class="row">

  <div class="col-sm-3">

    <div class="panel panel-default">
	
	  <div class="panel-heading">
      <h3 class="panel-title"> Panel-Titel </h3>
      </div> <!-- Ende: class=panel-heading -->
	  
      <div class="panel-body">
      col-sm-3
      </div> <!-- Ende: class=panel-body -->
    </div> <!-- Ende: class=panel panel-default -->

  </div> <!-- Ende: col-sm-3 -->

  <div class="col-sm-7">

    <div class="panel panel-success">
      <div class="panel-heading">
      <h3 class="panel-title"> Panel-Titel </h3>
      </div> <!-- Ende: class=panel-heading -->
	  
      <div class="panel-body">
      col-sm-7
      </div> <!-- Ende: class=panel-body -->
	  
    </div> <!-- Ende: class=panel panel-success -->
  </div> <!-- Ende: col-sm-7 -->

  <div class="col-sm-2">

    <div class="panel panel-warning">
	
	  <div class="panel-heading">
      <h3 class="panel-title"> Panel-Titel </h3>
      </div> <!-- Ende: class=panel-heading -->
	  
      <div class="panel-body">
      col-sm-3
      </div> <!-- Ende: class=panel-body -->
    </div> <!-- Ende: class=panel panel-warning -->

  </div> <!-- Ende: col-sm-2 -->
  
  </div><!-- Ende row -->
  
  

<div class="row">

  <div class="col-sm-3">
  </div> <!-- /.col-sm-3 -->
  
  <div class="col-sm-7">
    <div class="panel panel-primary">
      <div class="panel-heading">
      <h3 class="panel-title">Panel-Titel</h3>
      </div> <!-- Ende class=panel-heading -->
	  
      <div class="panel-body">
      Die drei ersten Spalten wurden mit angegeben, jedoch ohne Text belassen.<br>
	  Demzufolge sind die ersten 3 Spalten unsichtbar = eingerückte Panel...
      </div> <!-- Ende class=panel-body -->
      </div>
	  
      <div class="panel panel-primary">
        <div class="panel-heading">
        <h3 class="panel-title">Panel-Titel</h3>
        </div><!-- Ende class=panel-heading -->
      <div class="panel-body">
      Panel-Inhalt
      </div><!-- Ende panel-body -->
    </div><!-- Ende panel-primary	-->
  </div><!-- Ende col-sm-7 -->

  <div class="col-sm-2">
    <div class="panel panel-warning">
      <div class="panel-heading">
      <h3 class="panel-title">Panel-Titel</h3>
      </div><!-- Ende panel-heading-->
      <div class="panel-body">
      Panel-Inhalt
      </div><!-- Ende panel-body -->
    </div><!-- Ende panel-warning -->
	
    <div class="panel panel-danger">
      <div class="panel-heading">
      <h3 class="panel-title">Panel-Titel</h3>
      </div><!-- Ende panel-heading -->
      <div class="panel-body">
      Panel-Inhalt
      </div><!-- Ende panel-body -->
    </div><!-- Ende panel-danger -->
  </div><!-- Ende col-sm-2 -->
  
</div><!-- Ende row -->
	  

Standard Primär Erfolg Info Warnung Gefahr Link

Standard Primär Erfolg Info Warnung Gefahr Link

Standard Primär Erfolg Info Warnung Gefahr Link

Standard Primär Erfolg Info Warnung Gefahr Link

"BUTTONS" sind Schaltflächen mit Weiterführung, also Links.

Normale Ausführung ohne Link sieht so aus: <button type="button" class="btn btn-default">Standard</button>

Nun die Ausführung mit Link: <a href="#"> <button type="button" class="btn btn-info">Hier hin</button> </a> ergibt: Hier hin

Zu den Farbangaben: default primary success info warning danger link

Standard Primär Erfolg Info Warnung Gefahr

Standard Primär Erfolg Info Warnung Gefahr

Standard Primär Erfolg Info Warnung Gefahr

Standard Primär Erfolg Info Warnung Gefahr

Standard Primär Erfolg Info Warnung Gefahr

Standard Primär Erfolg Info Warnung Gefahr

Standard Primär Erfolg Info Warnung Gefahr

<table class="table">
            <thead>
              <tr>
                <th>#</th>
                <th>Vorname</th>
                <th>Nachname</th>
                <th>Benutzername</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
              <tr>
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>
		 

Posteingang 42

• Start 42
• Profil
• Nachrichten 3

• Start
• Profil
• Nachrichten

• Start
• Profil
• Nachrichten