Typografyske skaal

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.

Foarbyld body text

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.

Mei help fan klam

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.

Foarbyld adressen

Hjir binne twa foarbylden fan hoe't de <address>tag kin wurde brûkt:

Foarbyld ôfkoartings

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 .

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

Net oardere

<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem by 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 class="unstyled">

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

Besteld

<ol>

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

Beskriuwing

<dl>

Beskriuwingslisten

In beskriuwingslist is perfekt foar it definiearjen fan termen.

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.

Ynline

Wrap ynline snippets fan koade mei <code>.

Bygelyks , <code> seksje </ code > moat wurde ferpakt as ynline .  

Basis blok

Brûk <pre>foar meardere rigels koade. Wês wis dat jo alle carets omsette yn har unicode-karakters foar juste 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.

Google Pretify

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.

<tabel>
  <kop>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</tabel>

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>

Krij in bytsje fancy mei jo tafels troch sebra-striping ta te foegjen - foegje gewoan de .table-stripedklasse ta.

Opmerking: Sprited tabellen brûke de :nth-childCSS-selektor en is net beskikber yn IE7-IE8.

<table class = "table table-striped" > 
  …
</tabel>

Foegje rânen om 'e hiele tafel en rûne hoeken ta foar estetyske doelen.

<table class = "table-bordered" > 
  …
</tabel>

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>

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>

Fleksibele HTML en CSS

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.

Fjouwer layouts ynbegrepen

Bootstrap komt mei stipe foar fjouwer soarten formulierlayouts:

• Fertikaal (standert)
• Sykje
• Ynline
• Horizontaal

Ferskillende soarten formulierlayouts fereaskje wat feroaringen foar markearring, mar de kontrôles sels bliuwe en gedrage itselde.

Kontrolearje steaten en mear

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.

Mei v2.0 hawwe wy lichtere en tûkere standerts foar foarmstilen. Gjin ekstra markup, gewoan formulier kontrôles.

Reflektearje standert WebKit-stilen, foegje gewoan ta .form-searchfoar ekstra rûne sykfjilden.

Ynputen binne bloknivo om te begjinnen. Foar .form-inlineen .form-horizontalbrûke wy inline-blok.

Wat is ynbegrepen

Links werjûn binne alle standertfoarmkontrôles dy't wy stypje. Hjir is de list mei kûgels:

• tekstynfier (tekst, wachtwurd, e-post, ensfh.)
• karfakje
• radio
• útkieze
• meardere selektearje
• triem ynfier
• tekstgebiet

Nije standerts mei v2.0

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.

Redesigned browser steaten

Bootstrap hat stilen foar browser-stipe rjochte en disabledsteaten. Wy fuortsmite de standert Webkit outlineen tapasse in box-shadowyn it plak foar :focus.

Formulier validaasje

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>

Ynputen foarby en taheakje

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.

Checkboxes en radio's

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.

Inline formulieren en taheakje / prepend

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.

Formulier helptekst

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.

Knoppen foar aksjes

As konvinsje moatte knoppen allinich brûkt wurde foar aksjes, wylst hyperlinks moatte wurde brûkt foar objekten. Bygelyks, "Download" moat in knop wêze, wylst "resinte aktiviteit" in keppeling moat wêze.

Foar ankers en foarmen

Knopstilen kinne wurde tapast op alles mei de .btntapaste. Typysk wolle jo dizze lykwols tapasse op allinich <a>en <button>eleminten.

Opmerking: Alle knoppen moatte de .btnklasse omfetsje. Knopstilen moatte wurde tapast op <button>en <a>eleminten foar konsistinsje.

Meardere maten

Wolle jo gruttere of lytsere knoppen? Hawwe it oan!

Primêre aksje Aksje

Primêre aksje Aksje

Utskeakele steat

Foar útskeakele knoppen, brûk .btn-disabledfoar keppelings en :disabledfoar <button>eleminten.

Primêre aksje Aksje

Primêre aksje Aksje

Cross browser kompatibiliteit

Yn IE9 falle wy de gradient op alle knoppen yn it foardiel fan rûne hoeken, om't IE9 gjin eftergrûngradiënten nei de hoeken snijt.

Related, IE9 jankifies útskeakele buttoneleminten, rendering tekst griis mei in ferfelende tekst-skaad - spitigernôch kinne wy ​​net reparearje dit.

Boud as sprite

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.

Hoe te brûken

Mei v2.0.0 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.

Brûk gefallen

Ikoanen binne geweldich, mar wêr soe men se brûke? Hjir binne in pear ideeën:

• As fisuele foar jo sydbalke-navigaasje
• Foar in suver byldkaike-oandreaune navigaasje
• Foar knoppen om te helpen de betsjutting fan in aksje oer te bringen
• Mei keppelings om kontekst te dielen op 'e bestimming fan in brûker

Yn essinsje, oeral wêr't jo in <i>tag kinne pleatse, kinne jo in ikoan pleatse.

Opfrisse Betelje Wiskje

Kommentaar Ynstellings Mear ynformaasje