Papildus sastatnēm pamata HTML elementi ir veidoti un uzlaboti ar paplašināmām klasēm, lai nodrošinātu svaigu, konsekventu izskatu un sajūtu.
Viss tipogrāfiskais režģis ir balstīts uz diviem mainīgajiem mazāk mūsu failā mainīgajiem.less: @baseFontSizeun @baseLineHeight. Pirmais ir visā izmantotais pamata fonta lielums, bet otrais ir bāzes līnijas augstums.
Mēs izmantojam šos mainīgos un daļu matemātikas, lai izveidotu visu veidu piemales, polsterējumus un līniju augstumus un citus.
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.
| Elements | Lietošana | Neobligāti |
|---|---|---|
<strong> |
Lai uzsvērtu teksta fragmentu ar svarīgu | Nav |
<em> |
Lai uzsvērtu teksta fragmentu ar stresu | Nav |
<abbr> |
Iesaiņo saīsinājumus un akronīmus, lai rādītu izvērsto versiju, novietojot kursoru |
.initialismLielo burtu saīsinājumiem izmantojiet klasi. |
<address> |
Lai iegūtu tuvākā senča kontaktinformāciju vai visu darbu | Saglabājiet formatējumu, visas rindiņas beidzot ar<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, a pharetra augue.
Piezīme. Jūtieties brīvi izmantot <b>un <i>HTML5, taču to lietojums ir nedaudz mainījies. <b>ir paredzēts, lai izceltu vārdus vai frāzes, nepiešķirot papildu nozīmi, bet <i>galvenokārt balss, tehniskie termini utt.
Šeit ir divi piemēri, kā <address>var izmantot tagu.
Saīsinājumiem ar titleatribūtu ir gaiša punktēta apakšējā apmale un palīdzības kursors, kas atrodas virs kursora. Tas lietotājiem sniedz papildu norādi, ka kaut kas tiks rādīts, virzot kursoru.
Pievienojiet initialismklasi saīsinājumam, lai palielinātu tipogrāfisko harmoniju, piešķirot tai nedaudz mazāku teksta izmēru.
HTML ir labākā lieta kopš sagrieztas maizes.
Vārda atribūts saīsinājums ir attr .
| Elements | Lietošana | Neobligāti |
|---|---|---|
<blockquote> |
Bloka līmeņa elements satura citēšanai no cita avota | Pievienojiet .pull-leftun .pull-rightklases peldošām opcijām |
<small> |
Neobligāts elements, lai pievienotu lietotājam paredzētu citātu, parasti autoru ar darba nosaukumu | Novietojiet <cite>ap virsrakstu vai avota nosaukumu |
Lai iekļautu citātu, aptiniet <blockquote>jebkuru HTML kā citātu. Tiešām pēdiņām mēs iesakām <p>.
Iekļaujiet neobligātu <small>elementu, lai norādītu savu avotu, un pirms tā tiks parādīta defise —stila nolūkos.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vesels skaitlis posuere erat a ante venenatis. </p>
- <small> Kāds slavens </small>
- </blockquote>
Noklusējuma pēdiņas tiek veidotas šādi:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vesels skaitlis posuere erat a ante venenatis.
Kāds slavens darbā Body of work
Lai pārvietotu citātu pa labi, pievienojiet class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vesels skaitlis posuere erat a ante venenatis.
Kāds slavens darbā Body of work
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Aptiniet iekļautos koda fragmentus ar <code>.
- Piemēram , sadaļai < code> sadaļa </ code > ir jāietver kā iekļauta .
Izmantojiet <pre>vairākām koda rindām. Lai nodrošinātu pareizu renderēšanu, kodā noteikti neizmantojiet leņķiekavas.
<p>Teksta paraugs šeit...</p>
- <iepriekš>
- <p>Teksta paraugs šeit...</p>
- </pre>
Piezīme. Noteikti glabājiet kodu <pre>tagos pēc iespējas tuvāk pa kreisi. tas atveidos visas cilnes.
Pēc izvēles varat pievienot .pre-scrollableklasi, kas iestatīs 350 pikseļu maksimālo augstumu un nodrošinās y ass ritjoslu.
Paņemiet to pašu <pre>elementu un pievienojiet divas izvēles klases uzlabotai renderēšanai.
- <p> Teksta paraugs šeit... </p>
- <pre class = "prettyprint
- linenums" >
- <p>Teksta paraugs šeit...</p>
- </pre>
Lejupielādējiet google-code-prettify un skatiet readme, lai uzzinātu, kā to izmantot.
| Tag | Apraksts |
|---|---|
<table> |
Iesaiņošanas elements datu attēlošanai tabulas formātā |
<thead> |
Konteinera elements tabulas galvenes rindām ( <tr>), lai apzīmētu tabulas kolonnas |
<tbody> |
Konteinera elements tabulas rindām ( <tr>) tabulas pamattekstā |
<tr> |
Konteinera elements tabulas šūnu kopai ( <td>vai <th>), kas tiek rādīta vienā rindā |
<td> |
Noklusējuma tabulas šūna |
<th> |
Īpaša tabulas šūna kolonnas (vai rindas, atkarībā no tvēruma un izvietojuma) etiķetēm Jāizmanto a <thead> |
<caption> |
Tabulas satura apraksts vai kopsavilkums, īpaši noderīgs ekrāna lasītājiem |
- <tabula>
- <thead>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| Vārds | Klase | Apraksts |
|---|---|---|
| Noklusējums | Nav | Nav stilu, tikai kolonnas un rindas |
| Pamata | .table |
Tikai horizontālas līnijas starp rindām |
| Apmales | .table-bordered |
Noapaļo stūrus un pievieno ārējo apmali |
| Zebra-svītra | .table-striped |
Pievieno gaiši pelēku fona krāsu nepāra rindām (1, 3, 5 utt.) |
| Kondensēts | .table-condensed |
Pārgriež vertikālo polsterējumu uz pusēm no 8 pikseļiem līdz 4 pikseļiem visos tdun thelementos |
Tabulas tiek automātiski veidotas tikai ar dažām apmalēm, lai nodrošinātu lasāmību un saglabātu struktūru. Ar 2.0 .tableklase ir nepieciešama.
- <tabula klase = "tabula" >
- …
- </table>
| # | Vārds | Uzvārds | Lietotājvārds |
|---|---|---|---|
| 1 | Atzīmēt | Otto | @mdo |
| 2 | Jēkabs | Torntons | @resns |
| 3 | Lerijs | putns |
Izbaudiet savus galdus, pievienojot zebras joslas — vienkārši pievienojiet .table-stripedklasi.
Piezīme. Svītrainām tabulām tiek izmantots :nth-childCSS atlasītājs, un tas nav pieejams IE7-IE8.
- <table class = "tabula svītraina" >
- …
- </table>
| # | Vārds | Uzvārds | Lietotājvārds |
|---|---|---|---|
| 1 | Atzīmēt | Otto | @mdo |
| 2 | Jēkabs | Torntons | @resns |
| 3 | Lerijs | putns |
Estētikas nolūkos pievienojiet apmales ap visu galdu un noapaļotus stūrus.
- <table class = "tabula ar tabulas robežām" >
- …
- </table>
| # | Vārds | Uzvārds | Lietotājvārds |
|---|---|---|---|
| 1 | Atzīmēt | Otto | @mdo |
| Atzīmēt | Otto | @getbootstrap | |
| 2 | Jēkabs | Torntons | @resns |
| 3 | Lerijs Putns | ||
Padariet tabulas kompaktākas, pievienojot .table-condensedklasi, lai tabulas šūnu polsterējumu samazinātu uz pusēm (no 8 pikseļiem līdz 4 pikseļiem).
- <table class = "tabula saīsināta tabula" >
- …
- </table>
| # | Vārds | Uzvārds | Lietotājvārds |
|---|---|---|---|
| 1 | Atzīmēt | Otto | @mdo |
| 2 | Jēkabs | Torntons | @resns |
| 3 | Lerijs Putns | ||
Jūtieties brīvi apvienot jebkuru no tabulas klasēm, lai iegūtu atšķirīgu izskatu, izmantojot jebkuru no pieejamajām klasēm.
- <table class = "tabula-svītrota tabula-bordered table-condensed" >
- ...
- </table>
| Pilnais vārds | |||
|---|---|---|---|
| # | Vārds | Uzvārds | Lietotājvārds |
| 1 | Atzīmēt | Otto | @mdo |
| 2 | Jēkabs | Torntons | @resns |
| 3 | Lerijs Putns | ||
Labākā daļa no Bootstrap veidlapām ir tā, ka visas jūsu ievades un vadīklas izskatās lieliski neatkarīgi no tā, kā tās veidojat savā iezīmēšanā. Nav nepieciešams lieks HTML, taču mēs nodrošinām modeļus tiem, kam tas nepieciešams.
Sarežģītākos izkārtojumos ir iekļautas kodolīgas un mērogojamas klases, kas nodrošina vieglu stilu un notikumu iesiešanu, lai jūs būtu nodrošināts ik uz soļa.
Bootstrap nodrošina četru veidu veidlapu izkārtojumu atbalstu:
Dažādu veidu veidlapu izkārtojumiem ir nepieciešamas dažas izmaiņas iezīmēšanā, taču pašas vadīklas paliek un darbojas tāpat.
Bootstrap veidlapas ietver stilus visām pamata veidlapu vadīklām, piemēram, ievadei, teksta apgabalam un atlasei. Bet tajā ir arī vairāki pielāgoti komponenti, piemēram, pievienotas un pievienotas ievades, kā arī izvēles rūtiņu sarakstu atbalsts.
Katram veidlapas vadīkla veidam ir iekļauti tādi stāvokļi kā kļūda, brīdinājums un panākumi. Iekļauti arī stili invalīdām vadīklām.
Bootstrap nodrošina vienkāršu iezīmēšanu un stilus četriem izplatītāko tīmekļa formu stiliem.
| Vārds | Klase | Apraksts |
|---|---|---|
| Vertikāls (noklusējums) | .form-vertical (nav nepieciešams) |
Sakrautas, pa kreisi līdzinātas etiķetes virs vadīklām |
| Rindā | .form-inline |
Pa kreisi līdzinātas etiķetes un iekļautas bloka vadīklas kompaktam stilam |
| Meklēt | .form-search |
Īpaši noapaļota teksta ievade tipiskai meklēšanas estētikai |
| Horizontāli | .form-horizontal |
Peldiet pa kreisi, pa labi līdzinātās etiķetes vienā rindā ar vadīklām |
Izmantojot v2.0, mums ir vieglāki un viedāki veidlapu stilu noklusējuma iestatījumi. Bez papildu marķējuma, tikai veidlapas vadīklas.
- <form class = "labi" >
- <label> Etiķetes nosaukums </label>
- <input type = "text" class = "span3" placeholder = "Ierakstiet kaut ko..." >
- <span class = "help-inline" > Saistītais palīdzības teksts! </span>
- <label class = "izvēles rūtiņa" >
- <input type = "checkbox" > Pārbaudiet mani
- </label>
- <button type = "submit" class = "btn" > Iesniegt </button>
- </form>
Atspoguļojot noklusējuma WebKit stilus, vienkārši pievienojiet .form-search, lai meklēšanas lauki būtu īpaši noapaļoti.
- <form class = "akas formas meklēšana" >
- <input type = "text" class = "ievades vides meklēšanas vaicājums" >
- <button type = "submit" class = "btn" > Meklēt </button>
- </form>
Ieejas ir bloka līmenī, lai sāktu. For .form-inlineun .form-horizontal, mēs izmantojam inline-block.
- <form class = "aka forma-inline" >
- <input type = "text" class = "input-small" placeholder = "E-pasts" >
- <input type = "password" class = "input-small" placeholder = "Parole" >
- <label class = "izvēles rūtiņa" >
- <input type = "checkbox" > Atcerēties mani
- </label>
- <button type = "submit" class = "btn" > Pierakstīties </button>
- </form>
Ņemot vērā iepriekš minēto veidlapas izkārtojuma piemēru, šeit ir marķējums, kas saistīts ar pirmo ievades un vadības grupu. Veidošanai ir nepieciešamas visas klases .control-group, .control-label, un ..controls
- <form class = "form-horizontal" >
- <fieldset>
- <legend> Leģendas teksts </legend>
- <div class = "kontrolgrupa" >
- <label class = "control-label" for = "input01" > Teksta ievade </label>
- <div class = "vadības ierīces" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Atbalsta palīdzības teksts </p>
- </div>
- </div>
- </fieldset>
- </form>
Kreisajā pusē ir parādītas visas mūsu atbalstītās noklusējuma veidlapas vadīklas. Šeit ir saraksts ar aizzīmēm:
Līdz pat v1.4 Bootstrap noklusējuma veidlapu stili izmantoja horizontālo izkārtojumu. Izmantojot Bootstrap 2, mēs noņēmām šo ierobežojumu, lai jebkurai veidlapai būtu viedāki, mērogojamāki noklusējuma iestatījumi.
Bootstrap piedāvā stilus pārlūkprogrammas atbalstītajiem fokusētajiem un disabledstāvokļiem. Mēs noņemam noklusējuma Webkit outlineun box-shadowtā vietā lietojam a :focus.
Tas ietver arī kļūdu, brīdinājumu un panākumu validācijas stilus. Lai izmantotu, pievienojiet kļūdas klasi apkārtējai .control-group.
- <fieldset
- class = "kontrolgrupas kļūda" >
- …
- </fieldset>
Ievades grupas — ar pievienotu vai priekšā pievienotu tekstu — nodrošina vienkāršu veidu, kā ievadīt ievadei plašāku kontekstu. Lieliski piemēri ir @ zīme Twitter lietotājvārdiem vai $ finansēm.
Līdz pat versijai 1.4, Bootstrap bija nepieciešams papildu marķējums ap izvēles rūtiņām un radio, lai tās sakārtotu. Tagad ir vienkārši atkārtot to <label class="checkbox">, kas ieskauj <input type="checkbox">.
Tiek atbalstītas arī iekļautās izvēles rūtiņas un radio. Vienkārši pievienojiet .inlinejebkuram .checkboxvai .radioun esat pabeidzis.
Lai izmantotu ievades ievades vai pievienošanas ievadi iekļautā formā, noteikti ievietojiet .add-onun inputtajā pašā rindā, bez atstarpēm.
Lai pievienotu palīdzības tekstu veidlapas ievadei, iekļaujiet iekļauto palīdzības tekstu ar ievades elementu <span class="help-inline">vai palīdzības teksta bloku ar to.<p class="help-block">
Tā vietā, lai katru ikonu padarītu par papildu pieprasījumu, mēs esam tās apkopojuši spraitā — attēlu kopumā vienā failā, kas izmanto CSS, lai attēlus novietotu ar background-position. Šī ir tā pati metode, ko mēs izmantojam vietnē Twitter.com, un tā mums ir labi palīdzējusi.
Visām ikonu klasēm ir pievienots prefikss, .icon-lai nodrošinātu pareizu nosaukumu atstarpes un darbības jomu, līdzīgi kā citiem mūsu komponentiem. Tas palīdzēs izvairīties no konfliktiem ar citiem rīkiem.
Glyphicons ir atļāvis mums izmantot mūsu atvērtā koda rīkkopā esošo Halflings komplektu, ja vien mēs nodrošinām saiti un kredītu šeit, dokumentos. Lūdzu, apsveriet iespēju darīt to pašu savos projektos.
Bootstrap visām ikonām izmanto <i>tagu, taču tām nav reģistra klases — tikai koplietots prefikss. Lai izmantotu, ievietojiet šo kodu gandrīz jebkurā vietā:
- <i class = "icon-search" ></i>
Ir pieejami arī stili apgrieztām (baltām) ikonām, kas sagatavotas ar vienu papildu klasi:
- <i class = "icon-search icon-white" ></i>
Ir pieejamas 120 klases, no kurām izvēlēties ikonas. Vienkārši pievienojiet <i>tagu ar pareizajām klasēm, un esat gatavs. Pilnu sarakstu varat atrast vietnē sprites.less vai šeit, šajā dokumentā.
Uzmanību! Ja izmantojat blakus teksta virknēm, piemēram, pogām vai navigācijas saitēm, noteikti atstājiet atstarpi aiz <i>taga, lai nodrošinātu pareizu atstarpi.
Ikonas ir lieliskas, bet kur tās izmantot? Šeit ir dažas idejas:
Būtībā visur, kur varat ievietot <i>atzīmi, varat ievietot ikonu.
Izmantojiet tos pogās, pogu grupās rīkjoslai, navigācijai vai pievienotās veidlapas ievadei.