Bootstrap

Bazo CSS

Fundamentaj HTML-elementoj stiligitaj kaj plibonigitaj per etendeblaj klasoj.

Tipografio

Titoloj

Ĉiuj HTML-titoloj, <h1>tra <h6>estas haveblaj.

h1. Titolo 1

h2. Titolo 2

h3. Titolo 3

h4. Titolo 4

h5. Titolo 5
h6. Titolo 6

Korpa kopio

La tutmonda defaŭlto de Bootstrap estas font-size14px , kun 20px . Ĉi tio estas aplikata al la kaj ĉiuj alineoj. Krome, (alineoj) ricevas malsupran marĝenon de duono de sia linio-alteco (10px defaŭlte).line-height<body><p>

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.

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

Ĉefa korpokopio

Elstarigu alineon aldonante .lead.

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

<p klaso = "plumbo" > ... </p>

Konstruita kun Malpli

La tipografia skalo baziĝas sur du MALAJ variabloj en variabloj.malpli : @baseFontSizekaj @baseLineHeight. La unua estas la baza tiparo-grandeco uzata ĉie kaj la dua estas la bazlinia alteco. Ni uzas tiujn variablojn kaj iun simplan matematikon por krei la randojn, remburaĵojn kaj linio-altojn de ĉiuj niaj tipoj kaj pli. Agordu ilin kaj Bootstrap adaptiĝas.

Emfazo

Uzu la defaŭltajn emfazajn etikedojn de HTML kun malpezaj stiloj.

<small>

Por malemfazi enlinion aŭ blokojn de teksto, uzu la malgrandan etikedon.

Ĉi tiu linio de teksto estas intencita esti traktata kiel bela preskribo.

<p> <malgranda> Ĉi tiu linio de teksto estas intencita traktata kiel eta preskribo. </malgranda> </p>

Aŭdaca

Por emfazi fragmenton de teksto kun pli peza tiparo.

La sekva fragmento de teksto estas prezentita kiel grasa teksto .

<strong> prezentita kiel grasa teksto </strong>

Kursivo

Por emfazi fragmenton de teksto kun kursivo.

La sekva fragmento de teksto estas prezentita kiel kursiva teksto .

<em> bildigita kiel kursiva teksto </em>

Atentu!Bonvolu uzi <b>kaj <i>en HTML5. <b>celas reliefigi vortojn aŭ frazojn sen transdoni aldonan gravecon dum <i>estas plejparte por voĉo, teknikaj terminoj ktp.

Alineaj klasoj

Facile realigu tekston al komponantoj kun tekstaj vicigoklasoj.

Maldekstre vicigita teksto.

Centra vicigita teksto.

Dekstre vicigita teksto.

  1. <p class = "text-left" > Maldekstre vicigita teksto. </p> 
  2. <p class = "text-center" > Centra vicigita teksto. </p> 
  3. <p class = "text-right" > Dekstre vicigita teksto. </p>

Emfazaj klasoj

Transdonu signifon per koloro per manpleno da emfazaj utilaj klasoj.

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

Mallongigoj

Stiligita efektivigo de HTML-a <abbr>elemento por mallongigoj kaj akronimoj por montri la vastigitan version sur ŝvebado. Mallongigoj kun titleatributo havas malpezan punktitan malsupran randon kaj helpkursoron sur ŝvebado, provizante plian kuntekston dum ŝvebado.

<abbr>

Por vastigita teksto sur longa ŝvebado de mallongigo, enmetu la titleatributon.

Mallongigo de la vorto atributo estas attr .

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

<abbr class="initialism">

Aldonu .initialismal mallongigo por iomete pli malgranda tiparo.

HTML estas la plej bona afero ekde tranĉaĵigita pano.

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

Adresoj

Prezentu kontaktinformojn por la plej proksima prapatro aŭ la tuta laboro.

<address>

Konservu formatadon finante ĉiujn liniojn per <br>.

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

Blokcitaĵoj

Por citado de enhavoblokoj de alia fonto ene de via dokumento.

Defaŭlta blokcitaĵo

Envolvi <blockquote>ajnan HTML kiel la citaĵo. Por rektaj citaĵoj ni rekomendas <p>.

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

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

Opcioj de blokquotetoj

Ŝanĝoj de stilo kaj enhavo por simplaj varioj sur norma blokcitaĵo.

Nomante fonton

Aldonu <small>etikedon por identigi la fonton. Envolvu la nomon de la fontverko en <cite>.

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

Iu fama en Fonta Titolo 
  1. <blokcitaĵo>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3.   <small> Iu fama <cite title = "Source Title" > Fonta Titolo </cite></small> 
  4. </blockquote>

Alternaj ekranoj

Uzu .pull-rightpor flosita, dekstre vicigita blokcitaĵo.

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

Iu fama en Fonta Titolo 
  1. <blockquote class = "tiri-dekstren" > 
  2.   ...
  3. </blockquote>

Listoj

Neordigita

Listo de eroj en kiuj la ordo ne eksplicite gravas.

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

Ordonita

Listo de eroj en kiuj la ordo eksplicite gravas .

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

Senstila

Forigu la defaŭltan list-stylekaj maldekstran remburaĵon sur listaĵoj (nur tujaj infanoj).

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

En linio

Metu ĉiujn listaĵojn sur unu linion kun inline-blockiom da malpeza kompletigo.

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

Priskribo

Listo de terminoj kun iliaj rilataj priskriboj.

Priskribolistoj
Priskriba listo estas perfekta por difini terminojn.
Euismod
Vestibulum id ligula porta felis euismod sempre 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>

Horizontala priskribo

Faru terminojn kaj priskribojn en <dl>linio flank-al-flanke.

Priskribolistoj
Priskriba listo estas perfekta por difini terminojn.
Euismod
Vestibulum id ligula porta felis euismod sempre 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 sempre eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
  1. <dl klaso = "dl-horizontala" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Atentu!Horizontalaj priskriblistoj detranĉos terminojn kiuj estas tro longaj por konveni en la maldekstra kolumna riparo text-overflow. En pli mallarĝaj vidfenestroj, ili ŝanĝiĝos al la defaŭlta staplita aranĝo.

Kodo

En linio

Envolvu enliniajn fragmentojn de kodo per <code>.

Ekzemple, <section>devus esti envolvita kiel enlinia. 
  1. Ekzemple , <code > & lt ; sekcio & gt ;</ code > devus esti envolvita kiel enlinia .

Baza bloko

Uzu <pre>por pluraj linioj de kodo. Nepre eskapu iujn ajn angulajn krampojn en la kodo por taŭga bildigo.

<p>Ekzempla teksto ĉi tie...</p>
  1. <pre>
  2.   <p>Ekzempla teksto ĉi tie...</p>
  3. </pre>

Atentu!Nepre konservu kodon ene de <pre>etikedoj kiel eble plej proksime maldekstre; ĝi bildigos ĉiujn langetojn.

Vi povas laŭvole aldoni la .pre-scrollableklason, kiu starigos maksimuman altecon de 350px kaj disponigos y-akson rulumbren.

Tabeloj

Defaŭltaj stiloj

Por baza stilo—malpeza remburaĵo kaj nur horizontalaj disigiloj—aldonu la bazan klason .tableal iu ajn <table>.

# Antaŭnomo Familia nomo Uzantnomo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la birdo @twitter 
  1. <table class = "tablo" > 
  2.   …
  3. </tablo>

Laŭvolaj klasoj

Aldonu iun el la sekvaj klasoj al la .tablebaza klaso.

.table-striped

Aldonas zebro-striadon al iu ajn tabelvico ene de la <tbody>per la :nth-childCSS-elektilo (ne havebla en IE7-8).

# Antaŭnomo Familia nomo Uzantnomo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la birdo @twitter 
  1. <table class = "tabelo-striita" > 
  2.   …
  3. </tablo>

.table-bordered

Aldonu randojn kaj rondigitajn angulojn al la tablo.

# Antaŭnomo Familia nomo Uzantnomo
1 Mark Otto @mdo
Mark Otto @getbootstrap
2 Jakobo Thornton @graso
3 Larry la Birdo @twitter 
  1. <table class = "tabelo-bordita" > 
  2.   …
  3. </tablo>

.table-hover

Ebligu ŝveban staton sur tabelvicoj ene de <tbody>.

# Antaŭnomo Familia nomo Uzantnomo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la Birdo @twitter 
  1. <table class = "tablo-ŝvebado" > 
  2.   …
  3. </tablo>

.table-condensed

Faras tablojn pli kompaktajn per tranĉado de ĉela remburaĵo en duono.

# Antaŭnomo Familia nomo Uzantnomo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la Birdo @twitter 
  1. <table class = "tabelo densigita" > 
  2.   …
  3. </tablo>

Laŭvolaj vicaj klasoj

Uzu kuntekstajn klasojn por kolorigi tabelvicojn.

Klaso Priskribo
.success Indikas sukcesan aŭ pozitivan agon.
.error Indikas danĝeran aŭ eble negativan agon.
.warning Indikas averton, kiu eble bezonas atenton.
.info Uzita kiel alternativo al la defaŭltaj stiloj.
# Produkto Pago Prenita Statuso
1 TB - Monata 01/04/2012 Aprobita
2 TB - Monata 02/04/2012 Malakceptis
3 TB - Monata 03/04/2012 Decidota
4 TB - Monata 04/04/2012 Voku por konfirmi 
  1. ...
  2.   < tr class = "sukceso" >
  3.     <td> 1 < /td>
  4.     <td>TB - Monata</ td >
  5.     < td > 01/04/2012 < / td >
  6.     <td>Aprobita</ td >
  7.   </ tr >
  8. ...

Subtenita tabelmarkado

Listo de subtenataj tabelaj HTML-elementoj kaj kiel ili estu uzataj.

Etikedo Priskribo
<table> Envolva elemento por montri datumojn en tabelformato
<thead> Uja elemento por tabelkaplinioj ( <tr>) por etikedi tabelkolumnojn
<tbody> Uja elemento por tabelvicoj ( <tr>) en la korpo de la tabelo
<tr> Uja elemento por aro de tabelĉeloj ( <td>aŭ <th>) kiu aperas sur ununura vico
<td> Defaŭlta tabelĉelo
<th> Speciala tabelĉelo por kolumnaj (aŭ vicoj, depende de amplekso kaj lokigo) etikedoj
<caption> Priskribo aŭ resumo de tio, kion enhavas la tabelo, precipe utila por ekranlegantoj 
  1. <tablo>
  2.   <caption> ... </caption>
  3.   <kapo>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </ tr >
  8.   </thead>
  9.   <tkorpo>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </ tr >
  14.   </tbody>
  15. </tablo>

Formoj

Defaŭltaj stiloj

Individuaj formularaj kontroloj ricevas stilon, sed sen bezonata bazklaso pri la <form>aŭ grandaj ŝanĝoj en markado. Rezultas stakigitaj, maldekstre vicigitaj etikedoj aldone al formularaj kontroloj.

Legendo Ekzemplo de bloknivela helpteksto ĉi tie. 
  1. <formo>
  2.   <kamparo>
  3.     <legend> Legendo </legend>
  4.     <label> Etikednomo </label>
  5.     <input type = "text" placeholder = "Tajpu ion..." >  
  6.     <span class = "help-block" > Ekzemplo de bloknivela helpteksto ĉi tie. </span> 
  7.     <label class = "markbutono" > 
  8.       <input type = "markbox" > Kontrolu min 
  9.     </etikedo>
  10.     <button type = "submit" class = "btn" > Sendi </button>  
  11.   </fieldset>
  12. </form>

Laŭvolaj aranĝoj

Inkluditaj kun Bootstrap estas tri laŭvolaj formulararanĝoj por oftaj uzkazoj.

Serĉformularo

Aldonu .form-searchal la formularo kaj .search-queryal la <input>por ekstra-ronda teksta enigo.

  1. <form class = "form-serĉo" > 
  2.   <input type = "text" class = "enigo-meza serĉ-demando" >  
  3.   <button type = "submit" class = "btn" > Serĉu </button>  
  4. </form>

Enlinia formo

Aldonu .form-inlinepor maldekstre vicigitaj etikedoj kaj enlini-blokaj kontroloj por kompakta aranĝo.

  1. <form class = "form-inline" > 
  2.   <input type = "text" class = "input-small" placeholder = "Retpoŝto" >   
  3.   <input type = "pasvorto" class = "input-small" placeholder = "Pasvorto" >   
  4.   <label class = "markbutono" > 
  5.     <input type = "markbox" > Memoru min 
  6.   </etikedo>
  7.   <button type = "submit" class = "btn" > Ensalutu </button>  
  8. </form>

Horizontala formo

Dekstre vicigu etikedojn kaj flosigu ilin maldekstren por ke ili aperu sur la sama linio kiel kontroloj. Postulas la plej multajn markadajn ŝanĝojn de defaŭlta formo:

  • Aldonu .form-horizontalal la formularo
  • Envolvu etikedojn kaj kontrolojn.control-group
  • Aldonu .control-labelal la etikedo
  • Envolvu iujn ajn rilatajn kontrolojn .controlspor taŭga vicigo
  1. <form class = "form-horizontala" > 
  2.   <div class = "kontrolgrupo" > 
  3.     <label class = "control-label" for = "inputEmail" > Retpoŝto </label>  
  4.     <div class = "kontroloj" > 
  5.       <input type = "text" id = "inputEmail" placeholder = "Retpoŝto" >   
  6.     </div>
  7.   </div>
  8.   <div class = "kontrolgrupo" > 
  9.     <label class = "control-label" for = "inputPassword" > Pasvorto </label>  
  10.     <div class = "kontroloj" > 
  11.       <input type = "pasvorto" id = "inputPassword" placeholder = "Pasvorto" >   
  12.     </div>
  13.   </div>
  14.   <div class = "kontrolgrupo" > 
  15.     <div class = "kontroloj" > 
  16.       <label class = "markbutono" > 
  17.         <input type = "markbox" > Memoru min 
  18.       </etikedo>
  19.       <button type = "submit" class = "btn" > Ensalutu </button>  
  20.     </div>
  21.   </div>
  22. </form>

Subtenataj formularaj kontroloj

Ekzemploj de normaj formularaj kontroloj subtenataj en ekzempla formo-aranĝo.

Enigaĵoj

Plej ofta formkontrolo, tekst-bazitaj enigkampoj. Inkluzivas subtenon por ĉiuj HTML5-tipoj: teksto, pasvorto, datotempo, datotempo-loka, dato, monato, horo, semajno, nombro, retpoŝto, url, serĉo, tel, kaj koloro.

Postulas la uzon de specifita typeĉiam.

  1. <input type = "text" placeholder = "Enigo de teksto" >

Tekstaro

Formkontrolo kiu subtenas plurajn liniojn de teksto. Ŝanĝu rowsatributon laŭbezone.

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

Markobutonoj kaj radioj

Markobutonoj estas por elekti unu aŭ plurajn opciojn en listo dum radioj estas por elekti unu opcion el multaj.

Defaŭlte (stakita)


  1. <label class = "markbutono" > 
  2.   <input type = "markbox" value = "" >  
  3.   Unua opcio estas ĉi tio kaj tio—nepre inkluzivu kial ĝi estas bonega
  4. </etikedo>
  5.  
  6. <label class = "radio" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "opcio1" kontrolita >     
  8.   Unua opcio estas ĉi tio kaj tio—nepre inkluzivu kial ĝi estas bonega
  9. </etikedo>
  10. <label class = "radio" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "opcio2" >    
  12.   Opcio du povas esti io alia kaj elektante ĝin malelektos opcion unu
  13. </etikedo>

Enliniaj markobutonoj

Aldonu la .inlineklason al serio de markobutonoj aŭ radioj por kontroloj aperas sur la sama linio.

  1. <label class = "markbutono enlinia" > 
  2.   <input type = "checkbox" id = "inlineCheckbox1" valoro = "opcio1" > 1   
  3. </etikedo>
  4. <label class = "markbutono enlinia" > 
  5.   <input type = "checkbox" id = "inlineCheckbox2" valoro = "opcio2" > 2   
  6. </etikedo>
  7. <label class = "markbutono enlinia" > 
  8.   <input type = "checkbox" id = "inlineCheckbox3" value = "opcio3" > 3   
  9. </etikedo>

Elektas

Uzu la defaŭltan opcion aŭ specifu a multiple="multiple"por montri plurajn opciojn samtempe.


  1. <elekto>
  2.   <opcio> 1 </opcio>
  3.   <opcio> 2 </opcio>
  4.   <opcio> 3 </opcio>
  5.   <opcio> 4 </opcio>
  6.   <opcio> 5 </opcio>
  7. </select>
  8.  
  9. <select multiple = "multoblo" > 
  10.   <opcio> 1 </opcio>
  11.   <opcio> 2 </opcio>
  12.   <opcio> 3 </opcio>
  13.   <opcio> 4 </opcio>
  14.   <opcio> 5 </opcio>
  15. </select>

Etendante formularajn kontrolojn

Aldonante al ekzistantaj retumiloj, Bootstrap inkluzivas aliajn utilajn formkomponentojn.

Antaŭmetitaj kaj aldonitaj enigaĵoj

Aldonu tekston aŭ butonojn antaŭ aŭ post iu ajn tekst-bazita enigo. Notu, ke selectelementoj ne estas subtenataj ĉi tie.

Defaŭltaj opcioj

Envolvu an .add-onkaj an inputper unu el du klasoj por antaŭmeti aŭ almeti tekston al enigo.

@

.00 
  1. <div class = "enigo-antaŭa" > 
  2.   <span class = "aldonaĵo" > @ </span> 
  3.   <input class = "span2" id = "prependedInput" type = "teksto" anstataŭilo = "Uzantnomo" >    
  4. </div>
  5. <div class = "enigo-aldona" > 
  6.   <input class = "span2" id = "appendedInput " type = "teksto" >   
  7.   <span class = "aldonaĵo" > .00 </span> 
  8. </div>

Kombinita

Uzu ambaŭ klasojn kaj du okazojn de .add-onpor antaŭmeti kaj almeti enigon.

$ .00 
  1. <div class = "enigo-antaŭa enigo-aldono" > 
  2.   <span class = "aldonaĵo" > $ </span> 
  3.   <input class = "span2" id = "appendedPrependedInput " type = "teksto" >   
  4.   <span class = "aldonaĵo" > .00 </span> 
  5. </div>

Butonoj anstataŭ teksto

Anstataŭ <span>kun teksto, uzu a .btnpor alfiksi butonon (aŭ du) al enigo.

  1. <div class = "enigo-aldona" > 
  2.   <input class = "span2" id = "apendedInputButton " type = "teksto" >   
  3.   <button class = "btn" type = "butono" > Iru! </butono>  
  4. </div>
  1. <div class = "enigo-aldona" > 
  2.   <input class = "span2" id = "apendedInputButtons " type = "teksto" >   
  3.   <button class = "btn" type = "button" > Serĉu </button>  
  4.   <button class = "btn" type = "butono" > Opcioj </button>  
  5. </div>

Butonfalumoj

  1. <div class = "enigo-aldona" > 
  2.   <input class = "span2" id = "apendedDropdownButton " type = "teksto" >   
  3.   <div class = "btn-grupo" > 
  4.     <button class = "btn dropdown-toggle" data-toggle = "menumenumo" >  
  5.       Ago
  6.       <span class = "karto" ></span> 
  7.     </butono>
  8.     <ul class = "falmenuo" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "enigo-antaŭa" > 
  2.   <div class = "btn-grupo" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "menumenumo" >  
  4.       Ago
  5.       <span class = "karto" ></span> 
  6.     </butono>
  7.     <ul class = "falmenuo" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "prependedDropdownButton" type = "teksto" >   
  12. </div>
  1. <div class = "enigo-antaŭa enigo-aldono" > 
  2.   <div class = "btn-grupo" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "menumenumo" >  
  4.       Ago
  5.       <span class = "karto" ></span> 
  6.     </butono>
  7.     <ul class = "falmenuo" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "appendedPrependedDropdownButton " type = "teksto" >   
  12.   <div class = "btn-grupo" > 
  13.     <button class = "btn dropdown-toggle" data-toggle = "menumenumo" >  
  14.       Ago
  15.       <span class = "karto" ></span> 
  16.     </butono>
  17.     <ul class = "falmenuo" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Segmentitaj falmenumaj grupoj

  1. <formo>
  2.   <div class = "enigo-antaŭa" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     <input type = "teksto" > 
  5.   </div>
  6.   <div class = "enigo-aldona" > 
  7.     <input type = "teksto" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

Serĉformularo

  1. <form class = "form-serĉo" > 
  2.   <div class = "enigo-aldona" > 
  3.     <input type = "text" class = "span2 serĉ-demando" >  
  4.     <button type = "submit" class = "btn" > Serĉu </button>  
  5.   </div>
  6.   <div class = "enigo-antaŭa" > 
  7.     <button type = "submit" class = "btn" > Serĉu </button>  
  8.     <input type = "text" class = "span2 serĉ-demando" >  
  9.   </div>
  10. </form>

Kontrolu grandecon

Uzu relativajn grandecoklasojn kiel .input-largeaŭ kongruu viajn enigojn al la kradaj kolongrandoj uzante .span*klasojn.

Blokaj nivelaj enigoj

Faru iun <input>aŭ <textarea>elementon konduti kiel bloknivela elemento.

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

Relativa grandeco

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

Atentu!En estontaj versioj, ni ŝanĝos la uzon de ĉi tiuj relativaj enigklasoj por kongrui kun niaj butongrandoj. Ekzemple, .input-largepliigos la kompletigo kaj tiparograndon de enigo.

Krada grandeco

Uzu .span1al .span12por enigaĵoj kiuj kongruas kun la samaj grandecoj de la kradaj kolumnoj.

  1. <input class = "span1" type = "teksto" anstataŭilo = ".span1" >   
  2. <input class = "span2" type = "teksto" anstataŭilo = ".span2" >   
  3. <input class = "span3" type = "teksto" anstataŭilo = ".span3" >   
  4. <select class = "span1" > 
  5.   ...
  6. </select>
  7. <select class = "span2" > 
  8.   ...
  9. </select>
  10. <select class = "span3" > 
  11.   ...
  12. </select>

Por pluraj kradaj enigaĵoj per linio, uzu la .controls-rowmodifklason por taŭga interspaco . Ĝi flosas la enigojn por kolapsigi blankspacon, fiksas la taŭgajn randojn, kaj purigas la flosilon.

  1. <div class = "kontroloj" > 
  2.   <input class = "span5" type = "teksto" anstataŭilo = ".span5" >   
  3. </div>
  4. <div class = "regas kontrolo-vico" > 
  5.   <input class = "span4" type = "teksto" anstataŭilo = ".span4" >   
  6.   <input class = "span1" type = "teksto" anstataŭilo = ".span1" >   
  7. </div>
  8. ...

Neredakteblaj enigaĵoj

Prezenti datumojn en formo, kiu ne estas redaktebla, sen uzi realan forman markadon.

Iom da valoro ĉi tie 
  1. <span class = "input-xlarge uneditable-input" > Iu valoro ĉi tie </span>

Formi agojn

Finu formularon per grupo de agoj (butonoj). Kiam estas metitaj ene de .form-actions, la butonoj aŭtomate indentiĝos por vicigi la formularajn kontrolojn.

  1. <div class = "form-agoj" > 
  2.   <button type = "submit" class = "btn btn-primary" > Konservi ŝanĝojn </button>  
  3.   <button type = "button" class = "btn" > Nuligi </button>  
  4. </div>

Helpa teksto

Enlinia kaj bloknivela subteno por helpteksto, kiu aperas ĉirkaŭ formularaj kontroloj.

Enlinia helpo

Enlinia helpteksto 
  1. <input type = "text" ><span class = "help-inline" > Enlinia helpteksto </span>

Bloki helpon

Pli longa bloko de helpteksto, kiu rompas al nova linio kaj povas etendi preter unu linio. 
  1. <input type = "text" ><span class = "help-block" > Pli longa bloko de helpteksto, kiu rompas al nova linio kaj povas etendi preter unu linio. </span>

Formkontrolaj ŝtatoj

Provizu retrosciigon al uzantoj aŭ vizitantoj kun bazaj sugestaj statoj pri formularaj kontroloj kaj etikedoj.

Eniga fokuso

Ni forigas la defaŭltajn outlinestilojn en iuj formularaj kontroloj kaj aplikas a box-shadowen ĝia loko por :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Ĉi tio estas fokusita..." >

Nevalidaj enigaĵoj

Stilaj enigaĵoj per defaŭlta retumila funkcio kun :invalid. Specifu type, aldonu la requiredatributon se la kampo ne estas laŭvola, kaj (se aplikeble) specifu pattern.

Ĉi tio ne haveblas en versioj de Internet Explorer 7-9 pro manko de subteno por CSS-pseŭdo-elektiloj.

  1. <input class = "span3" type = "retpoŝto" bezonata >

Malebligitaj enigaĵoj

Aldonu la disabledatributon al enigo por malhelpi uzantan enigon kaj ekigi iomete malsaman aspekton.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Malŝaltita enigo ĉi tie..." malŝaltita >

Konvalidaj ŝtatoj

Bootstrap inkluzivas validajn stilojn por eraroj, avertoj, informoj kaj sukcesaj mesaĝoj. Por uzi, aldonu la taŭgan klason al la ĉirkaŭaĵo .control-group.

Eble io misfunkciis
Bonvolu korekti la eraron
Uzantnomo estas prenita
Uu! 
  1. <div class = "averto de kontrolgrupo" > 
  2.   <label class = "control-label" for = "inputWarning" > Enigo kun averto </label>  
  3.   <div class = "kontroloj" > 
  4.     <input type = "text" id = "enigoAverto" >  
  5.     <span class = "help-inline" > Eble io misfunkciis </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "kontrolgrupo-eraro" > 
  10.   <label class = "control-label" for = "inputError" > Enigo kun eraro </label>  
  11.   <div class = "kontroloj" > 
  12.     <input type = "text" id = "enigo-Eraro" >  
  13.     <span class = "help-inline" > Bonvolu korekti la eraron </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "kontrolgrupo-informoj" > 
  18.   <label class = "control-label" for = "inputInfo" > Enigo kun informoj </label>  
  19.   <div class = "kontroloj" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Uzantnomo jam estas prenita </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "kontrolgrupo sukceso" > 
  26.   <label class = "control-label" for = "inputSuccess" > Enigo kun sukceso </label>  
  27.   <div class = "kontroloj" > 
  28.     <input type = "text" id = "enigoSukceso" >  
  29.     <span class = "help-enline" > Ho! </span> 
  30.   </div>
  31. </div>

Butonoj

Defaŭltaj butonoj

Butonstiloj povas esti aplikitaj al io ajn kun la .btnklaso aplikata. Tamen, kutime vi volas apliki ĉi tiujn nur al <a>kaj <button>elementoj por la plej bona bildigo.

Butono klaso="" Priskribo
btn Norma griza butono kun gradiento
btn btn-primary Provizas ekstran vidan pezon kaj identigas la ĉefan agon en aro de butonoj
btn btn-info Uzita kiel alternativo al la defaŭltaj stiloj
btn btn-success Indikas sukcesan aŭ pozitivan agon
btn btn-warning Indikas singardemon pri ĉi tiu ago
btn btn-danger Indikas danĝeran aŭ eble negativan agon
btn btn-inverse Alterna malhelgriza butono, ne ligita al semantika ago aŭ uzo
btn btn-link Malemfazu butonon igante ĝin aspekti kiel ligilo dum konservante butonkonduton

Interkongruo de retumilo

IE9 ne tondas fonajn gradientojn sur rondigitaj anguloj, do ni forigas ĝin. Rilata, IE9 jankigas malfunkciigitajn buttonelementojn, farante tekston griza kun aĉa tekst-ombro, kiun ni ne povas ripari.

Butongrandoj

Ĉu vi volas pli grandajn aŭ pli malgrandajn butonojn? Aldonu .btn-large, .btn-small, aŭ .btn-minipor pliaj grandecoj.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "butono" > Granda butono </button>  
  3.   <button class = "btn btn-large" type = "butono" > Granda butono </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "butono" > Defaŭlta butono </button>  
  7.   <button class = "btn" type = "butono" > Defaŭlta butono </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "butono" > Malgranda butono </button>  
  11.   <button class = "btn btn-small" type = "butono" > Malgranda butono </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "butono" > Mini butono </button>  
  15.   <button class = "btn btn-mini" type = "butono" > Mini butono </button>  
  16. </p>

Kreu bloknivelajn butonojn—tiujn kiuj ampleksas la tutan larĝon de gepatro— aldonante .btn-block.

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

Malfunkciigita ŝtato

Faru butonojn aspekti neklakeblaj per forvelkado de ili reen 50%.

Ankro-elemento

Aldonu la .disabledklason al <a>butonoj.

Primara ligilo Ligo 

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > Ĉefa ligilo </a>  
  2. <a href = "#" class = "btn btn-large malfunkciigita" > Ligo </a>

Atentu!Ni uzas .disabledĉi tie kiel utilan klason, similan al la komuna .activeklaso, do ne necesas prefikso. Ankaŭ ĉi tiu klaso estas nur por estetiko; vi devas uzi kutiman JavaScript por malŝalti ligilojn ĉi tie.

Butona elemento

Aldonu la disabledatributon al <button>butonoj.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "malŝaltita" > Ĉefa butono </button>   
  2. <button type = "button" class = "btn btn-large" malŝaltita > Butono </button>

Unu klaso, pluraj etikedoj

Uzu la .btnklason sur <a>, <button>, aŭ <input>elemento.

Ligo 
  1. <a class = "btn" href = "" > Ligo </a>  
  2. <button class = "btn" type = "submetiĝi" > Butono </button>  
  3. <input class = "btn" type = "button" value = "Enigo" >   
  4. <input class = "btn" type = "submit" value = "Sendu" >

Kiel plej bona praktiko, provu kongrui kun la elemento por via kunteksto por certigi kongruan trans-retumilon bildigon. Se vi havas input, uzu <input type="submit">por via butono.

Bildoj

Aldonu klasojn al <img>elemento por facile stiligi bildojn en iu ajn projekto.

140x140 140x140 140x140 
  1. <img src = "..." class = "img-rondigita" >  
  2. <img src = "..." class = "img-cirklo" >  
  3. <img src = "..." class = "img-polaroid" >

Atentu! .img-roundedkaj .img-circlene funkcias en IE7-8 pro manko de border-radiussubteno.

Ikonoj de Glyphicons

Ikonaj glifoj

140 ikonoj en sprite-formo, haveblaj en malhelgriza (defaŭlte) kaj blanka, provizitaj de Glyphicons .

  • ikono-vitro
  • ikono-muziko
  • ikono-serĉo
  • ikono-koverto
  • ikono-koro
  • ikono-stelo
  • ikono-stelo-malplena
  • ikono-uzanto
  • ikono-filmo
  • ikono-th-granda
  • ikono-th
  • ikono-th-listo
  • ikono-ok
  • ikono-forigi
  • ikono-zoom-en
  • ikono-zoom-malgrandigi
  • ikono-malŝaltita
  • ikono-signalo
  • ikono-kogo
  • ikono-rubo
  • ikono-hejmo
  • ikono-dosiero
  • ikono-tempo
  • ikono-vojo
  • ikono-elŝuto-alt
  • ikono-elŝuto
  • ikono-alŝuto
  • ikono-enirkesto
  • ikono-ludado-cirklo
  • ikono-ripeto
  • ikono-refreŝigi
  • ikono-listo-alt
  • ikono-seruro
  • ikono-flago
  • ikono-aŭdiloj
  • ikono-volumo-malŝaltita
  • ikono-volumen-malsupren
  • ikono-volumen-supren
  • ikono-qrkodo
  • ikono-strekkodo
  • ikono-etikedo
  • ikon-etikedoj
  • ikono-libro
  • ikono-legosigno
  • ikono-presaĵo
  • ikono-fotilo
  • ikono-tiparo
  • ikono-grasa
  • ikono-kursiva
  • ikono-teksto-alteco
  • ikono-teksto-larĝo
  • ikono-vicigi-maldekstren
  • icon-align-center
  • ikono-vicigi-dekstre
  • ikono-vicigi-pravigi
  • ikono-listo
  • ikono-indent-maldekstre
  • ikono-indent-dekstra
  • ikono-facetime-video
  • ikono-bildo
  • ikono-krajono
  • ikono-mapo-markilo
  • ikono-ĝustigi
  • ikono-nuanco
  • ikono-redakti
  • ikono-kunhavigo
  • ikono-kontrolo
  • ikono-movo
  • ikono-paŝo-malantaŭen
  • ikono-rapide-malantaŭen
  • ikono-malantaŭen
  • ikono-ludado
  • ikono-paŭzo
  • ikono-halto
  • ikono-antaŭen
  • ikono-rapide-antaŭen
  • ikono-paŝo-antaŭen
  • ikono-elĵeto
  • ikono-ĉevrono-maldekstre
  • ikono-ĉevron-dekstra
  • ikono-plus-signo
  • ikono-minus-signo
  • ikono-forigi-signo
  • ikono-ok-signo
  • ikono-demando-signo
  • ikono-informsigno
  • ikono-ekrankopio
  • ikono-forigi-cirklo
  • ikono-ok-cirklo
  • ikono-malpermeso-cirklo
  • ikono-sago-maldekstre
  • ikono-sago-dekstra
  • ikono-sago-supren
  • ikono-sago-malsupren
  • ikono-kunhavigi-alt
  • ikono-regrandigo-plena
  • ikono-regrandigi-malgranda
  • ikono-plus
  • ikono-minuso
  • ikono-asterisko
  • ikono-ekkrio-signo
  • ikono-donaco
  • ikono-folio
  • ikono-fajro
  • ikono-okulo-malfermita
  • ikono-okulo-proksima
  • ikono-averto-signo
  • ikono-aviadilo
  • ikono-kalendaro
  • ikono-hazarda
  • ikono-komento
  • ikono-magneto
  • ikono-ĉevron-supren
  • ikono-ĉevron-malsupren
  • ikono-retweet
  • ikono-aĉetĉaro
  • ikono-dosierujo-fermi
  • ikono-dosierujo-malfermita
  • ikono-regrandigo-vertikala
  • ikono-regrandigo-horizontala
  • ikono-hdd
  • ikono-bovkorno
  • ikono-sonorilo
  • ikono-atestilo
  • ikono-dikfingro-supren
  • ikono-dikfingroj-malsupren
  • ikono-mano-dekstra
  • ikono-mano-maldekstre
  • ikono-mano-supren
  • ikono-man-malsupren
  • ikono-cirklo-sago-dekstra
  • ikono-cirklo-sago-maldekstre
  • ikono-cirklo-sago-supren
  • ikono-cirklo-sago-malsupren
  • ikono-globo
  • ikono-ŝlosilo
  • ikono-taskoj
  • ikono-filtrilo
  • ikono-tetujo
  • ikono-plena ekrano

Glyphicons atribuo

Glyphicons Halflings kutime ne haveblas senpage, sed aranĝo inter Bootstrap kaj la kreintoj de Glyphicons ebligis tion senkoste por vi kiel programistoj. Kiel dankon, ni petas vin inkluzivi laŭvolan ligilon reen al Glyphicons kiam ajn praktike.

Kiel uzi

Ĉiuj ikonoj postulas <i>etikedon kun unika klaso, prefiksita per icon-. Por uzi, metu la sekvan kodon preskaŭ ie ajn:

  1. <i klaso = "ikono-serĉo" ></i>

Estas ankaŭ disponeblaj stiloj por renversitaj (blankaj) ikonoj, pretaj per unu ekstra klaso. Ni specife devigos ĉi tiun klason sur ŝvebado kaj aktivaj ŝtatoj por nav kaj falmenuaj ligiloj.

  1. <i klaso = "ikono-serĉa ikono-blanka" ></i>

Atentu!Kiam vi uzas apud tekstoĉenoj, kiel en butonoj aŭ navigaciaj ligiloj, nepre lasu spacon post la <i>etikedo por taŭga interspaco.

Ekzemploj de ikonoj

Uzu ilin en butonoj, butongrupoj por ilobreto, navigado aŭ antaŭmetitaj formularenigaĵoj.

Butonoj

Butongrupo en butona ilbreto
  1. <div class = "btn-ilbreto" > 
  2.   <div class = "btn-grupo" > 
  3.     <a klaso = "btn" href = "#" ><i class = "ikono-align-maldekstre" ></i></a>   
  4.     <a class = "btn" href = "#" ><i class = "ikono-align-center" ></i></a>   
  5.     <a klaso = "btn" href = "#" ><i class = "ikono-align-dekstra" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "ikono-align-justify" ></i></a>   
  7.   </div>
  8. </div>
Dropdown en butongrupo
Uzanto 
  1. <div class = "btn-grupo" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "ikono-uzanto ikono-blanka" ></i> Uzanto </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "menumenumo" href = "#" ><span class = "karto" ></span></a>    
  4.   <ul class = "falmenuo" > 
  5.     <li><a href = "#" ><i class = "ikono-krajono" ></i> Redakti </a></li>  
  6.     <li><a href = "#" ><i class = "ikono-rubo" ></i> Forigi </a></li>  
  7.     <li><a href = "#" ><i class = "ikono-malpermeso-cirklo" ></i> Malpermeso </a></li>  
  8.     <li class = "dividanto" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Faru administranton </a></li>  
  10.   </ul>
  11. </div>
Butongrandoj
Stelo Stelo Stelo 
  1. <a class = "btn btn-large" href = "#" ><i class = "ikono-stelo" ></i> Stelo </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "ikono-stelo" ></i> Stelo </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "ikono-stelo" ></i> Stelo </a>

Navigado

  1. <ul class = "nav nav-list" > 
  2.   <li class = "aktiva" ><a href = "#" ><i class = "ikono-hejma ikono-blanka" ></i> Hejmo </a></li>   
  3.   <li><a href = "#" ><i class = "piktogramo" ></i> Biblioteko </a></li>  
  4.   <li><a href = "#" ><i class = "ikono-krajono" ></i> Aplikoj </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Diversaĵoj </a></li>  
  6. </ul>

Formkampoj

  1. <div class = "kontrolgrupo" > 
  2.   <label class = "control-label" for = "inputIcon" > Retadreso </label>  
  3.   <div class = "kontroloj" > 
  4.     <div class = "enigo-antaŭa" > 
  5.       <span class = "aldonaĵo" ><i class = "ikono-koverto" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "teksto" >   
  7.     </div>
  8.   </div>
  9. </div>