Bootstrap

Perus CSS

HTML-peruselementit tyylitelty ja parannettu laajennettavilla luokilla.

Typografia

Otsikot

Kaikki HTML-otsikot ovat <h1>käytettävissä <h6>.

h1. Otsikko 1

h2. Otsikko 2

h3. Otsikko 3

h4. Otsikko 4

h5. Otsikko 5
h6. Otsikko 6

Vartalo kopio

Bootstrapin yleinen oletusarvo font-sizeon 14 kuvapistettä ja line-height20 kuvapistettä . Tätä sovelletaan <body>kappaleisiin ja kaikkiin kappaleisiin. Lisäksi <p>(kappaleet) saavat alamarginaalin, joka on puolet rivin korkeudesta (oletuksena 10 kuvapistettä).

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

<p> ... </p>

Päärunkokopio

Tee kappaleesta erottuva lisäämällä .lead.

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

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

Rakennettu vähemmällä

Typografinen asteikko perustuu kahteen VÄHEMMÄN muuttujaan muuttujissa.vähemmän : @baseFontSizeja @baseLineHeight. Ensimmäinen on kauttaaltaan käytetty perusfontin koko ja toinen on perusviivan korkeus. Käytämme näitä muuttujia ja yksinkertaista matematiikkaa kaikentyyppisten marginaalien, täytteiden ja rivinkorkeuksien luomiseen ja paljon muuta. Mukauta niitä ja Bootstrap mukautuu.

Painopiste

Hyödynnä HTML:n oletuskorostustunnisteita kevyillä tyyleillä.

<small>

Käytä pientä tunnistetta , jos haluat vähentää tekstin sisäistä tai tekstilohkoja .

Tätä tekstiriviä on tarkoitus käsitellä pienellä tekstillä.

<p> <pieni> Tämä tekstirivi on tarkoitettu käsiteltäväksi pienellä tekstillä. </small> </p>

Lihavoitu

Tekstinpätkän korostamiseen raskaammalla fonttipainolla.

Seuraava tekstinpätkä hahmonnetaan lihavoituna .

<strong> näytetään lihavoituna </strong>

Kursivointi

Tekstinpätkän korostamiseen kursiivilla.

Seuraava tekstinpätkä esitetään kursivoituna .

<em> hahmonnettu kursivoituna tekstinä </em>

Varoitus!Voit vapaasti käyttää <b>ja <i>HTML5:ssä. <b>on tarkoitettu korostamaan sanoja tai lauseita antamatta lisätärkeyttä, kun taas <i>se on enimmäkseen puhetta, teknisiä termejä jne.

Tasausluokat

Tasaa teksti helposti komponenteiksi tekstin tasausluokkien avulla.

Vasemmalle tasattu teksti.

Keskitasattu teksti.

Oikealle tasattu teksti.

  1. <p class = "text-left" > Vasemmalle tasattu teksti. </p> 
  2. <p class = "text-center" > Tasattu teksti keskelle. </p> 
  3. <p class = "text-right" > Oikealle tasattu teksti. </p>

Painopisteluokat

Välitä merkitys värien avulla kourallisilla painopisteiden hyödyllisyysluokilla.

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

Lyhenteet

HTML-elementin tyylitelty toteutus <abbr>lyhenteille ja lyhenteille, jotta laajennettu versio näytetään. Attribuutilla varustetuilla lyhenteillä titleon vaalea pisteviiva alareuna ja ohjekohdistin osoitin päällä, mikä tarjoaa lisäkontekstia vietäessä.

<abbr>

titleLisää attribuutti , jos haluat laajentaa tekstiä lyhenteen pitkällä osoittimella .

Sanan attribuutti lyhenne on attr .

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

<abbr class="initialism">

Lisää .initialismlyhenteeseen hieman pienemmän fontin koon saamiseksi.

HTML on parasta sitten viipaloidun leivän.

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

Osoitteet

Esitä lähimmän esi-isän tai koko työn yhteystiedot.

<address>

Säilytä muotoilu päättämällä kaikki rivit -merkkiin <br>.

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

Lohkolainaukset

Toisesta lähteestä peräisin olevien sisältölohkojen lainaamiseen dokumentissasi.

Oletuslainaus

Kääri lainauksena <blockquote>minkä tahansa HTML -koodin ympärille. Suorille lainauksille suosittelemme <p>.

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

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

Blockquote-vaihtoehdot

Tyyli- ja sisältömuutokset yksinkertaisia ​​muunnelmia varten tavallisesta lainauslauseesta.

Lähteen nimeäminen

Lisää <small>tunniste lähteen tunnistamiseksi. Kääri lähdeteoksen nimi muotoon <cite>.

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

Joku kuuluisa lähdeotsikossa 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Kokonaisluku posuere erat a ante. </p>
  3.   <small> Joku kuuluisa <cite title = "Lähteen otsikko" > Lähteen nimi </cite></small> 
  4. </blockquote>

Vaihtoehtoiset näytöt

Käytä .pull-rightkelluvaan, oikealle tasattuun lohkolainaukseen.

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

Joku kuuluisa lähdeotsikossa 
  1. <blockquote class = "vedä oikealle" > 
  2.   ...
  3. </blockquote>

Luettelot

Tilaamaton

Luettelo kohteista, joissa järjestyksellä ei ole nimenomaista merkitystä.

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

Tilattu

Luettelo kohteista, joissa järjestyksellä on nimenomaisesti väliä.

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

Tyylitön

Poista oletus- list-styleja vasen täyttö luettelokohteista (vain välittömät alakohdat).

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

Linjassa

Sijoita kaikki luettelon kohteet yhdelle riville inline-blockkevyellä pehmusteella.

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

Kuvaus

Luettelo termeistä ja niihin liittyvät kuvaukset.

Kuvausluettelot
Kuvausluettelo on täydellinen termien määrittelyyn.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Vaakasuuntainen kuvaus

Aseta termit ja kuvaukset <dl>riviin vierekkäin.

Kuvausluettelot
Kuvausluettelo on täydellinen termien määrittelyyn.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at 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>

Varoitus!Vaakasuuntaiset kuvausluettelot lyhentävät termit, jotka ovat liian pitkiä mahtumaan vasemman sarakkeen korjaukseen text-overflow. Kapeammissa näkymäporteissa ne muuttuvat oletusarvoiseksi pinotuksi asetteluksi.

Koodi

Linjassa

Kääri tekstin sisäiset koodinpätkät <code>.

Esimerkiksi <section>pitäisi kääriä riviin. 
  1. Esimerkiksi < koodi > & lt ; osio & gt ;</ code > tulee kääriä riviin .

Peruslohko

Käytä <pre>useille koodiriveille. Muista jättää koodin kulmasulkeet pois oikeasta renderöinnista.

<p>Esiteksti tässä...</p>
  1. <pre>
  2.   <p>Esimerkkiteksti tässä...</p>
  3. </pre>

Varoitus!Muista pitää koodi <pre>tagien sisällä mahdollisimman lähellä vasenta. se hahmontaa kaikki välilehdet.

Voit halutessasi lisätä .pre-scrollableluokan, joka asettaa enimmäiskorkeudeksi 350 pikseliä ja tarjoaa y-akselin vierityspalkin.

Taulukot

Oletustyylit

Perustyyliä varten – kevyt pehmuste ja vain vaakasuuntaiset jakajat – lisää perusluokka .tablemihin tahansa <table>.

# Etunimi Sukunimi Käyttäjätunnus
1 Mark Otto @mdo
2 Jacob Thornton @rasva
3 Larry lintu @viserrys 
  1. <taulukkoluokka = " taulukko" > 
  2.   …
  3. </table>

Valinnaiset luokat

Lisää mikä tahansa seuraavista luokista perusluokkaan .table.

.table-striped

Lisää seepraraidan mille tahansa taulukon riville CSS-valitsimen <tbody>kautta :nth-child(ei saatavilla IE7-8:ssa).

# Etunimi Sukunimi Käyttäjätunnus
1 Mark Otto @mdo
2 Jacob Thornton @rasva
3 Larry lintu @viserrys 
  1. <table class = "taulukko pöytäraidallinen" > 
  2.   …
  3. </table>

.table-bordered

Lisää pöytään reunat ja pyöristetyt kulmat.

# Etunimi Sukunimi Käyttäjätunnus
1 Mark Otto @mdo
Mark Otto @getbootstrap
2 Jacob Thornton @rasva
3 Larry lintu @viserrys 
  1. <table class = "taulukon taulukkoreunattu" > 
  2.   …
  3. </table>

.table-hover

Ota hiiritila käyttöön taulukon riveillä <tbody>.

# Etunimi Sukunimi Käyttäjätunnus
1 Mark Otto @mdo
2 Jacob Thornton @rasva
3 Larry lintu @viserrys 
  1. <table class = "table table-hover" > 
  2.   …
  3. </table>

.table-condensed

Tekee pöydistä kompakteja leikkaamalla solupehmusteen kahtia.

# Etunimi Sukunimi Käyttäjätunnus
1 Mark Otto @mdo
2 Jacob Thornton @rasva
3 Larry lintu @viserrys 
  1. <table class = "taulukkotaulukko-tiivistetty" > 
  2.   …
  3. </table>

Valinnaiset riviluokat

Käytä kontekstuaalisia luokkia taulukon rivien värittämiseen.

Luokka Kuvaus
.success Osoittaa onnistuneen tai positiivisen toimenpiteen.
.error Osoittaa vaarallista tai mahdollisesti negatiivista toimintaa.
.warning Osoittaa varoituksen, joka saattaa vaatia huomiota.
.info Käytetään vaihtoehtona oletustyyleille.
# Tuote Maksu otettu Tila
1 TB - kuukausittain 1.4.2012 Hyväksytty
2 TB - kuukausittain 02/04/2012 Hylätty
3 TB - kuukausittain 3.4.2012 Odottaa
4 TB - kuukausittain 4.4.2012 Soita vahvistaaksesi 
  1. ...
  2.   < tr class = "menestys" >
  3.     <td> 1 < /td>
  4.     <td>TB – kuukausittain</ td >
  5.     < td > 01/04/2012 < / td >
  6.     <td>Hyväksytty</ td >
  7.   </ tr >
  8. ...

Tuettu taulukkomerkintä

Luettelo tuetuista taulukon HTML-elementeistä ja niiden käytöstä.

Tag Kuvaus
<table> Kääritty elementti tietojen näyttämiseksi taulukkomuodossa
<thead> Taulukon otsikkorivien ( <tr>) säilöelementti taulukon sarakkeiden merkitsemiseksi
<tbody> Taulukon rivien ( <tr>) säilöelementti taulukon rungossa
<tr> Säilöelementti taulukon solujoukolle ( <td>tai <th>), joka näkyy yhdellä rivillä
<td> Taulukon oletussolu
<th> Erityinen taulukon solu sarake- (tai rivi-, laajuudesta ja sijoittelusta riippuen) tarroille
<caption> Kuvaus tai yhteenveto taulukon sisällöstä, erityisen hyödyllinen näytönlukuohjelmille 
  1. <taulukko>
  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>

Lomakkeet

Oletustyylit

Yksittäiset lomakeohjaimet saavat tyylin, mutta ilman vaadittua perusluokkaa <form>tai suuria muutoksia merkinnöissä. Tuloksena pinotut, vasemmalle tasatut tarrat lomakesäätimien päällä.

Legenda Esimerkki lohkotason ohjetekstistä tässä. 
  1. <lomake>
  2.   <kenttäjoukko>
  3.     <legend> Selite </legend>
  4.     <label> Tarran nimi </label>
  5.     <syöttötyyppi = " teksti " paikkamerkki = "Kirjoita jotain..." >  
  6.     <span class = "help-block" > Esimerkki lohkotason ohjeteksti tästä. </span> 
  7.     <label class = "valintaruutu" > 
  8.       <input type = "checkbox" > Tarkista minut 
  9.     </label>
  10.     <button type = "submit" class = "btn" > Lähetä </button>  
  11.   </fieldset>
  12. </form>

Valinnaiset asettelut

Bootstrapin mukana tulee kolme valinnaista lomakeasettelua yleisiin käyttötapauksiin.

Hakulomake

Lisää .form-searchlomakkeeseen ja .search-query-kohtaan saadaksesi <input>erityisen pyöristetyn tekstinsyötön.

  1. <form class = "lomakehaku" > 
  2.   <syöttötyyppi = " teksti" class = "syöttötavan hakukysely" >  
  3.   <button type = "submit" class = "btn" > Hae </button>  
  4. </form>

Sisäänrakennettu lomake

Lisää .form-inlinevasemmalle tasattuja tarroja varten ja rivin lohkosäätimet kompaktin asettelun saamiseksi.

  1. <form class = "form-inline" > 
  2.   <input type = "text" class = "input-small" placeholder = "Sähköposti" >   
  3.   <input type = "password" class = "input-small" placeholder = "Salasana" >   
  4.   <label class = "valintaruutu" > 
  5.     <input type = "checkbox" > Muista minut 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Kirjaudu sisään </button>  
  8. </form>

Vaakasuora muoto

Tasaa tarrat oikealle ja vedä ne vasemmalle, jotta ne näkyvät samalla rivillä säätimien kanssa. Vaatii eniten merkintöjä oletuslomakkeesta:

  • Lisää .form-horizontallomakkeeseen
  • Kääri tarrat ja säätimet sisään.control-group
  • Lisää .control-labeletikettiin
  • Kääri kaikki liittyvät säätimet .controlsoikeaan kohdistukseen
  1. <form class = "form-horizontal" > 
  2.   <div class = "kontrolliryhmä" > 
  3.     <label class = "control-label" for = "inputEmail" > Sähköposti </label>  
  4.     <div class = "säätimet" > 
  5.       <input type = "text" id = "inputEmail" placeholder = "Sähköposti" >   
  6.     </div>
  7.   </div>
  8.   <div class = "kontrolliryhmä" > 
  9.     <label class = "control-label" for = "inputPassword" > Salasana </label>  
  10.     <div class = "säätimet" > 
  11.       <input type = "password" id = "inputPassword" placeholder = "Salasana" >   
  12.     </div>
  13.   </div>
  14.   <div class = "kontrolliryhmä" > 
  15.     <div class = "säätimet" > 
  16.       <label class = "valintaruutu" > 
  17.         <input type = "checkbox" > Muista minut 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Kirjaudu sisään </button>  
  20.     </div>
  21.   </div>
  22. </form>

Tuetut lomakeohjaimet

Esimerkkejä vakiolomakkeen ohjausobjekteista, joita tuetaan esimerkkilomakkeen asettelussa.

Tulot

Yleisimmät lomakehallinta, tekstipohjaiset syöttökentät. Sisältää tuen kaikille HTML5-tyypeille: teksti, salasana, päivämäärä-aika, päivämäärä-aika-paikallinen, päivämäärä, kuukausi, aika, viikko, numero, sähköposti, URL-osoite, haku, puhelin ja väri.

Edellyttää määritellyn käytön typeaina.

  1. <syöttötyyppi = " teksti" paikkamerkki = "Tekstin syöttö" >

Textarea

Lomakkeen ohjaus, joka tukee useita tekstirivejä. Muuta rowsattribuuttia tarpeen mukaan.

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

Valintaruudut ja radiot

Valintaruuduilla voit valita yhden tai useamman vaihtoehdon luettelosta, kun taas radiot ovat yhden vaihtoehdon valitsemiseen useista.

Oletus (pinottu)


  1. <label class = "valintaruutu" > 
  2.   <input type = "checkbox" value = "" >  
  3.   Vaihtoehto yksi on tämä ja tuo – muista mainita, miksi se on hienoa
  4. </label>
  5.  
  6. <label class = "radio" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "optio1" valittu >     
  8.   Vaihtoehto yksi on tämä ja tuo – muista mainita, miksi se on hienoa
  9. </label>
  10. <label class = "radio" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "optio2" >    
  12.   Vaihtoehto kaksi voi olla jotain muuta, ja sen valitseminen poistaa vaihtoehdon yksi valinnan
  13. </label>

Inline-valintaruudut

Lisää .inlineluokka valintaruutujen sarjaan tai säätimet näkyvät samalla rivillä.

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

Valitsee

Käytä oletusvaihtoehtoa tai määritä a multiple="multiple"näyttääksesi useita vaihtoehtoja kerralla.


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

Lomakkeen ohjaimien laajentaminen

Bootstrap sisältää muita hyödyllisiä lomakekomponentteja nykyisten selainohjaimien lisäksi.

Lisätyt ja liitetyt syötteet

Lisää tekstiä tai painikkeita ennen tai jälkeen mitä tahansa tekstipohjaista syöttöä. Huomaa, että selectelementtejä ei tueta tässä.

Oletusasetukset

Kääri an .add-onja an inputjollakin kahdesta luokasta liittääksesi tekstin syötteeseen.

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "lisäosa" > @ </span> 
  3.   <input class = "span2" id = "prependedInput" type = "text" placeholder = "Käyttäjänimi" >    
  4. </div>
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "apendedInput " type = "teksti" >   
  7.   <span class = "lisäosa" > .00 </span> 
  8. </div>

Yhdistetty

Käytä sekä luokkia että kahta esiintymää .add-onsyötteen eteen ja liittämiseen.

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

Painikkeet tekstin sijaan

<span>Käytä tekstiä sisältävän a:n sijaan .btnliittääksesi painikkeen (tai kaksi) syötteeseen.

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

Painikkeiden pudotusvalikot

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

Segmentoidut avattavat ryhmät

  1. <lomake>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     <syöttötyyppi = " teksti " > 
  5.   </div>
  6.   <div class = "input-append" > 
  7.     <syöttötyyppi = " teksti " > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

Hakulomake

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

Hallitse kokoa

Käytä suhteellisia kokoluokkia, kuten .input-largetai sovita syötteesi ruudukon sarakkeiden kokoihin .span*luokkien avulla.

Estä tason tulot

Saa mikä tahansa <input>tai <textarea>elementti käyttäytymään kuten lohkotason elementti.

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

Suhteellinen koko

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

Varoitus!Tulevissa versioissa muutamme näiden suhteellisten syöttöluokkien käyttöä vastaamaan painikkeiden kokojamme. Esimerkiksi .input-largelisää syötteen täyttöä ja fonttikokoa.

Ruudukon mitoitus

Käytä syötteille, .span1jotka .span12vastaavat samoja ruudukon sarakkeiden kokoja.

  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. <valitse luokka = "span1" > 
  5.   ...
  6. </select>
  7. <valitse luokka = "span2" > 
  8.   ...
  9. </select>
  10. <valitse luokka = "span3" > 
  11.   ...
  12. </select>

Jos riviä kohden syötetään useita ruudukkosyötteitä, käytä .controls-rowmuokkausluokkaa oikeaan väliin . Se kelluu syötteet tiivistämään tyhjää tilaa, asettaa oikeat marginaalit ja tyhjentää kellunta.

  1. <div class = "säätimet" > 
  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. ...

Muokamattomat syötteet

Esitä tiedot muodossa, jota ei voi muokata ilman varsinaisia ​​lomakemerkintöjä.

Jotain arvoa tässä 
  1. <span class = "input-xlarge uneditable-input" > Jotain arvoa tässä </span>

Lomaketoiminnot

Lopeta lomake toimintoryhmällä (painikkeet). Kun painikkeet sijoitetaan .form-actionskohtaan , ne sisennetään automaattisesti lomakkeen säätimien kanssa.

  1. <div class = "form-actions" > 
  2.   <button type = "submit" class = "btn btn-primary" > Tallenna muutokset </button>  
  3.   <button type = "button" class = "btn" > Peruuta </button>  
  4. </div>

Ohjeteksti

Inline- ja lohkotason tuki ohjetekstille, joka näkyy lomakesäätimien ympärillä.

Sisäänrakennettu ohje

Sisäinen ohjeteksti 
  1. <input type = "text" ><span class = "help-inline" > Upotettu ohjeteksti </span>

Estä ohje

Pidempi ohjetekstilohko, joka katkeaa uudelle riville ja voi ulottua yhden rivin ulkopuolelle. 
  1. <input type = "text" ><span class = "help-block" > Pidempi ohjetekstilohko, joka katkeaa uudelle riville ja voi ulottua yhden rivin ulkopuolelle. </span>

Lomakkeen hallintatilat

Anna käyttäjille tai vierailijoille palautetta lomakkeiden ohjaimista ja tunnisteista.

Syötä tarkennus

Poistamme oletustyylit outlinejoistakin lomakesäätimistä ja käytämme box-shadowsen tilalle -merkkiä :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Tämä on kohdistettu..." >

Virheelliset syötteet

Tyylitulot selaimen oletustoimintojen kautta käyttämällä :invalid. Määritä type, lisää requiredattribuutti, jos kenttä ei ole valinnainen, ja määritä (jos mahdollista) pattern.

Tämä ei ole saatavilla Internet Explorer 7-9 -versioissa, koska se ei tue CSS-pseudovalitsimia.

  1. <input class = "span3" type = "sähköposti" vaaditaan >

Poistetut tulot

Lisää disabledmäärite syötteeseen estääksesi käyttäjän syöttämisen ja käynnistääksesi hieman erilaisen ilmeen.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Poistettu syöttö täällä..." pois käytöstä >

Validointitilat

Bootstrap sisältää validointityylejä virheille, varoille, tiedoille ja onnistumisviesteille. Käytä lisäämällä sopiva luokka ympäröivään .control-group.

Jokin on saattanut mennä pieleen
Korjaa virhe
Käyttäjänimi on otettu
Woohoo! 
  1. <div class = "kontrolliryhmän varoitus" > 
  2.   <label class = "control-label" for = "inputWarning" > Syöte varoituksella </label>  
  3.   <div class = "säätimet" > 
  4.     <syöttötyyppi = " teksti" id = "inputWarning" >  
  5.     <span class = "help-inline" > Jokin on saattanut mennä pieleen </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "ohjausryhmän virhe" > 
  10.   <label class = "control-label" for = "inputError" > Virheellinen syöte </label>  
  11.   <div class = "säätimet" > 
  12.     <syöttötyyppi = " teksti" id = "syöttövirhe" >  
  13.     <span class = "help-inline" > Korjaa virhe </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "kontrolliryhmän tiedot" > 
  18.   <label class = "control-label" for = "inputInfo" > Syötä tiedot </label>  
  19.   <div class = "säätimet" > 
  20.     <syöttötyyppi = " teksti" id = "inputInfo" >  
  21.     <span class = "help-inline" > Käyttäjätunnus on jo varattu </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "kontrolliryhmän menestys" > 
  26.   <label class = "control-label" for = "inputSuccess" > Syöte onnistui </label>  
  27.   <div class = "säätimet" > 
  28.     <syöttötyyppi = " teksti" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </div>

Painikkeet

Oletuspainikkeet

Painiketyylejä voidaan soveltaa mihin tahansa .btnluokkaa sovellettaessa. Yleensä kuitenkin kannattaa käyttää näitä vain <a>ja <button>elementteihin parhaan hahmontamisen saavuttamiseksi.

Painike class="" Kuvaus
btn Normaali harmaa painike gradientilla
btn btn-primary Tarjoaa lisää visuaalista painoarvoa ja tunnistaa ensisijaisen toiminnon painikesarjassa
btn btn-info Käytetään vaihtoehtona oletustyyleille
btn btn-success Osoittaa onnistuneen tai positiivisen toimenpiteen
btn btn-warning Osoittaa, että tämän toimenpiteen kanssa tulee noudattaa varovaisuutta
btn btn-danger Osoittaa vaarallista tai mahdollisesti negatiivista toimintaa
btn btn-inverse Vaihtoehtoinen tummanharmaa painike, jota ei ole sidottu semanttiseen toimintaan tai käyttöön
btn btn-link Vähennä painikkeen painoarvoa tekemällä siitä linkin näköinen säilyttäen samalla painikkeen toiminnan

Selainten välinen yhteensopivuus

IE9 ei rajaa taustagradientteja pyöristetyissä kulmissa, joten poistamme sen. Aiheeseen liittyvä IE9 poistaa käytöstä poistettuja buttonelementtejä ja tekee tekstistä harmaata ja ikäviä tekstivarjoja, joita emme voi korjata.

Painikkeiden koot

Haluatko suurempia vai pienempiä painikkeita? Lisää .btn-large, .btn-small, tai .btn-minilisäkokoja varten.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Suuri painike </button>  
  3.   <button class = "btn btn-large" type = "button" > Suuri painike </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Oletuspainike </button>  
  7.   <button class = "btn" type = "button" > Oletuspainike </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Pieni painike </button>  
  11.   <button class = "btn btn-small" type = "button" > Pieni painike </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Minipainike </button>  
  15.   <button class = "btn btn-mini" type = "button" > Minipainike </button>  
  16. </p>

Luo lohkotason painikkeita – sellaisia, jotka kattavat ylätason koko leveyden – lisäämällä .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Estätason painike </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > Estätason painike </button>

Pois käytöstä

Saat painikkeet näyttämään napsauttamattomilta häivyttämällä niitä 50 % taaksepäin.

Ankkuri elementti

Lisää .disabledluokka <a>painikkeisiin.

Ensisijainen linkki Linkki 

  1. <a href = "#" class = "btn btn-large btn-primary pois käytöstä" > Ensisijainen linkki </a>  
  2. <a href = "#" class = "btn btn-large poistettu käytöstä" > Linkki </a>

Varoitus!Käytämme .disabledtässä hyödyllisyysluokkana, joka on samanlainen kuin yleinen .activeluokka, joten etuliitettä ei vaadita. Lisäksi tämä luokka on vain esteettinen; sinun on käytettävä mukautettua JavaScriptiä poistaaksesi linkit täältä.

Painikeelementti

Lisää disabledattribuutti <button>painikkeisiin.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" enabled = "pois käytöstä" > Ensisijainen painike </button>   
  2. <button type = "button" class = "btn btn-large" ei käytössä > Painike </button>

Yksi luokka, useita tunnisteita

Käytä .btnluokkaa elementissä <a>, <button>, tai <input>.

Linkki 
  1. <a class = "btn" href = "" > Linkki </a>  
  2. <button class = "btn" type = "submit" > Painike </button>  
  3. <input class = "btn" type = "button" value = "Syöte" >   
  4. <input class = "btn" type = "submit" value = "Lähetä" >

Paras käytäntö on, että yritä sovittaa elementti kontekstisi mukaan varmistaaksesi vastaavan selaimen välisen renderöinnin. Jos sinulla on input, käytä <input type="submit">painiketta .

Kuvat

Lisää luokkia <img>elementtiin muotoillaksesi kuvia helposti missä tahansa projektissa.

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

Varoitus! .img-roundedeivätkä .img-circlene toimi IE7-8:ssa tuen puutteen vuoksi border-radius.

Glyphiconsin kuvakkeet _

Ikonimerkit

140 kuvaketta sprite-muodossa, saatavilla tummanharmaana (oletus) ja valkoisena, tarjoaa Glyphicons .

  • ikoni-lasi
  • ikoni-musiikki
  • kuvakehaku
  • kuvake-kuori
  • ikoni-sydän
  • ikoni-tähti
  • kuvake-tähti-tyhjä
  • kuvake-käyttäjä
  • ikoni-elokuva
  • kuvake-suuri
  • ikoni-th
  • icon-th-list
  • kuvake-ok
  • kuvake-poista
  • kuvake-zoomaus
  • icon-zoom-out
  • kuvake pois päältä
  • kuvake-signaali
  • ikoni-hammaspyörä
  • kuvake-roskakori
  • ikoni-koti
  • kuvake-tiedosto
  • ikoni-aika
  • ikonitie
  • icon-download-alt
  • kuvake-lataus
  • kuvake-lataus
  • kuvake-postilaatikko
  • kuvake-leikki-ympyrä
  • kuvake-toisto
  • kuvake-päivitys
  • icon-list-alt
  • kuvake-lukko
  • ikoni-lippu
  • ikoni-kuulokkeet
  • icon-volume-off
  • kuvake-äänenvoimakkuuden vähennys
  • kuvakkeen äänenvoimakkuuden lisäys
  • icon-qrcode
  • kuvake-viivakoodi
  • kuvake-tunniste
  • kuvake-tunnisteet
  • ikoni-kirja
  • kuvake-kirjanmerkki
  • kuvake-tulostus
  • kuvake-kamera
  • kuvake-fontti
  • kuvake-lihavoitu
  • kursivoitu kuvake
  • kuvake-teksti-korkeus
  • kuvake-tekstin leveys
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • kuvakeluettelo
  • kuvake-sisennys-vasen
  • kuvake-sisennys-oikea
  • icon-facetime-video
  • kuvake-kuva
  • ikoni-kynä
  • icon-map-marker
  • kuvake-säätö
  • kuvake-sävy
  • kuvake-muokkaus
  • ikoni-osuus
  • kuvake-tarkistus
  • kuvake-siirto
  • kuvake-askel-taaksepäin
  • kuvake-pika taaksepäin
  • kuvake taaksepäin
  • icon-play
  • kuvake-tauko
  • icon-stop
  • kuvake eteenpäin
  • kuvake-kelaus eteenpäin
  • kuvake-askel eteenpäin
  • kuvake-poisto
  • icon-chevron-vasen
  • icon-chevron-right
  • kuvake-plus-merkki
  • kuvake-miinus-merkki
  • kuvake-poista-merkki
  • kuvake-ok-merkki
  • kuvake-kysymys-merkki
  • kuvake-info-merkki
  • kuvake-kuvakaappaus
  • kuvake-poista-ympyrä
  • kuvake-ok-ympyrä
  • kuvake-kielto-ympyrä
  • kuvake-nuoli-vasen
  • kuvake-nuoli oikealle
  • kuvake-nuoli ylös
  • kuvake-nuoli-alas
  • icon-share-alt
  • icon-resize-full
  • kuvake-muuta kokoa-pieni
  • icon-plus
  • kuvake-miinus
  • kuvake-tähti
  • kuvake-huutomerkki
  • ikoni-lahja
  • ikoni-lehti
  • ikoni-tuli
  • ikoni-silmä auki
  • kuvake-silmä kiinni
  • kuvake-varoitus-merkki
  • ikoni-taso
  • ikoni-kalenteri
  • ikoni-satunnainen
  • ikoni-kommentti
  • ikoni-magneetti
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • kuvake-ostoskori
  • icon-folder-close
  • kuvake-kansio-avoin
  • icon-resize-pysty
  • icon-resize-horizontal
  • icon-hdd
  • kuvake-bullhorn
  • ikoni-kello
  • ikoni-todistus
  • kuvake-peukalo ylös
  • kuvake-peukalo alas
  • kuvake-käsi-oikea
  • icon-hand-vasen
  • kuvake-käsi ylös
  • kuvake-käsi alas
  • kuvake-ympyrä-nuoli oikealle
  • kuvake-ympyrä-nuoli-vasen
  • kuvake-ympyrä-nuoli ylös
  • kuvake-ympyrä-nuoli-alas
  • ikoni-maapallo
  • ikoni-avain
  • ikonitehtävät
  • kuvake-suodatin
  • ikoni-salkku
  • kuvake-koko näyttö

Glyphicons-attribuutio

Glyphicons Halflings ei yleensä ole saatavilla ilmaiseksi, mutta Bootstrapin ja Glyphiconsin tekijöiden välinen järjestely on mahdollistanut tämän ilman kustannuksia sinulle kehittäjinä. Kiitoksena pyydämme sinua sisällyttämään valinnaisen linkin takaisin Glyphiconsiin aina kun se on mahdollista.

Kuinka käyttää

Kaikki kuvakkeet vaativat <i>tunnisteen, jossa on yksilöllinen luokka, jonka etuliite on icon-. Käytä seuraavaa koodia sijoittamalla melkein minne tahansa:

  1. <i class = "kuvakehaku" ></i>

Saatavilla on myös tyylejä käänteisille (valkoisille) kuvakkeille, jotka on tehty valmiiksi yhdellä ylimääräisellä luokalla. Käytämme tätä luokkaa erityisesti navigointi- ja avattavien linkkien hover- ja aktiivisissa tiloissa.

  1. <i class = "kuvake-haku kuvake-valkoinen" ></i>

Varoitus!Kun käytät tekstiä merkkijonojen vieressä, kuten painikkeissa tai navigointilinkeissä, muista jättää välilyönti <i>tunnisteen perään oikean välityksen varmistamiseksi.

Esimerkkejä kuvakkeista

Käytä niitä painikkeissa, painikeryhmissä työkalupalkissa, navigoinnissa tai lisättyjen lomakkeiden syötteissä.

Painikkeet

Painikeryhmä painiketyökalurivillä
  1. <div class = "btn-työkalupalkki" > 
  2.   <div class = "btn-ryhmä" > 
  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>
Pudotusvalikko painikeryhmässä
Käyttäjä 
  1. <div class = "btn-ryhmä" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Käyttäjä </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "pudotusvalikko" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> Muokkaa </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Poista </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Estä </a></li>  
  8.     <li class = "jakaja" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Tee järjestelmänvalvojaksi </a></li>  
  10.   </ul>
  11. </div>
Painikkeiden koot
Tähti Tähti Tähti 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Tähti </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Tähti </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Tähti </a>

Navigointi

  1. <ul class = "nav nav-list" > 
  2.   <li class = "aktiivinen" ><a href = "#" ><i class = "icon-home icon-white" ></i> Etusivu </a></li>   
  3.   <li><a href = "#" ><i class = "ikonikirja" ></i> Kirjasto </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Sovellukset </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Muut </a></li>  
  6. </ul>

Lomakekentät

  1. <div class = "kontrolliryhmä" > 
  2.   <label class = "control-label" for = "inputIcon" > Sähköpostiosoite </label>  
  3.   <div class = "säätimet" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "lisäosa" ><i class = "kuvake-kirjekuori" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "text" >   
  7.     </div>
  8.   </div>
  9. </div>