Quick-Start Beispiller

Braucht Dir e puer séier Templates? Préift dës Basis Beispiller déi mir zesummegesat hunn:

Standard Gitter

De Standard Gittersystem, deen als Deel vum Bootstrap zur Verfügung gestallt gëtt, ass e 940px breet 16-Kolonn Gitter. Et ass e Goût vum populäre 960 Gittersystem, awer ouni zousätzlech Margin / Polsterung op der lénker a rietser Säit.

Beispill Grid Markup

Wéi hei gewisen, kann e Basislayout erstallt ginn mat zwee "Säulen", déi all eng Zuel vun de 16 Fundamental Sailen iwwerspanen, déi mir als Deel vun eisem Gittersystem definéiert hunn. Kuckt d'Beispiller hei ënnen fir méi Variatiounen.

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

Nesting Sailen

Nest Ären Inhalt wann Dir musst andeems Dir en .rowan enger existéierender Kolonn erstellt.

Beispill vun nested Sailen

<div class = "row" > 
  <div class = "span12" > 
    Niveau 1 vun der Kolonn
    <div class = "row" > 
      <div class = "span6" > 
        Niveau 2
      </div>
      <div class = "span6" > 
        Niveau 2
      </div>
    </div>
  </div>
</div>

Roll Ären eegene Gitter

Built a Bootstrap sinn eng Handvoll Variablen fir de Standard 940px Gittersystem ze personaliséieren. Mat e bësse Personnalisatioun kënnt Dir d'Gréisst vun de Sailen änneren, hir Rennen, an de Container an deem se wunnen.

Bannen am Gitter

D'Variabelen, déi néideg sinn fir de Gittersystem z'änneren, wunnen de Moment all an variables.less.

Elo fir ze personaliséieren

D'Ännerung vum Gitter bedeit déi dräi @grid-*Variabelen z'änneren an d'Minder Dateien nei ze kompiléieren.

Bootstrap kënnt equipéiert fir e Gittersystem mat bis zu 24 Sailen ze handhaben; den Default ass just 16. Hei ass wéi Är Gittervariablen ugepasst op e 24-Kolonne-Raster ausgesinn.

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

Eemol nei kompiléiert, sidd Dir agestallt!

Fixed Layout

De Standard an einfachen 940px-breet, zentréiert Layout fir bal all Websäit oder Säit vun enger eenzeger <div.container>.

<Kierper>
  <div class = "container" > 
    ...
  </div>
</body>

Flësseg Layout

Eng alternativ, flexibel flësseg Säitstruktur mat min- a max-Breet an enger lénkser Sidebar. Super fir Apps an Dokumenter.

<Kierper>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</body>

Rubriken & Kopie

Eng Standard typographesch Hierarchie fir Är Websäiten ze strukturéieren.

De ganze typographesche Gitter baséiert op zwou Less Variablen an eiser Variables.less Datei: @basefontan @baseline. Déi éischt ass d'Basis Schrëftgréisst déi uechter benotzt gëtt an déi zweet ass d'Basislinn Héicht.

Mir benotzen dës Variabelen, an e puer Mathematik, fir d'Margen, Paddingen a Linnenhéichten vun all eisen Typen a méi ze kreéieren.

h1. Rubrik 1

h2 vun. Rubrik 2

h3 vun. Rubrik 3

h4 vun. Rubrik 4

h5. Rubrik 5

h6. Rubrik 6

Beispill Paragraph

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.

Beispill Rubrik Huet Ënnertitel ...

Verschiddenes Elementer

Mat Schwéierpunkt, Adressen, & Ofkierzungen

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

Wéini ze benotzen

Schwéierpunkt Tags ( <strong>an <em>) solle benotzt ginn fir zousätzlech Wichtegkeet oder Schwéierpunkt vun engem Wuert oder Ausdrock relativ zu senger Ëmgéigend Kopie unzeginn. Benotzt <strong>fir Wichtegkeet a <em>fir Stress Akzenter.

Schwéierpunkt an engem Paragraph

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, a pharetra augue.

Bemierkung: Et ass nach ëmmer an der Rei ze benotzen <b>an <i>Tags an HTML5 a si mussen net fett respektiv kursiv styléiert ginn (och wann et e méi semantescht Element ass, benotzt et). <b>ass geduecht fir Wierder oder Ausdréck ze markéieren ouni zousätzlech Wichtegkeet ze vermëttelen, wärend <i>ass meeschtens fir Stëmm, technesch Begrëffer, etc.

Adressen

D' <address>Element gëtt fir Kontaktinformatioune fir säin nooste Vorfahren benotzt, oder de ganze Kierper vun der Aarbecht. Hei sinn zwee Beispiller vu wéi et benotzt ka ginn:

Bemierkung: All Zeil an engem <address>muss mat engem Zeilbrek ( <br />) ophalen oder an engem Block-Niveau Tag gewéckelt ginn (zB <p>) fir den Inhalt richteg ze strukturéieren.

Ofkierzungen

Fir Ofkierzungen an Akronyme benotzt den <abbr>Tag ( <acronym>ass an HTML5 ofgeschaaft ). Setzt de Shorthandform am Tag a set en Titel fir de kompletten Numm.

Blockquotes

<blockquote> <p> <small>

Wéi zitéiert

Fir e Blockquote matzemaachen, wéckelen <blockquote>an <p>Tags <small>. Benotzt d' <small>Element fir Är Quell ze zitéieren an Dir kritt en Em Strich —virun.

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

Dr Julius Hibbert

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

Onbestallt<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem bei 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

Unstyled<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem bei 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

Bestallt<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem bei 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

Beschreiwungdl

Beschreiwung Lëschte

Eng Beschreiwungslëscht ass perfekt fir Begrëffer ze definéieren.

Euismod

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

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Code

<code> <pre>

Pimp Äre Code am Stil mat zwee einfachen Tags. Fir nach méi Awesomeness duerch Javascript, fällt de Google Code prettify Bibliothéik an Dir sidd ageriicht.

Code presentéieren

Code, Blocks vun oder just Snippets inline, kënne mat Stil ugewisen ginn andeems Dir de richtege Tag wéckelt. Fir Blocks vu Code déi méi Zeilen spanen, benotzt d' <pre>Element. Fir Inline Code benotzt d' <code>Element.

<div>
  <h1>Rubrik</h1>
  <p>Eppes richteg hei...</p>
</div>

<div> <h1> Iwwerschrëft </h1> <p> Eppes hei... </p> </div>
  
  

Inline Etiketten

<span class="label">

Rufft Opmierksamkeet op oder markéiert all Ausdrock an Ärem Kierpertext.

Label eppes

Jeemools ee vun deenen ausgefalene Neie gebraucht! oder Wichteg Fändelen wann Dir Code schreift? Gutt, elo hutt Dir se. Hei ass wat als Standard abegraff ass:

Medien Gitter

Weist Miniaturbild vu verschiddene Gréissten op Säiten mat engem nidderegen HTML Foussofdrock a minimale Stiler.

Beispill Thumbnails

Thumbnails an der .media-gridkënnen all Gréisst sinn, awer si funktionnéieren am beschten wann se direkt op den agebaute Bootstrap Gittersystem kartéiert sinn. Bildbreeten wéi 90, 210 an 330 kombinéiere mat e puer Pixel Polsterung fir d' .span2, .span4, a Kolonngréissten ze gläichen .span6.

Grouss

Mëttelméisseg

Kleng

Codéieren hinnen

Media Gitter sinn einfach ze benotzen an zimlech einfach op der Markup Säit. Hir Dimensiounen sinn reng baséiert op der Gréisst vun de Biller abegraff.

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

Bauen Dëscher

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

Dëscher sinn super-fir vill Saachen. Grouss Dëscher brauchen awer e bësse Markup Léift fir nëtzlech, skalierbar a liesbar ze sinn (um Codeniveau). Hei sinn e puer Tipps fir ze hëllefen.

Wickelt ëmmer Är Kolonn Header an <thead>esou datt d'Hierarchie <thead>> <tr>> ass <th>.

Ähnlech wéi d'Kolonn Header, all Kierper Inhalt vun Ärem Dësch soll an engem gewéckelt ginn <tbody>sou datt Är Hierarchie <tbody>>> ass <tr>.<td>

Beispill: Standard Dësch Stiler

All Dëscher ginn automatesch mat nëmmen de wesentleche Grenzen stiléiert fir d'Liesbarkeet ze garantéieren an d'Struktur z'erhalen. Kee Grond fir extra Klassen oder Attributer ze addéieren.

<tabell>
  ...
</ Dësch>

Beispill: Kondenséiert Dësch

Fir Dëscher déi méi Daten a méi enk Plazen erfuerderen, benotzt de kondenséierte Goût, deen d'Polsterung an d'Halschent schneit. Et kann och a Verbindung mat Grenzen an Zebrastreifen benotzt ginn, sou wéi d'Standard Dëschstiler.

Beispill: Bordered Dësch

Maacht Är Dëscher just e bësse méi slanker andeems se hir Ecker ronnen an Grenzen op all Säit bäisetzen.

<table class = "bordered-table" > 
  ...
</ Dësch>

Beispill: Zebra-gestreift

Gitt e bësse flott mat Ären Dëscher andeems Dir Zebrastreifen bäidréit - füügt just d' .zebra-stripedKlass dobäi.

Notiz: Zebra-Sträifen ass eng progressiv Verbesserung net verfügbar fir eeler Browser wéi IE8 an drënner.

<table class = "zebra gestreift" > 
  ...
</ Dësch>

Beispill: Zebra-gestreift m / TableSorter.js

Mir huelen dat viregt Beispill, mir verbesseren d'Nëtzlechkeet vun eisen Dëscher andeems Dir d'Sortéierungsfunktionalitéit iwwer jQuery an den Tablesorter Plugin ubitt. Klickt op all Kolonn Header fir d'Zort z'änneren.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( Funktioun () { 
    $ ( "Table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "zebra gestreift" > 
  ...
</ Dësch>

Standard Stiler

All Forme kréien Standardstiler fir se op eng liesbar a skalierbar Manéier ze presentéieren. Stiler gi fir Textinputen zur Verfügung gestallt, wielt Lëschten, Textberäicher, Radioknäppercher a Checkboxen, a Knäppercher.

Gestapelt Formen

Füügt .form-stackedden HTML vun Ärem Formulaire un an Dir hutt Etiketten uewen op hire Felder anstatt op der lénkser Säit. Dëst funktionnéiert super wann Är Forme kuerz sinn oder Dir hutt zwou Kolonnen vun Input fir méi schwéier Formen.

Form Feld Gréissten

Passt all Form input, select, oder textareaBreet un andeems Dir just e puer Klassen op Är Markup bäidréit.

Vun v1.3.0, hu mir d'Gitter-baséiert Gréisst Klassen fir Form Elementer dobäi. Benotzt w.e.g. dës iwwer déi bestehend .mini, .small, etc Klassen.

Knäppercher

Als Konventioun gi Knäppercher fir Aktiounen benotzt, während Linke fir Objete benotzt ginn. Zum Beispill, "Download" kéint e Knäppchen sinn an "rezent Aktivitéit" kéint e Link sinn.

All Knäppercher Standard zu engem Liichtjoer gro Stil, mä eng Rei vun funktionell Klassen kann fir verschidde Faarf Stiler applizéiert ginn. Dës Klassen enthalen eng blo .primaryKlass, eng hellblo .infoKlass, eng gréng .successKlass an eng rout .dangerKlass.

Beispill Knäppercher

Knäppestiler kënnen op alles mat der .btnugewandter applizéiert ginn. Normalerweis wëllt Dir dës nëmmen op <a>, <button>, a wielt <input>Elementer uwenden. Hei ass wéi et ausgesäit:

Alternativ Gréissten

Loscht op méi grouss oder méi kleng Knäppercher? Maacht et!

Behënnert Staat

Fir Knäppercher déi net aktiv sinn oder vun der App aus engem oder anere Grond behënnert sinn, benotzt den behënnerte Staat. Dat ass .disabledfir Linken a :disabledfir<button> Elementer.

Linken

Knäppercher

Wat ass et

Eis Topbar ass eng fix Bar déi de Logo oder den Numm vun enger Websäit, primär Navigatioun a Sichform enthält.

Customisable

All Elementer bannent, an och déi ganz Topbar, sinn fakultativ. Dir kënnt wielen e Logo/Numm, Nav, Sich an e sekundären Navigatioun opzehuelen - oder all Kombinatioun vun deem.

Dropdowns abegraff

Als Deel vun der Haaptnavigatioun hu mir d'Fäegkeet abegraff fir Iech Dropdowns op Är Navigatioun ze addéieren. Kuckt de sekundären Nav uewen (riets ausgeriicht) fir ze kucken wéi et gemaach gëtt. Dropdowns liTags ënnerstëtzen och .activefir déi aktuell Säitauswiel ze weisen.

Tabs a Pëllen

Erstellt einfach sekundär Navigatioun mat engem<ul> . Tauscht tëscht Tabs oder Pëllen andeems Dir déi entspriechend Klass bäidréit.

Super fir Ënnersektiounen vum Inhalt wéi eis Konten Astellungssäiten a Benotzerzäitlinnen fir tëscht Säiten vum ähnlechen Inhalt ze wiesselen. Verfügbar an Tabbed oder Pille Stiler.

Basis Tabs Beispill

Tabs kënnen als regulär Navigatioun benotzt ginn (extern Säiten an der selwechter Tab lueden) oder als Tabbar Inhaltsberäicher fir d'Säiten vum Inhalt auszetauschen. Mir hunn e Tabs Plugin deen benotzt ka ginn fir dee leschten z'integréieren.

• Doheem
• Profil
• Messagen
• Astellungen
• Kontakt
• Fale loossen
  • Secondaire Link
  • Soss eppes hei
  • En anere Link

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Messagen </a></li> 
  <li><a href = "#" > Astellungen </a></li> 
  <li><a href = "#" > Kontakt </a></li> 
</ul>

Basis Pëllen Beispill

• Doheem
• Profil
• Messagen
• Astellungen
• Kontakt

<ul class = "pills" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Messagen </a></li> 
  <li><a href = "#" > Astellungen </a></li> 
  <li><a href = "#" > Kontakt </a></li> 
</ul>

Brout

Breadcrumb Navigatioun gëtt als Wee benotzt fir Benotzer ze weisen wou se an enger App oder op engem Site sinn, awer net fir primär Navigatioun.

• Doheem

• Home /
• Mëtt Säit

• Home /
• Mëtt Säit /
• Eng aner

• Home /
• Mëtt Säit /
• Eng aner /
• Du bass hei

<ul class = "breadcrumb" > 
  <li><a href = "#" > Home </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Mëttelsäit </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Eng aner </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Dir sidd hei </li> 
</ul>

Paginatioun

Ultra simplistesch a minimal stylesch Paginatioun inspiréiert vu Rdio. De grousse Block ass schwéier ze verpassen, liicht skalierbar a bitt grouss Klickflächen.

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

Basis Alarmer

.alert-message

One-Line Messagen fir den Echec, méigleche Versoen oder Erfolleg vun enger Handlung ze markéieren. Besonnesch nëtzlech fir Formen.

Kritt de Javascript »

Beispill Code

<div class = "Alert-Message Warnung" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Hellege Guacamole! </strong> Am beschten kontrolléiert Iech selwer, Dir gesitt net ze gutt aus. </p>
</div>

Block Messagen

.alert-message.block-message

Fir Messagen déi e bëssen Erklärung erfuerderen, hu mir Paragraphestil Alarmer. Dës si perfekt fir méi laang Fehlermeldungen ze sprëtzen, e Benotzer vun enger pendende Aktioun ze warnen, oder just Informatioun ze presentéieren fir méi Akzent op der Säit.

Kritt de Javascript »

Beispill Code

<div class = "alarm-message block-message warnung" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Hellege Guacamole! Dëst ass eng Warnung! </strong> Am beschten kontrolléiert Iech selwer, Dir gesitt net ze gutt aus. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "alarm-actions" > 
    <a class = "btn small" href = "#" > Maacht dës Aktioun </a> <a class = "btn small" href = "#" > Oder maacht dat </a>     
  </div>
</div>

Modal

Modale - Dialogen oder Lightboxen - si super fir kontextuell Handlungen a Situatiounen wou et wichteg ass datt den Hannergrondkontext erhale bleift.

Kritt de Javascript »

Tooltips

Twipsies si super nëtzlech fir engem duercherneen Benotzer ze hëllefen an se an déi richteg Richtung ze weisen.

Kritt de Javascript »

Popovers

Benotzt Popovers fir subtextuell Informatioun op eng Säit ze liwweren ouni de Layout ze beaflossen.

Kritt de Javascript »

Ufänken

D'Integratioun vu Javascript mat der Bootstrap Bibliothéik ass super einfach. Hei drënner gi mir iwwer d'Basics a bidden Iech e puer fantastesch Plugins fir Iech unzefänken!

Kuckt Javascript Dokumenter »

Wat ass mat abegraff

Bréngt e puer vun Bootstrap seng primär Komponenten zum Liewen mat neie personaliséierte Plugins déi mat jQuery an Ender funktionnéieren . Mir encouragéieren Iech se ze verlängeren an z'änneren fir Är spezifesch Entwécklungsbedierfnesser ze passen.

Ass Javascript néideg?

Nee! Bootstrap ass als éischt entworf fir eng CSS Bibliothéik ze sinn. Dëst Javascript bitt eng Basis interaktiv Schicht uewen op déi abegraff Stiler.

Wéi och ëmmer, fir déi déi Javascript brauchen, hu mir d'Plugins hei uewen zur Verfügung gestallt fir Iech ze hëllefen ze verstoen wéi Dir Bootstrap mat Javascript integréiert an Iech eng séier, liicht Optioun fir d'Basisfunktionalitéit direkt ze ginn.

Fir méi Informatioun a fir e puer Live Demos ze gesinn, kuckt w.e.g. op eis Plugin Dokumentatioun Säit .