Schnellstart-Beispiele

Benötigen Sie einige schnelle Vorlagen? Sehen Sie sich diese grundlegenden Beispiele an, die wir zusammengestellt haben:

Standardraster

Das standardmäßige Rastersystem, das als Teil von Bootstrap bereitgestellt wird, ist ein 940 Pixel breites 16-Spalten-Raster. Es ist eine Variante des beliebten 960-Gittersystems, aber ohne den zusätzlichen Rand/Padding auf der linken und rechten Seite.

Beispiel für Grid-Markup

Wie hier gezeigt, kann ein Grundlayout mit zwei "Säulen" erstellt werden, die jeweils eine Anzahl der 16 Grundsäulen überspannen, die wir als Teil unseres Rastersystems definiert haben. Weitere Variationen finden Sie in den Beispielen unten.

<div class = "row" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

Spalten verschachteln

Verschachteln Sie Ihre Inhalte, wenn Sie müssen, indem Sie eine .rowinnerhalb einer vorhandenen Spalte erstellen.

Beispiel für verschachtelte Spalten

<div class = "row" > 
  <div class = "span12" > 
    Ebene 1 der Spalte
    <div class = "row" > 
      <div class = "span6" > 
        Level 2
      </div>
      <div class = "span6" > 
        Level 2
      </div>
    </div>
  </div>
</div>

Rollen Sie Ihr eigenes Gitter

In Bootstrap sind eine Handvoll Variablen zum Anpassen des standardmäßigen 940-Pixel-Rastersystems integriert. Mit ein wenig Anpassung können Sie die Größe der Spalten, ihrer Dachrinnen und des Containers, in dem sie sich befinden, ändern.

Innerhalb des Gitters

Die Variablen, die benötigt werden, um das Grid-System zu modifizieren, befinden sich derzeit alle in variables.less.

Jetzt zum Anpassen

Das Ändern des Rasters bedeutet, die drei @grid-*Variablen zu ändern und die Less-Dateien neu zu kompilieren.

Bootstrap ist so ausgestattet, dass es ein Grid-System mit bis zu 24 Spalten handhaben kann; der Standardwert ist nur 16. So würden Ihre Rastervariablen aussehen, wenn sie an ein 24-Spalten-Raster angepasst würden.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;   

Einmal neu kompiliert, sind Sie fertig!

Festes Layout

Das standardmäßige und einfache 940 Pixel breite, zentrierte Layout für nahezu jede Website oder Seite, das von einer einzigen <div.container>.

<Körper>
  <div class = "container" > 
    ...
  </div>
</body>

Flüssiges Layout

Eine alternative, flexible, fließende Seitenstruktur mit Min- und Max-Breiten und einer linken Seitenleiste. Ideal für Apps und Dokumente.

<Körper>
  <div class = "container-fluid" > 
    <div class = "Seitenleiste" > 
      ...
    </div>
    <div class = "inhalt" > 
      ...
    </div>
  </div>
</body>

Überschriften & kopieren

Eine typografische Standardhierarchie zum Strukturieren Ihrer Webseiten.

Das gesamte typografische Raster basiert auf zwei Less-Variablen in unserer variables.less-Datei: @basefontund @baseline. Die erste ist die durchgehend verwendete Grundschriftgröße und die zweite die Grundzeilenhöhe.

Wir verwenden diese Variablen und etwas Mathematik, um die Ränder, Auffüllungen und Zeilenhöhen aller unserer Typen und mehr zu erstellen.

h1. Überschrift 1

h2. Überschrift 2

h3. Überschrift 3

h4. Überschrift 4

h5. Überschrift 5

h6. Überschrift 6

Beispiel Absatz

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Beispielüberschrift Hat Unterüberschrift…

Sonstiges Elemente

Verwendung von Hervorhebungen, Adressen und Abkürzungen

<strong> <em> <address> <abbr>

Wann verwenden

Hervorhebungs-Tags ( <strong>und <em>) sollten verwendet werden, um zusätzliche Wichtigkeit oder Betonung eines Wortes oder Satzes relativ zu seiner umgebenden Kopie anzuzeigen. Verwenden Sie es für <strong>Wichtigkeit und Betonung .<em>

Hervorhebung in einem Absatz

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, ein pharetra augue.

Hinweis: Es ist immer noch in Ordnung, Tags und in HTML5 zu verwenden, <b>und <i>sie müssen nicht fett bzw. kursiv formatiert werden (obwohl es ein semantischeres Element gibt, verwenden Sie es). <b>ist dazu gedacht, Wörter oder Phrasen hervorzuheben, ohne zusätzliche Bedeutung zu vermitteln, während <i>es hauptsächlich für Sprache, Fachbegriffe usw.

Adressen

Das <address>Element wird für Kontaktinformationen für seinen nächsten Vorfahren oder das gesamte Werk verwendet. Hier sind zwei Beispiele, wie es verwendet werden könnte:

Hinweis: Jede Zeile in einem <address>muss mit einem Zeilenumbruch ( <br />) enden oder in ein Tag auf Blockebene (z. B. <p>) umbrochen werden, um den Inhalt richtig zu strukturieren.

Abkürzungen

Verwenden Sie für Abkürzungen und Akronyme das <abbr>Tag ( ist in HTML5<acronym> veraltet ). Fügen Sie die Kurzform in das Tag ein und legen Sie einen Titel für den vollständigen Namen fest.

Block Zitate

<blockquote> <p> <small>

Wie man zitiert

Um ein Blockzitat einzufügen, wickeln Sie es <blockquote>um <p>und markieren Sie es <small>. Verwenden Sie das <small>Element, um Ihre Quelle zu zitieren, und Sie erhalten einen Em-Bindestrich —davor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Dr. Julius Hibbert

<Blockzitat>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> Dr. Julius Hibbert </small>
</blockquote>

Ungeordnet<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Ganzzahlige Molestie Lorem und Massa
• Facilisis in pretium nisl aliquet
• Nulla Volutpat Aliquam Velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Ungestylt<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Ganzzahlige Molestie Lorem und Massa
• Facilisis in pretium nisl aliquet
• Nulla Volutpat Aliquam Velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Bestellt<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Ganzzahlige Molestie Lorem und Massa
4. Facilisis in pretium nisl aliquet
5. Nulla Volutpat Aliquam Velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Beschreibungdl

Beschreibungslisten

Eine Beschreibungsliste ist perfekt, um Begriffe zu definieren.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida bei eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Code

<code> <pre>

Pimpen Sie Ihren Code stilvoll mit zwei einfachen Tags. Für noch mehr Großartigkeit durch Javascript, legen Sie die Code Prettify-Bibliothek von Google ab und schon sind Sie fertig.

Code präsentieren

Code, Blöcke oder nur Snippets inline können mit Stil angezeigt werden, indem einfach das richtige Tag eingefügt wird. Verwenden Sie für Codeblöcke, die sich über mehrere Zeilen erstrecken, das <pre>Element. Verwenden Sie für Inline-Code das <code>Element.

<div>
  <h1>Überschrift</h1>
  <p>Irgendetwas hier...</p>
</div>

<div> <h1> Überschrift </h1> <p> Etwas genau hier... </p> </div>
  
  

Inline-Etiketten

<span class="label">

Machen Sie auf jeden Satz in Ihrem Fließtext aufmerksam oder markieren Sie ihn.

Beschriften Sie alles

Brauchten Sie jemals einen dieser schicken Neuen! oder Wichtige Flags beim Schreiben von Code? Nun, jetzt hast du sie. Folgendes ist standardmäßig enthalten:

Medienraster

Zeigen Sie Miniaturansichten unterschiedlicher Größe auf Seiten mit geringem HTML-Fußabdruck und minimalen Stilen an.

Beispiel-Thumbnails

Miniaturansichten im .media-gridkönnen jede beliebige Größe haben, aber sie funktionieren am besten, wenn sie direkt dem integrierten Bootstrap-Rastersystem zugeordnet werden. Bildbreiten wie 90, 210 und 330 kombiniert mit ein paar Pixeln Abstand, um den Spaltengrößen .span2, .span4, und zu entsprechen..span6

Groß

Mittel

Klein

Kodiere sie

Medienraster sind einfach zu verwenden und auf der Markup-Seite ziemlich einfach. Ihre Abmessungen basieren ausschließlich auf der Größe der enthaltenen Bilder.

<ul class = "media-grid" > 
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

Tabellen bauen

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Tabellen sind großartig – für viele Dinge. Großartige Tabellen benötigen jedoch ein wenig Markup-Liebe, um nützlich, skalierbar und lesbar (auf Codeebene) zu sein. Hier sind ein paar hilfreiche Tipps.

Umschließen Sie Ihre Spaltenüberschriften immer <thead>so, dass die Hierarchie <thead>> <tr>> ist <th>.

Ähnlich wie bei den Spaltenüberschriften sollte der gesamte Inhalt Ihrer Tabelle in ein eingeschlossen werden <tbody>, sodass Ihre Hierarchie <tbody>> <tr>> ist <td>.

Beispiel: Standardtabellenstile

Alle Tabellen werden automatisch nur mit den wesentlichen Rändern formatiert, um die Lesbarkeit zu gewährleisten und die Struktur zu erhalten. Es müssen keine zusätzlichen Klassen oder Attribute hinzugefügt werden.

<Tabelle>
  ...
</table>

Beispiel: Verkürzte Tabelle

Verwenden Sie für Tabellen, die mehr Daten auf engstem Raum erfordern, die komprimierte Variante, die die Polsterung halbiert. Es kann auch in Verbindung mit Umrandungen und Zebrastreifen verwendet werden, genau wie die Standard-Tabellenstile.

Beispiel: Umrandete Tabelle

Lassen Sie Ihre Tische ein wenig eleganter aussehen, indem Sie ihre Ecken abrunden und Ränder an allen Seiten hinzufügen.

<table class = "bordered-table" > 
  ...
</table>

Beispiel: Zebrastreifen

Gestalten Sie Ihre Tische etwas schicker, indem Sie Zebrastreifen hinzufügen – fügen Sie einfach die .zebra-stripedKlasse hinzu.

Hinweis: Zebra-Striping ist eine progressive Verbesserung, die für ältere Browser wie IE8 und darunter nicht verfügbar ist.

<table class = "zebragestreift" > 
  ...
</table>

Beispiel: Zebrastreifen mit TableSorter.js

Anhand des vorherigen Beispiels verbessern wir die Nützlichkeit unserer Tabellen, indem wir Sortierfunktionen über jQuery und das Tablesorter- Plugin bereitstellen. Klicken Sie auf die Überschrift einer beliebigen Spalte, um die Sortierung zu ändern.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<Skript > 
  $ ( Funktion () { 
    $ ( "table#sortTableExample" ). Tabellensortierer ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "zebragestreift" > 
  ...
</table>

Standardstile

Alle Formulare erhalten Standardstile, um sie lesbar und skalierbar darzustellen. Stile werden für Texteingaben, Auswahllisten, Textbereiche, Optionsfelder und Kontrollkästchen sowie Schaltflächen bereitgestellt.

Gestapelte Formulare

Fügen .form-stackedSie dem HTML Ihres Formulars hinzu, und Sie haben Beschriftungen über ihren Feldern statt links. Dies funktioniert hervorragend, wenn Ihre Formulare kurz sind oder Sie zwei Spalten mit Eingaben für schwerere Formulare haben.

Formularfeldgrößen

Passen Sie jedes Formular input, selectoder jede textareaBreite an, indem Sie Ihrem Markup nur wenige Klassen hinzufügen.

Ab v1.3.0 haben wir die rasterbasierten Größenklassen für Formularelemente hinzugefügt. Bitte verwenden Sie diese über den vorhandenen Klassen .mini, .small, etc.

Tasten

Als Konvention werden Schaltflächen für Aktionen verwendet, während Links für Objekte verwendet werden. Beispielsweise könnte „Herunterladen“ eine Schaltfläche und „Letzte Aktivität“ ein Link sein.

Alle Schaltflächen haben standardmäßig einen hellgrauen Stil, aber eine Reihe von Funktionsklassen können für unterschiedliche Farbstile angewendet werden. Diese Klassen umfassen eine blaue .primaryKlasse, eine hellblaue .infoKlasse, eine grüne .successKlasse und eine rote .dangerKlasse.

Beispielschaltflächen

Schaltflächenstile können mit .btnangewendet werden. Normalerweise möchten Sie diese nur <a>auf , <button>und select <input>-Elemente anwenden. So sieht es aus:

Alternative Größen

Lust auf größere oder kleinere Buttons? Haben Sie es!

Deaktivierter Zustand

Verwenden Sie für Schaltflächen, die nicht aktiv sind oder aus dem einen oder anderen Grund von der App deaktiviert wurden, den deaktivierten Status. Das gilt .disabledfür Links und :disabledfür <button>Elemente.

Verknüpfungen

Tasten

Was ist es

Unsere obere Leiste ist eine feste Leiste, die das Logo oder den Namen einer Website, die primäre Navigation und das Suchformular enthält.

Anpassbar

Alle darin enthaltenen Elemente und auch die gesamte obere Leiste sind optional. Sie können wählen, ob Sie ein Logo/einen Namen, ein Navigationssystem, eine Suche und ein sekundäres Navigationssystem oder eine beliebige Kombination daraus hinzufügen möchten.

Dropdowns enthalten

Als Teil der Hauptnavigation haben wir die Möglichkeit integriert, Dropdowns zu Ihrer Navigation hinzuzufügen. Schauen Sie sich das sekundäre Navigationsgerät oben (rechtsbündig) an, um zu sehen, wie es gemacht wird. Dropdown- liTags unterstützen auch .activedas Anzeigen der aktuellen Seitenauswahl.

Tabs und Pillen

Erstellen Sie eine einfache Sekundärnavigation mit einer <ul>. Wechseln Sie zwischen Tabs oder Pillen, indem Sie die entsprechende Klasse hinzufügen.

Ideal für Unterabschnitte von Inhalten wie unsere Kontoeinstellungsseiten und Benutzerzeitleisten zum Umschalten zwischen Seiten mit ähnlichen Inhalten. Erhältlich in Laschen- oder Pillenform.

Beispiel für einfache Registerkarten

Registerkarten können als reguläre Navigation (Laden externer Seiten auf derselben Registerkarte) oder als Inhaltsbereiche mit Registerkarten zum Austauschen von Inhaltsbereichen verwendet werden. Wir haben ein Tabs-Plugin , mit dem letztere integriert werden können.

• Heim
• Profil
• Mitteilungen
• Einstellungen
• Kontakt
• Dropdown-Liste
  • Sekundärer Link
  • Etwas anderes hier
  • Ein weiterer Link

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Startseite </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Nachrichten </a></li> 
  <li><a href = "#" > Einstellungen </a></li> 
  <li><a href = "#" > Kontakt </a></li> 
</ul>

Beispiel für einfache Pillen

• Heim
• Profil
• Mitteilungen
• Einstellungen
• Kontakt

<ul class = "Pillen" > 
  <li class = "active" ><a href = "#" > Startseite </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Nachrichten </a></li> 
  <li><a href = "#" > Einstellungen </a></li> 
  <li><a href = "#" > Kontakt </a></li> 
</ul>

Semmelbrösel

Die Breadcrumb-Navigation wird verwendet, um Benutzern zu zeigen, wo sie sich innerhalb einer App oder einer Website befinden, aber nicht für die primäre Navigation.

• Heim

• Startseite /
• Mittlere Seite

• Startseite /
• Mittlere Seite /
• Noch einer

• Startseite /
• Mittlere Seite /
• Ein anderer /
• Du bist da

<ul class="breadcrumb">
  <li><a href="#">Home</a> <span class="divider">/</span></li>
  <li><a href="#">Middle page</a> <span class="divider">/</span></li>
  <li><a href="#">Another one</a> <span class="divider">/</span></li>
  <li class="active">You are here</li>
</ul>

Pagination

Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.

<div class="pagination">
  <ul>
    <li class="prev disabled"><a href="#">&larr; Previous</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="next"><a href="#">Next &rarr;</a></li>
  </ul>
</div>

Basic alerts

.alert-message

One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.

Get the javascript »

Example code

<div class="alert-message warning">
  <a class="close" href="#">×</a>
  <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
</div>

Block messages

.alert-message.block-message

For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.

Get the javascript »

Example code

<div class="alert-message block-message warning">
  <a class="close" href="#">×</a>
  <p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
  <div class="alert-actions">
    <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
  </div>
</div>

Modals

Modals—dialogs or lightboxes—are great for contextual actions in situations where it’s important that the background context be maintained.

Get the javascript »

Tooltips

Twipsies are super useful for aiding a confused user and pointing them in the right direction.

Get the javascript »

Popovers

Use popovers to provide subtextual information to a page without affecting layout.

Get the javascript »

Getting started

Integrating javascript with the Bootstrap library is super easy. Below we go over the basics and provide you with some awesome plugins to get you started!

View javascript docs »

What's included

Bring some of Bootstrap's primary components to life with new custom plugins that work with jQuery and Ender. We encourage you to extend and modify them to fit your specific development needs.

Is javascript necessary?

Nope! Bootstrap is designed first and foremost to be a CSS library. This javascript provides a basic interactive layer on top of the included styles.

However, for those who do need javascript, we've provided the plugins above to help you understand how to integrate Bootstrap with javascript and to give you a quick, lightweight option for the basic functionality right away.

For more information and to see some live demos, please refer to our plugin documentation page.