Beispill

Toggleable, Kontextmenü fir Lëschte vu Linken ze weisen. Interaktiv gemaach mam Dropdown JavaScript Plugin .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Aktioun </a></li>  
  <li><a tabindex = "-1" href = "#" > Eng aner Aktioun </a></li>  
  <li><a tabindex = "-1" href = "#" > Soss eppes hei </a></li>  
  <li class = "divider" ></li> 
  <li><a tabindex = "-1" href = "#" > Getrennte Link </a></li>  
</ul>

Markup

Wann Dir just den Dropdown-Menü kuckt, hei ass déi erfuerderlech HTML. Dir musst den Ausléiser vum Dropdown an den Dropdown-Menü bannent wéckelen .dropdown, oder en anert Element dat deklaréiert position: relative;. Da erstellt just de Menü.

<div class = "dropdown" > 
  <!-- Link oder Knäppchen fir dropdown ze wiesselen -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Aktioun </a></li>  
    <li><a tabindex = "-1" href = "#" > Eng aner Aktioun </a></li>  
    <li><a tabindex = "-1" href = "#" > Soss eppes hei </a></li>  
    <li class = "divider" ></li> 
    <li><a tabindex = "-1" href = "#" > Getrennte Link </a></li>  
  </ul>
</div>

Optiounen

Alignéiert d'Menüen no riets a füügt zousätzlech Niveauen vun Dropdowns derbäi.

Ausrichtung vun de Menüen

Füügt .pull-rightop eng .dropdown-menuriets ausgeriicht den Dropdown-Menü.

<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Behënnert Menü Optiounen

Füügt .disabledzu engem <li>am Dropdown fir de Link auszeschalten.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Regelméisseg Link </a></li>  
  <li class = "behënnert" ><a tabindex = "-1" href = "#" > Behënnerte Link </a></li>   
  <li><a tabindex = "-1" href = "#" > En anere Link </a></li>  
</ul>

Ënnermenüen op Dropdowns

Füügt en extra Niveau vun Dropdown-Menüen, erschéngen um Hover wéi déi vun OS X, mat e puer einfache Markup Ergänzunge. Füügt .dropdown-submenuun all lian engem existente Dropdown-Menü fir automatesch Styling.

Default

Dropup

Lénks Ënnermenü

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "Dropdown-Submenu" > 
    <a tabindex = "-1" href = "#" > Méi Optiounen </a>  
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Beispiller

Zwee Basisoptiounen, zesumme mat zwou méi spezifesch Variatiounen.

Single Knäppchen Grupp

Wickelt eng Serie vu Knäppercher mat .btnan .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Lénks </button> 
  <button class = "btn" > Mëtt </button> 
  <button class = "btn" > Richteg </button> 
</div>

Multiple Knäppchen Gruppen

Kombinéiert Sätze vun <div class="btn-group">an eng <div class="btn-toolbar">fir méi komplex Komponenten.

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

Vertikal Knäppchen Gruppen

Maacht eng Rei vu Knäppercher vertikal gestapelt anstatt horizontal.

<div class = "btn-group btn-group-vertical" > 
  ...
</div>

Checkbox a Radio Goûten

Knäppercher kënnen och als Radios funktionnéieren, wou nëmmen ee Knäppchen aktiv ka sinn, oder Checkboxen, wou all Zuel vu Knäpper aktiv ka sinn. Kuckt d'JavaScript-Dokumenter dofir.

Dropdowns a Knäppchen Gruppen

Kapp erop!Knäppercher mat dropdowns muss individuell an hir eege .btn-groupbannent engem .btn-toolbarfir richteg Render- gewéckelt ginn.

Iwwersiicht an Beispiller

Benotzt all Knäppchen fir e Dropdown-Menü auszeléisen andeems Dir en an engem plazéiert .btn-groupan déi richteg Menümarkéierung ubitt.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">   
    Aktioun
    <span class = "caret" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- Dropdown-Menü Linken -->
  </ul>
</div>

Schafft mat all Knäppchen Gréissten

Knäppchen Dropdowns funktionnéieren bei all Gréisst: .btn-large, .btn-small, oder .btn-mini.

Verlaangt JavaScript

Button Dropdowns erfuerderen de Bootstrap Dropdown Plugin fir ze funktionéieren.

An e puer Fäll - wéi mobil - Dropdown-Menüen verlängeren sech ausserhalb vum Viewport. Dir musst d'Ausrichtung manuell oder mat personaliséierten JavaScript léisen.

Split Knäppchen Dropdowns

Bauen op de Knäppchen Grupp Stiler a Markup, kënne mir einfach e Split Knäppchen erstellen. Split Knäppercher hunn eng Standardaktioun op der lénker Säit an e Dropdown-Knäppchen op der rietser mat kontextuellen Linken.

<div class = "btn-group" > 
  <button class = "btn" > Aktioun </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- Dropdown-Menü Linken -->
  </ul>
</div>

Gréissten

Benotzt déi extra Knäppercher Klassen .btn-mini, .btn-smalloder .btn-largefir d'Gréisst.

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Aktioun </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- Dropdown-Menü Linken -->
  </ul>
</div>

Dropup Menüen

Dropdown-Menüen kënnen och vun ënnen erop gewiesselt ginn andeems een eng eenzeg Klass un den direkten Elterendeel bäidréit .dropdown-menu. Et flipt d'Richtung vun der .careta repositionéiert de Menü selwer fir vun ënnen no uewen ze réckelen anstatt uewen erof.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- Dropdown-Menü Linken -->
  </ul>
</div>

Liichtgewiicht Standards Selwecht Markup, verschidde Klassen

All nav Komponente hei-Tabs, Pëllen, a Lëschte- deelen déi selwecht Basis Markup a Stiler duerch d' .navKlass.

Basis Tabs

Huelt regelméisseg <ul>Linken a füügt .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "aktiv" > 
    <a href = "#" > Home </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Basis Pëllen

Huelt datselwecht HTML, awer benotzt .nav-pillsamplaz:

<ul class = "nav nav-pillen" > 
  <li class = "aktiv" > 
    <a href = "#" > Home </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Behënnert Staat

Fir all nav Komponent (Tabs, Pëllen, oder Lëscht), füügt .disabledfir gro Linken a keng Hover Effekter . D'Links bleiwen awer klickbar, ausser Dir läscht den hrefAttribut. Alternativ kënnt Dir personaliséiert JavaScript implementéieren fir dës Klicks ze vermeiden.

<ul class = "nav nav-pillen" > 
  ...
  <li class = "behënnert" ><a href = "#" > Home </a></li>  
  ...
</ul>

Komponent Ausrichtung

Fir nav Linken auszegläichen, benotzt d' .pull-leftoder .pull-rightUtility Klassen. Béid Klassen addéieren e CSS Float an der spezifizéierter Richtung.

Stackbar

Als Tabs a Pëllen sinn par défaut horizontal, füügt just eng zweet Klass, .nav-stacked, fir datt se vertikal gestapelt schéngen.

Gestapelt Tabs

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

Stack Pëllen

<ul class = "nav nav-pillen nav-gestapelt" > 
  ...
</ul>

Dropdowns

Füügt Dropdown-Menüen mat e bëssen extra HTML an den Dropdowns JavaScript Plugin .

Tabs mat Dropdowns

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "Dropdown"
       href = "#" >
        Fale loossen
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- Linken -->
    </ul>
  </li>
</ul>

Pillen mat Dropdowns

<ul class = "nav nav-pillen" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "Dropdown"
       href = "#" >
        Fale loossen
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- Linken -->
    </ul>
  </li>
</ul>

Nav Lëschten

En einfachen an einfache Wee fir Gruppe vu Navigatiounslinks mat optionalen Header ze bauen. Si sinn am beschten an Sidebars wéi de Finder am OS X benotzt.

Beispill nav Lëscht

Huelt eng Lëscht vu Linken a füügt class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Lëscht Header </li> 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Bibliothéik </a></li> 
  ...
</ul>

NoteFir nesting bannent enger nav Lëscht, enthalen class="nav nav-list"op all nested <ul>.

Horizontal Deeler

Füügt en horizontalen Trenndeel un andeems Dir en eidele Lëscht Element mat der Klass erstellt .divider, sou wéi:

<ul class = "nav nav-list" > 
  ...
  <li class = "divider" ></li> 
  ...
</ul>

Tabbar nav

Bréngt Är Tabs zum Liewen mat engem einfache Plugin fir tëscht Inhalt iwwer Tabs ze wiesselen. Bootstrap integréiert Tabs Tabs a véier Stiler: uewen (Standard), riets, ënnen a lénks.

Tabable Beispill

Fir Tabs Tabbar ze maachen, erstellt eng .tab-paneeenzegaarteg ID fir all Tab a wéckelt se an .tab-content.

Ech sinn am Sektioun 1.

Moien, ech sinn an der Sektioun 2.

Wat ass Meedchen, dëst ass Sektioun 3.

<div class = "tabbable" > <!-- Nëmmen néideg fir lénks/riets Tabs -->  
  <ul class = "nav nav-tabs" > 
    <li class = "aktiv" ><a href = "#tab1" data-toggle = "tab" > Abschnitt 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Abschnitt 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Ech sinn an der Sektioun 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Moien, ech sinn an der Sektioun 2. </p>
    </div>
  </div>
</div>

Fade an Tabs

Fir d'Tabs ze verschwannen, füügt .fadeall .tab-pane.

Verlaangt jQuery Plugin

All tabbar Tabs ginn ugedriwwen vun eisem liichte jQuery Plugin. Liest méi iwwer wéi Dir Tabbar Tabs zum Liewen op der JavaScript Dokumenter Säit bréngt .

Tabbar an all Richtung

Tabs um ënnen

Flip d'Uerdnung vum HTML a füügt eng Klass un fir Tabs um Buedem ze setzen.

Ech sinn an der Sektioun A.

Moien, ech sinn an der Sektioun B.

Wat ass Meedchen, dëst ass Sektioun C.

<div class = "tabable tabs-below" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Tabs op der lénker Säit

Tauscht d'Klass fir Tabs op der lénker Säit ze setzen.

Ech sinn an der Sektioun A.

Moien, ech sinn an der Sektioun B.

Wat ass Meedchen, dëst ass Sektioun C.

<div class = "tabable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Tabs op der rietser Säit

Tauscht d'Klass fir Tabs op der rietser Säit ze setzen.

Ech sinn an der Sektioun A.

Moien, ech sinn an der Sektioun B.

Wat ass Meedchen, dëst ass Sektioun C.

<div class = "tabable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Basis Navigatioun

Fir unzefänken, sinn Navbars statesch (net un der Spëtzt fixéiert) an enthalen Ënnerstëtzung fir e Projetnumm a Basisnavigatioun. Plaz een iwwerall an engem .container, deen d'Breet vun Ärem Site an Inhalt setzt.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Titel </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Home </a></li>  
      <li><a href = "#" > Link </a></li> 
      <li><a href = "#" > Link </a></li> 
    </ul>
  </div>
</div>

Navbar Komponente

Mark

En einfache Link fir Är Mark oder Projet Numm ze weisen erfuerdert nëmmen en Ankertag.

<a class = "brand" href = "#" > Projet Numm </a>

Nav Linken

Nav Elementer sinn einfach ze addéieren iwwer ongeuerdnete Lëschten.

<ul class = "nav" > 
  <li class = "aktiv" > 
    <a href = "#" > Home </a> 
  </li>
  <li><a href = "#" > Link </a></li> 
  <li><a href = "#" > Link </a></li> 
</ul>

Dir kënnt einfach Dividere fir Är nav Linken mat engem eidele Lëscht Element an enger einfacher Klass addéieren. Füügt just dëst tëscht Linken derbäi:

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

Formen

Fir eng Form an der Navbar richteg ze stiléieren an ze positionéieren, füügt déi entspriechend Klassen un wéi hei ënnendrënner. Fir e Standardformular, enthalen .navbar-forman entweder .pull-leftoder .pull-rightfir se richteg ze alignéieren.

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
  <button type = "submit" class = "btn" > Ofschécken </button>  
</form>

Sich Form

Fir e méi personaliséierte Sichformular, füügt .navbar-searchden forman .search-queryun den Input fir spezialiséiert Stiler an der Navbar.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Sich" >   
</form>

Komponent Ausrichtung

Alignéieren nav Linken, Sich Form, oder Text, benotzen d' .pull-leftoder .pull-rightUtility Klassen. Béid Klassen addéieren e CSS Float an der spezifizéierter Richtung.

Benotzt Dropdowns

Füügt Dropdowns an Dropups un den Nav mat e bësse Markup an den Dropdowns JavaScript Plugin .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >   
      Kont
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Besicht d' JavaScript Dropdowns Dokumentatioun fir méi Markup an Informatioun iwwer Uruff Dropdowns.

Text

Wrap Strings vum Text an engem Element mat .navbar-text, normalerweis op engem <p>Tag fir richteg Féierung a Faarf.

Optional Display Variatiounen

Fixéiert d'Navbar uewen oder ënnen vum Viewport mat enger zousätzlech Klass op der äusserst Divi .navbar,.

Fixéiert uewen

Füügt .navbar-fixed-topan erënnert Iech un dat verstoppt Gebitt drënner ze berechnen andeems Dir op d'mannst 40px paddingop d' <body>. Gitt sécher dëst no der Core Bootstrap CSS a virun der optionaler reaktiounsfäeger CSS ze addéieren.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

Befestegt bis ënnen

Füügt .navbar-fixed-bottomamplaz.

<div class = "navbar navbar-fixed-bottom" > 
  ...
</div>

Statesch Top Navbar

Erstellt eng ganz Breet Navbar déi mat der Säit scrollt andeems Dir bäigefüügt .navbar-static-top. Am Géigesaz zu der .navbar-fixed-topKlass, braucht Dir keng Padding op der body.

<div class = "navbar navbar-static-top" > 
  ...
</div>

Reaktiounsfäeger navbar

Fir eng zesummeklappend reaktiounsfäeger Navbar ëmzesetzen, wéckelt Ären Navbar-Inhalt an engem enthalenen div, .nav-collapse.collapse, a füügt den Navbar Toggle-Knäppchen derbäi .btn-navbar,.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar gëtt als Toggle fir zesummegeklappt Navbar Inhalt benotzt -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse">   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Vergewëssert Iech d'Mark dobaussen ze loossen wann Dir se wëllt weisen -->
      <a class = "brand" href = "#" > Projet Numm </a>  
 
      <!-- Alles wat Dir wëllt verstoppt op 940px oder manner, plazéiert hei bannen -->
      <div class = "nav-collapse collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

Kapp erop! Déi reaktiounsfäeger Navbar erfuerdert den Zesummebroch Plugin a reaktiounsfäeger Bootstrap CSS Datei .

Invertéiert Variatioun

Ännert de Look vun der Navbar andeems Dir .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

Beispiller

Een eenzegt Beispill gewisen wéi et op verschidde Säiten ugewise ka ginn.

<ul class = "breadcrumb" > 
  <li><a href = "#" > Home </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Bibliothéik </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Daten </li> 
</ul>

Standard Paginatioun

Einfach Paginatioun inspiréiert vu Rdio, super fir Apps a Sichresultater. De grousse Block ass schwéier ze verpassen, liicht skalierbar a bitt grouss Klickflächen.

<div class = "paginéieren" > 
  <ul>
    <li><a href = "#" > Virdrun </a></li> 
    <li><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><a href = "#" > Nächst </a></li> 
  </ul>
</div>

Optiounen

Behënnert an aktiv Staaten

Links sinn personaliséierbar fir verschidden Ëmstänn. Benotzt .disabledfir onklickbar Linken a .activefir déi aktuell Säit unzeginn.

<div class = "paginéieren" > 
  <ul>
    <li class = "behënnert" > <a href = "#"> « </a></li>  
    <li class = "aktiv" > <a href = "#"> 1 </a></li>  
    ...
  </ul>
</div>

Dir kënnt optional aktiv oder behënnert Anker austauschen fir Spannungen fir Klickfunktionalitéit ze läschen, während Dir geplangte Stiler behält.

<div class = "paginéieren" > 
  <ul>
    <li class = "behënnert" ><span> « </span></li> 
    <li class = "aktiv" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Gréissten

Loscht op méi grouss oder méi kleng Paginatioun? Add .pagination-large, .pagination-small, oder .pagination-minifir zousätzlech Gréissten.

<div class = "pagetion pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paginéieren" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Ausriichtung

Füügt eng vun zwou fakultativ Klassen fir d'Ausrichtung vun de Paginéierungslinks z'änneren: .pagination-centeredan .pagination-right.

<div class = "Paginéierungspaginéierungszentréiert" > 
  ...
</div>

<div class = "pagetion pagination-right" > 
  ...
</div>

Pager

Schnell virdrun an nächst Linke fir einfach Paginéierungsimplementatiounen mat liicht Markup a Stiler. Et ass super fir einfache Site wéi Blogs oder Zäitschrëften.

Standard Beispill

Par défaut zentréiert de Pager Links.

<ul class = "pager" > 
  <li><a href = "#" > Virdrun </a></li> 
  <li><a href = "#" > Nächst </a></li> 
</ul>

Ausgeriicht Linken

Alternativ kënnt Dir all Link op d'Säiten ausriichten:

<ul class = "pager" > 
  <li class = "virdrun" > 
    <a href = "#"> & larr ; Eeler </a> 
  </li>
  <li class = "nächst" > 
    <a href = "#" > Méi nei → </a> 
  </li>
</ul>

Fakultativ behënnert Staat

Pager Links benotzen och déi allgemeng .disabledUtility Klass vun der Pagination.

<ul class = "pager" > 
  <li class = "virdrun behënnert" > 
    <a href = "#"> & larr ; Eeler </a> 
  </li>
  ...
</ul>

Etiketten

Etiketten	Markup
Default	`<span class="label">Default</span>`
Erfolleg	`<span class="label label-success">Success</span>`
Warnung	`<span class="label label-warning">Warning</span>`
Wichteg	`<span class="label label-important">Important</span>`
Info	`<span class="label label-info">Info</span>`
Inverse	`<span class="label label-inverse">Inverse</span>`

Schëlder

Numm	Beispill	Markup
Default	1	`<span class="badge">1</span>`
Erfolleg	2	`<span class="badge badge-success">2</span>`
Warnung	4	`<span class="badge badge-warning">4</span>`
Wichteg	6	`<span class="badge badge-important">6</span>`
Info	8	`<span class="badge badge-info">8</span>`
Inverse	10	`<span class="badge badge-inverse">10</span>`

Einfach zesummeklappbar

Fir einfach Ëmsetzung, Etiketten a Schëlder wäerten einfach zesummeklappen (iwwer CSS's :emptySelector) wann keen Inhalt dobannen existéiert.

Held Eenheet

Eng liicht, flexibel Komponent fir Schlësselinhalt op Ärem Site ze weisen. Et funktionnéiert gutt op Marketing an Inhalt-schwéier Siten.

Moien Welt!

Dëst ass eng einfach Heldenheet, en einfachen Jumbotron-Stil Komponent fir extra Opmierksamkeet op Featured Inhalt oder Informatioun ze ruffen.

Léier méi

<div class = "hero-unit" > 
  <h1> Iwwerschrëft </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-primär btn-large" > 
      Léier méi
    </a>
  </p>
</div>

Säit Header

Eng einfach Schuel fir eng h1passend Plaz aus a segmentéiert Sektiounen vum Inhalt op enger Säit. Et kann d' h1Standard small, Element wéi och déi meescht aner Komponenten (mat zousätzlech Stiler) benotzen.

<div class = "page-header" > 
  <h1> Beispill Säit Header <small> Ënnertext fir Header </small></h1>
</div>

Standard Miniatur

Par défaut sinn d'Bootstrap Thumbnails entwéckelt fir verlinkte Biller mat minimaler erfuerderlecher Markup ze weisen.

Héich personaliséierbar

Mat e bëssen extra Markup ass et méiglech all Zort HTML Inhalt wéi Rubriken, Abschnitter oder Knäppercher a Miniatur ze addéieren.

Thumbnail Label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies Vehicula ut id elit.

Aktioun Aktioun
Thumbnail Label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies Vehicula ut id elit.

Aktioun Aktioun
Thumbnail Label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies Vehicula ut id elit.

Aktioun Aktioun

Firwat Thumbnails benotzen

Thumbnails (virdrun .media-gridbis v1.4) si super fir Gitter vu Fotoen oder Videoen, Bild Sichresultater, Retail Produkter, Portfolioen, a vill méi. Si kënne Linken oder statesche Inhalter sinn.

Einfach, flexibel Markup

Thumbnail Markup ass einfach - e ulmat all Zuel vun liElementer ass alles wat néideg ass. Et ass och super flexibel, et erlaabt all Typ vun Inhalt mat just e bësse méi Markup fir Ären Inhalt ze wéckelen.

Benotzt Gitterkolonnegréissten

Schlussendlech benotzt d'Miniaturkomponenten existent Gittersystemklassen - wéi .span2oder .span3- fir d'Kontroll vun de Miniatur Dimensiounen.

Markup

Wéi virdru scho gesot, ass déi erfuerderlech Markup fir Thumbnails liicht an einfach. Hei ass e Bléck op d'Default-Setup fir verlinkte Biller :

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <a href = "#" class = "Thumbnail" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

Fir personaliséiert HTML Inhalt an Miniaturbiller ännert d'Markup liicht. Fir Blockniveau Inhalt iwwerall z'erméiglechen, tausche mir de <a>fir e <div>Like:

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <div class = "thumbnail" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Thumbnail Label </h3>
      <p> Thumbnail Iwwerschrëft... </p>
    </div>
  </li>
  ...
</ul>

Méi Beispiller

Entdeckt all Är Optiounen mat de verschiddene Gitterklassen déi Iech verfügbar sinn. Dir kënnt och verschidde Gréissten kombinéieren a passen.

Standard Alarm

Wickelt all Text an en optionalen Entlooss Knäppchen .alertfir eng Basis Warnungsmeldung.

Opgepasst! Beschte kontrolléiert Iech selwer, Dir sicht net ze gutt.

<div class = "alarm" > 
  <button type = "button" class = "close" data-dismiss = "alarm" > &Zäiten; </button>   
  <strong> Opgepasst! </strong> Am beschten kontrolléiert Iech selwer, Dir gesitt net ze gutt aus.
</div>

Knäppercher entloossen

Mobile Safari a Mobile Opera Browser, zousätzlech zum data-dismiss="alert"Attribut, erfuerderen e href="#"fir d'Entloossung vun Alarmer wann Dir en <a>Tag benotzt.

<a href = "#" class = "close" data-dismiss = "alarm"> & Zäiten; </a>

Alternativ kënnt Dir en <button>Element mam Datattribut benotzen, wat mir gewielt hunn fir eis Dokumenter ze maachen. Wann Dir benotzt <button>, musst Dir enthalen type="button"oder Är Formulaire kënnen net ofginn.

<button type = "button" class = "close" data-dismiss = "alarm" > &Zäiten; </button>

Entlooss Alarmer iwwer JavaScript

Benotzt den Alarm jQuery Plugin fir séier an einfach Entloossung vun Alarmer.

Optiounen

Fir méi laang Messagen, erhéicht d'Padding uewen an ënnen vum Alarmwrapper andeems Dir bäidréit .alert-block.

Opgepasst!

Beschte kontrolléiert Iech selwer, Dir sicht net ze gutt. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class = "alarm alert-block" > 
  <button type = "button" class = "close" data-dismiss = "alarm" > &Zäiten; </button>   
  <h4> Opgepasst! </h4>
  Beschte kontrolléiert Iech selwer, Dir sidd net ...
</div>

Kontextuell Alternativen

Füügt optional Klassen fir d'Konnotatioun vun enger Alarm z'änneren.

Feeler oder Gefor

Oh snap! Ännert e puer Saachen a probéiert nach eng Kéier ofzeginn.

<div class = "alarm alert-error" > 
  ...
</div>

Erfolleg

Gutt gemaach! Dir hutt dës wichteg Alarmmeldung erfollegräich gelies.

<div class = "alarm alert-success" > 
  ...
</div>

Informatiounen

Kapp erop! Dës Alarm brauch Är Opmierksamkeet, awer et ass net super wichteg.

<div class = "alarm alert-info" > 
  ...
</div>

Beispiller a Markup

Basis

Standard Fortschrëtt Bar mat engem vertikalen Gradient.

<div class = "progress" > 
  <div class = "bar" style = " Breet : 60 %; " ></div>   
</div>

Gestreift

Benotzt e Gradient fir e gesträifte Effekt ze kreéieren. Net verfügbar an IE7-8.

<div class = "Fortschrëtter gesträift" > 
  <div class = "bar" style = " Breet : 20 %; " ></div>   
</div>

Animéiert

Füügt .activeun .progress-stripedfir d'Sträifen vu riets op lénks ze animéieren. Net verfügbar an all Versioune vun IE.

<div class = "Fortschrëtt Fortschrëtter-gestreift aktiv" > 
  <div class = "bar" style = " Breet : 40 %; " ></div>   
</div>

Gestapelt

Setzt verschidde Baren an d'selwecht .progressfir se ze stackelen.

<div class = "progress" > 
  <div class = "bar bar-success" style = " Breet : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " Breet : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " Breet : 10 %; " ></div>   
</div>

Optiounen

Zousätzlech Faarwen

Fortschrëtt Baren benotzen e puer vun der selwechter Knäppchen an Alarm Klassen fir konsequent Stiler.

<div class = "progress progress-info" > 
  <div class = "bar" style = " Breet : 20 % " ></div>   
</div>
<div class = "Fortschrëtter Fortschrëtter-Erfolleg" > 
  <div class = "bar" style = " Breet : 40 % " ></div>   
</div>
<div class = "Fortschrëtter-Warnung" > 
  <div class = "bar" style = " Breet : 60 % " ></div>   
</div>
<div class = "Fortschrëtter-Gefor" > 
  <div class = "bar" style = " Breet : 80 % " ></div>   
</div>

Gestreift Baren

Ähnlech wéi déi zolidd Faarwen hu mir variéiert gesträifte Fortschrëttbarren.

<div class = "Fortschrëtt Fortschrëtter-Info Fortschrëtt-Sträif" > 
  <div class = "bar" style = " Breet : 20 % " ></div>   
</div>
<div class = "Fortschrëtter Fortschrëtter-Erfolleg Fortschrëtter-gestreift" > 
  <div class = "bar" style = " Breet : 40 % " ></div>   
</div>
<div class = "Fortschrëtt Fortschrëtter-Warnung Fortschrëtt-gestreift" > 
  <div class = "bar" style = " Breet : 60 % " ></div>   
</div>
<div class = "Fortschrëtter Fortschrëtter-Gefor Fortschrëtter-gestreift" > 
  <div class = "bar" style = " Breet : 80 % " ></div>   
</div>

Browser Ënnerstëtzung

Fortschrëtter Baren benotzen CSS3 Gradienten, Iwwergäng an Animatiounen fir all hir Effekter z'erreechen. Dës Funktiounen ginn net an IE7-9 oder méi al Versioune vu Firefox ënnerstëtzt.

Versioune fréier wéi Internet Explorer 10 an Opera 12 ënnerstëtzen keng Animatiounen.

Abstrakt Objektstile fir verschidden Aarte vu Komponenten ze bauen (wéi Blogkommentarer, Tweets, etc) déi e lénks- oder rietsausgeriicht Bild niewent dem textuellen Inhalt hunn.

Standard Beispill

D'Default Medien erlaben e Medienobjekt (Biller, Video, Audio) lénks oder riets vun engem Inhaltsblock ze schwammen.

Medien Iwwerschrëft

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Medien Iwwerschrëft

<div class = "media" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Medieniwwerschrëft </h4> 
    ...
 
    <!-- Nested Media Object -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

Medien Lëscht

Mat e bëssen extra Markup kënnt Dir Medien an der Lëscht benotzen (nëtzlech fir Kommentar thread oder Artikellëschten).

Medien Iwwerschrëft

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested Medien Rubrik
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested Medien Rubrik
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested Medien Rubrik
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Medien Iwwerschrëft
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<ul class = "media-list" > 
  <li class = "media" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Medieniwwerschrëft </h4> 
      ...
 
      <!-- Nested Media Object -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Wells

Benotzt d'Wuel als einfachen Effekt op en Element fir en inset Effekt ze ginn.

Kuckt, ech sinn an enger Brunn!

<div class = "well" > 
  ...
</div>

Fakultativ Klassen

Kontroll padding a ofgerënnt Corner mat zwou fakultativ Modifikatioun Klassen.

Kuckt, ech sinn an enger Brunn!

<div class = "well well-grouss" > 
  ...
</div>

Kuckt, ech sinn an enger Brunn!

<div class = "well well-klein" > 
  ...
</div>

Zoumaachen Ikon

Benotzt déi generesch Zoumaache Ikon fir Inhalter wéi Modalen an Alarmer ze entloossen.

<button class = "zou" > × </button>

iOS Apparater erfuerderen e href="#"fir Klick Eventer wann Dir léiwer en Anker benotze wëllt.

<a class = "close" href = "#"> & mol; </a>

Helfer Klassen

Einfach, fokusséiert Klassen fir kleng Affichage oder Verhalenstweaks.

.pull-lénks

Float en Element lénks

class = "lénks zéien"

. zéien - lénks {
  schwammen : lénks ;
}

.pull-riets

Float en Element richteg

class = "pull-right"

. zéien - riets {
  schwammen : richteg ;
}

.gedämpft

Änneren d'Faarf vun engem Element op#999

class = "muted"

. gedämpft {
  Faarf : # 999; 
}

.kloerfix

Kloer den floatop all Element

class = "clearfix"

. clearfix {
  * Zoom : 1 ; 
  &: virun ,
  &: nach {
    Display : Dësch ;
    Inhalt : "" ; 
  }
  &: nach {
    kloer : béid ;
  }
}

Dropdown-Menüen

Beispill

Markup

Optiounen

Ausrichtung vun de Menüen

Behënnert Menü Optiounen

Ënnermenüen op Dropdowns

Knäppchen Gruppen

Beispiller

Single Knäppchen Grupp

Multiple Knäppchen Gruppen

Vertikal Knäppchen Gruppen

Checkbox a Radio Goûten

Dropdowns a Knäppchen Gruppen

Knäppchen Dropdown Menü

Iwwersiicht an Beispiller

Schafft mat all Knäppchen Gréissten

Verlaangt JavaScript

Split Knäppchen Dropdowns

Gréissten

Dropup Menüen

Nav: Tabs, Pëllen a Lëschten

Liichtgewiicht Standards Selwecht Markup, verschidde Klassen

Basis Tabs

Basis Pëllen

Behënnert Staat

Komponent Ausrichtung

Stackbar

Gestapelt Tabs

Stack Pëllen

Dropdowns

Tabs mat Dropdowns

Pillen mat Dropdowns

Nav Lëschten

Beispill nav Lëscht

Horizontal Deeler

Tabbar nav

Tabable Beispill

Fade an Tabs

Verlaangt jQuery Plugin

Tabbar an all Richtung

Tabs um ënnen

Tabs op der lénker Säit

Tabs op der rietser Säit

Navbar

Basis Navigatioun

Navbar Komponente

Mark

Nav Linken

Formen

Sich Form

Komponent Ausrichtung

Benotzt Dropdowns

Text

Optional Display Variatiounen

Fixéiert uewen

Befestegt bis ënnen

Statesch Top Navbar

Reaktiounsfäeger navbar

Invertéiert Variatioun

Brout

Beispiller

Paginéierung Zwou Optiounen fir duerch Inhalt ze paging

Standard Paginatioun

Optiounen

Behënnert an aktiv Staaten

Gréissten

Ausriichtung

Pager

Standard Beispill

Ausgeriicht Linken

Fakultativ behënnert Staat

Etiketten a Schëlder

Etiketten

Schëlder

Einfach zesummeklappbar

Typographesch Komponenten

Held Eenheet

Moien Welt!

Säit Header