Aldone al la skafaldaro, bazaj HTML-elementoj estas stilitaj kaj plibonigitaj per etendeblaj klasoj por provizi freŝan, konsekvencan aspekton kaj senton.
La tuta tipografia krado baziĝas sur du Malpli variabloj en nia variablos.less dosiero: @baseFontSizekaj @baseLineHeight. La unua estas la baza tiparo-grandeco uzata ĉie kaj la dua estas la bazlinia alteco.
Ni uzas tiujn variablojn, kaj iom da matematiko, por krei la randojn, kompletiĝojn kaj linio-altojn de ĉiuj niaj tipoj kaj pli.
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.
Elstarigu alineon aldonante .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
| Elemento | Uzado | Laŭvola |
|---|---|---|
<strong> |
Por emfazi fragmenton de teksto kun grava | Neniu |
<em> |
Por emfazi fragmenton de teksto kun emfazo | Neniu |
<abbr> |
Envolvas mallongigojn kaj akronimojn por montri la vastigitan version surŝvegante | Inkluzivi laŭvolan .initialismklason por majusklaj mallongigoj. |
<address> |
Por kontaktinformoj por ĝia plej proksima prapatro aŭ la tuta laboro | Konservu formatadon finante ĉiujn liniojn per<br> |
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Mecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
Noto: Bonvolu uzi <b>kaj <i>en HTML5, sed ilia uzado iom ŝanĝiĝis. <b>celas reliefigi vortojn aŭ frazojn sen transdoni aldonan gravecon dum <i>estas plejparte por voĉo, teknikaj terminoj ktp.
Jen du ekzemploj pri kiel la <address>etikedo povas esti uzata:
Mallongigoj kun titleatributo havas malpezan punktan malsupran randon kaj helpkursoron sur ŝvebado. Ĉi tio donas al uzantoj kroman indikon, ke io estos montrita dum ŝvebado.
Aldonu la initialismklason al mallongigo por pliigi tipografian harmonion donante al ĝi iomete pli malgrandan tekstgrandecon.
HTML estas la plej bona afero ekde tranĉaĵigita pano.
Mallongigo de la vorto atributo estas attr .
| Elemento | Uzado | Laŭvola |
|---|---|---|
<blockquote> |
Bloknivela elemento por citi enhavon de alia fonto | Aldonu .pull-leftkaj .pull-rightklasoj por flositaj opcioj |
<small> |
Laŭvola elemento por aldoni uzantan citaĵon, tipe aŭtoro kun titolo de verko | Metu la <cite>ĉirkaŭ la titolon aŭ nomon de fonto |
Por inkluzivi blokcitaĵon, <blockquote>ĉirkaŭprenu ajnan HTML kiel la citaĵon. Por rektaj citaĵoj ni rekomendas <p>.
Enmetu laŭvolan <small>elementon por citi vian fonton kaj vi ricevos em streketon —antaŭ ĝi por stilaj celoj.
- <blokcitaĵo>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
- <small> Iu fama </small>
- </blockquote>
Defaŭltaj blokcitaĵoj estas stilitaj kiel tia:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Iu fama en Korpo de laboro
Por flosigi vian blokcitaĵon dekstren, aldonu class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Iu fama en Korpo de laboro
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Atentu! Horizontalaj priskriblistoj detranĉos terminojn kiuj estas tro longaj por konveni en la maldekstra kolumna riparo text-overflow. En pli mallarĝaj vidfenestroj, ili ŝanĝos al la defaŭlta staplita aranĝo.
Envolvu enliniajn fragmentojn de kodo per <code>.
- Ekzemple , <code> sekcio < / code > devus esti envolvita kiel enlinia .
Uzu <pre>por pluraj linioj de kodo. Nepre eskapu iujn ajn angulajn krampojn en la kodo por taŭga bildigo.
<p>Ekzempla teksto ĉi tie...</p>
- <pre>
- <p>Ekzempla teksto ĉi tie...</p>
- </pre>
Noto: Nepre konservu kodon ene de <pre>etikedoj kiel eble plej proksime maldekstre; ĝi bildigos ĉiujn langetojn.
Vi povas laŭvole aldoni la .pre-scrollableklason, kiu starigos maksimuman altecon de 350px kaj disponigos y-akson rulumbren.
Prenu la saman <pre>elementon kaj aldonu du laŭvolajn klasojn por plibonigita bildigo.
- <p> Ekzempla teksto ĉi tie... </p>
- <pre klaso = "bela presaĵo
- linenums" >
- <p>Ekzempla teksto ĉi tie...</p>
- </pre>
Elŝutu google-code-prettify kaj vidu la legu min por kiel uzi.
| Etikedo | Priskribo |
|---|---|
<table> |
Envolva elemento por montri datumojn en tabelformato |
<thead> |
Uja elemento por tabelkaplinioj ( <tr>) por etikedi tabelkolumnojn |
<tbody> |
Uja elemento por tabelvicoj ( <tr>) en la korpo de la tabelo |
<tr> |
Uja elemento por aro de tabelĉeloj ( <td>aŭ <th>) kiu aperas sur ununura vico |
<td> |
Defaŭlta tabelĉelo |
<th> |
Speciala tabelĉelo por kolumno (aŭ vico, depende de amplekso kaj lokigo) etikedoj Devas esti uzata ene de <thead> |
<caption> |
Priskribo aŭ resumo de tio, kion enhavas la tabelo, precipe utila por ekranlegantoj |
- <tablo>
- <kapo>
- <tr>
- <th> … </th>
- <th> … </th>
- </ tr >
- </thead>
- <tkorpo>
- <tr>
- <td> … </td>
- <td> … </td>
- </ tr >
- </tbody>
- </tablo>
| Nomo | Klaso | Priskribo |
|---|---|---|
| Defaŭlte | Neniu | Neniuj stiloj, nur kolumnoj kaj vicoj |
| Baza | .table |
Nur horizontalaj linioj inter vicoj |
| Bordita | .table-bordered |
Rondigas angulojn kaj aldonas eksteran randon |
| Zebro-strio | .table-striped |
Aldonas helgrizan fonkoloron al neparaj vicoj (1, 3, 5, ktp) |
| Kondensita | .table-condensed |
Duonigas vertikalan remburaĵon, de 8px ĝis 4px, ene de ĉiuj tdkaj thelementoj |
Tabeloj estas aŭtomate stilitaj kun nur kelkaj randoj por certigi legeblecon kaj konservi strukturon. Kun 2.0, la .tableklaso estas postulata.
- <table class = "tablo" >
- …
- </tablo>
| # | Antaŭnomo | Familia nomo | Uzantnomo |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jakobo | Thornton | @graso |
| 3 | Larry | la birdo |
Fariĝu iom kun viaj tabloj aldonante zebro-striadon—nur aldonu la .table-stripedklason.
Noto: Striitaj tabloj uzas la :nth-childCSS-elektilon kaj ne haveblas en IE7-IE8.
- <table class = "tabelo-striita" >
- …
- </tablo>
| # | Antaŭnomo | Familia nomo | Uzantnomo |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jakobo | Thornton | @graso |
| 3 | Larry | la birdo |
Aldonu randojn ĉirkaŭ la tuta tablo kaj rondigitajn angulojn por estetikaj celoj.
- <table class = "tabelo-bordita" >
- …
- </tablo>
| # | Antaŭnomo | Familia nomo | Uzantnomo |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @getbootstrap | |
| 2 | Jakobo | Thornton | @graso |
| 3 | Larry la Birdo | ||
Faru viajn tabelojn pli kompaktajn aldonante la .table-condensedklason por tranĉi tabelĉelplenigon en duono (de 8px ĝis 4px).
- <table class = "tabelo densigita" >
- …
- </tablo>
| # | Antaŭnomo | Familia nomo | Uzantnomo |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jakobo | Thornton | @graso |
| 3 | Larry la Birdo | ||
Bonvolu kombini iun ajn el la tabelklasoj por atingi malsamajn aspektojn uzante iun ajn el la disponeblaj klasoj.
- <table class = "tabelo-striita tablo-borda tablo-kondensita" >
- ...
- </tablo>
| Plena nomo | |||
|---|---|---|---|
| # | Antaŭnomo | Familia nomo | Uzantnomo |
| 1 | Mark | Otto | @mdo |
| 2 | Jakobo | Thornton | @graso |
| 3 | Larry la Birdo | ||
La plej bona parto pri formoj en Bootstrap estas, ke ĉiuj viaj enigaĵoj kaj kontroloj aspektas bonege, negrave kiel vi konstruas ilin en via markado. Ne necesas superflua HTML, sed ni provizas la ŝablonojn por tiuj, kiuj postulas ĝin.
Pli komplikaj aranĝoj venas kun koncizaj kaj skaleblaj klasoj por facila stilado kaj evento-ligado, do vi estas kovrita ĉe ĉiu paŝo.
Bootstrap venas kun subteno por kvar specoj de formularaj aranĝoj:
Malsamaj specoj de formularenpaĝigoj postulas kelkajn ŝanĝojn al markado, sed la kontroloj mem restas kaj kondutas same.
La formoj de Bootstrap inkluzivas stilojn por ĉiuj bazaj formularaj kontroloj kiel enigo, teksta areo kaj elekto, kiun vi atendus. Sed ĝi ankaŭ venas kun kelkaj kutimaj komponantoj kiel aldonitaj kaj antaŭmetitaj enigaĵoj kaj subteno por listoj de markobutonoj.
Ŝtatoj kiel eraro, averto kaj sukceso estas inkluzivitaj por ĉiu speco de formo-kontrolo. Ankaŭ inkluzivitaj stiloj por malebligitaj kontroloj.
Bootstrap provizas simplan markadon kaj stilojn por kvar stiloj de komunaj retformularoj.
| Nomo | Klaso | Priskribo |
|---|---|---|
| Vertikala (defaŭlte) | .form-vertical (ne bezonata) |
Stakigitaj, maldekstre vicigitaj etikedoj super kontroloj |
| En linio | .form-inline |
Maldekstre vicigitaj etikedoj kaj enlini-blokaj kontroloj por kompakta stilo |
| Serĉu | .form-search |
Eksterronda teksta enigo por tipa serĉa estetiko |
| Horizontala | .form-horizontal |
Flosu maldekstren, dekstren vicigitajn etikedojn sur la sama linio kiel kontroloj |
Inteligentaj kaj malpezaj defaŭltoj sen ekstra markado.
- <form klaso = "nu" >
- <label> Etikednomo </label>
- <input type = "text" class = "span3" placeholder = "Entajpu ion..." >
- <span class = "help-block" > Ekzemplo de bloknivela helpteksto ĉi tie. </span>
- <label class = "markbutono" >
- <input type = "markbox" > Kontrolu min
- </etikedo>
- <button type = "submit" class = "btn" > Sendi </button>
- </form>
Aldonu .form-searchal la formo kaj .search-queryal la input.
- <form class = "bone formo-serĉo" >
- <input type = "text" class = "enigo-meza serĉ-demando" >
- <button type = "submit" class = "btn" > Serĉu </button>
- </form>
Aldonu .form-inlineal fajneco la vertikalan vicigon kaj interspacon de formularaj kontroloj.
- <form class = "bone formo-enlinia" >
- <input type = "text" class = "input-small" placeholder = "Retpoŝto" >
- <input type = "pasvorto" class = "input-small" placeholder = "Pasvorto" >
- <label class = "markbutono" >
- <input type = "markbox" > Memoru min
- </etikedo>
- <button type = "submit" class = "btn" > Ensalutu </button>
- </form>
Montritaj dekstre estas ĉiuj defaŭltaj formularaj kontroloj, kiujn ni subtenas. Jen la buleta listo:
Konsiderante la supran ekzemplan formularan aranĝon, jen la markado asociita kun la unua enigo kaj kontrolgrupo. La .control-group, .control-label, kaj .controlsklasoj estas ĉiuj postulataj por stilado.
- <form class = "form-horizontala" >
- <kamparo>
- <legend> Legenda teksto </legend>
- <div class = "kontrolgrupo" >
- <label class = "control-label" for = "input01" > Enigo de teksto </label>
- <div class = "kontroloj" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Subtena helpteksto </p>
- </div>
- </div>
- </fieldset>
- </form>
Bootstrap prezentas stilojn por retumilo-subtenataj fokusitaj kaj disabledŝtatoj. Ni forigas la defaŭltan Webkit outlinekaj aplikas a box-shadowen ĝia loko por :focus.
Ĝi ankaŭ inkluzivas validajn stilojn por eraroj, avertoj kaj sukceso. Por uzi, aldonu la erarklason al la ĉirkaŭa .control-group.
- <kamparo
- klaso = "kontrolgrupo-eraro" >
- …
- </fieldset>
Enigogrupoj—kun almetita aŭ antaŭmetita teksto—provizas facilan manieron doni pli da kunteksto por viaj enigaĵoj. Grandaj ekzemploj inkluzivas la @-signon por Twitter-uzantnomoj aŭ $ por financoj.
Ĝis v1.4, Bootstrap postulis kroman markadon ĉirkaŭ markobutonoj kaj radioj por stakigi ilin. Nun, estas simpla afero ripeti la <label class="checkbox">kiu envolvas la <input type="checkbox">.
Enliniaj markobutonoj kaj radioj ankaŭ estas subtenataj. Nur aldonu .inlineal iu .checkboxaŭ .radiokaj vi finis.
Por uzi antaŭmeti aŭ aldoni enigaĵojn en enlinia formo, nepre metu la .add-onkaj inputsur la sama linio, sen spacoj.
Por aldoni helptekston por viaj formularaj enigaĵoj, inkludu enlinian helptekston kun <span class="help-inline">aŭ helpan tekstoblokon kun <p class="help-block">post la eniga elemento.
Anstataŭ fari ĉiun ikonon ekstra peto, ni kompilis ilin en sprite - amason da bildoj en unu dosiero, kiu uzas CSS por poziciigi la bildojn per background-position. Ĉi tiu estas la sama metodo, kiun ni uzas ĉe Twitter.com kaj ĝi bone funkciis por ni.
Ĉiuj ikonaj klasoj estas antaŭfiksitaj .icon-por taŭga nomspaco kaj amplekso, same kiel niaj aliaj komponantoj. Ĉi tio helpos eviti konfliktojn kun aliaj iloj.
Glyphicons donis al ni uzon de la Halflings aro en nia malfermfonta ilaro kondiĉe ke ni provizas ligilon kaj krediton ĉi tie en la dokumentoj. Bonvolu konsideri fari la samon en viaj projektoj.
Bootstrap uzas <i>etikedon por ĉiuj ikonoj, sed ili havas neniun uzklason—nur komunan prefikson. Por uzi, metu la sekvan kodon preskaŭ ie ajn:
- <i klaso = "ikono-serĉo" ></i>
Estas ankaŭ disponeblaj stiloj por renversitaj (blankaj) ikonoj, pretaj per unu ekstra klaso:
- <i klaso = "ikono-serĉa ikono-blanka" ></i>
Estas 140 klasoj por elekti por viaj ikonoj. Nur aldonu <i>etikedon kun la ĝustaj klasoj kaj vi estas preta. Vi povas trovi la plenan liston en sprites.less aŭ ĝuste ĉi tie en ĉi tiu dokumento.
Atentu! Kiam vi uzas apud tekstoĉenoj, kiel en butonoj aŭ navigaciaj ligiloj, nepre lasu spacon post la <i>etikedo por taŭga interspaco.
Ikonoj estas bonegaj, sed kie oni uzus ilin? Jen kelkaj ideoj:
Esence, ie ajn vi povas meti <i>etikedon, vi povas meti ikonon.
Uzu ilin en butonoj, butongrupoj por ilobreto, navigado aŭ antaŭmetitaj formularenigaĵoj.