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: @baseFontSize
en @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 opnimme title foar útwreide tekst |
<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 wurde stylearre mei tekst mei haadletters en in ljocht stippele boaiemrâne. Se hawwe ek in helpoanwizer op hover, sadat brûkers ekstra oantsjutting hawwe dat wat sil wurde toand op hover.
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-left en .pull-right klassen 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>
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-scrollable
klasse 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 td en th eleminten |
Tabellen wurde automatysk styled mei mar in pear rânen om te garandearjen lêsberens en ûnderhâlden struktuer. Mei 2.0 is de .table
klasse ferplicht.
- <table class = "tabel" >
- …
- </tabel>
# | Foarnamme | Achternamme | Taal |
---|---|---|---|
1 | Merk | Otto | CSS |
2 | Jacob | Thornton | Javascript |
3 | Stu | Dent | HTML |
Krij in bytsje fancy mei jo tafels troch sebra-striping ta te foegjen - foegje gewoan de .table-striped
klasse ta.
Opmerking: Striped tabellen brûke de :nth-child
CSS-selektor en is net beskikber yn IE7-IE8.
- <table class = "table table-striped" >
- …
- </tabel>
# | Foarnamme | Achternamme | Taal |
---|---|---|---|
1 | Merk | Otto | CSS |
2 | Jacob | Thornton | Javascript |
3 | Stu | Dent | HTML |
Foegje rânen om 'e hiele tafel en rûne hoeken ta foar estetyske doelen.
- <table class = "table-bordered" >
- …
- </tabel>
# | Foarnamme | Achternamme | Taal |
---|---|---|---|
1 | Mark Otto | CSS | |
2 | Jacob | Thornton | Javascript |
3 | Stu | Dent | |
3 | Brosef | Stalin | HTML |
Meitsje jo tabellen kompakter troch de .table-condensed
klasse ta te foegjen om tafelselpadding yn 'e helte te snijen (fan 8px oant 4px).
- <table class = "tabel tabel-kondensearre" >
- …
- </tabel>
# | Foarnamme | Achternamme | Taal |
---|---|---|---|
1 | Merk | Otto | CSS |
2 | Jacob | Thornton | Javascript |
3 | Stu | Dent | HTML |
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>
# | Foarnamme | Achternamme | Taal |
---|---|---|---|
1 | Merk | Otto | CSS |
2 | Jacob | Thornton | Javascript |
3 | Stu | Dent | HTML |
4 | Brosef | Stalin | HTML |
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 |
Mei v2.0 hawwe wy lichtere en tûkere standerts foar foarmstilen. Gjin ekstra markup, gewoan formulier kontrôles.
- <form class = "goed" >
- <label> Labelnamme </label>
- <input type = "text" class = "span3" placeholder = " Typ wat…" >
- <span class = "help-inline" > Associearre helptekst! </span>
- <label class = "checkbox" >
- <input type = "checkbox" > Kontrolearje my
- </label>
- <button type = "submit" class = "btn" > Ferstjoere </button>
- </form>
Reflektearje standert WebKit-stilen, foegje gewoan ta .form-search
foar ekstra rûne sykfjilden.
- <form class = "well form-search" >
- <input type = "text" class = "ynput-medium sykfraach" >
- <button type = "submit" class = "btn" > Sykje </button>
- </form>
Ynputen binne bloknivo om te begjinnen. Foar .form-inline
en .form-horizontal
brûke wy inline-blok.
- <form class = "well form-inline" >
- <input type = "text" class = "input-small" placeholder = "E-post" >
- <input type = "password" class = "input-small" placeholder = "Wachtwurd" >
- <button type = "submit" class = "btn" > Gean </button>
- </form>
Sjoen it boppesteande foarbyldfoarmyndieling, hjir is de markup ferbûn mei de earste ynfier- en kontrôlegroep. De .control-group
, .control-label
, en .controls
klassen 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>
Links werjûn binne alle standertfoarmkontrôles dy't wy stypje. Hjir is de list mei kûgels:
Oant v1.4 brûkten Bootstrap's standertfoarmstilen de horizontale yndieling. Mei Bootstrap 2 hawwe wy dizze beheining fuortsmiten om tûkere, mear skalberbere standerts foar elke foarm te hawwen.
Bootstrap hat stilen foar browser-stipe rjochte en disabled
steaten. Wy fuortsmite de standert Webkit outline
en tapasse in box-shadow
op 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 .inline
oan ien .checkbox
of .radio
en jo binne klear.
Om prepend of append yngongen te brûken yn in ynline formulier, wês wis dat jo de .add-on
en input
op 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.
:after
. Yn 'e dokuminten litte wy in ljocht reade eftergrûnkleur sjen by hover om de grutte fan it ikoan te markearjen.
Ynstee fan elk ikoan in ekstra fersyk 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 meibackground-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.
Mei v2.0.1 hawwe wy der foar keazen om in <i>
tag te brûken foar al ús 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.
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.