Skala tipografika

Il-grilja tipografika kollha hija bbażata fuq żewġ varjabbli Inqas fil-fajl variables.less tagħna: @baseFontSizeu @baseLineHeight. L-ewwel hija d-daqs tat-tipa bażi użata u t-tieni hija l-għoli tal-linja bażi.

Aħna nużaw dawk il-varjabbli, u xi matematika, biex noħolqu l-marġini, paddings, u line-heights tat-tip kollu tagħna u aktar.

Eżempju tat-test tal-korp

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.

Bl-użu ta 'enfasi

Fusce dapibus , tellus ac cursus commodo , torttor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Nota: Ħossok liberu li tuża <b>u <i>fl-HTML5, iżda l-użu tagħhom inbidel xi ftit. <b>huwa maħsub biex jenfasizza kliem jew frażijiet mingħajr ma jwassal importanza addizzjonali filwaqt li <i>huwa l-aktar għal vuċi, termini tekniċi, eċċ.

Eżempju ta' indirizzi

Hawn żewġ eżempji ta’ kif <address>tista’ tintuża t-tikketta:

Abbrevjazzjonijiet ta' eżempju

L-abbrevjazzjonijiet huma mmarkati b'test b'ittri kbar u bordura ta' taħt ħafif bit-tikek. Huma għandhom ukoll cursor ta 'għajnuna fuq id-depożitu sabiex l-utenti jkollhom indikazzjoni żejda li xi ħaġa se tintwera fuq id-dur.

HTML huwa l-aħjar ħaġa peress ħobż imqatta '.

Abbrevjazzjoni tal-kelma attribut hija attr .

Biex tinkludi blockquote, wrap <blockquote>madwar kwalunkwe HTML bħala l-kwotazzjoni. Għal kwotazzjonijiet dritti nirrakkomandaw <p>.

Inkludi element fakultattiv <small>biex tikkwota s-sors tiegħek u int ikollok sing em —qabel għal skopijiet ta 'grafika.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  <small> Xi ħadd famuż </small>
</blockquote>

Il-kwoti ta' blokk default huma msejsa hekk:

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

Xi ħadd famuż fil Body of work

Biex iżżid il-blockquote tiegħek lejn il-lemin, żid class="pull-right":

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

Xi ħadd famuż fil Body of work

Mhux ordnat

<ul>

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

Ordnat

<ol>

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

Deskrizzjoni

<dl>

Listi ta' deskrizzjoni

Lista ta 'deskrizzjoni hija perfetta għad-definizzjoni tat-termini.

Euismod

Vestibulum id ligula porta felis euismod sempre 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.

F'konformità

Kebbeb snippets inline tal-kodiċi b' <code>.

Pereżempju , <code> taqsima </ code > għandha tkun imgeżwer bħala inline .  

Blokk bażiku

Uża <pre>għal linji multipli ta 'kodiċi. Kun żgur li ddawwar kwalunkwe carets fil-karattri unicode tagħhom għal rendering xieraq.

<p>Kampjun ta' test hawn...</p>

<pre>
  <p>Test tal-kampjun hawn...</p>
</pre>

Nota: Kun żgur li żżomm il-kodiċi fi ħdan <pre>it-tikketti kemm jista 'jkun qrib ix-xellug; se tirrendi t-tabs kollha.

Google Prettify

Ħu l-istess <pre>element u żid żewġ klassijiet fakultattivi għal rendering imtejjeb.

<p> Test ta' kampjun hawn... </p>

<pre class = "prettyprint 
     linenums" >
  <p>Test tal-kampjun hawn...</p>
</pre>

Niżżel google-code-prettify u ara l-readme għal kif tuża.

<tabella>
  <thead>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</mejda>

It-tabelli huma awtomatikament stilati bi ftit fruntieri biss biex jiżguraw li jinqara u tinżamm l-istruttura. Bil 2.0, il- .tableklassi hija meħtieġa.

<table class = "mejda" > 
  …
</mejda>

Ikseb ftit fancy mat-tabelli tiegħek billi żżid zebra-striping—sempliċement żid il- .table-stripedklassi.

Nota: Tabelli Sprited jużaw is- :nth-childselettur CSS u mhumiex disponibbli f'IE7-IE8.

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

Żid fruntieri madwar il-mejda kollha u kantunieri fit-tond għal skopijiet estetiċi.

<table class = "tabella bil-bordijiet tal-mejda" > 
  …
</mejda>

Agħmel it-tabelli tiegħek aktar kompatti billi żżid il- .table-condensedklassi biex tnaqqas l-ikkuttunar taċ-ċelluli tal-mejda bin-nofs (minn 8px għal 4px).

<table class = "table table-condensed" > 
  …
</mejda>

Ħossok liberu li tgħaqqad kwalunkwe waħda mill-klassijiet tal-mejda biex tikseb dehra differenti billi tuża kwalunkwe waħda mill-klassijiet disponibbli.

<table class = "mejda strixxata tal-mejda bordata tal-mejda kondensata" > 
  ...
</mejda>

HTML u CSS flessibbli

L-aħjar parti dwar il-formoli f'Bootstrap hija li l-inputs u l-kontrolli kollha tiegħek jidhru tajbin irrispettivament minn kif tibnihom fil-markup tiegħek. L-ebda HTML superfluwu mhu meħtieġ, iżda nipprovdu l-mudelli għal dawk li jeħtieġuh.

Disinnazzjonijiet aktar ikkumplikati jiġu bi klassijiet konċiżi u li jistgħu jegħlbuhom għal stil faċli u rbit ta 'avvenimenti, sabiex tkun kopert f'kull pass.

Erba 'taqsim inklużi

Bootstrap jiġi b'appoġġ għal erba 'tipi ta' layouts tal-formoli:

• Vertikali (default)
• Fittex
• F'konformità
• Orizzontali

Tipi differenti ta' tqassim tal-formoli jeħtieġu xi bidliet fil-markup, iżda l-kontrolli nfushom jibqgħu u jġibu ruħhom l-istess.

Kontroll stati u aktar

Il-formoli ta 'Bootstrap jinkludu stili għall-kontrolli tal-forma bażi bħall-input, textarea, u agħżel li tistenna. Iżda tiġi wkoll b'numru ta 'komponenti tad-dwana bħal inputs mehmuża u prepended u appoġġ għal listi ta' kaxxi ta 'kontroll.

Stati bħal żball, twissija, u suċċess huma inklużi għal kull tip ta 'kontroll tal-formola. Inklużi wkoll stili għal kontrolli b'diżabilità.

Bil-v2.0, għandna defaults eħfef u aktar intelliġenti għall-istili tal-forma. Ebda markup żejjed, kontrolli tal-formola biss.

Filwaqt li tirrifletti l-istili default tal-WebKit, żid biss .form-searchgħal oqsma ta' tfittxija aktar fit-tond.

L-inputs huma livell ta 'blokk biex jibdew. Għal .form-inlineu .form-horizontal, nużaw inline-block.

X'inhu inkluż

Muri fuq ix-xellug huma l-kontrolli tal-formoli default kollha li nappoġġjaw. Hawn il-lista bulleted:

• inputs tat-test (test, password, email, eċċ)
• checkbox
• radju
• agħżel
• għażla multipla
• input tal-fajl
• textarea

Defaults ġodda ma v2.0

Sa v1.4, l-istili tal-formola awtomatika ta 'Bootstrap użaw it-tqassim orizzontali. Bil-Bootstrap 2, neħħejna dik ir-restrizzjoni biex ikollna defaults aktar intelliġenti u skalabbli għal kwalunkwe forma.

Stati tal-browser imfassal mill-ġdid

Bootstrap karatteristiċi stili għall-browser appoġġjati ffukati u disabledstati. Aħna neħħi l-Webkit default outlineu napplikaw box-shadowfil-post tiegħu għal :focus.

Validazzjoni tal-formola

Jinkludi wkoll stili ta' validazzjoni għal żbalji, twissijiet, u suċċess. Biex tuża, żid il-klassi ta 'żball mal-madwar .control-group.

<fieldset
  klassi = "żball tal-grupp ta' kontroll" >
  …
</fieldset>

Prepend & ehmeż inputs

Gruppi ta' input—b'test mehmuż jew imqabbad—jipprovdu mod faċli biex tagħti aktar kuntest għall-inputs tiegħek. Eżempji kbar jinkludu s-sinjal @ għall-ismijiet tal-utent ta 'Twitter jew $ għall-finanzi.

Checkboxes u radjijiet

Sa v1.4, Bootstrap kien jeħtieġ markup żejjed madwar kaxxi ta' kontroll u radjijiet biex jiġbduhom. Issa, hija sempliċi kwistjoni li tirrepeti l- <label class="checkbox">li jdawwal il- <input type="checkbox">.

Inline checkboxes u radjijiet huma wkoll appoġġjati. Żid biss .inlinema 'kwalunkwe .checkboxjew .radiou lest.

Formoli inline u tehmeż/prepend

Biex tuża prepend jew tehmeż inputs f'forma inline, kun żgur li tpoġġi l- .add-onu inputfuq l-istess linja, mingħajr spazji.

Formola test ta' għajnuna

Biex iżżid test ta' għajnuna għall-inputs tal-formola tiegħek, inkludi test ta' għajnuna inline ma <span class="help-inline">' jew blokk ta' test ta' għajnuna <p class="help-block">wara l-element ta' input.

Buttuni għal azzjonijiet

Bħala konvenzjoni, il-buttuni għandhom jintużaw biss għal azzjonijiet filwaqt li l-hyperlinks għandhom jintużaw għall-oġġetti. Pereżempju, "Niżżel" għandha tkun buttuna filwaqt li "attività riċenti" għandha tkun link.

Għal ankri u forom

L-istili tal-buttuni jistgħu jiġu applikati għal kull ħaġa bl- .btnapplikata. Madankollu, tipikament tkun trid tapplika dawn biss għal <a>u <button>elementi.

Nota: Il-buttuni kollha għandhom jinkludu l- .btnklassi. Stili tal-buttuni għandhom jiġu applikati għal <button>u <a>elementi għall-konsistenza.

Daqsijiet multipli

Fancy buttuni akbar jew iżgħar? Ikollhom!

Azzjoni primarja Azzjoni

Azzjoni primarja Azzjoni

Stat b'diżabilità

Għal buttuni b'diżabilità, uża .btn-disabledgħal links u :disabledgħal <button>elementi.

Azzjoni primarja Azzjoni

Azzjoni primarja Azzjoni

Kompatibilità cross browser

Fl-IE9, aħna qatra l-gradjent fuq il-buttuni kollha favur kantunieri fit-tond bħala IE9 ma uċuħ gradjenti fl-isfond għall-kantunieri.

Relatati, IE9 jankifies buttonelementi b'diżabilità, tirrendi t-test griż b'test diżgustanti-dell—sfortunatament ma nistgħux nirranġaw dan.

Mibnija bħala sprite

Minflok ma nagħmlu kull ikona talba żejda, aħna kkumpilajnahom fi sprite—mazz ta 'immaġini f'fajl wieħed li juża CSS biex ipoġġi l-immaġini b' background-position. Dan huwa l-istess metodu li nużaw fuq Twitter.com u ħadem tajjeb għalina.

Il-klassijiet tal-ikoni kollha huma prefissati bi .icon-għal spazjar tal-ismijiet u skoping xieraq, bħall-komponenti l-oħra tagħna. Dan se jgħin biex jiġu evitati kunflitti ma 'għodod oħra.

Glyphicons tatna l-użu tas-sett ta' Halflings fis-sett ta' għodda open-source tagħna sakemm nipprovdu link u kreditu hawn fid-doks. Jekk jogħġbok ikkunsidra li tagħmel l-istess fil-proġetti tiegħek.

Kif tuża

Bil-v2.0.0, għażilna li nużaw <i>tikketta għall-ikoni kollha tagħna, iżda m'għandhom l-ebda klassi tal-każ—prefiss komuni biss. Biex tuża, poġġi l-kodiċi li ġej kważi kullimkien:

<i klassi = "icon-search" ></i> 

Hemm ukoll stili disponibbli għal ikoni maqlubin (abjad), lesti bi klassi waħda żejda:

<i klassi = "ikona-tfittxija ikona-abjad" ></i> 

Hemm 120 klassi minn fejn tagħżel għall-ikoni tiegħek. Żid biss <i>tikketta bil-klassijiet it-tajba u int issettjat. Tista' ssib il-lista sħiħa fi sprites.less jew eżatt hawn f'dan id-dokument.

Każijiet ta' użu

Ikoni huma kbar, imma fejn wieħed jużahom? Hawn huma ftit ideat:

• Bħala viżwali għan-navigazzjoni tal-sidebar tiegħek
• Għal navigazzjoni mmexxija minn ikoni purament
• Għal buttuni biex jgħinu biex iwasslu t-tifsira ta 'azzjoni
• B'links biex jaqsmu l-kuntest fuq id-destinazzjoni ta 'utent

Essenzjalment, kullimkien tista 'tpoġġi <i>tikketta, tista' tpoġġi ikona.

Aġġorna Iċċekkja Ħassar

Ikkummenta Settings Iktar informazzjoni