Bootstrap

Pamata CSS

Pamata HTML elementi veidoti un uzlaboti ar paplašināmām klasēm.

Tipogrāfija

Virsraksti

<h1>Ir pieejami visi HTML virsraksti <h6>.

h1. 1. virsraksts

h2. 2. virsraksts

h3. 3. virsraksts

h4. 4. virsraksts

h5. 5. virsraksts
h6. 6. virsraksts

Ķermeņa kopija

Bootstrap globālais noklusējuma izmērs font-sizeir 14 pikseļi un line-height20 pikseļi . Tas attiecas uz <body>un visām rindkopām. Turklāt <p>(rindkopas) saņem apakšējo piemali pusi no līnijas augstuma (pēc noklusējuma 10 pikseļi).

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.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida un eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Galvenā pamatteksta kopija

Izceliet rindkopu, pievienojot .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class = "svins" > ... </p>

Būvēts ar mazāk

Tipogrāfiskās skalas pamatā ir divi MAZĀK mainīgie mainīgajos.mazāk : @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 vienkāršu matemātiku, lai izveidotu visu veidu piemales, polsterējumus un līniju augstumus un daudz ko citu. Pielāgojiet tos, un Bootstrap pielāgojas.

Uzsvars

Izmantojiet HTML noklusējuma uzsvara tagus ar vieglajiem stiliem.

<small>

Lai samazinātu teksta vai teksta bloku uzsvaru, izmantojiet mazo tagu.

Šī teksta rindiņa ir jāuzskata par sīku druku.

<p> <small> Šī teksta rindiņa ir paredzēta, lai to uzskatītu par sīku druku. </small> </p>

Treknrakstā

Lai uzsvērtu teksta fragmentu ar lielāku fonta svaru.

Šis teksta fragments tiek atveidots kā treknraksts .

<strong> atveidots treknrakstā </strong>

Slīpraksts

Lai uzsvērtu teksta fragmentu ar slīprakstu.

Šis teksta fragments tiek atveidots kā teksts slīprakstā .

<em> atveidots kā teksts slīprakstā </em>

Uzmanību!Jūtieties brīvi izmantot <b>un <i>HTML5. <b>ir paredzēts, lai izceltu vārdus vai frāzes, nepiešķirot papildu nozīmi, bet <i>galvenokārt balss, tehniskie termini utt.

Izlīdzināšanas nodarbības

Viegli pielāgojiet tekstu komponentiem, izmantojot teksta līdzināšanas klases.

Teksts līdzināts pa kreisi.

Centrā līdzināts teksts.

Pa labi līdzināts teksts.

  1. <p class = "text-left" > Teksts līdzināts pa kreisi. </p> 
  2. <p class = "text-center" > Centrā līdzinātais teksts. </p> 
  3. <p class = "text-right" > Pa labi līdzināts teksts. </p>

Uzsvaru nodarbības

Norādiet nozīmi, izmantojot krāsas, izmantojot dažas uzsvara lietderības klases.

Fusce dapibus, tellus ac cursus commodo, tortor Mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

  1. <p class = "klusināts" > Fusce dapibus, tellus ac cursus commodo, tortor Mauris nibh. </p> 
  2. <p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
  5. <p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Saīsinājumi

Stilizēta HTML <abbr>elementa ieviešana saīsinājumiem un akronīmiem, lai parādītu izvērsto versiju, novietojot kursoru. Saīsinājumiem ar titleatribūtu ir gaiša punktēta apakšējā apmale un palīdzības kursors, novietojot kursoru, nodrošinot papildu kontekstu, virzot kursoru.

<abbr>

Lai izvērstu tekstu, turot kursoru uz saīsinājuma, iekļaujiet titleatribūtu.

Vārda atribūts saīsinājums ir attr .

<abbr title = "attribute" > attr </abbr>

<abbr class="initialism">

Pievienojiet .initialismsaīsinājumam nedaudz mazākam fonta izmēram.

HTML ir labākā lieta kopš sagrieztas maizes.

<abbr title = "Hiperteksta iezīmēšanas valoda" class = "inicialisms" > HTML </abbr>

Adreses

Norādiet tuvākā senča kontaktinformāciju vai visu darbu.

<address>

Saglabājiet formatējumu, visas rindiņas beidzot ar <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Pilns vārds
[email protected] 
  1. <adrese>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 Folsom Ave, Suite 600 <br>
  4.   Sanfrancisko, CA 94107 <br>
  5.   <abbr title = "Tālrunis" > P: </abbr> (123) 456-7890 
  6. </address>
  7.  
  8. <adrese>
  9.   <strong> Pilns vārds </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </address>

Bloķēt citātus

Satura bloku citēšanai no cita dokumenta avota.

Noklusējuma citāts

Aptiniet <blockquote>jebkuru HTML kā citātu. Tiešām pēdiņām mēs iesakām <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vesels skaitlis posuere erat a ante.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vesels skaitlis posuere erat a ante. </p>
  3. </blockquote>

Blockquote opcijas

Stilu un satura izmaiņas vienkāršai standarta bloka citāta variācijai.

Avota nosaukšana

Pievienojiet <small>tagu avota identificēšanai. Aptiniet avota darba nosaukumu <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vesels skaitlis posuere erat a ante.

Kāds slavens avota nosaukumā 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vesels skaitlis posuere erat a ante. </p>
  3.   <small> Kāds slavens <cite title = "Avota nosaukums" > Avota nosaukums </cite></small> 
  4. </blockquote>

Alternatīvi displeji

Izmantojiet .pull-rightpeldošam, pa labi līdzinātam bloka citātam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vesels skaitlis posuere erat a ante.

Kāds slavens avota nosaukumā 
  1. <blockquote class = "velk pa labi" > 
  2.   ...
  3. </blockquote>

Saraksti

Nesakārtots

To vienumu saraksts, kuru secībai nav nepārprotamas nozīmes.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem un massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat plkst
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Pasūtīts

To vienumu saraksts, kuru secībai ir nepārprotama nozīme.

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

Bez stila

Noņemiet noklusējuma list-styleun kreiso polsterējumu saraksta vienumiem (tikai tiešajiem bērniem).

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem un massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat plkst
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul class = "nestīlēts" > 
  2.   <li> ... </li>
  3. </ul>

Rindā

Novietojiet visus saraksta vienumus vienā rindā ar inline-blocknelielu polsterējumu.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
  1. <ul class = "iekļauts" > 
  2.   <li> ... </li>
  3. </ul>

Apraksts

Terminu saraksts ar tiem saistītajiem aprakstiem.

Aprakstu saraksti
Aprakstu saraksts ir lieliski piemērots terminu definēšanai.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida un eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Horizontālais apraksts

Sarindojiet terminus un aprakstus <dl>blakus.

Aprakstu saraksti
Aprakstu saraksts ir lieliski piemērots terminu definēšanai.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida un eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
  1. <dl class = "dl-horizontal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

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.

Kods

Rindā

Aptiniet iekļautos koda fragmentus ar <code>.

Piemēram, <section>jāiesaiņo kā iekļauts. 
  1. Piemēram , <kods > & lt ; sadaļa & gt ;</ code > ir jāiekļauj kā iekļauts .

Pamata bloks

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>
  1. <iepriekš>
  2.   <p>Teksta paraugs šeit...</p>
  3. </pre>

Uzmanību!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.

Tabulas

Noklusējuma stili

Pamata stilam — viegls polsterējums un tikai horizontāli sadalītāji — pievienojiet bāzes klasi .tablejebkuram <table>.

# Vārds Uzvārds Lietotājvārds
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs putns @twitter 
  1. <tabula klase = "tabula" > 
  2.   …
  3. </table>

Izvēles nodarbības

.tablePievienojiet bāzes klasei jebkuru no tālāk norādītajām klasēm .

.table-striped

Pievieno zebras svītras jebkurai tabulas rindai, <tbody>izmantojot :nth-childCSS atlasītāju (nav pieejams IE7-8).

# Vārds Uzvārds Lietotājvārds
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs putns @twitter 
  1. <table class = "tabula svītraina" > 
  2.   …
  3. </table>

.table-bordered

Pievienojiet galdam apmales un noapaļotus stūrus.

# 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 @twitter 
  1. <table class = "tabula ar tabulas robežām" > 
  2.   …
  3. </table>

.table-hover

Iespējot kursora novietošanas stāvokli tabulas rindās <tbody>.

# Vārds Uzvārds Lietotājvārds
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs Putns @twitter 
  1. <table class = "table table-hover" > 
  2.   …
  3. </table>

.table-condensed

Padara galdus kompaktākus, pārgriežot šūnu polsterējumu uz pusēm.

# Vārds Uzvārds Lietotājvārds
1 Atzīmēt Otto @mdo
2 Jēkabs Torntons @resns
3 Lerijs Putns @twitter 
  1. <table class = "tabula saīsināta tabula" > 
  2.   …
  3. </table>

Izvēles rindu klases

Izmantojiet kontekstuālās klases, lai krāsotu tabulas rindas.

Klase Apraksts
.success Norāda uz veiksmīgu vai pozitīvu darbību.
.error Norāda uz bīstamu vai potenciāli negatīvu darbību.
.warning Norāda brīdinājumu, kam var būt nepieciešama uzmanība.
.info Izmanto kā alternatīvu noklusējuma stiliem.
# Produkts Maksājums pieņemts Statuss
1 TB — katru mēnesi 01/04/2012 Apstiprināts
2 TB — katru mēnesi 02/04/2012 Noraidīts
3 TB — katru mēnesi 03/04/2012 Gaida
4 TB — katru mēnesi 04/04/2012 Zvaniet, lai apstiprinātu 
  1. ...
  2.   < tr class = "veiksmi" >
  3.     <td> 1 < /td>
  4.     <td>TB — katru mēnesi</ td >
  5.     < td > 01/04/2012 < / td >
  6.     <td>Apstiprināts</ td >
  7.   </ tr >
  8. ...

Atbalstīta tabulas iezīmēšana

Atbalstīto tabulas HTML elementu saraksts un to izmantošana.

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 kolonnu (vai rindu, atkarībā no tvēruma un izvietojuma) etiķetēm
<caption> Tabulas satura apraksts vai kopsavilkums, īpaši noderīgs ekrāna lasītājiem 
  1. <tabula>
  2.   <caption> ... </caption>
  3.   <thead>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </thead>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </table>

Veidlapas

Noklusējuma stili

Atsevišķas veidlapas vadīklas saņem stilu, bet bez obligātās bāzes klases uz <form>marķējuma vai lielām izmaiņām. Rezultātā tiek sakrautas, pa kreisi līdzinātas etiķetes virs veidlapas vadīklām.

Leģenda Šeit ir bloka līmeņa palīdzības teksta piemērs. 
  1. <form>
  2.   <fieldset>
  3.     <legend> Leģenda </legend>
  4.     <label> Etiķetes nosaukums </label>
  5.     <input type = "text" placeholder = "Ierakstiet kaut ko..." >  
  6.     <span class = "help-block" > Šeit ir bloka līmeņa palīdzības teksta piemērs. </span> 
  7.     <label class = "izvēles rūtiņa" > 
  8.       <input type = "checkbox" > Pārbaudiet mani 
  9.     </label>
  10.     <button type = "submit" class = "btn" > Iesniegt </button>  
  11.   </fieldset>
  12. </form>

Izvēles izkārtojumi

Kopā Bootstrap ir iekļauti trīs izvēles veidlapu izkārtojumi bieži lietojamiem gadījumiem.

Meklēšanas forma

Pievienojiet .form-searchveidlapai un .search-query, lai <input>iegūtu īpaši noapaļotu teksta ievadi.

  1. <form class = "form-search" > 
  2.   <input type = "text" class = "ievades vides meklēšanas vaicājums" >  
  3.   <button type = "submit" class = "btn" > Meklēt </button>  
  4. </form>

Iekļautā forma

Pievienot .form-inlinepa kreisi līdzinātām etiķetēm un iekļautas bloka vadīklas kompaktam izkārtojumam.

  1. <form class = "form-inline" > 
  2.   <input type = "text" class = "input-small" placeholder = "E-pasts" >   
  3.   <input type = "password" class = "input-small" placeholder = "Parole" >   
  4.   <label class = "izvēles rūtiņa" > 
  5.     <input type = "checkbox" > Atcerēties mani 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Pierakstīties </button>  
  8. </form>

Horizontālā forma

Izlīdziniet etiķetes pa labi un peldiet tās pa kreisi, lai tās tiktu rādītas tajā pašā rindā ar vadīklām. Nepieciešama lielākā daļa iezīmēšanas izmaiņu no noklusējuma veidlapas:

  • Pievienot .form-horizontalveidlapai
  • Aptiniet etiķetes un vadīklas.control-group
  • Pievienojiet .control-labeletiķetei
  • Aptiniet visas saistītās vadības ierīces .controlspareizai izlīdzināšanai
  1. <form class = "form-horizontal" > 
  2.   <div class = "kontrolgrupa" > 
  3.     <label class = "control-label" for = "inputEmail" > E-pasts </label>  
  4.     <div class = "vadības ierīces" > 
  5.       <input type = "text" id = "inputEmail" placeholder = "E-pasts" >   
  6.     </div>
  7.   </div>
  8.   <div class = "kontrolgrupa" > 
  9.     <label class = "control-label" for = "inputPassword" > Parole </label>  
  10.     <div class = "vadības ierīces" > 
  11.       <input type = "password" id = "inputPassword" placeholder = "Parole" >   
  12.     </div>
  13.   </div>
  14.   <div class = "kontrolgrupa" > 
  15.     <div class = "vadības ierīces" > 
  16.       <label class = "izvēles rūtiņa" > 
  17.         <input type = "checkbox" > Atcerēties mani 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Pierakstīties </button>  
  20.     </div>
  21.   </div>
  22. </form>

Atbalstītās veidlapas vadīklas

Standarta veidlapas vadīklu piemēri, kas tiek atbalstīti veidlapas izkārtojuma piemērā.

Ievades

Visizplatītākā veidlapas vadība, teksta ievades lauki. Ietver atbalstu visiem HTML5 veidiem: teksts, parole, datums, laiks, vietējais datums un laiks, datums, mēnesis, laiks, nedēļa, numurs, e-pasts, URL, meklēšana, tālrunis un krāsa.

Nepieciešams izmantot norādīto typevisu laiku.

  1. <input type = "text" placeholder = "Teksta ievade" >

Teksta apgabals

Veidlapas vadīkla, kas atbalsta vairākas teksta rindiņas. Ja nepieciešams, mainiet rowsatribūtu.

  1. <textarea rows = "3" ></textarea>

Izvēles rūtiņas un radio

Izvēles rūtiņas ir paredzētas vienas vai vairāku opciju atlasīšanai sarakstā, savukārt radio ir paredzētas vienas opcijas atlasei no daudzām.

Noklusējums (stacked)


  1. <label class = "izvēles rūtiņa" > 
  2.   <input type = "checkbox" value = "" >  
  3.   Pirmais variants ir tas un tas — noteikti norādiet, kāpēc tas ir lieliski
  4. </label>
  5.  
  6. <label class = "radio" > 
  7.   <ievades veids = "radio" name = "optionsRadios" id = "optionsRadios1" value = "opcija1" atzīmēta >     
  8.   Pirmais variants ir tas un tas — noteikti norādiet, kāpēc tas ir lieliski
  9. </label>
  10. <label class = "radio" > 
  11.   <ievades veids = "radio" name = "optionsRadios" id = "optionsRadios2" value = "opcija2" >    
  12.   Otrā iespēja var būt kaut kas cits, un, to atlasot, tiks noņemta pirmā opcija
  13. </label>

Iekļautās izvēles rūtiņas

Pievienojiet .inlineklasi virknei izvēles rūtiņu vai radio, lai vadīklas parādās tajā pašā rindā.

  1. <label class = "iekļauts izvēles rūtiņa" > 
  2.   <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
  3. </label>
  4. <label class = "iekļauts izvēles rūtiņa" > 
  5.   <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
  6. </label>
  7. <label class = "iekļauts izvēles rūtiņa" > 
  8.   <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
  9. </label>

Atlasa

Izmantojiet noklusējuma opciju vai norādiet a multiple="multiple", lai vienlaikus parādītu vairākas opcijas.


  1. <izvēlēties>
  2.   <option> 1 </option>
  3.   <option> 2 </option>
  4.   <option> 3 </option>
  5.   <option> 4 </option>
  6.   <option> 5 </option>
  7. </select>
  8.  
  9. <izvēlēties vairākus = "vairāki" > 
  10.   <option> 1 </option>
  11.   <option> 2 </option>
  12.   <option> 3 </option>
  13.   <option> 4 </option>
  14.   <option> 5 </option>
  15. </select>

Veidlapu vadīklu paplašināšana

Papildus esošajām pārlūkprogrammas vadīklām Bootstrap ietver citus noderīgus veidlapas komponentus.

Iepriekš pievienotās un pievienotās ievades

Pievienojiet tekstu vai pogas pirms vai pēc jebkuras teksta ievades. Ņemiet vērā, ka selectelementi šeit netiek atbalstīti.

Noklusējuma opcijas

Aptiniet .add-onun inputar vienu no divām klasēm, lai ievadei pievienotu tekstu.

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "papildinājums" > @ </span> 
  3.   <input class = "span2" id = "prependedInput" type = "text" placeholder = "Lietotājvārds" >    
  4. </div>
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "appendedInput " type = "teksts" >   
  7.   <span class = "papildinājums" > .00 </span> 
  8. </div>

Kombinēts

Izmantojiet abas klases un divus gadījumus, .add-onlai pievienotu ievadi un pievienotu to.

$ .00 
  1. <div class = "input-prepend input-append" > 
  2.   <span class = "papildinājums" > $ </span> 
  3.   <input class = "span2" id = "appendedPrependedInput " type = "text" >   
  4.   <span class = "papildinājums" > .00 </span> 
  5. </div>

Pogas teksta vietā

Ar tekstu vietā <span>izmantojiet a, .btnlai pievienotu pogu (vai divas) ievadei.

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton " type = "text" >   
  3.   <button class = "btn" type = "button" > Aiziet! </button>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons " type = "text" >   
  3.   <button class = "btn" type = "button" > Meklēt </button>  
  4.   <button class = "btn" type = "button" > Opcijas </button>  
  5. </div>

Pogu nolaižamās izvēlnes

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  3.   <div class = "btn-group" > 
  4.     <button class = "btn dropdown-toggle" data-toggle = "nolaižamā izvēlne" >  
  5.       Darbība
  6.       <span class = "caret" ></span> 
  7.     </button>
  8.     <ul class = "nolaižamā izvēlne" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "input-prepend" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "nolaižamā izvēlne" >  
  4.       Darbība
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "nolaižamā izvēlne" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "prependedDropdownButton" type = "text" >   
  12. </div>
  1. <div class = "input-prepend input-append" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "nolaižamā izvēlne" >  
  4.       Darbība
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "nolaižamā izvēlne" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "appendedPrependedDropdownButton " type = "text" >   
  12.   <div class = "btn-group" > 
  13.     <button class = "btn dropdown-toggle" data-toggle = "nolaižamā izvēlne" >  
  14.       Darbība
  15.       <span class = "caret" ></span> 
  16.     </button>
  17.     <ul class = "nolaižamā izvēlne" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Segmentētas nolaižamās grupas

  1. <form>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     <ievades veids = "teksts" > 
  5.   </div>
  6.   <div class = "input-append" > 
  7.     <ievades veids = "teksts" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

Meklēšanas forma

  1. <form class = "form-search" > 
  2.   <div class = "input-append" > 
  3.     <input type = "text" class = "span2 meklēšanas vaicājums" >  
  4.     <button type = "submit" class = "btn" > Meklēt </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > Meklēt </button>  
  8.     <input type = "text" class = "span2 meklēšanas vaicājums" >  
  9.   </div>
  10. </form>

Kontrolējiet izmērus

Izmantojiet relatīvās lieluma klases, piemēram, .input-largevai saskaņojiet ievadītos datus ar režģa kolonnu izmēriem, izmantojot .span*klases.

Bloka līmeņa ieejas

Lieciet jebkuram <input>vai <textarea>elementam darboties kā bloka līmeņa elementam.

  1. <input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

Relatīvais lielums

  1. <input class = "input-mini" type = "text" placeholder = ".input-mini" >   
  2. <input class = "input-small" type = "text" placeholder = ".input-small" >   
  3. <input class = "input-medium" type = "text" placeholder = ".input-medium" >   
  4. <input class = "input-large" type = "text" placeholder = ".input-large" >   
  5. <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
  6. <input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

Uzmanību!Nākamajās versijās mēs mainīsim šo relatīvo ievades klašu izmantošanu, lai tās atbilstu mūsu pogu izmēriem. Piemēram, .input-largepalielinās ievades polsterējums un fonta lielums.

Režģa izmēra noteikšana

Izmantojiet .span1to .span12ievadei, kas atbilst vienāda izmēra režģa kolonnām.

  1. <input class = "span1" type = "text" vietturis = ".span1" >   
  2. <input class = "span2" type = "text" vietturis = ".span2" >   
  3. <input class = "span3" type = "text" vietturis = ".span3" >   
  4. <izvēlieties klasi = "span1" > 
  5.   ...
  6. </select>
  7. <izvēlieties klasi = "span2" > 
  8.   ...
  9. </select>
  10. <izvēlieties klasi = "span3" > 
  11.   ...
  12. </select>

Ja vienā rindā ievadāt vairākas režģa ievades, izmantojiet .controls-rowmodifikatoru klasi pareizai atstarpei . Tas peld ievades datus, lai sakļautu atstarpi, iestata pareizās piemales un notīra pludiņu.

  1. <div class = "vadības ierīces" > 
  2.   <input class = "span5" type = "text" vietturis = ".span5" >   
  3. </div>
  4. <div class = "controls controls-row" > 
  5.   <input class = "span4" type = "text" vietturis = ".span4" >   
  6.   <input class = "span1" type = "text" vietturis = ".span1" >   
  7. </div>
  8. ...

Nerediģējami ievadi

Prezentējiet datus formā, kuru nevar rediģēt, neizmantojot faktisko veidlapas marķējumu.

Šeit ir kāda vērtība 
  1. <span class = "input-xlarge uneditable-input" > Šeit ir kāda vērtība </span>

Veidlapas darbības

Pabeidziet veidlapu ar darbību grupu (pogām). Ja tās ir ievietotas .form-actionssadaļā , pogas tiek automātiski ievilktas, lai tās atbilstu veidlapas vadīklām.

  1. <div class = "form-actions" > 
  2.   <button type = "submit" class = "btn btn-primary" > Saglabāt izmaiņas </button>  
  3.   <button type = "button" class = "btn" > Atcelt </button>  
  4. </div>

Palīdzības teksts

Iekļauts un bloka līmeņa atbalsts palīdzības tekstam, kas parādās ap veidlapas vadīklām.

Iekļautā palīdzība

Iekļauts palīdzības teksts 
  1. <input type = "text" ><span class = "help-inline" > Iekļauts palīdzības teksts </span>

Bloķēt palīdzību

Garāks palīdzības teksta bloks, kas pāriet uz jaunu rindiņu un var pārsniegt vienu rindiņu. 
  1. <input type = "text" ><span class = "help-block" > Garāks palīdzības teksta bloks, kas pāriet uz jaunu rindiņu un var pārsniegt vienu rindiņu. </span>

Veidlapu kontroles stāvokļi

Sniedziet atsauksmes lietotājiem vai apmeklētājiem, izmantojot pamata atsauksmes par veidlapu vadīklām un etiķetēm.

Ievades fokuss

Mēs noņemam noklusējuma outlinestilus no dažām veidlapas vadīklām un lietojam box-shadowto vietā :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Tas ir fokusēts..." >

Nederīgas ievades

Stila ievades, izmantojot noklusējuma pārlūkprogrammas funkcionalitāti, izmantojot :invalid. Norādiet type, pievienojiet requiredatribūtu, ja lauks nav obligāts, un (ja piemērojams) norādiet a pattern.

Tas nav pieejams Internet Explorer 7–9 versijās, jo netiek atbalstīti CSS pseido atlasītāji.

  1. <input class = "span3" type = nepieciešams "e-pasts" >

Atspējotas ievades

Pievienojiet disabledievadei atribūtu, lai novērstu lietotāja ievadi un aktivizētu nedaudz atšķirīgu izskatu.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Ievade šeit ir atspējota..." atspējota >

Validācijas stāvokļi

Bootstrap ietver kļūdu, brīdinājumu, informācijas un veiksmes ziņojumu validācijas stilus. Lai izmantotu, pievienojiet atbilstošo klasi apkārtējai .control-group.

Iespējams, kaut kas ir nogājis greizi
Lūdzu, izlabojiet kļūdu
Lietotājvārds ir aizņemts
Woohoo! 
  1. <div class = "kontrolgrupas brīdinājums" > 
  2.   <label class = "control-label" for = "inputWarning" > Ievade ar brīdinājumu </label>  
  3.   <div class = "vadības ierīces" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Iespējams, radās kļūda </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "kontrolgrupas kļūda" > 
  10.   <label class = "control-label" for = "inputError" > Ievade ar kļūdu </label>  
  11.   <div class = "vadības ierīces" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Lūdzu, izlabojiet kļūdu </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "kontrolgrupas informācija" > 
  18.   <label class = "control-label" for = "inputInfo" > Ievade ar informāciju </label>  
  19.   <div class = "vadības ierīces" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Lietotājvārds jau ir aizņemts </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "kontrolgrupas panākumi" > 
  26.   <label class = "control-label" for = "inputSuccess" > Veiksmīga ievade </label>  
  27.   <div class = "vadības ierīces" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </div>

Pogas

Noklusējuma pogas

Pogu stilus var lietot jebko, ja tiek lietota .btnklase. Tomēr parasti vēlaties tos lietot tikai <a>un <button>elementiem, lai nodrošinātu vislabāko renderēšanu.

Poga class="" Apraksts
btn Standarta pelēka poga ar gradientu
btn btn-primary Nodrošina papildu vizuālo svaru un identificē galveno darbību pogu komplektā
btn btn-info Izmanto kā alternatīvu noklusējuma stiliem
btn btn-success Norāda uz veiksmīgu vai pozitīvu darbību
btn btn-warning Norāda, ka, veicot šo darbību, jāievēro piesardzība
btn btn-danger Norāda uz bīstamu vai potenciāli negatīvu darbību
btn btn-inverse Alternatīva tumši pelēka poga, kas nav saistīta ar semantisku darbību vai lietojumu
btn btn-link Samaziniet pogu, padarot to par saiti, vienlaikus saglabājot pogas darbību

Saderība starp pārlūkprogrammām

IE9 neapgriež fona gradientus uz noapaļotiem stūriem, tāpēc mēs to noņemam. Saistīts ar to, ka IE9 izjauc atspējotos buttonelementus, padarot tekstu pelēku ar nepatīkamu teksta ēnu, ko nevaram novērst.

Pogu izmēri

Vai vēlaties lielākas vai mazākas pogas? Pievienojiet .btn-large, .btn-small, vai .btn-minipapildu izmēriem.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Lielā poga </button>  
  3.   <button class = "btn btn-large" type = "button" > Lielā poga </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Noklusējuma poga </button>  
  7.   <button class = "btn" type = "button" > Noklusējuma poga </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Mazā poga </button>  
  11.   <button class = "btn btn-small" type = "button" > Mazā poga </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Mini poga </button>  
  15.   <button class = "btn btn-mini" type = "button" > Mini poga </button>  
  16. </p>

Izveidojiet bloka līmeņa pogas — tās, kas aptver visu vecāka platumu, pievienojot .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Bloka līmeņa poga </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > Bloka līmeņa poga </button>

Atspējots stāvoklis

Padariet pogas neklikšķināmas, izbalējot tās par 50%.

Enkura elements

Pievienojiet .disabledklasi <a>pogām.

Primārā saite Saite 

  1. <a href = "#" class = "btn btn-large btn-primary atspējots" > Primārā saite </a>  
  2. <a href = "#" class = "btn btn-large atspējots" > Saite </a>

Uzmanību!Šeit mēs izmantojam .disabledkā lietderības klasi, kas ir līdzīga parastajai .activeklasei, tāpēc prefikss nav nepieciešams. Arī šī klase ir paredzēta tikai estētiskam; jums ir jāizmanto pielāgots JavaScript, lai šeit atspējotu saites.

Pogas elements

Pievienojiet disabledatribūtu <button>pogām.

  1. <button type = "button" class = "btn btn-large btn-primary atspējots" Disabled = " atspējots" > Primārā poga </button>   
  2. <button type = "button" class = "btn btn-large" atspējots > Poga </button>

Viena klase, vairākas atzīmes

Izmantojiet .btnklasi elementā <a>, <button>, vai .<input>

Saite 
  1. <a class = "btn" href = "" > Saite </a>  
  2. <button class = "btn" type = "submit" > Poga </button>  
  3. <input class = "btn" type = "button" value = "Ievade" >   
  4. <input class = "btn" type = "submit" value = "Iesniegt" >

Labākā prakse ir mēģiniet pielāgot elementu savam kontekstam, lai nodrošinātu atbilstošu vairāku pārlūkprogrammu renderēšanu. Ja jums ir input, izmantojiet <input type="submit">pogu savai pogai.

Attēli

Pievienojiet elementam klases, <img>lai ērti veidotu attēlus jebkurā projektā.

140x140 140x140 140x140 
  1. <img src = "..." class = "img-noapaļots" >  
  2. <img src = "..." class = "img-circle" >  
  3. <img src = "..." class = "img-polaroid" >

Uzmanību! .img-roundedun .img-circlenedarbojas IE7-8 border-radiusatbalsta trūkuma dēļ.

Glyphicons ikonas _

Ikonu glifi

140 ikonas sprite formā, pieejamas tumši pelēkā (noklusējuma) un baltā krāsā, nodrošina Glyphicons .

  • ikonu stikls
  • ikonu mūzika
  • ikonu meklēšana
  • ikona-aploksne
  • ikona-sirds
  • ikona-zvaigzne
  • ikona-zvaigzne-tukša
  • ikonas lietotājs
  • ikona-filma
  • ikona-th-lielā
  • ikona-th
  • ikonu saraksts
  • ikona-ok
  • ikonas noņemšana
  • ikona-tuvināt
  • ikona-tālināt
  • ikona izslēgta
  • ikona-signāls
  • ikonas zobrats
  • ikona-miskaste
  • ikona-mājas
  • ikonas fails
  • ikonas laiks
  • ikonu ceļš
  • icon-download-alt
  • ikonu lejupielāde
  • ikonas augšupielāde
  • ikona-iesūtne
  • ikona-spēlēt-aplis
  • ikonas atkārtojums
  • ikona-atsvaidzināt
  • icon-list-alt
  • ikonu bloķēšana
  • ikona-karogs
  • ikonas-austiņas
  • ikonas skaļuma izslēgšana
  • ikona-skaļuma samazināšana
  • ikonas skaļuma palielināšana
  • ikona-qrcode
  • ikona-svītrkods
  • ikona-taga
  • ikonu tagi
  • ikonu grāmata
  • ikona-grāmatzīme
  • ikonu drukāšana
  • ikona-kamera
  • ikonas fonts
  • ikona treknrakstā
  • ikona — slīpraksts
  • ikona-teksta augstums
  • ikona-teksta platums
  • ikona-līdzināt-pa kreisi
  • ikona-līdzināt-centrs
  • ikona-līdzināt-pa labi
  • icon-align-justify
  • ikonu saraksts
  • ikona-atkāpe-pa kreisi
  • ikona-atkāpe-pa labi
  • ikona-facetime-video
  • ikona-attēls
  • ikona-zīmulis
  • ikona-karte-marķieris
  • ikonas pielāgošana
  • ikonu nokrāsa
  • ikonu rediģēšana
  • ikonu koplietošana
  • ikonu pārbaude
  • ikonu pārvietošana
  • ikona-solis-atpakaļ
  • ikona-ātri atpakaļ
  • ikona atpakaļ
  • ikonu atskaņošana
  • ikonas pauze
  • ikona-stop
  • ikona-uz priekšu
  • ikona-ātrīt uz priekšu
  • ikona-solis uz priekšu
  • ikonas izstumšana
  • ikona-ševrons-pa kreisi
  • ikona-ševrons-pa labi
  • ikona-plus-zīme
  • ikona-mīnus-zīme
  • ikona-noņemt-zīme
  • ikona-ok-zīme
  • ikona-jautājums-zīme
  • ikona-info-zīme
  • ikona-ekrānuzņēmums
  • ikona-noņemt-aplis
  • ikona-ok-aplis
  • ikona-ban-aplis
  • ikona-bultiņa-pa kreisi
  • ikona-bultiņa-pa labi
  • ikona-bultiņa uz augšu
  • ikona-bultiņa-lejup
  • ikona-share-alt
  • icon-resize-full
  • ikona-mainiet izmērus-small
  • ikona-pluss
  • ikona-mīnuss
  • ikona-zvaigznīte
  • ikona-izsaukuma-zīme
  • ikona-dāvana
  • ikonu lapa
  • ikona-uguns
  • ikona-acis-atvērts
  • ikona-acs-aizvērt
  • ikona-brīdinājuma zīme
  • ikonu plakne
  • ikona-kalendārs
  • ikonas nejauši
  • ikona-komentārs
  • ikona-magnēts
  • icon-chevron-up
  • icon-chevron-down
  • ikona-retweet
  • ikona-iepirkumu grozs
  • ikona-mape-aizvērt
  • ikona-mape-atvērt
  • ikona-resize-vertikāla
  • ikona-mainiet izmērus-horizontāli
  • ikona-hdd
  • ikona-bullhorn
  • ikona-zvans
  • ikona-sertifikāts
  • ikona īkšķi uz augšu
  • ikona-īkšķi uz leju
  • ikona-roka-pa labi
  • ikona-roka-pa kreisi
  • ikona-roka uz augšu
  • ikona-roku uz leju
  • ikona-aplis-bultiņa-pa labi
  • ikona-aplis-bultiņa-pa kreisi
  • ikona-aplis-bultiņa-augšup
  • ikona-aplis-bultiņa-lejup
  • ikona-globuss
  • ikonu uzgriežņu atslēga
  • ikonu uzdevumi
  • ikonu filtrs
  • ikona-portfelis
  • ikonas pilnekrāna režīmā

Glyphicons attiecinājums

Glyphicons Halflings parasti nav pieejams bez maksas, taču vienošanās starp Bootstrap un Glyphicons radītājiem ir padarījusi to iespējamu bez maksas jums kā izstrādātājiem. Kā pateicību mēs lūdzam jūs iekļaut papildu saiti atpakaļ uz Glyphicons , kad vien tas ir iespējams.

Kā izmantot

Visām ikonām ir nepieciešams <i>tags ar unikālu klasi ar prefiksu icon-. Lai izmantotu, ievietojiet šo kodu gandrīz jebkurā vietā:

  1. <i class = "icon-search" ></i>

Ir pieejami arī stili apgrieztām (baltām) ikonām, kas sagatavotas ar vienu papildu klasi. Mēs īpaši ieviesīsim šo klasi navigācijas un nolaižamajām saitēm, lai virzītu kursoru un aktīvi.

  1. <i class = "icon-search icon-white" ></i>

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.

Ikonu piemēri

Izmantojiet tos pogās, pogu grupās rīkjoslai, navigācijai vai pievienotās veidlapas ievadei.

Pogas

Pogu grupa pogu rīkjoslā
  1. <div class = "btn-rīkjosla" > 
  2.   <div class = "btn-group" > 
  3.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  4.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  7.   </div>
  8. </div>
Nolaižamā izvēlne pogu grupā
Lietotājs 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Lietotājs </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "nolaižamā izvēlne" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> Rediģēt </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Dzēst </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Aizliegt </a></li>  
  8.     <li class = "dalītājs" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Padarīt administratoru </a></li>  
  10.   </ul>
  11. </div>
Pogu izmēri
Zvaigzne Zvaigzne Zvaigzne 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Zvaigzne </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Zvaigzne </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Zvaigzne </a>

Navigācija

  1. <ul class = "nav nav-list" > 
  2.   <li class = "aktīvs" ><a href = "#" ><i class = "icon-home icon-white" ></i> Sākums </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i> Bibliotēka </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Lietojumprogrammas </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Dažādi </a></li>  
  6. </ul>

Veidlapas lauki

  1. <div class = "kontrolgrupa" > 
  2.   <label class = "control-label" for = "inputIcon" > E-pasta adrese </label>  
  3.   <div class = "vadības ierīces" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "papildinājums" ><i class = "icon-aploksne" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "text" >   
  7.     </div>
  8.   </div>
  9. </div>