Minbarra l-armar, elementi HTML bażiċi huma stilati u msaħħa bi klassijiet estensibbli biex jipprovdu dehra u sensazzjoni friska u konsistenti.
Il-grilja tipografika kollha hija bbażata fuq żewġ varjabbli Inqas fil-fajl variables.less tagħna: @baseFontSize
u @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.
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.
Element | Użu | Fakultattiv |
---|---|---|
<strong> |
Għall-enfasi ta' snippet ta' test b'importanti | Xejn |
<em> |
Għall-enfasi ta' snippet ta' test bi stress | Xejn |
<abbr> |
Tiġbor l-abbrevjazzjonijiet u l-akronimi biex turi l-verżjoni estiża meta tgħaddi | Inkludi mhux obbligatorju title għal test estiż |
<address> |
Għal informazzjoni ta 'kuntatt għall-eqreb antenat tiegħu jew il-korp kollu tax-xogħol | Ippreserva l-ifformattjar billi tispiċċa l-linji kollha bi<br> |
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ċċ.
Hawn żewġ eżempji ta’ kif <address>
tista’ tintuża t-tikketta:
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 .
Element | Użu | Fakultattiv |
---|---|---|
<blockquote> |
Element ta' livell ta' blokk biex jiġi kkwotat kontenut minn sors ieħor | Żid .pull-left u .pull-right klassijiet għal għażliet floated |
<small> |
Element fakultattiv għaż-żieda ta' ċitazzjoni li tiffaċċja l-utent, tipikament awtur b'titlu tax-xogħol | Poġġi <cite> madwar it-titlu jew l-isem tas-sors |
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
<ul>
<ul class="unstyled">
<ol>
<dl>
Kebbeb snippets inline tal-kodiċi b' <code>
.
- Pereżempju , <code> taqsima </ code > għandha tkun imgeżwer bħala inline .
Uża <pre>
għal linji multipli ta 'kodiċi. Kun żgur li taħrab kwalunkwe parentesi angolari fil-kodiċi 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.
Tista' b'għażla żżid il- .pre-scrollable
klassi li tistabbilixxi għoli massimu ta' 350px u tipprovdi scrollbar tal-assi y.
Ħ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.
Tag | Deskrizzjoni |
---|---|
<table> |
Element tat-tgeżwir għall-wiri ta' data f'format tabulari |
<thead> |
Element tal-kontenitur għar-ringieli tal-header tat-tabella ( <tr> ) biex jittikkettaw il-kolonni tat-tabella |
<tbody> |
Element tal-kontenitur għar-ringieli tal-mejda ( <tr> ) fil-korp tat-tabella |
<tr> |
Element tal-kontenitur għal sett ta' ċelluli tat-tabella ( <td> jew <th> ) li jidher fuq ringiela waħda |
<td> |
Ċellula tat-tabella default |
<th> |
Ċellula speċjali tat-tabella għal tikketti tal-kolonna (jew ringiela, skont l-ambitu u t-tqegħid) Għandhom jintużaw fi ħdan <thead> |
<caption> |
Deskrizzjoni jew sommarju ta' dak li żżomm it-tabella, speċjalment utli għall-qarrejja tal-iskrin |
- <tabella>
- <thead>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </mejda>
Isem | Klassi | Deskrizzjoni |
---|---|---|
Default | Xejn | Ebda stili, kolonni u ringieli biss |
Bażiku | .table |
Linji orizzontali biss bejn ir-ringieli |
Bordurat | .table-bordered |
Dawwar il-kantunieri u żżid il-fruntiera ta 'barra |
Żebra-strixxa | .table-striped |
Iżżid kulur fl-isfond griż ċar għal ringieli fard (1, 3, 5, eċċ) |
Kondensat | .table-condensed |
Tnaqqas l-ikkuttunar vertikali bin-nofs, minn 8px sa 4px, fi ħdan l td - th elementi kollha |
It-tabelli huma awtomatikament stilati bi ftit fruntieri biss biex jiżguraw li jinqara u tinżamm l-istruttura. Bil 2.0, il- .table
klassi hija meħtieġa.
- <table class = "mejda" >
- …
- </mejda>
# | Isem | Kunjom | Lingwa |
---|---|---|---|
1 | Mark | Otto | CSS |
2 | Ġakobb | Thornton | Javascript |
3 | Stu | Dent | HTML |
Ikseb ftit fancy mat-tabelli tiegħek billi żżid zebra-striping—sempliċement żid il- .table-striped
klassi.
Nota: Tabelli strixxati jużaw is- :nth-child
selettur CSS u mhumiex disponibbli f'IE7-IE8.
- <table class = "table table-striped" >
- …
- </mejda>
# | Isem | Kunjom | Lingwa |
---|---|---|---|
1 | Mark | Otto | CSS |
2 | Ġakobb | Thornton | Javascript |
3 | Stu | Dent | HTML |
Żid fruntieri madwar il-mejda kollha u kantunieri fit-tond għal skopijiet estetiċi.
- <table class = "tabella bil-bordijiet tal-mejda" >
- …
- </mejda>
# | Isem | Kunjom | Lingwa |
---|---|---|---|
1 | Mark Otto | CSS | |
2 | Ġakobb | Thornton | Javascript |
3 | Stu | Dent | |
3 | Brosef | Stalin | HTML |
Agħmel it-tabelli tiegħek aktar kompatti billi żżid il- .table-condensed
klassi biex tnaqqas l-ikkuttunar taċ-ċelluli tal-mejda bin-nofs (minn 8px għal 4px).
- <table class = "table table-condensed" >
- …
- </mejda>
# | Isem | Kunjom | Lingwa |
---|---|---|---|
1 | Mark | Otto | CSS |
2 | Ġakobb | Thornton | Javascript |
3 | Stu | Dent | HTML |
Ħ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>
# | Isem | Kunjom | Lingwa |
---|---|---|---|
1 | Mark | Otto | CSS |
2 | Ġakobb | Thornton | Javascript |
3 | Stu | Dent | HTML |
4 | Brosef | Stalin | HTML |
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.
Bootstrap jiġi b'appoġġ għal erba 'tipi ta' layouts tal-formoli:
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.
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à.
Bootstrap jipprovdi markup sempliċi u stili għal erba 'stili ta' forom tal-web komuni.
Isem | Klassi | Deskrizzjoni |
---|---|---|
Vertikali (default) | .form-vertical (mhux meħtieġ) |
Tikketti f'munzelli, allinjati max-xellug fuq kontrolli |
F'konformità | .form-inline |
Tikketta allinjata max-xellug u kontrolli inline-block għal stil kompatt |
Fittex | .form-search |
Input ta' test extra-tond għal estetika ta' tfittxija tipika |
Orizzontali | .form-horizontal |
Float tikketti allinjati lejn ix-xellug, mal-lemin fuq l-istess linja bħall-kontrolli |
Bil-v2.0, għandna defaults eħfef u aktar intelliġenti għall-istili tal-forma. Ebda markup żejjed, kontrolli tal-formola biss.
- <form class = "tajjeb" >
- <label> Isem it-tikketta </label>
- <input type = "test" class = "span3" placeholder = "Ittajpja xi ħaġa..." >
- <span class = "help-inline" > Test ta' għajnuna assoċjat! </span>
- <label class = "checkbox" >
- <input type = "checkbox" > Iċċekkjani
- </label>
- <button type = "submit" class = "btn" > Ibgħat </button>
- </form>
Filwaqt li tirrifletti l-istili default tal-WebKit, żid biss .form-search
għal oqsma ta' tfittxija aktar fit-tond.
- <form class = "fit-tfittxija tal-forma sew" >
- <input type = "test" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > Fittex </button>
- </form>
L-inputs huma livell ta 'blokk biex jibdew. Għal .form-inline
u .form-horizontal
, nużaw inline-block.
- <form class = "well form-inline" >
- <input type = "test" class = "input-small" placeholder = "Email" >
- <input type = "password" class = "input-small" placeholder = "Password" >
- <button type = "submit" class = "btn" > Mur </button>
- </form>
Minħabba t-tqassim tal-formola eżempju ta 'hawn fuq, hawn il-markup assoċjat mal-ewwel grupp ta' input u kontroll. Il- .control-group
, .control-label
, u .controls
klassijiet huma kollha meħtieġa għall-grafika.
- <form class = "forma-orizzontali" >
- <fieldset>
- <leġġenda> Test tal-leġġenda </leġġenda>
- <div class = "grupp ta' kontroll" >
- <label class = "control-label" for = "input01" > Input tat-test </label>
- <div class = "kontrolli" >
- <input type = "test" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Test ta' għajnuna ta' appoġġ </p>
- </div>
- </div>
- </fieldset>
- </form>
Muri fuq ix-xellug huma l-kontrolli tal-formoli default kollha li nappoġġjaw. Hawn il-lista bulleted:
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.
Bootstrap karatteristiċi stili għall-browser appoġġjati ffukati u disabled
stati. Aħna neħħi l-Webkit default outline
u napplikaw a box-shadow
minfloku għal :focus
.
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>
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.
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 .inline
ma 'kwalunkwe .checkbox
jew .radio
u lest.
Biex tuża prepend jew tehmeż inputs f'forma inline, kun żgur li tpoġġi l- .add-on
u input
fuq l-istess linja, mingħajr spazji.
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.
:after
. Fid-doks, aħna nuru kulur aħmar ċar fl-isfond fuq id-daqq biex tenfasizza d-daqs tal-ikona.
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.
Bil-v2.0.1, 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.
Ikoni huma kbar, imma fejn wieħed jużahom? Hawn huma ftit ideat:
Essenzjalment, kullimkien tista 'tpoġġi <i>
tikketta, tista' tpoġġi ikona.
Użahom f'buttuni, gruppi ta 'buttuni għal toolbar, navigazzjoni, jew inputs ta' formola prepended.