Boppe op 'e steigers wurde basis HTML-eleminten stylearre en ferbettere mei útwreide klassen om in frisse, konsekwinte uterlik en gefoel te leverjen.
De hiele typografyske raster is basearre op twa Minder fariabelen yn ús variables.less triem: @baseFontSizeen @baseLineHeight. De earste is de basislettertypegrutte dy't troch it heule brûkt wurdt en de twadde is de basislinehichte.
Wy brûke dy fariabelen, en wat wiskunde, om de marzjes, paddings, en line-hichtes fan al ús type en mear te meitsjen.
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.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
| Elemint | Gebrûk | Fakultatyf |
|---|---|---|
<strong> |
Foar it beklamjen fan in stikje tekst mei wichtich | Gjin |
<em> |
Foar it beklamjen fan in stikje tekst mei stress | Gjin |
<abbr> |
Wikkelt ôfkoartings en akronyms om de útwreide ferzje te sjen op hover | Opsjoneel .initialismklasse foar ôfkoartings foar haadletters. |
<address> |
Foar kontaktynformaasje foar syn neiste foarâlder as it heule wurk | Bewarje opmaak troch einigje alle rigels mei<br> |
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, in pharetra augue.
Opmerking: Fiel jo frij om te brûken <b>en <i>yn HTML5, mar har gebrûk is in bytsje feroare. <b>is bedoeld om wurden of útdrukkingen te markearjen sûnder ekstra belang oer te bringen, wylst <i>it meast foar stim, technyske termen, ensfh.
Hjir binne twa foarbylden fan hoe't de <address>tag kin wurde brûkt:
Ofkoartings mei in titleattribút hawwe in ljocht stippele boaiem grins en in help rinnerke op hover. Dit jout brûkers ekstra oantsjutting dat wat sil wurde toand op hover.
Foegje de initialismklasse ta oan in ôfkoarting om typografyske harmony te fergrutsjen troch it in wat lytsere tekstgrutte te jaan.
HTML is it bêste ding sûnt gesneden bôle.
In ôfkoarting fan it wurd attribút is attr .
| Elemint | Gebrûk | Fakultatyf |
|---|---|---|
<blockquote> |
Elemint op bloknivo foar it oanheljen fan ynhâld fan in oare boarne | Add .pull-leften .pull-rightklassen foar driuwende opsjes |
<small> |
Opsjoneel elemint foar it tafoegjen fan in brûker rjochte sitaat, typysk in auteur mei titel fan wurk | Plak it <cite>om de titel of namme fan boarne |
Om in blokquote op te nimmen, wikkel <blockquote>elke HTML as it sitaat. Foar rjochte quotes advisearje wy in <p>.
Omfetsje in opsjoneel <small>elemint om jo boarne te neamen en jo krije in em-streepje —derfoar foar styldoelen.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat in ante venenatis. </p>
- <small> Immen ferneamd </small>
- </blockquote>
Standert blokquotes binne stylearre as sadanich:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat in ante venenatis.
Immen ferneamd yn Body of work
Om jo blokquote nei rjochts te driuwen, foegje jo ta class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat in ante venenatis.
Immen ferneamd yn Body of work
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Heads up! Horizontale beskriuwingslisten sille termen ôfbrekke dy't te lang binne om te passen yn 'e lofterkolom fix text-overflow. Yn smellere viewports sille se feroarje nei de standert steapele yndieling.
Wrap ynline snippets fan koade mei <code>.
- Bygelyks , <code> seksje </ code > moat wurde ferpakt as ynline .
Brûk <pre>foar meardere rigels koade. Wês wis dat jo ûntkomme oan alle hoeke heakjes yn 'e koade foar in goede rendering.
<p>In foarbyldtekst hjir...</p>
- <foar>
- <p>foarbyldtekst hjir...</p>
- </pre>
Opmerking: Wês wis dat jo koade binnen <pre>tags sa ticht mooglik by de lofter hâlde; it sil alle ljeppers werjaan.
Jo kinne opsjoneel de .pre-scrollableklasse tafoegje dy't in max-hichte fan 350px sil ynstelle en in y-as scrollbar leverje.
Nim itselde <pre>elemint en foegje twa opsjonele klassen ta foar ferbettere rendering.
- <p> Foarbyldtekst hjir... </p>
- <pre class = "prettyprint
- linenums" >
- <p>foarbyldtekst hjir...</p>
- </pre>
Download google-code-prettify en besjoch de readme foar hoe te brûken.
| Tag | Beskriuwing |
|---|---|
<table> |
Wrapping elemint foar it werjaan fan gegevens yn in tabelformaat |
<thead> |
Container elemint foar tabelkop rigen ( <tr>) om tabelkolommen te labeljen |
<tbody> |
Container elemint foar tabel rigen ( <tr>) yn it lichem fan 'e tabel |
<tr> |
Container elemint foar in set fan tabel sellen ( <td>of <th>) dat ferskynt op in inkele rige |
<td> |
Standert tabel sel |
<th> |
Spesjale tabelsel foar kolom (as rige, ôfhinklik fan omfang en pleatsing) labels Moatte brûkt wurde binnen in <thead> |
<caption> |
Beskriuwing of gearfetting fan wat de tabel hâldt, benammen nuttich foar skermlêzers |
- <tabel>
- <kop>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </tabel>
| Namme | Klasse | Beskriuwing |
|---|---|---|
| Standert | Gjin | Gjin stilen, gewoan kolommen en rigen |
| Basic | .table |
Allinnich horizontale linen tusken rigen |
| Bordered | .table-bordered |
Rûnet hoeken en foeget bûtenrâne ta |
| Zebra-stripe | .table-striped |
Foeget ljochtgrize eftergrûnkleur ta oan ûneven rigen (1, 3, 5, ensfh.) |
| Kondensearre | .table-condensed |
Snijt fertikale padding yn 'e helte, fan 8px oant 4px, binnen alle tden theleminten |
Tabellen wurde automatysk styled mei mar in pear rânen om te garandearjen lêsberens en ûnderhâlden struktuer. Mei 2.0 is de .tableklasse ferplicht.
- <table class = "tabel" >
- …
- </tabel>
| # | Foarnamme | Achternamme | Brûkersnamme |
|---|---|---|---|
| 1 | Merk | Otto | @mdo |
| 2 | Jacob | Thornton | @fet |
| 3 | Larry | de fûgel |
Krij in bytsje fancy mei jo tafels troch sebra-striping ta te foegjen - foegje gewoan de .table-stripedklasse ta.
Opmerking: Striped tabellen brûke de :nth-childCSS-selektor en is net beskikber yn IE7-IE8.
- <table class = "table table-striped" >
- …
- </tabel>
| # | Foarnamme | Achternamme | Brûkersnamme |
|---|---|---|---|
| 1 | Merk | Otto | @mdo |
| 2 | Jacob | Thornton | @fet |
| 3 | Larry | de fûgel |
Foegje rânen om 'e hiele tafel en rûne hoeken ta foar estetyske doelen.
- <table class = "table-bordered" >
- …
- </tabel>
| # | Foarnamme | Achternamme | Brûkersnamme |
|---|---|---|---|
| 1 | Merk | Otto | @mdo |
| Merk | Otto | @getbootstrap | |
| 2 | Jacob | Thornton | @fet |
| 3 | Larry de Fûgel | ||
Meitsje jo tabellen kompakter troch de .table-condensedklasse ta te foegjen om tafelselpadding yn 'e helte te snijen (fan 8px oant 4px).
- <table class = "tabel tabel-kondensearre" >
- …
- </tabel>
| # | Foarnamme | Achternamme | Brûkersnamme |
|---|---|---|---|
| 1 | Merk | Otto | @mdo |
| 2 | Jacob | Thornton | @fet |
| 3 | Larry de Fûgel | ||
Fiel jo frij om ien fan 'e tafelklassen te kombinearjen om ferskate uterlik te berikken troch ien fan' e beskikbere klassen te brûken.
- <table class = "tabel-tabel-gestreepte tabel-grinzen tabel-kondensearre" >
- ...
- </tabel>
| Folsleine namme | |||
|---|---|---|---|
| # | Foarnamme | Achternamme | Brûkersnamme |
| 1 | Merk | Otto | @mdo |
| 2 | Jacob | Thornton | @fet |
| 3 | Larry de Fûgel | ||
It bêste diel oer formulieren yn Bootstrap is dat al jo ynputs en kontrôles geweldich sjogge, nettsjinsteande hoe't jo se bouwe yn jo markup. Gjin oerstallige HTML is fereaske, mar wy leverje de patroanen foar dyjingen dy't it nedich binne.
Mear yngewikkeldere yndielingen komme mei beknopte en skalberbere klassen foar maklike styling en evenemintebinding, sadat jo by elke stap binne bedekt.
Bootstrap komt mei stipe foar fjouwer soarten formulierlayouts:
Ferskillende soarten formulierlayouts fereaskje wat feroaringen foar markearring, mar de kontrôles sels bliuwe en gedrage itselde.
De formulieren fan Bootstrap omfetsje stilen foar alle basisfoarmkontrôles lykas ynfier, tekstgebiet, en selektearje dy't jo soene ferwachtsje. Mar it komt ek mei in oantal oanpaste komponinten lykas taheakke en foarôfgeande yngongen en stipe foar listen mei karfakjes.
Steaten lykas flater, warskôging en sukses binne opnommen foar elk type formulierkontrôle. Ek opnommen binne stilen foar útskeakele kontrôles.
Bootstrap leveret ienfâldige markearring en stilen foar fjouwer stilen fan gewoane webformulieren.
| Namme | Klasse | Beskriuwing |
|---|---|---|
| Fertikaal (standert) | .form-vertical (net fereaske) |
Opsteapele, lofts rjochte labels oer kontrôles |
| Ynline | .form-inline |
Links rjochte label en ynline-blokkontrôles foar kompakte styl |
| Sykje | .form-search |
Ekstra-ôfrûne tekstynfier foar in typyske estetyk foar sykjen |
| Horizontaal | .form-horizontal |
Float links, rjochts rjochte labels op deselde line as kontrôles |
Smart en lichtgewicht standerts sûnder ekstra markup.
- <form class = "goed" >
- <label> Labelnamme </label>
- <input type = "text" class = "span3" placeholder = " Typ wat…" >
- <span class = "help-block" > Foarbyld helptekst op bloknivo hjir. </span>
- <label class = "checkbox" >
- <input type = "checkbox" > Kontrolearje my
- </label>
- <button type = "submit" class = "btn" > Ferstjoere </button>
- </form>
Taheakje .form-searchoan it formulier en .search-queryoan de input.
- <form class = "well form-search" >
- <input type = "text" class = "ynput-medium sykfraach" >
- <button type = "submit" class = "btn" > Sykje </button>
- </form>
Foegje .form-inlinede fertikale ôfstimming en ôfstân fan formulierkontrôles ta om finesse te meitsjen.
- <form class = "well form-inline" >
- <input type = "text" class = "input-small" placeholder = "E-post" >
- <input type = "password" class = "input-small" placeholder = "Wachtwurd" >
- <label class = "checkbox" >
- <input type = "checkbox" > Unthâld my
- </label>
- <button type = "submit" class = "btn" > Oanmelde </button>
- </form>
Oan 'e rjochterkant wurde alle standertfoarmkontrôles werjûn dy't wy stypje. Hjir is de list mei kûgels:
Sjoen it boppesteande foarbyldfoarmyndieling, hjir is de markup ferbûn mei de earste ynfier- en kontrôlegroep. De .control-group, .control-label, en .controlsklassen binne allegear nedich foar styling.
- <form class = "form-horizontal" >
- <fieldset>
- <legend> Legend tekst </legend>
- <div class = "kontrôlegroep" >
- <label class = "control-label" for = "input01" > Tekstynfier </label>
- <div class = "kontrôles" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Stypjende helptekst </p>
- </div>
- </div>
- </fieldset>
- </form>
Bootstrap hat stilen foar browser-stipe rjochte en disabledsteaten. Wy fuortsmite de standert Webkit outlineen tapasse in box-shadowop syn plak foar :focus.
It omfettet ek falidaasjestilen foar flaters, warskôgings en sukses. Om te brûken, foegje de flaterklasse ta oan 'e omlizzende .control-group.
- <fieldset
- class = "kontrôlegroepflater" >
- …
- </fieldset>
Ynfiergroepen - mei taheakke of foarôfgeande tekst - jouwe in maklike manier om mear kontekst te jaan foar jo ynfier. Grutte foarbylden omfetsje it @-teken foar Twitter-brûkersnammen of $ foar finânsjes.
Oant v1.4 hat Bootstrap ekstra markearring nedich om karfakjes en radio's om se te stapeljen. No, it is in ienfâldige saak fan it werheljen fan 'e <label class="checkbox">dy't de <input type="checkbox">.
Inline karfakjes en radio's wurde ek stipe. Foegje gewoan ta .inlineoan ien .checkboxof .radioen jo binne klear.
Om prepend of append yngongen te brûken yn in ynline formulier, wês wis dat jo de .add-onen inputop deselde rigel pleatse, sûnder spaasjes.
Om helptekst ta te foegjen foar jo formulierynfier, befetsje inline helptekst mei <span class="help-inline">of in helptekstblok mei <p class="help-block">nei it ynfierelemint.
Ynstee fan elk ikoan in ekstra oanfraach te meitsjen, hawwe wy se gearstald yn in sprite - in boskje ôfbyldings yn ien bestân dat CSS brûkt om de ôfbyldings te pleatsen mei background-position. Dit is deselde metoade dy't wy brûke op Twitter.com en it hat goed wurke foar ús.
Alle .icon-ikoanenklassen wurde foarôfgeand mei foar juste nammeromte en berik, krekt lykas ús oare komponinten. Dit sil helpe om konflikten mei oare ark te foarkommen.
Glyphicons hat ús it brûken fan de Halflings set yn ús iepenboarne toolkit ferliend, salang't wy hjir in keppeling en kredyt leverje yn 'e dokuminten. Besykje asjebleaft itselde te dwaan yn jo projekten.
Bootstrap brûkt in <i>tag foar alle ikoanen, mar se hawwe gjin saakklasse - allinich in dielde foarheaksel. Om te brûken, pleats de folgjende koade sawat oeral:
- <i class = "icon-search" ></i>
D'r binne ek stilen beskikber foar omkearde (wite) ikoanen, klear makke mei ien ekstra klasse:
- <i class = "icon-search icon-white" ></i>
D'r binne 120 klassen om út te kiezen foar jo ikoanen. Foegje gewoan in <i>tag ta mei de juste klassen en jo binne ynsteld. Jo kinne de folsleine list fine yn sprites.less of hjir yn dit dokumint.
Heads up! As jo njonken tekststrings brûke, lykas yn knoppen of nav-keppelings, wês dan wis dat jo in spaasje efter de <i>tag litte foar juste ôfstân.
Ikoanen binne geweldich, mar wêr soe men se brûke? Hjir binne in pear ideeën:
Yn essinsje, oeral wêr't jo in <i>tag kinne pleatse, kinne jo in ikoan pleatse.
Brûk se yn knoppen, knopgroepen foar in arkbalke, navigaasje, of foarôfgeande formulierynputs.