Bootstrap

Baas-CSS

Põhilised HTML-i elemendid on kujundatud ja täiustatud laiendatavate klassidega.

Tüpograafia

Pealkirjad

Kõik HTML-i pealkirjad <h1>kuni <h6>on saadaval.

h1. Pealkiri 1

h2. 2. pealkiri

h3. 3. pealkiri

h4. 4. pealkiri

h5. 5. pealkiri
h6. 6. pealkiri

Keha koopia

Bootstrapi globaalne vaikeväärtus font-sizeon 14 pikslit ja line-height20 pikslit . Seda rakendatakse <body>lõikude ja kõigi lõikude kohta. Lisaks <p>saavad (lõigud) alumine veeris poole nende rea kõrgusest (vaikimisi 10 pikslit).

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 ja eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Põhiteksti koopia

Muutke lõik silmapaistvaks, lisades .lead.

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

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

Ehitatud vähemaga

Tüpograafiline skaala põhineb kahel VÄHEM muutujal muutujates.less : @baseFontSizeja @baseLineHeight. Esimene on läbivalt kasutatav põhifondi suurus ja teine ​​on baasjoone kõrgus. Me kasutame neid muutujaid ja mõnda lihtsat matemaatikat, et luua kõigi meie tüüpide veerised, polstrid ja joonekõrgused ning palju muud. Kohandage neid ja Bootstrap kohandub.

Rõhuasetus

Kasutage kergete stiilidega HTML-i vaikimisi esiletõstmise silte.

<small>

Tekstisisese või tekstiplokkide rõhu vähendamiseks kasutage väikest silti.

Seda tekstirida tuleb käsitleda peenes kirjas.

<p> <väike> Seda tekstirida tuleb käsitleda peenes kirjas. </small> </p>

Julge

Suurema fondikaaluga tekstijupi rõhutamiseks.

Järgmine tekstilõik renderdatakse paksus kirjas tekstina .

<strong> on renderdatud paksu tekstina </strong>

Kaldkiri

Tekstilõigu kaldkirjaga rõhutamiseks.

Järgmine tekstilõik renderdatakse kaldkirjas tekstina .

<em> on renderdatud kaldkirjas tekstina </em>

Pea püsti!Kasutage julgelt <b>ja <i>HTML5-s. <b>on mõeldud sõnade või fraaside esiletõstmiseks ilma täiendavat tähtsust andmata, samas kui <i>see on enamasti mõeldud hääle, tehniliste terminite jms jaoks.

Joondamisklassid

Joondage tekst hõlpsalt komponentideks teksti joondusklasside abil.

Vasakule joondatud tekst.

Keskele joondatud tekst.

Paremale joondatud tekst.

  1. <p class = "text-left" > Vasakule joondatud tekst. </p> 
  2. <p class = "text-center" > Keskele joondatud tekst. </p> 
  3. <p class = "text-right" > Paremale joondatud tekst. </p>

Rõhuklassid

Edastage tähendust värvide kaudu, kasutades käputäie rõhuasetusega kasulikke klasse.

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 = "vaigistatud" > 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>

Lühendid

HTML-i elemendi stiliseeritud rakendamine <abbr>lühendite ja akronüümide jaoks, et näidata laiendatud versiooni hõljutamisel. Atribuudiga lühenditel titleon hele punktiirjoonega alumine ääris ja abikursor hõljutamisel, mis pakub hõljutamisel täiendavat konteksti.

<abbr>

Lühendi pika kursori hõljutamise laiendatud teksti jaoks lisage titleatribuut.

Sõna atribuut lühend on attr .

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

<abbr class="initialism">

.initialismVeidi väiksema fondi suuruse saamiseks lisage lühendile.

HTML on parim asi pärast viilutatud leiba.

<abbr title = "HyperText Markup Language" class = "initsialism" > HTML </abbr>

Aadressid

Esitage lähima esivanema või kogu töökoha kontaktandmed.

<address>

Säilitage vorming, lõpetades kõik read tähega <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Täisnimi
[email protected] 
  1. <aadress>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 Folsom Ave, sviit 600 <br>
  4.   San Francisco, CA 94107 <br>
  5.   <abbr title = "Telefon" > P: </abbr> (123) 456-7890 
  6. </aadress>
  7.  
  8. <aadress>
  9.   <strong> Täisnimi </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </aadress>

Plokktsitaadid

Sisuplokkide tsiteerimiseks teie dokumendis teisest allikast.

Vaikimisi plokktsitaat

Mähkige tsitaadina mis <blockquote>tahes HTML -i ümber. Sirgete hinnapakkumiste jaoks soovitame <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat a ante.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat a ante. </p>
  3. </blockquote>

Blockquote valikud

Stiili ja sisu muudatused standardse plokitsitaadi lihtsate variatsioonide jaoks.

Allika nimetamine

Lisage <small>allika tuvastamiseks silt. Mähi lähtetöö nimi sisse <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat a ante.

Keegi kuulus allika pealkirjas 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat a ante. </p>
  3.   <small> Keegi kuulus <cite title = "Allika pealkiri" > Allika pealkiri </cite></small> 
  4. </blockquote>

Alternatiivsed kuvad

Kasutage .pull-rightujuva, paremale joondatud plokitsitaadi jaoks.

Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat a ante.

Keegi kuulus allika pealkirjas 
  1. <blockquote class = "tõmba paremale" > 
  2.   ...
  3. </blockquote>

Loendid

Tellimata

Üksuste loend, mille puhul järjekord ei oma tähtsust .

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

Tellitud

Üksuste loend, mille puhul on järjekord selgesõnaliselt oluline.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Täisarv molestie lorem ja mass
  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>

Stiilita

Eemaldage list-styleloendiüksustel vaike- ja vasakpoolne polster (ainult kohesed alaastmed).

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Täisarv molestie lorem ja mass
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat juures
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul class = "stiilita" > 
  2.   <li> ... </li>
  3. </ul>

Järjekorras

Asetage kõik loendi üksused ühele reale inline-blockkerge polsterdusega.

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

Kirjeldus

Terminite loend koos nendega seotud kirjeldustega.

Kirjeldusloendid
Kirjeldusloend sobib suurepäraselt terminite määratlemiseks.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida ja eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Horisontaalne kirjeldus

Pange terminid ja kirjeldused <dl>kõrvuti ritta.

Kirjeldusloendid
Kirjeldusloend sobib suurepäraselt terminite määratlemiseks.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida ja 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-horizontaalne" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Pea püsti!Horisontaalsed kirjeldusloendid kärbivad termineid, mis on liiga pikad, et mahutada vasakpoolse veeru parandusse text-overflow. Kitsamates vaateavades muutuvad need virnastatud vaikepaigutuseks.

Kood

Järjekorras

Mähi tekstisisesed koodilõigud märgiga <code>.

Näiteks <section>tuleks mähitud sees. 
  1. Näiteks < kood > & lt ; sektsioon & gt ;</ code > tuleks mähita tekstisisesena .

Põhiplokk

Kasutage <pre>mitme koodirea jaoks. Korralikuks renderdamiseks jätke koodis kindlasti kõik nurksulud.

<p>Näidistekst siin...</p>
  1. <pre>
  2.   <p>Näidistekst siin...</p>
  3. </pre>

Pea püsti!Hoidke koodi <pre>siltide sees nii vasakule kui võimalik; see renderdab kõik vahelehed.

Soovi korral saate lisada .pre-scrollableklassi, mis määrab maksimaalseks kõrguseks 350 pikslit ja pakub y-telje kerimisriba.

Tabelid

Vaikimisi stiilid

Põhistiili jaoks – kerge polsterdus ja ainult horisontaalsed jaoturid – lisage põhiklass .tablemis tahes <table>.

# Eesnimi Perekonnanimi Kasutajanimi
1 Mark Otto @mdo
2 Jacob Thornton @paks
3 Larry lind @twitter 
  1. < tabeliklass = "tabel" > 
  2.   …
  3. </table>

Vabatahtlikud klassid

.tableLisage baasklassi mõni järgmistest klassidest .

.table-striped

Lisab sebratriibutuse mis tahes tabelireale CSS-i valija <tbody>kaudu :nth-child(pole saadaval IE7-8 puhul).

# Eesnimi Perekonnanimi Kasutajanimi
1 Mark Otto @mdo
2 Jacob Thornton @paks
3 Larry lind @twitter 
  1. <table class = "tabel tabelitriibuline" > 
  2.   …
  3. </table>

.table-bordered

Lisage lauale äärised ja ümarad nurgad.

# Eesnimi Perekonnanimi Kasutajanimi
1 Mark Otto @mdo
Mark Otto @getbootstrap
2 Jacob Thornton @paks
3 Lind Larry @twitter 
  1. < tabeliklass = "tabeli äärisega tabel" > 
  2.   …
  3. </table>

.table-hover

Lubage hõljutus olek tabeli ridadel <tbody>.

# Eesnimi Perekonnanimi Kasutajanimi
1 Mark Otto @mdo
2 Jacob Thornton @paks
3 Lind Larry @twitter 
  1. <table class = "table table-hover" > 
  2.   …
  3. </table>

.table-condensed

Muudab lauad kompaktsemaks, lõigates lahtri polstri pooleks.

# Eesnimi Perekonnanimi Kasutajanimi
1 Mark Otto @mdo
2 Jacob Thornton @paks
3 Lind Larry @twitter 
  1. <table class = "tabel-kondenseeritud" > 
  2.   …
  3. </table>

Valikulised reaklassid

Kasutage tabeli ridade värvimiseks kontekstuaalseid klasse.

Klass Kirjeldus
.success Tähistab edukat või positiivset tegevust.
.error Tähistab ohtlikku või potentsiaalselt negatiivset tegevust.
.warning Viitab hoiatusele, mis võib vajada tähelepanu.
.info Kasutatakse alternatiivina vaikestiilidele.
# Toode Makse võetud Olek
1 TB – iga kuu 01/04/2012 Kinnitatud
2 TB – iga kuu 02.04.2012 Keeldutud
3 TB – iga kuu 03.04.2012 Ootel
4 TB – iga kuu 04/04/2012 Kinnitamiseks helistage 
  1. ...
  2.   < tr class = "edu" >
  3.     <td> 1 < /td>
  4.     <td>TB – iga kuu</ td >
  5.     < td > 01/04/2012 < / td >
  6.     <td>Kinnitatud</ td >
  7.   </ tr >
  8. ...

Toetatud tabeli märgistus

Toetatud tabeli HTML-i elementide loend ja nende kasutamine.

Tag Kirjeldus
<table> Mähkimiselement andmete kuvamiseks tabelivormingus
<thead> Tabeli päise ridade ( <tr>) konteinerelement tabeli veergude märgistamiseks
<tbody> <tr>Tabeli põhiosas tabeli ridade ( ) konteinerelement
<tr> Tabeli lahtrite komplekti ( <td>või <th>) konteinerelement, mis kuvatakse ühel real
<td> Tabeli vaikelahter
<th> Spetsiaalne tabelilahter veeru (või rea, olenevalt ulatusest ja paigutusest) siltide jaoks
<caption> Tabeli kirjeldus või kokkuvõte, eriti kasulik ekraanilugejatele 
  1. <tabel>
  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>

Vormid

Vaikimisi stiilid

Üksikud vormi juhtelemendid saavad stiili, kuid ilma <form>märgistusel nõutava põhiklassita või suurte muudatusteta. Tulemuseks on virnastatud, vasakule joondatud sildid vormi juhtelementide kohal.

Legend Plokitaseme abiteksti näide siin. 
  1. <vorm>
  2.   <väljakomplekt>
  3.     <legend> Legend </legend>
  4.     <label> Sildi nimi </label>
  5.     <input type = "text" placeholder = "Tippige midagi..." >  
  6.     <span class = "help-block" > Siin on plokitaseme abiteksti näide. </span> 
  7.     <label class = "märkeruut" > 
  8.       <input type = "checkbox" > Kontrollige mind 
  9.     </label>
  10.     <button type = "submit" class = "btn" > Esita </button>  
  11.   </fieldset>
  12. </form>

Valikulised paigutused

Bootstrapiga on kaasas kolm valikulist vormipaigutust tavalisteks kasutusjuhtudeks.

Otsinguvorm

Eriti ümardatud tekstisisestuse jaoks lisage vormile .form-searchja ..search-query<input>

  1. <form class = "vormiotsing" > 
  2.   <input type = "text" class = "sisendkandja otsingupäring" >  
  3.   <button type = "submit" class = "btn" > Otsi </button>  
  4. </form>

Tekstisisene vorm

Lisage .form-inlinevasakule joondatud siltide jaoks ja plokisisesed juhtelemendid kompaktse paigutuse jaoks.

  1. <form class = "form-inline" > 
  2.   <input type = "text" class = "input-small" placeholder = "E-post" >   
  3.   <input type = "password" class = "input-small" placeholder = "Parool" >   
  4.   <label class = "märkeruut" > 
  5.     <input type = "checkbox" > Jäta mind meelde 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Logi sisse </button>  
  8. </form>

Horisontaalne vorm

Joondage sildid paremale ja libistage need vasakule, et need kuvaksid juhtelementidega samal real. Nõuab vaikevormilt kõige rohkem märgistusmuudatusi:

  • Lisa .form-horizontalvormile
  • Pakkige sildid ja juhtnupud sisse.control-group
  • Lisa .control-labelsildile
  • Mähkige kõik seotud juhtnupud .controlsõigeks joondamiseks sisse
  1. <form class = "vorm-horisontaalne" > 
  2.   <div class = "kontrollrühm" > 
  3.     <label class = "control-label" for = "inputEmail" > Meil ​​</label>  
  4.     <div class = "juhtelemendid" > 
  5.       <input type = "text" id = "inputEmail" placeholder = "E-post" >   
  6.     </div>
  7.   </div>
  8.   <div class = "kontrollrühm" > 
  9.     <label class = "control-label" for = "inputPassword" > Parool </label>  
  10.     <div class = "juhtelemendid" > 
  11.       <input type = "password" id = "inputPassword" placeholder = "Parool" >   
  12.     </div>
  13.   </div>
  14.   <div class = "kontrollrühm" > 
  15.     <div class = "juhtelemendid" > 
  16.       <label class = "märkeruut" > 
  17.         <input type = "checkbox" > Jäta mind meelde 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Logi sisse </button>  
  20.     </div>
  21.   </div>
  22. </form>

Toetatud vormi juhtelemendid

Näidisvormide paigutuse toetatud standardvormi juhtelementide näited.

Sisendid

Levinuim vormikontroll, tekstipõhised sisestusväljad. Sisaldab kõigi HTML5 tüüpide tuge: tekst, parool, kuupäev, kellaaeg, kuupäev, kellaaeg, kohalik, kuupäev, kuu, kellaaeg, nädal, number, e-post, URL, otsing, tel ja värv.

Nõuab igal ajal määratud kasutamist type.

  1. <input type = "text" placeholder = "Teksti sisestus" >

Tekstiala

Vormi juhtseade, mis toetab mitut tekstirida. Muutke rowsatribuuti vastavalt vajadusele.

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

Märkeruudud ja raadiod

Märkeruudud on mõeldud loendis ühe või mitme valiku valimiseks, raadiod aga ühe valiku valimiseks paljude hulgast.

Vaikimisi (virnastatud)


  1. <label class = "märkeruut" > 
  2.   <input type = "checkbox" value = "" >  
  3.   Esimene võimalus on see ja see – lisage kindlasti, miks see on suurepärane
  4. </label>
  5.  
  6. <label class = "raadio" > 
  7.   <input type = "raadio" name = "optionsRadios" id = "optionsRadios1" value = "option1" on märgitud >     
  8.   Esimene võimalus on see ja see – lisage kindlasti, miks see on suurepärane
  9. </label>
  10. <label class = "raadio" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  12.   Teine valik võib olla midagi muud ja selle valimine tühistab esimese valiku
  13. </label>

Tekstisisesed märkeruudud

Klassi lisamine .inlinemärkeruutude seeriasse või juhtnuppude raadiod ilmuvad samale reale.

  1. <label class = "märkeruudu tekstisisene" > 
  2.   <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
  3. </label>
  4. <label class = "märkeruudu tekstisisene" > 
  5.   <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
  6. </label>
  7. <label class = "märkeruudu tekstisisene" > 
  8.   <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
  9. </label>

Valib

multiple="multiple"Mitme valiku korraga kuvamiseks kasutage vaikevalikut või määrake a .


  1. <vali>
  2.   <option> 1 </option>
  3.   <option> 2 </option>
  4.   <option> 3 </option>
  5.   <option> 4 </option>
  6.   <option> 5 </option>
  7. </select>
  8.  
  9. <vali mitu = "mitu" > 
  10.   <option> 1 </option>
  11.   <option> 2 </option>
  12.   <option> 3 </option>
  13.   <option> 4 </option>
  14.   <option> 5 </option>
  15. </select>

Vormi juhtelementide laiendamine

Olemasolevatele brauseri juhtelementidele lisades sisaldab Bootstrap muid kasulikke vormikomponente.

Eelnevad ja lisatud sisendid

Lisage tekst või nupud enne või pärast tekstipõhist sisestust. Pange tähele, et selectsiin ei toetata elemente.

Vaikevalikud

.add-onTeksti sisestamiseks sisendi ette või inputlisamiseks mähkige üks kahest klassist .

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "add-on" > @ </span> 
  3.   <input class = "span2" id = "prependedInput " type = "text" placeholder = "Kasutajanimi" >    
  4. </div>
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "apendedInput " type = "text" >   
  7.   <span class = "lisandmoodul" > .00 </span> 
  8. </div>

Kombineeritud

.add-onKasutage sisendi ette ja lisamiseks mõlemat klassi ja kahte eksemplari .

$ .00 
  1. <div class = "input-prepend input-append" > 
  2.   <span class = "add-on" > $ </span> 
  3.   <input class = "span2" id = "apendedPrependedInput " type = "text" >   
  4.   <span class = "lisandmoodul" > .00 </span> 
  5. </div>

Teksti asemel nupud

Tekstiga sümboli asemel <span>kasutage .btnnuppu a (või kahe) sisendile kinnitamiseks.

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "apendedInputButton " type = "text" >   
  3.   <button class = "btn" type = "button" > Mine! </button>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "apendedInputButtons " type = "text" >   
  3.   <button class = "btn" type = "button" > Otsi </button>  
  4.   <button class = "btn" type = "button" > Valikud </button>  
  5. </div>

Nuppude rippmenüüd

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  3.   <div class = "btn-grupp" > 
  4.     <button class = "btn dropdown-toggle" data-toggle = "rippmenüü" >  
  5.       Tegevus
  6.       <span class = "caret" ></span> 
  7.     </button>
  8.     <ul class = "rippmenüü" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "input-prepend" > 
  2.   <div class = "btn-grupp" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "rippmenüü" >  
  4.       Tegevus
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "rippmenüü" > 
  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-grupp" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "rippmenüü" >  
  4.       Tegevus
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "rippmenüü" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "apendedPrependedDropdownButton " type = "text" >   
  12.   <div class = "btn-grupp" > 
  13.     <button class = "btn dropdown-toggle" data-toggle = "rippmenüü" >  
  14.       Tegevus
  15.       <span class = "caret" ></span> 
  16.     </button>
  17.     <ul class = "rippmenüü" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Segmenteeritud rippmenüü rühmad

  1. <vorm>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     <sisestustüüp = " tekst " > 
  5.   </div>
  6.   <div class = "input-append" > 
  7.     <sisestustüüp = " tekst " > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

Otsinguvorm

  1. <form class = "vormiotsing" > 
  2.   <div class = "input-append" > 
  3.     <input type = "text" class = "span2 search-query" >  
  4.     <button type = "submit" class = "btn" > Otsi </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > Otsi </button>  
  8.     <input type = "text" class = "span2 search-query" >  
  9.   </div>
  10. </form>

Kontrolli suurust

Kasutage suhtelisi suurusklasse .input-largevõi sobitage oma sisendid .span*klasside abil ruudustiku veergude suurustega.

Blokeeri taseme sisendid

Pane mis tahes element <input>või <textarea>element käituma nagu plokitaseme element.

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

Suhteline suurus

  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" >

Pea püsti!Tulevastes versioonides muudame nende suhteliste sisestusklasside kasutamist, et need vastaksid meie nuppude suurusele. Näiteks .input-largesuurendab sisendi polsterdust ja fondi suurust.

Võre suurus

Kasutage .span1sisendite .span12jaoks, mis vastavad ruudustiku veergude samadele suurustele.

  1. <input class = "span1" type = "text" placeholder = ".span1" >   
  2. <input class = "span2" type = "text" placeholder = ".span2" >   
  3. <input class = "span3" type = "text" placeholder = ".span3" >   
  4. <vali klass = "span1" > 
  5.   ...
  6. </select>
  7. <vali klass = "span2" > 
  8.   ...
  9. </select>
  10. <vali klass = "span3" > 
  11.   ...
  12. </select>

Kui rea kohta on mitu ruudustiku sisendit, kasutage .controls-rowõige vahekauguse jaoks muuteklassi . See ujutab sisendid tühiku ahendamiseks, määrab õiged veerised ja tühjendab ujuki.

  1. <div class = "juhtelemendid" > 
  2.   <input class = "span5" type = "text" placeholder = ".span5" >   
  3. </div>
  4. <div class = "controls controls-row" > 
  5.   <input class = "span4" type = "text" placeholder = ".span4" >   
  6.   <input class = "span1" type = "text" placeholder = ".span1" >   
  7. </div>
  8. ...

Redigeerimata sisendid

Esitage andmed kujul, mida ei saa muuta ilma tegelikku vormimärgistust kasutamata.

Mingi väärtus siin 
  1. <span class = "input-xlarge uneditable-input" > Siin on mingi väärtus </span>

Vormi toimingud

Lõpetage vorm tegevuste rühmaga (nupud). Kui need on paigutatud .form-actionsjaotisesse , taanduvad nupud automaatselt vormi juhtelementidega joondamiseks.

  1. <div class = "vorm-toimingud" > 
  2.   <button type = "submit" class = "btn btn-primary" > Salvesta muudatused </button>  
  3.   <button type = "button" class = "btn" > Tühista </button>  
  4. </div>

Abitekst

Vormide juhtelementide ümber kuvatava abiteksti tekstisisene ja plokitaseme tugi.

Tekstisisene abi

Tekstisisene abitekst 
  1. <input type = "text" ><span class = "help-inline" > Tekstisisene abitekst </span>

Blokeeri abi

Pikem abiteksti plokk, mis katkeb uuele reale ja võib ulatuda kaugemale kui üks rida. 
  1. <input type = "text" ><span class = "help-block" > Pikem abiteksti plokk, mis katkeb uuele reale ja võib ulatuda kaugemale kui üks rida. </span>

Vormi juhtolekud

Andke kasutajatele või külastajatele tagasisidet põhiliste tagasiside olekutega vormi juhtelementide ja siltide kohta.

Sisendfookus

Eemaldame outlinemõnelt vormi juhtelemendilt vaikelaadid ja rakendame box-shadowselle asemel :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "See on fokuseeritud..." >

Kehtetud sisendid

Stiilige sisendid brauseri vaikefunktsiooni kaudu :invalid. Määrake type, lisage requiredatribuut, kui väli pole valikuline, ja (kui see on kohaldatav) määrake pattern.

See pole Internet Exploreri versioonides 7–9 saadaval, kuna CSS-i pseudovalijaid ei toetata.

  1. <input class = "span3" type = "e-post" nõutav >

Keelatud sisendid

Lisage disabledsisendile atribuut, et vältida kasutaja sisendit ja käivitada veidi erinev välimus.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Sisend on siin keelatud..." keelatud >

Valideerimisolekud

Bootstrap sisaldab vigade, hoiatuste, teabe ja eduteadete valideerimisstiile. Kasutamiseks lisa sobiv klass ümbritsevasse .control-group.

Midagi võis valesti minna
Parandage viga
Kasutajanimi on võetud
Woohoo! 
  1. <div class = "kontrollrühma hoiatus" > 
  2.   <label class = "control-label" for = "inputWarning" > Hoiatusega sisend </label>  
  3.   <div class = "juhtelemendid" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Midagi võis valesti minna </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "kontrollrühma viga" > 
  10.   <label class = "control-label" for = "inputError" > Veaga sisend </label>  
  11.   <div class = "juhtelemendid" > 
  12.     < sisendtüüp = "text" id = "sisendviga" >  
  13.     <span class = "help-inline" > Parandage viga </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "kontrollrühma teave" > 
  18.   <label class = "control-label" for = "inputInfo" > Sisestage teabega </label>  
  19.   <div class = "juhtelemendid" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Kasutajanimi on juba hõivatud </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "kontrollrühma edu" > 
  26.   <label class = "control-label" for = "inputSuccess" > Sisend õnnestus </label>  
  27.   <div class = "juhtelemendid" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </div>

Nupud

Vaikimisi nupud

.btnKlassi rakendamisel saab nuppude stiile rakendada kõigele . Kuid tavaliselt soovite parima renderduse tagamiseks rakendada neid ainult <a>ja elementidele.<button>

Nupp class="" Kirjeldus
btn Standardne hall gradiendiga nupp
btn btn-primary Annab visuaalset lisaraskust ja tuvastab nuppude komplektis peamise toimingu
btn btn-info Kasutatakse alternatiivina vaikestiilidele
btn btn-success Tähistab edukat või positiivset tegevust
btn btn-warning Näitab, et selle toiminguga tuleb olla ettevaatlik
btn btn-danger Tähistab ohtlikku või potentsiaalselt negatiivset tegevust
btn btn-inverse Alternatiivne tumehall nupp, mis pole semantilise toimingu või kasutusega seotud
btn btn-link Vähendage nuppu, muutes selle lingiks, säilitades samal ajal nupu käitumise

Brauseriülene ühilduvus

IE9 ei kärbi ümarate nurkade tausta gradiente, seega eemaldame selle. Seotud, IE9 jankkib keelatud buttonelemente, muutes teksti halliks ja vastiku tekstivarjuga, mida me ei saa parandada.

Nuppude suurused

Kas soovite suuremaid või väiksemaid nuppe? Lisage .btn-large, .btn-smallvõi .btn-minilisasuuruste jaoks.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Suur nupp </button>  
  3.   <button class = "btn btn-large" type = "button" > Suur nupp </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Vaikimisi nupp </button>  
  7.   <button class = "btn" type = "button" > Vaikimisi nupp </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Väike nupp </button>  
  11.   <button class = "btn btn-small" type = "button" > Väike nupp </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Mininupp </button>  
  15.   <button class = "btn btn-mini" type = "button" > Mininupp </button>  
  16. </p>

Looge plokitaseme nupud – need, mis katavad kogu vanema laiust – lisades .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Blokeerimistaseme nupp </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > Blokeerimistaseme nupp </button>

Puudega olek

Muutke nupud klõpsamatuks, tuhmudes need 50% võrra tagasi.

Anchor element

Add the .disabled class to <a> buttons.

Primary link Link 

  1. <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
  2. <a href="#" class="btn btn-large disabled">Link</a>

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.

Button element

Add the disabled attribute to <button> buttons.

  1. <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
  2. <button type="button" class="btn btn-large" disabled>Button</button>

One class, multiple tags

Use the .btn class on an <a>, <button>, or <input> element.

Link 
  1. <a class="btn" href="">Link</a>
  2. <button class="btn" type="submit">Button</button>
  3. <input class="btn" type="button" value="Input">
  4. <input class="btn" type="submit" value="Submit">

As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

Images

Add classes to an <img> element to easily style images in any project.

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

Heads up! .img-rounded and .img-circle do not work in IE7-8 due to lack of border-radius support.

Icons by Glyphicons

Icon glyphs

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

Glyphicons attribution

Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.

How to use

All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:

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

There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.

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

Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.

Icon examples

Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

Buttons

Button group in a button toolbar
  1. <div class="btn-toolbar">
  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>
Dropdown in a button group
User 
  1. <div class="btn-group">
  2.   <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
  3.   <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  4.   <ul class="dropdown-menu">
  5.     <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
  6.     <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
  7.     <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
  8.     <li class="divider"></li>
  9.     <li><a href="#"><i class="i"></i> Make admin</a></li>
  10.   </ul>
  11. </div>
Button sizes
Star Star Star 
  1. <a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
  2. <a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a>
  3. <a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>

Navigation

  1. <ul class="nav nav-list">
  2.   <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
  3.   <li><a href="#"><i class="icon-book"></i> Library</a></li>
  4.   <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
  5.   <li><a href="#"><i class="i"></i> Misc</a></li>
  6. </ul>

Form fields

  1. <div class="control-group">
  2.   <label class="control-label" for="inputIcon">Email address</label>
  3.   <div class="controls">
  4.     <div class="input-prepend">
  5.       <span class="add-on"><i class="icon-envelope"></i></span>
  6.       <input class="span2" id="inputIcon" type="text">
  7.     </div>
  8.   </div>
  9. </div>