Bootstrap

Bazinis CSS

Pagrindiniai HTML elementai, sukurti ir patobulinti išplečiamomis klasėmis.

Tipografija

Antraštės

Galimos visos HTML antraštės <h1>.<h6>

h1. 1 antraštė

h2. 2 antraštė

h3. 3 antraštė

h4. 4 antraštė

h5. 5 antraštė
h6. 6 antraštė

Kūno kopija

„Bootstrap“ visuotinis numatytasis font-sizedydis yra 14 pikselių , o line-height20 pikselių . Tai taikoma <body>ir visoms pastraipoms. Be to, <p>(pastraipos) gauna apatinę paraštę, kuri yra pusė jų linijos aukščio (pagal numatytuosius nustatymus 10 piks.).

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>

Pagrindinio teksto kopija

Išryškinkite pastraipą pridėdami .lead.

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

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

Sukurta naudojant mažiau

Tipografinė skalė pagrįsta dviem MAŽIAIS kintamaisiais kintamuosiuose.mažiau : @baseFontSizeir @baseLineHeight. Pirmasis yra pagrindinis šrifto dydis, naudojamas visame pasaulyje, o antrasis yra pagrindinės linijos aukštis. Naudojame tuos kintamuosius ir paprastą matematiką, kad sukurtume visų tipų paraštes, užpildus ir linijų aukštį ir dar daugiau. Tinkinkite juos ir „Bootstrap“ prisitaikys.

Pabrėžimas

Naudokite HTML numatytąsias paryškinimo žymas su lengvaisiais stiliais.

<small>

Norėdami sumažinti eilutę arba teksto blokus, naudokite mažą žymą.

Ši teksto eilutė turi būti traktuojama kaip smulkiu šriftu.

<p> <small> Ši teksto eilutė turi būti traktuojama kaip smulkiu šriftu. </small> </p>

Paryškintas

Norėdami pabrėžti teksto fragmentą su didesniu šriftu.

Šis teksto fragmentas pateikiamas kaip paryškintas tekstas .

<strong> pateiktas kaip paryškintas tekstas </strong>

Kursyvas

Už teksto fragmento paryškinimą kursyvu.

Šis teksto fragmentas pateikiamas kursyvu .

<em> pateiktas kursyvu </em>

Galvas aukštyn!Nesivaržykite naudoti <b>ir <i>HTML5. <b>skirtas paryškinti žodžius ar frazes, nesuteikiant papildomos svarbos, o <i>dažniausiai skirtas balsui, techniniams terminams ir pan.

Akcentavimo klasės

Perteikite prasmę spalvomis naudodami keletą naudingumo klasių.

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

Santrumpos

Stilizuotas HTML <abbr>elemento įgyvendinimas santrumpos ir akronimai, kad būtų rodoma išplėstinė versija užvedus pelės žymeklį. Santrumpos su titleatributu turi šviesiai punktyruotą apatinę kraštinę ir pagalbos žymeklį užvedus pelės žymeklį, suteikiantį papildomo konteksto užvedus pelės žymeklį.

<abbr>

Jei norite išplėsti tekstą ant ilgo santrumpos užvedimo, įtraukite titleatributą.

Žodžio atributas santrumpa yra attr .

<abbr title = "atributas" > atr </abbr>

<abbr class="initialism">

Pridėkite .initialismprie santrumpos, kad sumažintumėte šrifto dydį.

HTML yra geriausias dalykas nuo pjaustytos duonos.

<abbr title = "Hiperteksto žymėjimo kalba" class = "inicializmas" > HTML </abbr>

Adresai

Pateikite artimiausio protėvio arba viso darbo kontaktinę informaciją.

<address>

Išsaugokite formatavimą užbaigdami visas eilutes su <br>.

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

Blokinės citatos

Jei norite cituoti turinio blokus iš kito dokumento šaltinio.

Numatytoji blokinė citata

Apvyniokite <blockquote>bet kurį HTML kaip citatą. Tiesioms citatoms rekomenduojame <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sveikasis skaičius posuere erat a ante.

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

Blokinės citatos parinktys

Stilius ir turinys keičiami paprastiems standartinės citatos variantams.

Šaltinio įvardijimas

Pridėkite <small>žymą šaltiniui nustatyti. Įtraukite šaltinio darbo pavadinimą į <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sveikasis skaičius posuere erat a ante.

Kažkas žinomas šaltinio antraštėje 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sveikasis skaičius posuere erat a ante. </p>
  3.   <small> Kažkas žinomas <cite title = "Šaltinio pavadinimas" > Šaltinio pavadinimas </cite></small> 
  4. </blockquote>

Alternatyvūs ekranai

Naudokite .pull-rightplūduriuojančiai, dešinėje išlygiuotai citatai.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sveikasis skaičius posuere erat a ante.

Kažkas žinomas šaltinio antraštėje 
  1. <blockquote class = "traukite į dešinę" > 
  2.   ...
  3. </blockquote>

Sąrašai

Neužsakyta

Elementų, kurių eilės tvarka nėra aiškiai svarbi, sąrašas.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem ir masa
  • 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>

Užsakyta

Elementų, kurių tvarka yra aiškiai svarbi, sąrašas.

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

Nestiliuotas

Elementų sąrašas list-stylebe kairiojo užpildymo arba papildomo užpildo.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem ir masa
  • 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 = "be stiliaus" > 
  2.   <li> ... </li>
  3. </ul>

apibūdinimas

Terminų sąrašas su susijusiais aprašymais.

Aprašų sąrašai
Aprašų sąrašas puikiai tinka terminams apibrėžti.
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>

Horizontalus aprašymas

Sudėkite terminus ir aprašymus <dl>greta.

Aprašų sąrašai
Aprašų sąrašas puikiai tinka terminams apibrėžti.
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-horizontalus" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Galvas aukštyn!Horizontaliuose aprašų sąrašuose bus sutrumpinti terminai, kurie yra per ilgi, kad tilptų kairiajame stulpelyje text-overflow. Siauresnėse peržiūros srityse jie pasikeis į numatytąjį sudėtinį išdėstymą.

Kodas

Inline

Įterptuosius kodo fragmentus apvyniokite <code>.

Pavyzdžiui, <section>turėtų būti suvyniota kaip įterpta. 
  1. Pavyzdžiui , <code > <section> </ code > turėtų būti įterptas į eilutę .

Pagrindinis blokas

Naudokite <pre>kelioms kodo eilutėms. Kad būtų galima tinkamai atvaizduoti, kode būtinai pašalinkite kampinius skliaustus.

<p>Teksto pavyzdys čia...</p>
  1. <prieš>
  2.   <p>Teksto pavyzdys čia...</p>
  3. </pre>

Galvas aukštyn!Būtinai laikykite kodą <pre>žymose kuo arčiau kairės; jis parodys visus skirtukus.

Pasirinktinai galite pridėti .pre-scrollableklasę, kuri nustatys maksimalų 350 pikselių aukštį ir pateiks y ašies slinkties juostą.

Lentelės

Numatytieji stiliai

Jei norite sukurti pagrindinį stilių – lengvą kamšalą ir tik horizontalias pertvaras – pridėkite bazinę klasę .tableprie bet kurio <table>.

# Pirmas vardas Pavardė Vartotojo vardas
1 ženklas Otto @mdo
2 Jokūbas Torntonas @riebus
3 Laris paukštis @twitter 
  1. <lentelės klasė = "lentelė" > 
  2.   …
  3. </table>

Neprivalomi užsiėmimai

Pridėkite bet kurią iš šių klasių prie .tablepagrindinės klasės.

.table-striped

Prideda zebro juosteles prie bet kurios lentelės eilutės per <tbody>CSS :nth-childparinkiklį (nepasiekiama IE7-IE8).

# Pirmas vardas Pavardė Vartotojo vardas
1 ženklas Otto @mdo
2 Jokūbas Torntonas @riebus
3 Laris paukštis @twitter 
  1. <table class = "stalo lentelė dryžuota" > 
  2.   …
  3. </table>

.table-bordered

Pridėkite prie stalo kraštelius ir užapvalintus kampus.

# Pirmas vardas Pavardė Vartotojo vardas
1 ženklas Otto @mdo
ženklas Otto @getbootstrap
2 Jokūbas Torntonas @riebus
3 Laris Paukštis @twitter 
  1. <table class = "lentelė su lentelės kraštais" > 
  2.   …
  3. </table>

.table-hover

Įgalinkite pelės žymeklio užvedimo būseną lentelės eilutėse, esančiose <tbody>.

# Pirmas vardas Pavardė Vartotojo vardas
1 ženklas Otto @mdo
2 Jokūbas Torntonas @riebus
3 Laris Paukštis @twitter 
  1. <table class = "table table-hover" > 
  2.   …
  3. </table>

.table-condensed

Padaro stalus kompaktiškesnius per pusę perpjaunant ląstelių kamšalą.

# Pirmas vardas Pavardė Vartotojo vardas
1 ženklas Otto @mdo
2 Jokūbas Torntonas @riebus
3 Laris Paukštis @twitter 
  1. <table class = "sutraukta lentelė" > 
  2.   …
  3. </table>

Neprivalomos eilučių klasės

Norėdami nuspalvinti lentelės eilutes, naudokite kontekstines klases.

Klasė apibūdinimas
.success Nurodo sėkmingą arba teigiamą veiksmą.
.error Nurodo pavojingą arba galimai neigiamą veiksmą.
.warning Nurodo įspėjimą, į kurį gali prireikti dėmesio.
.info Naudojamas kaip alternatyva numatytiesiems stiliams.
# Produktas Mokėjimas paimtas Būsena
1 TB – kas mėnesį 2012-01-04 Patvirtinta
2 TB – kas mėnesį 2012-02-04 Atmesta
3 TB – kas mėnesį 2012-03-04 Kol
4 TB – kas mėnesį 2012-04-04 Paskambinkite, kad patvirtintumėte 
  1. ...
  2.   < tr class = "sėkmė" >
  3.     <td> 1 < /td>
  4.     <td>TB – kas mėnesį</ td >
  5.     < td > 2012-04-01 < / td >
  6.     <td>Patvirtinta</ td >
  7.   </ tr >
  8. ...

Palaikomas lentelės žymėjimas

Palaikomų lentelės HTML elementų sąrašas ir kaip jie turėtų būti naudojami.

Žyma apibūdinimas
<table> Apvyniojimo elementas duomenims rodyti lentelės formatu
<thead> Sudėtinio rodinio elementas lentelės antraštės eilutėms ( <tr>), skirtas lentelės stulpeliams pažymėti
<tbody> Sudėtinio rodinio elementas lentelės eilutėms ( <tr>) lentelės turinyje
<tr> Sudėtinio rodinio elementas lentelės langelių rinkiniui ( <td>arba <th>), kuris rodomas vienoje eilutėje
<td> Numatytasis lentelės langelis
<th> Specialus lentelės langelis stulpelio (arba eilutės, atsižvelgiant į taikymo sritį ir vietą) etiketėms
Turi būti naudojamas a<thead>
<caption> Lentelėje esančios informacijos aprašymas arba santrauka, ypač naudinga ekrano skaitytuvams 
  1. <lentelė>
  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>

Formos

Numatytieji stiliai

Atskiriems formų valdikliams suteikiamas stilius, bet be jokios būtinos pagrindinės žymėjimo klasės <form>ar didelių žymėjimo pakeitimų. Formos valdiklių viršuje pateikiamos sukrautos, kairėje išlygiuotos etiketės.

Legenda Čia yra bloko lygio pagalbos teksto pavyzdys. 
  1. <forma>
  2.   <laukų rinkinys>
  3.     <legend> Legend </legend>
  4.     <label> Etiketės pavadinimas </label>
  5.     <input type = "text" placeholder = "Įveskite ką nors..." >  
  6.     <span class = "help-block" > Čia yra bloko lygio pagalbos teksto pavyzdys. </span> 
  7.     <label class = "žymės langelis" > 
  8.       <input type = "checkbox" > Patikrinkite mane 
  9.     </label>
  10.     <button type = "submit" class = "btn" > Pateikti </button>  
  11.   </fieldset>
  12. </form>

Neprivalomi maketai

Kartu su „Bootstrap“ yra trys pasirenkami formų išdėstymai, skirti įprastam naudojimui.

Paieškos forma

Pridėkite .form-searchprie formos ir .search-queryprie, kad <input>įvestumėte itin suapvalintą tekstą.

  1. <form class = "form-search" > 
  2.   <input type = "text" class = "įvesties terpės paieškos užklausa" >  
  3.   <button type = "submit" class = "btn" > Ieškoti </button>  
  4. </form>

Įdėta forma

Pridėkite .form-inlinekairėje lygiuojamoms etiketėms ir įterptųjų blokų valdiklius, kad būtų kompaktiškas išdėstymas.

  1. <form class = "form-inline" > 
  2.   <input type = "text" class = "input-small" placeholder = "El. paštas" >   
  3.   <input type = "slaptažodis" class = "input-small" placeholder = "Slaptažodis" >   
  4.   <label class = "žymės langelis" > 
  5.     <input type = "checkbox" > Prisiminti mane 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Prisijungti </button>  
  8. </form>

Horizontali forma

Sulygiuokite etiketes dešinėje ir paslinkite jas į kairę, kad jos būtų rodomos toje pačioje eilutėje kaip ir valdikliai. Reikia daugiausiai žymėjimo pakeitimų iš numatytosios formos:

  • Pridėti .form-horizontalį formą
  • Apvyniokite etiketes ir valdiklius.control-group
  • Pridėti .control-labelprie etiketės
  • Apvyniokite visus susijusius valdiklius, kad jie .controlsbūtų tinkamai sulygiuoti
  1. <form class = "horizontali forma" > 
  2.   <div class = "kontrolinė grupė" > 
  3.     <label class = "control-label" for = "inputEmail" > El . paštas </label>  
  4.     <div class = "valdikliai" > 
  5.       <input type = "text" id = "inputEmail" placeholder = "El. paštas" >   
  6.     </div>
  7.   </div>
  8.   <div class = "kontrolinė grupė" > 
  9.     <label class = "control-label" for = "inputPassword" > Slaptažodis </label>  
  10.     <div class = "valdikliai" > 
  11.       <input type = "slaptažodis" id = "inputPassword" placeholder = "Slaptažodis" >   
  12.     </div>
  13.   </div>
  14.   <div class = "kontrolinė grupė" > 
  15.     <div class = "valdikliai" > 
  16.       <label class = "žymės langelis" > 
  17.         <input type = "checkbox" > Prisiminti mane 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Prisijungti </button>  
  20.     </div>
  21.   </div>
  22. </form>

Palaikomi formų valdikliai

Standartinių formos valdiklių pavyzdžiai, palaikomi formos išdėstymo pavyzdyje.

Įėjimai

Dažniausiai naudojamas formų valdymas, teksto įvesties laukai. Apima visų HTML5 tipų palaikymą: tekstą, slaptažodį, datą, laiką, vietinį datą, laiką, datą, mėnesį, laiką, savaitę, numerį, el. paštą, URL, paiešką, telefoną ir spalvą.

Visada reikia naudoti nurodytą type.

  1. <input type = "text" placeholder = "Teksto įvestis" >

Textarea

Formos valdiklis, kuris palaiko kelias teksto eilutes. Jei reikia, pakeiskite rowsatributą.

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

Žymės langeliai ir radijo imtuvai

Žymieji langeliai yra skirti pasirinkti vieną ar kelias parinktis sąraše, o radijo imtuvai skirti pasirinkti vieną iš daugelio.

Numatytasis (sudarytas)


  1. <label class = "žymės langelis" > 
  2.   <input type = "checkbox" value = "" >  
  3.   Pirmas variantas yra tas ir tas – būtinai nurodykite, kodėl tai puikus
  4. </label>
  5.  
  6. <label class = "radijas" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "1 parinktis " pažymėta >     
  8.   Pirmas variantas yra tas ir tas – būtinai nurodykite, kodėl tai puikus
  9. </label>
  10. <label class = "radijas" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  12.   Antroji parinktis gali būti kitokia, o ją pasirinkus bus panaikintas pirmosios parinkties pasirinkimas
  13. </label>

Eilutiniai žymimieji laukeliai

Pridėkite .inlineklasę prie žymimųjų laukelių serijos arba toje pačioje eilutėje bus rodomi valdikliai.

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

Parenka

Naudokite numatytąją parinktį arba nurodykite a multiple="multiple", kad vienu metu būtų rodomos kelios parinktys.


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

Formos valdiklių išplėtimas

Be esamų naršyklės valdiklių, „Bootstrap“ apima kitus naudingus formos komponentus.

Pridėti ir pridėti įvestis

Pridėkite tekstą arba mygtukus prieš arba po bet kokios teksto įvesties. Atminkite, kad selectelementai čia nepalaikomi.

Numatytosios parinktys

Apvyniokite an .add-onir an inputviena iš dviejų klasių, kad pridėtumėte arba pridėtumėte tekstą prie įvesties.

@

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

Kombinuotas

.add-onNorėdami pridėti ir pridėti įvestį , naudokite abi klases ir du egzempliorius .

$ .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 = "priedas" > .00 </span> 
  5. </div>

Mygtukai vietoj teksto

Vietoj a <span>su tekstu naudokite a .btn, kad pridėtumėte mygtuką (arba du) prie įvesties.

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "apendedInputButton " type = "text" >   
  3.   <button class = "btn" type = "button" > Pirmyn! </button>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "apendedInputButtons " type = "text" >   
  3.   <button class = "btn" type = "button" > Ieškoti </button>  
  4.   <button class = "btn" type = "button" > Parinktys </button>  
  5. </div>

Mygtukų išskleidžiamieji meniu

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "apendedDropdownButton " type = "text" >   
  3.   <div class = "btn-group" > 
  4.     <button class = "btn dropdown-toggle" data-toggle = "išskleidžiamasis sąrašas" >  
  5.       Veiksmas
  6.       <span class = "caret" ></span> 
  7.     </button>
  8.     <ul class = "išskleidžiamasis meniu" > 
  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 = "išskleidžiamasis sąrašas" >  
  4.       Veiksmas
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "išskleidžiamasis meniu" > 
  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 = "išskleidžiamasis sąrašas" >  
  4.       Veiksmas
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "išskleidžiamasis meniu" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "apendedPrependedDropdownButton " type = "text" >   
  12.   <div class = "btn-group" > 
  13.     <button class = "btn dropdown-toggle" data-toggle = "išskleidžiamasis sąrašas" >  
  14.       Veiksmas
  15.       <span class = "caret" ></span> 
  16.     </button>
  17.     <ul class = "išskleidžiamasis meniu" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Paieškos forma

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

Kontrolės dydis

Naudokite santykines dydžio klases .input-largearba suderinkite įvestis su tinklelio stulpelių dydžiais naudodami .span*klases.

Blokuoti lygio įvestis

Priverskite bet kurį <input>arba <textarea>elementą veikti kaip bloko lygio elementą.

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

Santykinis dydis

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

Galvas aukštyn!Ateities versijose pakeisime šių santykinių įvesties klasių naudojimą, kad atitiktų mūsų mygtukų dydžius. Pavyzdžiui, .input-largepadidins įvesties užpildymą ir šrifto dydį.

Tinklelio dydis

Naudokite .span1to .span12įvestims, kurios atitinka tuos pačius tinklelio stulpelių dydžius.

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

Jei vienoje eilutėje norite įvesti kelias tinklelio įvestis, naudokite .controls-rowmodifikatoriaus klasę, kad būtų tinkamai išdėstyti tarpai . Jis plūduriuoja įvestis, kad sutrauktų tarpą, nustato tinkamas paraštes ir išvalo plūdę.

  1. <div class = "valdikliai" > 
  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. ...

Neredaguojami įvestis

Pateikite duomenis formoje, kurios negalima redaguoti nenaudojant tikrojo formos žymėjimo.

Čia kažkokia vertybė 
  1. <span class = "input-xlarge uneditable-input" > Čia yra tam tikra reikšmė </span>

Formos veiksmai

Užbaikite formą veiksmų (mygtukų) grupe. Įdėjus į .form-horizontal, mygtukai automatiškai įtraukiami, kad atitiktų formos valdiklius.

  1. <div class = "form-actions" > 
  2.   <button type = "submit" class = "btn btn-primary" > Išsaugoti pakeitimus </button>  
  3.   <button type = "button" class = "btn" > Atšaukti </button>  
  4. </div>

Pagalbos tekstas

Eilutinio ir bloko lygio pagalbos teksto, rodomo aplink formos valdiklius, palaikymas.

Įdėta pagalba

Įdėtas pagalbos tekstas 
  1. <input type = "text" ><span class = "help-inline" > Eilutinis pagalbos tekstas </span>

Blokuoti pagalbą

Ilgesnis pagalbos teksto blokas, kuris pertraukiamas į naują eilutę ir gali būti ilgesnis nei viena eilutė. 
  1. <input type = "text" ><span class = "help-block" > Ilgesnis pagalbos teksto blokas, kuris pertraukiamas į naują eilutę ir gali būti ilgesnis nei viena eilutė. </span>

Formos valdymo būsenos

Pateikite atsiliepimų naudotojams ar lankytojams, nurodydami pagrindines atsiliepimų būsenas apie formų valdiklius ir etiketes.

Įvesties fokusavimas

Pašaliname numatytuosius outlinekai kurių formų valdiklių stilius ir box-shadowvietoj jų pritaikome :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Tai sufokusuota..." >

Išjungti įėjimai

Pridėkite disabledatributą prie įvesties, kad neleistumėte naudotojo įvesties ir suaktyvintumėte šiek tiek kitokią išvaizdą.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Įvestis čia išjungta..." išjungta >

Patvirtinimo būsenos

„Bootstrap“ apima klaidų, įspėjimų, informacijos ir sėkmės pranešimų patvirtinimo stilius. Norėdami naudoti, pridėkite atitinkamą klasę prie aplinkos .control-group.

Galbūt kažkas nutiko
Ištaisykite klaidą
vartotojo vardas jau užimtas
Oho! 
  1. <div class = "kontrolinės grupės įspėjimas" > 
  2.   <label class = "control-label" for = "inputWarning" > Įvestis su įspėjimu </label>  
  3.   <div class = "valdikliai" > 
  4.     <įvesties tipas = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Galbūt kažkas nutiko </span> 
  6.   </div>
  7. </div>
  8. <div class = "kontrolinės grupės klaida" > 
  9.   <label class = "control-label" for = "inputError" > Įvestis su klaida </label>  
  10.   <div class = "valdikliai" > 
  11.     <įvesties tipas = "text" id = "inputError" >  
  12.     <span class = "help-inline" > Ištaisykite klaidą </span> 
  13.   </div>
  14. </div>
  15. <div class = "kontrolinės grupės sėkmė" > 
  16.   <label class = "control-label" for = "inputSuccess" > Įvestis sėkmingai </label>  
  17.   <div class = "valdikliai" > 
  18.     <įvesties tipas = "tekstas" id = "inputSuccess" >  
  19.     <span class = "help-inline" > Oho! </span> 
  20.   </div>
  21. </div>

Mygtukai

Numatytieji mygtukai

Mygtukų stiliai gali būti taikomi bet kam, kai taikoma .btnklasė. Tačiau paprastai norėsite juos taikyti tik <a>ir <button>elementams, kad būtų geriausias atvaizdavimas.

Mygtukas class="" apibūdinimas
btn Standartinis pilkas mygtukas su gradientu
btn btn-primary Suteikia papildomo vizualinio svorio ir identifikuoja pagrindinį veiksmą mygtukų rinkinyje
btn btn-info Naudojamas kaip alternatyva numatytiesiems stiliams
btn btn-success Nurodo sėkmingą arba teigiamą veiksmą
btn btn-warning Nurodo, kad atliekant šį veiksmą reikia imtis atsargumo priemonių
btn btn-danger Nurodo pavojingą arba galimai neigiamą veiksmą
btn btn-inverse Alternatyvus tamsiai pilkas mygtukas, nesusietas su semantiniu veiksmu ar naudojimu
btn btn-link Sumažinkite mygtuko svarbą, kad jis atrodytų kaip nuoroda, išlaikant mygtuko veikimą

Suderinamumas tarp naršyklių

IE9 neapkarpo fono gradientų užapvalintais kampais, todėl jį pašaliname. Su tuo susiję, IE9 išjungia išjungtus buttonelementus, todėl tekstas tampa pilkas su bjauriu teksto šešėliu, kurio negalime ištaisyti.

Mygtukų dydžiai

Mėgstate didesnius ar mažesnius mygtukus? Pridėkite .btn-large, .btn-small, arba .btn-minipapildomų dydžių.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Didelis mygtukas </button>  
  3.   <button class = "btn btn-large" type = "button" > Didelis mygtukas </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Numatytasis mygtukas </button>  
  7.   <button class = "btn" type = "button" > Numatytasis mygtukas </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Mažas mygtukas </button>  
  11.   <button class = "btn btn-small" type = "button" > Mažas mygtukas </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Mini mygtukas </button>  
  15.   <button class = "btn btn-mini" type = "button" > Mini mygtukas </button>  
  16. </p>

Sukurkite bloko lygio mygtukus – tuos, kurie apima visą pirminio plotį – pridėdami .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Blokavimo lygio mygtukas </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > Blokavimo lygio mygtukas </button>

Neįgalus būsena

Kad mygtukai atrodytų nespustelėti, sumažinkite juos 50%.

Inkaro elementas

Pridėkite .disabledklasę prie <a>mygtukų.

Pirminė nuoroda Nuoroda 

  1. <a href = "#" class = "btn btn-large btn-primary išjungta" > Pirminė nuoroda </a>  
  2. <a href = "#" class = "btn btn-large išjungta" > Nuoroda </a>

Galvas aukštyn!Čia mes naudojame .disabledkaip naudingumo klasę, panašią į įprastą .activeklasę, todėl priešdėlio nereikia. Be to, ši klasė skirta tik estetikai; norėdami išjungti nuorodas čia, turite naudoti tinkintą JavaScript.

Mygtuko elementas

Pridėkite disabledatributą prie <button>mygtukų.

  1. <button type = "button" class = "btn btn-large btn-primary išjungta" neįgali = "išjungta" > Pagrindinis mygtukas </button>   
  2. <button type = "button" class = "btn btn-large" išjungta > Mygtukas </button>

Viena klasė, kelios žymos

Naudokite .btnklasę elemente <a>, <button>, arba .<input>

Nuoroda 
  1. <a class = "btn" href = "" > Nuoroda </a>  
  2. <button class = "btn" type = "submit" > Mygtukas </button>  
  3. <input class = "btn" type = "button" value = "Įvestis" >   
  4. <input class = "btn" type = "submit" value = "Pateikti" >

Kaip geriausia praktika, pabandykite suderinti elementą pagal savo kontekstą, kad užtikrintumėte atitikimą tarp naršyklių. Jei turite , mygtukui inputnaudokite .<input type="submit">

Vaizdai

Pridėkite klasių prie <img>elemento, kad galėtumėte lengvai formuoti bet kurio projekto vaizdus.

  1. <img src = "..." class = "img-apvalinti" >  
  2. <img src = "..." class = "img-circle" >  
  3. <img src = "..." class = "img-polaroid" >

Galvas aukštyn! .img-roundedir .img-circleneveikia IE7-8, nes trūksta border-radiuspalaikymo.

„ Glyphicons “ piktogramos

Piktogramų glifai

140 „Sprite“ formos piktogramų, tamsiai pilkos (numatytasis) ir baltos, pateikiamos „ Glyphicons “ .

  • ikona-stiklas
  • ikona-muzika
  • piktogramų paieška
  • ikona-vokas
  • piktograma-širdis
  • piktograma-žvaigždė
  • piktograma-žvaigždė-tuščia
  • piktograma-vartotojas
  • ikona-filmas
  • piktograma-didelė
  • ikona-oji
  • piktogramų sąrašas
  • piktograma - gerai
  • piktograma-pašalinti
  • piktogramos priartinimas
  • piktograma-mažinti
  • piktograma išjungta
  • piktograma-signalas
  • piktograma-sraigtelis
  • piktograma-šiukšliadėžė
  • piktograma-namai
  • piktograma-failas
  • ikona-laikas
  • ikona-kelias
  • icon-download-alt
  • piktogramos atsisiuntimas
  • piktogramos įkėlimas
  • piktograma-gautieji
  • piktograma-žaidimas-ratas
  • piktograma-pakartojimas
  • piktograma-atnaujinimas
  • icon-list-alt
  • piktograma-užraktas
  • piktograma-vėliava
  • piktogramos-ausinės
  • piktogramos garsumo išjungimas
  • piktogramos garsumo mažinimas
  • piktogramos garsumo padidinimas
  • piktograma-qrcode
  • piktograma-brūkšninis kodas
  • piktograma-žyma
  • piktogramos-žymos
  • ikonų knyga
  • piktograma-žymė
  • piktogramos spausdinimas
  • piktograma-kamera
  • piktograma-šriftas
  • paryškinta piktograma
  • piktograma kursyvu
  • piktograma-tekstas-aukštis
  • piktograma-teksto plotis
  • piktograma-lygiuoti-kairėn
  • piktograma-lygiuoti-centras
  • piktogramą lygiuoti į dešinę
  • piktograma-lygiuoti-išlyginti
  • piktogramų sąrašas
  • piktograma-įtrauka-kairė
  • piktograma-įtrauka-dešinė
  • piktograma-facetime-video
  • piktograma-paveikslas
  • piktograma-pieštukas
  • piktograma-žemėlapis-žymeklis
  • koreguoti piktogramą
  • piktogramos atspalvis
  • piktograma-redaguoti
  • piktograma-dalintis
  • piktogramos patikrinimas
  • piktograma-judėjimas
  • piktograma-žingsnis-atgal
  • piktograma-greitai atgal
  • piktograma atgal
  • piktograma-žaidimas
  • piktograma-pauzė
  • piktograma-stop
  • piktograma pirmyn
  • piktograma - greitas sukimas pirmyn
  • piktograma-žingsnis pirmyn
  • piktogramos išstūmimas
  • piktograma-ševronas-kairėje
  • piktograma-ševronas-dešinė
  • piktograma-pliusas-ženklas
  • piktograma-minuso ženklas
  • piktograma-pašalinti-ženklas
  • piktograma-gerai-ženklas
  • piktograma-klausimas-ženklas
  • piktograma-informacija-ženklas
  • piktograma-ekrano kopija
  • piktograma-pašalinti-apskritimas
  • piktograma-gerai-ratas
  • piktograma-uždrausti-ratas
  • piktograma-rodyklė-kairėn
  • piktograma-rodyklė-dešinėn
  • piktograma-rodyklė aukštyn
  • piktograma-rodyklė žemyn
  • icon-share-alt
  • piktograma-keisti dydį-pilna
  • piktograma-keisti dydį-maža
  • piktograma-plius
  • piktograma-minusas
  • piktograma-žvaigždutė
  • piktograma-šauktukas-ženklas
  • ikona-dovana
  • piktogramos lapelis
  • piktograma-ugnis
  • ikona-akis-atmerkta
  • ikona-akis-užmerkti
  • piktograma-įspėjamasis ženklas
  • ikona-plokštuma
  • piktograma-kalendorius
  • ikona-atsitiktinė
  • piktograma-komentaras
  • ikona-magnetas
  • piktograma-chevron-up
  • icon-chevron-down
  • piktograma-retweet
  • piktograma-pirkinių krepšelis
  • piktograma-aplankas-uždaryti
  • piktograma-aplankas-atidaryti
  • piktograma-keisti dydį-vertikali
  • piktograma-keisti dydį-horizontalus
  • piktograma-hdd
  • ikona-buliaragis
  • piktograma-varpelis
  • piktograma-sertifikatas
  • piktograma-nykščiai aukštyn
  • piktograma-nykščiai žemyn
  • piktograma-ranka-dešinė
  • piktograma-ranka-kairėje
  • piktograma-ranka aukštyn
  • piktograma ranka žemyn
  • piktograma-apskritimas-rodyklė dešinėn
  • piktograma-apskritimas-rodyklė į kairę
  • piktograma-apskritimas-rodyklė aukštyn
  • piktograma-apskritimas-rodyklė žemyn
  • ikona-gaublys
  • piktograma-veržliaraktis
  • piktogramos-užduotys
  • piktograma-filtras
  • piktograma-portfelis
  • piktograma-visas ekranas

Glifikonų priskyrimas

„Glyphicons Halflings“ paprastai nėra nemokama, tačiau „Bootstrap“ ir „Glyphicons“ kūrėjų susitarimas leido jums, kaip kūrėjams, tai padaryti nemokamai. Atsidėkodami prašome įtraukti pasirenkamą nuorodą atgal į Glyphicons , kai tik tai įmanoma.

Kaip naudoti

Visoms piktogramoms reikalinga <i>žyma su unikalia klase, prie kurios priešdėlis yra icon-. Norėdami naudoti, įdėkite šį kodą beveik bet kur:

  1. <i class = "piktogramų paieška" ></i>

Taip pat yra apverstų (baltų) piktogramų stilių, paruoštų naudojant vieną papildomą klasę. Specialiai taikysime šią klasę navigacijos ir išskleidžiamųjų nuorodų užvedimo ir aktyviose būsenose.

  1. <i class = "piktograma-paieškos piktograma-balta" ></i>

Galvas aukštyn!Naudodami šalia teksto eilučių, pvz., mygtukų ar naršymo nuorodų, po <i>žymos palikite tarpą, kad būtų tinkami tarpai.

Piktogramų pavyzdžiai

Naudokite juos mygtukuose, mygtukų grupėse įrankių juostai, naršymui arba pridėtoms formoms.

Mygtukai

Mygtukų grupė mygtukų įrankių juostoje
  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-group" > 
  3.  
  4.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  7.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  8.   </div>
  9. </div>
Išskleidžiamasis meniu mygtukų grupėje
Vartotojas 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "piktograma-naudotojo piktograma-balta" ></i> Naudotojas </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "išskleidžiamasis meniu" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> Redaguoti </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Ištrinti </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Uždrausti </a></li>  
  8.     <li class = "daliklis" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Padaryti administratoriumi </a></li>  
  10.   </ul>
  11. </div>
Mažas mygtukas
  1. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i></a>

Navigacija

  1. <ul class = "nav nav-list" > 
  2.   <li class = "aktyvus" ><a href = "#" ><i class = "icon-home icon-white" ></i> Pagrindinis puslapis </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i> Biblioteka </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Programos </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Įvairūs </a></li>  
  6. </ul>

Formos laukai

  1. <div class = "kontrolinė grupė" > 
  2.   <label class = "control-label" for = "inputIcon" > El. pašto adresas </label>  
  3.   <div class = "valdikliai" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "priedas" ><i class = "piktogramos vokas" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "text" >   
  7.     </div>
  8.   </div>
  9. </div>