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 lielumus 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.
Izceliet rindkopu, pievienojot .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
| 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">
Uzmanību! Horizontālajos aprakstu sarakstos tiks saīsināti termini, kas ir pārāk gari, lai ietilptu kreisās kolonnas labojumā text-overflow. Šaurākos skata portos tie tiks mainīti uz noklusējuma grupēto izkārtojumu.
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 |
Viedi un vieglie noklusējuma iestatījumi bez papildu uzcenojumiem.
- <form class = "labi" >
- <label> Etiķetes nosaukums </label>
- <input type = "text" class = "span3" placeholder = "Ierakstiet kaut ko..." >
- <span class = "help-block" > Šeit ir bloka līmeņa palīdzības teksta piemērs. </span>
- <label class = "izvēles rūtiņa" >
- <input type = "checkbox" > Pārbaudiet mani
- </label>
- <button type = "submit" class = "btn" > Iesniegt </button>
- </form>
Pievienojiet .form-searchveidlapai .search-queryun input.
- <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>
Pievienojiet .form-inlineveidlapas vadīklu vertikālo līdzinājumu un atstarpi, lai izsmalcinātu.
- <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>
Labajā pusē ir parādītas visas mūsu atbalstītās noklusējuma veidlapas vadīklas. Šeit ir saraksts ar aizzīmēm:
Ņ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>
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 140 klases, no kurām izvēlēties jūsu 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.