Bootstrap

Oinarrizko CSS

Oinarrizko HTML elementuak estilo hedagarriekin eta hobetuta daude.

Tipografia

Izenburuak

HTML goiburu guztiak <h1>eskuragarri <h6>daude.

h1. 1. goiburua

h2. 2. goiburua

h3. 3. goiburua

h4. 4. goiburua

h5. 5. goiburua
h6. 6. goiburua

Gorputzaren kopia

Bootstrap-en lehenetsi globala font-size14px da , 20px -line-height koa . Hau paragrafoei eta guztiei aplikatzen zaie. Gainera, (paragrafoek) lerroaren altueraren erdiaren beheko marjina jasotzen dute (9px lehenespenez).<body><p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum is natoque penatibus eta magnis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies ibilgailua.

Cum is natoque penatibus eta magnis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, ez da komodoa luctus, ez da ligula garraiatzen, eta lacinia odio ez dago 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, ez da komodoa luctus, ez da ligula garraiatzen, eta lacinia odio ez dago elit.

<p> ... </p>

Gorputzaren kopia nagusia

Egin paragrafo bat nabarmenduz gehituz .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Hori bai, ez da nolanahikoa.

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

Gutxiagorekin eraikia

Eskala tipografikoa aldagaietan bi LESS aldagaitan oinarritzen da.gutxiago : @baseFontSizeeta @baseLineHeight. Lehenengoa oinarrizko letra-tamaina erabiltzen da eta bigarrena oinarrizko lerroaren altuera da. Aldagai horiek eta matematika sinple batzuk erabiltzen ditugu gure mota guztietako marjinak, betegarriak eta lerro-altuerak sortzeko. Pertsonalizatu eta Bootstrap egokitzen da.

Azpimarra

Erabili HTML-ren enfasi-etiketa lehenetsiak estilo arinekin.

<small>

Testu-lerroak edo blokeak azpimarratzeko, erabili etiketa txikia.

Testu-lerro hau letra xehe gisa tratatu nahi da.

<p> <txikia> Testu-lerro hau letra xehe gisa tratatzeko da. </small> </p>

<strong>

Garrantzitsuarekin testu zati bat azpimarratzeko

Hurrengo testu zatia testu lodi gisa errendatzen da .

<strong> testu lodi gisa errendatuta </strong>

<em>

Testu zati bat enfasiarekin azpimarratzeko

Ondorengo testu zatia testu etzanez gisa errendatzen da .

<em> testu etzana gisa errendatuta </em>

Buruak gora! Ez zaitez libre erabili <b>eta <i>HTML5-en. <b>hitzak edo esaldiak nabarmendu nahi ditu garrantzi gehigarririk eman gabe, <i>eta batez ere ahotsa, termino teknikoak, etab.

Laburdurak

HTMLren elementuaren inplementazio estilizatua <abbr>laburdura eta akronimoetarako bertsio zabaldua erakusteko. Atributu bat duten laburdurek titlepuntu argidun beheko ertza dute eta laguntza-kurtsorea pasatzean, testuinguru gehigarria eskaintzen dute.

<abbr>

Testu hedatu batean laburdura baten gainean pasatzean, sartu titleatributua.

Atributu hitzaren laburdura attr da .

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

<abbr class="initialism">

Gehitu .initialismlaburdura bati letra-tamaina apur bat txikiagoa izateko.

HTML gauzarik onena da ogi xerratik.

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

Helbideak

Aurkeztu hurbilen dagoen arbasoaren edo lan-talde osoaren harremanetarako informazioa.

<address>

Gorde formatua lerro guztiak rekin amaituz <br>.

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

Blokeko komatxoak

Zure dokumentuan beste iturri bateko eduki-blokeak aipatzeko.

Blokeo kuota lehenetsia

Bilatu <blockquote>edozein HTML aipamen gisa. Komatxo zuzenetarako <p>.

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

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

Blockquote aukerak

Estilo- eta eduki-aldaketak bloke estandar baten aldaera sinpleetarako.

Iturburu bat izendatzea

Gehitu <small>etiketa iturria identifikatzeko. Itzul ezazu iturburu-lanaren izena <cite>.

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

Iturria Tituluan ospetsua den norbait 
  1. <blokeoa>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3.   <small> Norbait ospetsua <cite title = "Source Title" > Iturriaren izenburua </cite></small> 
  4. </blockquote>

Ordezko pantailak

Erabili .pull-righteskuinera lerrokatuta dagoen bloke-kota flotagarri baterako.

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

Iturria Tituluan ospetsua den norbait 
  1. <blockquote class = "eskuinera tira" > 
  2.   ...
  3. </blockquote>

Zerrendak

Ordenatu gabe

Ordenak esplizituki garrantzirik ez duen elementuen zerrenda .

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

Agindua

Ordenak esplizituki garrantzia duen elementuen zerrenda .

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

Estilorik gabekoa

list-styleEzkerreko betegarririk edo osagarririk gabeko elementuen zerrenda .

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem eta masa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ak tristique libre voltpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul class = "estilorik gabeko" > 
  2.   <li> ... </li>
  3. </ul>

Deskribapena

Terminoen zerrenda, elkartutako deskribapenekin.

Deskribapen zerrendak
Deskribapen zerrenda ezin hobea da terminoak definitzeko.
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>

Deskribapen horizontala

Egin terminoak eta deskribapenak <dl>elkarren ondoan lerroan.

Deskribapen zerrendak
Deskribapen zerrenda ezin hobea da terminoak definitzeko.
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 eseri amet risus. 
  1. <dl class = "dl-horizontal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Buruak gora! Azalpen zerrenda horizontalek ezkerreko zutabeko konponketan sartzeko luzeegiak diren terminoak moztuko dituzte text-overflow. Ikuspegi estuagoetan, pilatutako diseinu lehenetsira aldatuko dira.

Kodea

Sarean

Itzulbiratu lerroko kode zatiak <code>.

Adibidez, <section>lerroan bezala bildu behar da. 
  1. Adibidez , <code > <section> </ code > lerroan sartuta egon behar da .

Oinarrizko blokea

Erabili <pre>kode-lerro anitzetarako. Ziurtatu kodean angelu-kortxeteetatik ihes egiten duzula errendatze egokia lortzeko.

<p>Hemen testua...</p>
  1. <aurre>
  2.   <p>Hemen testua...</p>
  3. </pre>

Buruak gora! Ziurtatu kodea <pre>etiketen barruan ahalik eta ezkerretik gertuen mantentzea; fitxa guztiak errendatuko ditu.

Aukeran gehi dezakezu .pre-scrollable350 px-ko gehienezko altuera ezarriko duen klasea eta y ardatzeko korritze-barra emango duena.

Taulak

Estilo lehenetsiak

Oinarrizko estilorako (betegarri arina eta banatzaile horizontalak soilik) gehitu oinarrizko klasea .tableedozein <table>.

# Izena Abizena Erabiltzaile izena
1 Markatu Otto @mdo
2 Jakob Thornton @potolo
3 Larry txoria @twitter 
  1. <table class = "taula" > 
  2.   …
  3. </table>

Aukerako klaseak

Gehitu ondorengo klaseetako bat .tableoinarrizko klasera.

.table-striped

<tbody>Zebra-banda gehitzen du CSS hautatzailearen bidez taulako edozein errenkadatan :nth-child(ez dago eskuragarri IE7-IE8-n).

# Izena Abizena Erabiltzaile izena
1 Markatu Otto @mdo
2 Jakob Thornton @potolo
3 Larry txoria @twitter 
  1. <table class = "taula-marradun mahaia" > 
  2.   …
  3. </table>

.table-bordered

Gehitu ertzak eta ertz biribilduak mahaiari.

# Izena Abizena Erabiltzaile izena
1 Markatu Otto @mdo
Markatu Otto @getbootstrap
2 Jakob Thornton @potolo
3 Larry Txoria @twitter 
  1. <table class = "taularen ertzetan" > 
  2.   …
  3. </table>

.table-hover

Gaitu ibiltze-egoera bat taulako errenkadetan <tbody>.

# Izena Abizena Erabiltzaile izena
1 Markatu Otto @mdo
2 Jakob Thornton @potolo
3 Larry Txoria @twitter 
  1. <table class = "taula-pasatze-taula" > 
  2.   …
  3. </table>

.table-condensed

Mahaiak trinkoagoak egiten ditu zelulen betegarria erditik moztuz.

# Izena Abizena Erabiltzaile izena
1 Markatu Otto @mdo
2 Jakob Thornton @potolo
3 Larry Txoria @twitter 
  1. <table class = "taula-kondentsatua" > 
  2.   …
  3. </table>

Aukerako errenkada klaseak

Erabili testuinguru-klaseak taulen errenkadak koloreztatzeko.

Klasea Deskribapena
.success Ekintza arrakastatsua edo positiboa adierazten du.
.error Ekintza arriskutsua edo negatiboa izan daitekeen bat adierazten du.
.info Estilo lehenetsien alternatiba gisa erabiltzen da.
# Produktua Hartutako ordainketa Egoera
1 TB - Hilerokoa 2012/01/04 Onartua
2 TB - Hilerokoa 2012/02/04 Baztertua
3 TB - Hilerokoa 2012/03/04 Zain 
  1. ...
  2.   < tr class = "arrakasta" >
  3.     <td> 1 < /td>
  4.     <td>TB - Hilero</ td >
  5.     <td> 2012 / 04 / 01 < /td>
  6.     <td>Onartua</ td >
  7.   </ tr >
  8. ...

Taulen markaketa onartzen da

Onartutako taulako HTML elementuen zerrenda eta nola erabili behar diren.

Etiketa Deskribapena
<table> Datuak formatu tabular batean bistaratzeko biltzeko elementua
<thead> Taularen goiburuko errenkadetarako edukiontzi-elementua ( <tr>) taula-zutabeak etiketatzeko
<tbody> Taularen errenkadetarako edukiontzi-elementua ( <tr>) taularen gorputzean
<tr> Errenkada bakarrean agertzen den taulako gelaxken ( <td>edo ) multzo baterako edukiontzi-elementua<th>
<td> Taularen gelaxka lehenetsia
<th> Zutabeen (edo errenkadaren, esparruaren eta kokapenaren arabera) etiketen taulako gelaxka bereziak
Erabili behar dira.<thead>
<caption> Taulak jasotzen duenaren deskribapena edo laburpena, bereziki erabilgarria pantaila-irakurleentzat 
  1. <taula>
  2.   <caption> ... </caption>
  3.   <burua>
  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>

Formak

Estilo lehenetsiak

Inprimaki-kontrolek estiloa jasotzen dute, baina behar den oinarrizko klaserik gabe <form>edo markaketa-aldaketa handirik gabe. Inprimaki-kontrolen gainean ezkerrean lerrokatuta dauden etiketa pilatuak sortzen dira.

Kondaira Bloke-mailako laguntza testuaren adibidea hemen. 
  1. <forma>
  2.   <legend> Kondaira </legend>
  3.   <label> Etiketa izena </label>
  4.   <input type = "text" placeholder = "Idatzi zerbait..." >  
  5.   <span class = "help-block" > Bloke-mailako laguntza testuaren adibidea hemen. </span> 
  6.   <label class = "marka-laukia" > 
  7.     <input type = "checkbox" > Begira nazazu 
  8.   </label>
  9.   <button type = "submit" class = "btn" > Bidali </button>  
  10. </form>

Aukerako diseinuak

Bootstrap-ekin sartzen dira erabilera arrunteko kasuetarako aukerako hiru inprimaki-diseinu.

Bilaketa formularioa

Gehitu .form-searchinprimakiari eta .search-querytestu <input>-sarrera biribilduagoa izateko.

  1. <form class = "inprimaki-bilaketa" > 
  2.   <input type = "text" class = "sarrera-erdiko bilaketa-kontsulta" >  
  3.   <button type = "submit" class = "btn" > Bilatu </button>  
  4. </form>

Lineako formularioa

Gehitu .form-inlineezkerrera lerrokatuta dauden etiketak eta lerroko blokeen kontrolak diseinu trinko baterako.

  1. <form class = "form-inline" > 
  2.   <input type = "text" class = "input-small" placeholder = "E-posta" >   
  3.   <input type = "password" class = "input-small" placeholder = "Pasahitza" >   
  4.   <label class = "marka-laukia" > 
  5.     <input type = "checkbox" > Gogoratu nirekin 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Hasi saioa </button>  
  8. </form>

Forma horizontala

Eskuinean lerrokatu etiketak eta flotatu ezkerrera kontrolen lerro berean ager daitezen. Inprimaki lehenetsi batetik marka-aldaketa gehien eskatzen ditu:

  • Gehitu .form-horizontalformulariora
  • Itzulbiratu etiketak eta kontrolak.control-group
  • Gehitu .control-labeletiketan
  • Itzulbiratu lotutako edozein kontrola .controlslerrokatze egokia izateko
Kondaira 
  1. <form class = "forma-horizontal" > 
  2.   <div class = "kontrol-taldea" > 
  3.     <label class = "control-label" for = "inputEmail" > Posta elektronikoa </label>  
  4.     <div class = "kontrolak" > 
  5.       <input type = "text" id = "inputEmail" placeholder = "E-posta" >   
  6.     </div>
  7.   </div>
  8.   <div class = "kontrol-taldea" > 
  9.     <label class = "control-label" for = "inputPassword" > Pasahitza </label>  
  10.     <div class = "kontrolak" > 
  11.       <input type = "password" id = "inputPassword" placeholder = "Pasahitza" >   
  12.     </div>
  13.   </div>
  14.   <div class = "kontrol-taldea" > 
  15.     <div class = "kontrolak" > 
  16.       <label class = "marka-laukia" > 
  17.         <input type = "checkbox" > Gogoratu nirekin 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Hasi saioa </button>  
  20.     </div>
  21.   </div>
  22. </form>

Onartutako inprimakien kontrolak

Inprimaki-kontrol estandarren adibideak inprimaki-diseinu adibide batean onartzen dira.

Sarrerak

Inprimaki-kontrol ohikoena, testuan oinarritutako sarrera-eremuak. HTML5 mota guztietarako euskarria barne hartzen du: testua, pasahitza, data-ordua, data-ordua, data, hilabetea, ordua, astea, zenbakia, posta elektronikoa, URLa, bilaketa, tel. eta kolorea.

typeUneoro zehaztutako bat erabiltzea eskatzen du .

  1. <input type = "text" placeholder = "Testua sarrera" >

Testu-eremua

Testu-lerro bat baino gehiago onartzen dituen inprimaki-kontrola. Aldatu rowatributua behar izanez gero.

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

Koadroak eta irratiak

Kontrol-laukiak zerrenda bateko aukera bat edo batzuk hautatzeko dira, eta irratiak, berriz, aukera bat askoren artean hautatzeko.

Lehenetsia (pilatuta)


  1. <label class = "marka-laukia" > 
  2.   <input type = "checkbox" value = "" >  
  3.   Lehenengo aukera hau eta bestea da; ziurtatu zergatik den bikaina sartzen duzula
  4. </label>
  5.  
  6. <label class = "irratia" > 
  7.   <input type = "irrati" name = "optionsRadios" id = " optionsRadios1" value = "option1" markatuta >     
  8.   Lehenengo aukera hau eta bestea da; ziurtatu zergatik den bikaina sartzen duzula
  9. </label>
  10. <label class = "irratia" > 
  11.   <input type = "irrati" name = "optionsRadios" id = " optionsRadios2" value = "option2" >    
  12.   Bigarren aukera beste zerbait izan daiteke eta hau hautatzeak lehen aukera desautatuko du
  13. </label>

Sareko kontrol-laukiak

Gehitu .inlineklasea kontrol-lauki edo irrati-lerro berean agertzen diren kontroletarako.

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

Hautatzen du

Erabili aukera lehenetsia edo zehaztu a multiple="multiple"aukera anitz aldi berean erakusteko.


  1. <hautatu>
  2.   <aukera> 1 </aukera>
  3.   <aukera> 2 </aukera>
  4.   <aukera> 3 </aukera>
  5.   <aukera> 4 </aukera>
  6.   <aukera> 5 </aukera>
  7. </hautatu>
  8.  
  9. <select multiple = "anitz" > 
  10.   <aukera> 1 </aukera>
  11.   <aukera> 2 </aukera>
  12.   <aukera> 3 </aukera>
  13.   <aukera> 4 </aukera>
  14.   <aukera> 5 </aukera>
  15. </hautatu>

Inprimaki-kontrolak zabaltzea

Lehendik dauden arakatzailearen kontrolen gain, Bootstrap-ek inprimaki-osagai erabilgarriak ditu.

Aurrez aurreko eta erantsitako sarrerak

Gehitu testua edo botoiak testuan oinarritutako edozein sarreraren aurretik edo ondoren. Kontuan izan selectelementuak ez direla onartzen hemen.

Aukera lehenetsiak

Itzulbiratu an .add-oneta an inputbi klaseetako batekin testua sarrera bati eransteko edo eransteko.

@

.00 
  1. <div class = "sarrera-aurrez" > 
  2.   <span class = "gehigarria" > @ </span><input class = "span2" id = "prependedInput" size = "16" type = "text" placeholder = "Erabiltzaile-izena" >      
  3. </div>
  4. <div class = "input-append" > 
  5.   <input class = "span2" id = "appendedInput " size = "16" type = "text" ><span class = "gehigarria" > .00 </span>     
  6. </div>

Konbinatuta

Erabili bi klaseak eta bi instantzia .add-onsarrera bat aurretik jartzeko eta eransteko.

$ .00 
  1. <div class = "sarrera-aurrez sarrera-erantsi" > 
  2.   <span class = "gehigarria" > $ </span><input class = "span2" id = "appendedPrependedInput " size = "16" type = "testua" ><span class = "gehigarria" > .00 </span>      
  3. </div>

Botoiak testuaren ordez

<span>A testuarekin ordez , erabili .btna botoi bat (edo bi) sarrera bati eransteko.


  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton " size = "16" type = "text" ><button class = "btn" type = "button" > Joan! </button>      
  3. </div>
  4.  
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "appendedInputButtons " size = "16" type = "text" ><button class = "btn" type = "button" > Bilatu </button><button class = "btn" type = "button" > Aukerak </button>        
  7. </div>

Bilaketa formularioa

  1. <form class = "inprimaki-bilaketa" > 
  2.   <div class = "input-append" > 
  3.     <input type = "text" class = "span2 bilaketa-kontsulta" >  
  4.     <button type = "submit" class = "btn" > Bilatu </button>  
  5.   </div>
  6.   <div class = "sarrera-aurrez" > 
  7.     <button type = "submit" class = "btn" > Bilatu </button>  
  8.     <input type = "text" class = "span2 bilaketa-kontsulta" >  
  9.   </div>
  10. </form>

Tamaina kontrolatzea

Erabili tamaina erlatiboko klaseak bezalakoak .input-largeedo lotu zure sarrerak sareko zutabeen tamainarekin .span*klaseak erabiliz.

Tamaina erlatiboa

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

Buruak gora! Etorkizuneko bertsioetan, sarrerako klase erlatibo hauen erabilera aldatuko dugu gure botoien tamainarekin bat etor daitezen. Adibidez, .input-largesarrera baten betegarria eta letra-tamaina handituko dira.

Sarearen tamaina

Erabili .span1to .span12sareko zutabeen tamaina berdinekin bat datozen sarrerak egiteko.

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

Lerro bakoitzeko sare-sarrera anitzetarako, erabili .controls-rowmodifikatzaile klasea tarte egokia izateko . Sarrerak mugitzen ditu espazio zuriak tolesteko, marjin egokiak ezartzen ditu eta flotatzailea garbitzen du.

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

Sarrera editaezinak

Aurkeztu datuak editagarriak ez diren inprimaki batean benetako inprimaki-marka erabili gabe.

Hemen balio batzuk 
  1. <span class = "input-xlarge uneditable-input" > Balioren bat hemen </span>

Forma ekintzak

Amaitu formulario bat ekintza talde batekin (botoiak). baten barruan jartzen direnean .form-horizontal, botoiak automatikoki koska egingo dute inprimakiaren kontrolekin lerrokatzeko.

  1. <div class = "forma-ekintzak" > 
  2.   <button type = "submit" class = "btn btn-primary" > Gorde aldaketak </button>  
  3.   <button type = "button" class = "btn" > Utzi </button>  
  4. </div>

Laguntza testua

Inprimaki-kontrolen inguruan agertzen den laguntza-testuari lerro- eta bloke-mailako laguntza.

Lineako laguntza

Sareko laguntza-testua 
  1. <input type = "text" ><span class = "help-inline" > Sareko laguntza testua </span>

Blokeatu laguntza

Laguntza-testu bloke luzeagoa, lerro berri batean apurtzen dena eta lerro batetik haratago luza daitekeena. 
  1. <input type = "text" ><span class = "help-block" > Laguntza-testu bloke luzeagoa, lerro berri batean apurtzen dena eta lerro batetik haratago luza daitekeena. </span>

Inprimakien kontrol-egoerak

Eman iritzia inprimaki-kontrolei eta etiketei buruzko oinarrizko iritzi-egoerak dituzten erabiltzaileei edo bisitariei.

Sarrerako fokua

outlineInprimaki-kontrol batzuetan estilo lehenetsiak kentzen ditugu eta box-shadowbere lekuan a aplikatzen dugu :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Hau zentratuta dago..." >

Sarrera desgaituak

Gehitu disabledatributua sarrera batean erabiltzaileen sarrera saihesteko eta itxura apur bat desberdina abiarazteko.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Hemen sarrera desgaituta..." desgaituta >

Balioztatze-egoerak

Bootstrap-ek errore-, abisu- eta arrakasta-mezuetarako baliozkotze-estiloak biltzen ditu. Erabiltzeko, gehitu dagokion klasea ingurukoari .control-group.

Baliteke zerbait gaizki ateratzea
Mesedez, zuzendu errorea
Aupa! 
  1. <div class = "kontrol-taldearen abisua" > 
  2.   <label class = "control-label" for = "inputWarning" > Sarrera abisuarekin </label>  
  3.   <div class = "kontrolak" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Baliteke zerbait gaizki ateratzea </span> 
  6.   </div>
  7. </div>
  8. <div class = "kontrol-taldearen errorea" > 
  9.   <label class = "control-label" for = "inputError" > Sarrera errorearekin </label>  
  10.   <div class = "kontrolak" > 
  11.     <input type = "text" id = "inputError" >  
  12.     <span class = "help-inline" > Mesedez zuzendu errorea </span> 
  13.   </div>
  14. </div>
  15. <div class = "kontrol-taldearen arrakasta" > 
  16.   <label class = "control-label" for = "inputSuccess" > Sarrera arrakastatsuarekin </label>  
  17.   <div class = "kontrolak" > 
  18.     <sarrera mota = "testua" id = "sarrera arrakastatsua" >  
  19.     <span class = "help-inline" > Woohoo! </span> 
  20.   </div>
  21. </div>

Botoiak

Botoi lehenetsiak

Botoien estiloak .btnklasea aplikatuta dagoen edozertan aplika daitezke. <a>Hala ere, normalean hauek eta elementuei soilik aplikatu nahi <button>dizkiezu errendatze onena lortzeko.

Botoia klase="" Deskribapena
btn Botoi gris estandarra gradientearekin
btn btn-primary Pisu bisual gehigarria ematen du eta ekintza nagusia identifikatzen du botoi multzo batean
btn btn-info Estilo lehenetsien alternatiba gisa erabiltzen da
btn btn-success Ekintza arrakastatsua edo positiboa adierazten du
btn btn-warning Ekintza honekin kontuz ibili behar dela adierazten du
btn btn-danger Ekintza arriskutsua edo negatiboa izan daitekeen bat adierazten du
btn btn-inverse Ordezko botoi gris iluna, ekintza edo erabilera semantiko bati lotuta ez dagoena
btn btn-link Ezarri botoi bati esteka baten itxura emanez, botoiaren portaera mantenduz

Arakatzaileen arteko bateragarritasuna

IE9-k ez ditu atzeko planoko gradienteak mozten ertz biribilduetan, beraz, kentzen dugu. Erlazionatuta, IE9-k desgaitutako elementuak jankifies buttonditu, testua grisa bihurtuz konpondu ezin dugun testu-itzal gaizto batekin.

Botoien neurriak

Botoi handiagoak edo txikiagoak nahi dituzu? Gehitu .btn-large, .btn-small, edo .btn-minitamaina gehigarrietarako.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Botoi handia </button>  
  3.   <button class = "btn btn-large" type = "button" > Botoi handia </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Botoi lehenetsia </button>  
  7.   <button class = "btn" type = "button" > Botoi lehenetsia </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Botoi txikia </button>  
  11.   <button class = "btn btn-small" type = "button" > Botoi txikia </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Mini botoia </button>  
  15.   <button class = "btn btn-mini" type = "button" > Mini botoia </button>  
  16. </p>

Sortu bloke-mailako botoiak —guraso baten zabalera osoa hartzen dutenak— gehituz .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Bloke-mailako botoia </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > Bloke-mailako botoia </button>

Ezindu egoera

Egin botoiek klik ezin daitezkeen itxura % 50 lausotuz.

Aingura-elementua

Gehitu .disabledklasea <a>botoietara.

Lotura nagusia Esteka 

  1. <a href = "#" class = "btn btn-large btn-primary desgaituta" > Esteka nagusia </a>  
  2. <a href = "#" class = "btn btn-large desgaituta" > Esteka </a>

Buruak gora! Hemen erabilgarritasun-klase gisa erabiltzen dugu .disabled, klase arruntaren antzekoa .active, beraz, ez da aurrizkirik behar.

Botoiaren elementua

Gehitu disabledatributua <button>botoiei.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Botoi nagusia </button>   
  2. <button type = "button" class = "btn btn-large" desgaituta > Botoia </button>

Klase bat, etiketa anitz

Erabili .btnklasea <a>, <button>, edo <input>elementu batean.

Esteka 
  1. <a class = "btn" href = "" > Esteka </a>  
  2. <button class = "btn" type = "bidali" > Botoia </button>  
  3. <input class = "btn" type = "button" value = "Sarrera" >   
  4. <input class = "btn" type = "submit" value = "Bidali" >

Praktika onena gisa, saiatu elementua zure testuinguruarekin bat etortzen arakatzaileen arteko errendatzea ziurtatzeko. Bat baduzu input, erabili <input type="submit">botoi bat.

Irudiak

Gehitu klaseak <img>elementu bati edozein proiektutako irudiak erraz estiloatzeko.

  1. <img src = "..." class = "img-biribildua" >  
  2. <img src = "..." class = "img-zirkulua" >  
  3. <img src = "..." class = "img-polaroid" >

Buruak gora! .img-roundedeta .img-circleez IE7-8-n funtzionatzen laguntza faltagatik border-radius.

Glyphicons -en ikonoak

Ikonoen glifoak

140 ikono sprite moduan, gris ilunean (lehenetsia) eta zurian eskuragarri, Glyphicons -ek emandakoa .

  • ikono-beira
  • ikono-musika
  • ikono-bilaketa
  • ikono-kartazala
  • ikono-bihotza
  • ikono-izar
  • ikono-izar-hutsik
  • ikono-erabiltzailea
  • ikono-filma
  • ikono-th-handi
  • ikono-th
  • ikono-garren zerrenda
  • ikonoa-ok
  • ikonoa kendu
  • ikonoa handitu
  • ikonoa txikiagotu
  • ikonoa desaktibatuta
  • ikono-seinalea
  • ikono-kog
  • ikono-zaborrontzia
  • ikono-etxea
  • ikono-fitxategia
  • ikono-denbora
  • ikono-bide
  • ikonoa-deskargatu-alt
  • ikonoa-deskarga
  • ikono-kargatu
  • ikono-sarrera-ontzia
  • ikono-jolas-zirkulu
  • ikono-errepikatu
  • ikonoa-freskatu
  • ikono-zerrenda-alt
  • ikono-blokeoa
  • ikono-bandera
  • ikono-aurikularra
  • ikono-bolumena-desaktibatu
  • ikonoa-bolumena-behera
  • ikono-bolumena igo
  • ikono-qrcode
  • ikono-barra kodea
  • ikono-etiketa
  • ikono-etiketak
  • ikono-liburua
  • ikono-laster-marka
  • ikono-inprimaketa
  • ikono-kamera
  • ikono-letra-tipoa
  • ikono-lodia
  • ikono-etenkaria
  • ikono-testu-altuera
  • ikono-testua-zabalera
  • ikonoa-lerrokatu-ezkerrera
  • ikono-lerrokatu-zentroa
  • ikonoa-lerrokatu-eskuinean
  • ikonoa-lerrokatu-justifikatu
  • ikono-zerrenda
  • ikono-koska-ezkerrera
  • ikono-koska-eskuin
  • ikono-facetime-bideoa
  • ikono-irudia
  • ikono-arkatza
  • ikono-mapa-markatzailea
  • ikono-doitu
  • ikono-tinta
  • ikono-editatu
  • ikono-partekatzea
  • ikono-egiaztapena
  • ikono-mugimendua
  • ikono-pauso-atzera
  • ikonoa-azkar-atzera
  • ikonoa-atzera
  • ikono-jolasa
  • ikono-pausa
  • ikono-stop
  • ikonoa-aurrera
  • ikonoa-azkar-aurrera
  • ikono-pauso-aurrera
  • ikonoa kanporatzea
  • ikono-chevron-ezkerrera
  • ikonoa-chevron-eskuinekoa
  • ikono-plus-seinalea
  • ikono-minus-ikurra
  • ikonoa-kendu-seinalea
  • ikono-ok-seinalea
  • ikono-galdera-seinalea
  • ikono-info-seinalea
  • ikono-pantaila-argazkia
  • ikonoa-kendu-zirkulua
  • ikono-ok-zirkulu
  • ikono-debeku-zirkulu
  • ikonoa-gezia-ezkerrera
  • ikonoa-gezia-eskuinera
  • ikono-gezia-gora
  • ikonoa-gezia-behera
  • ikono-partekatu-alt
  • ikono-tamaina aldatzea-osoa
  • ikonoa-tamaina aldatzea-txikia
  • ikono-plus
  • ikono-minus
  • ikono-asterisko
  • ikono-harridura-seinalea
  • ikono-opari
  • ikono-hostoa
  • ikono-sua
  • ikono-begi-zabalik
  • ikono-begi-itxi
  • ikono-abisu-seinalea
  • ikono-hegazkina
  • ikono-egutegia
  • ikonoa-ausazkoa
  • ikono-iruzkina
  • ikono-imana
  • ikono-chevron-gora
  • ikonoa-chevron-behera
  • ikonoa-retweet
  • ikono-erosketa-saskia
  • ikono-karpeta-itxi
  • ikono-karpeta-ireki
  • ikonoa-tamaina aldatzea-bertikala
  • ikono-tamaina aldatzea-horizontal
  • ikono-hdd
  • ikono-zezena
  • ikono-kanpaia
  • ikono-ziurtagiria
  • ikono-erpurua-gora
  • ikonoa-erpurua-behera
  • ikono-esku-eskuin
  • ikonoa-eskua-ezkerrera
  • ikono-eskua gora
  • ikono-eskutik behera
  • ikono-zirkulu-gezia-eskuinera
  • ikono-zirkulu-gezia-ezkerrera
  • ikono-zirkulu-gezia-gora
  • ikonoa-zirkulua-gezia-behera
  • ikono-globoa
  • ikono-giltza
  • ikono-zereginak
  • ikono-iragazkia
  • ikono-maletina
  • ikono-pantaila osoa

Glifokoen atribuzioa

Glyphicons Halflings normalean ez dago doan eskuragarri, baina Bootstrap eta Glyphicons sortzaileen arteko akordio batek posible egin du hori garatzaile gisa kosturik gabe. Eskerrik asko gisa, Glyphicons -era itzultzeko aukerako esteka bat sartzea eskatzen dizugu posible den bakoitzean.

Nola erabili

Ikono guztiek <i>klase berezia duen etiketa bat behar dute, aurrizkiarekin icon-. Erabiltzeko, jarri kode hau ia edozein lekutan:

  1. <i class = "ikono-bilaketa" ></i>

Alderantzizko (zuriak) ikonoentzako estiloak ere badaude, klase gehigarri batekin prestatuta. Klase hau bereziki ezarriko dugu pasabidean eta egoera aktiboetan nabigaziorako eta goitibeherako esteketarako.

  1. <i class = "ikono-bilaketa ikono-zuria" ></i>

Buruak gora! Testu-kateen ondoan erabiltzen duzunean, botoietan edo nabigazio-esteketan bezala, ziurtatu <i>etiketaren ondoren tarte bat uzten duzula tarte egokia izateko.

Ikonoen adibideak

Erabili itzazu botoietan, botoi-taldeetan tresna-barran, nabigazioan edo inprimaki-sarreran.

Botoiak

Botoien taldea botoien tresna-barra batean
  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>
Goitibeherako botoi talde batean
Erabiltzailea 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "ikono-erabiltzailea ikono-zuria" ></i> Erabiltzailea </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "menua goitibeherako" > 
  5.     <li><a href = "#" ><i class = "ikono-arkatza" ></i> Editatu </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Ezabatu </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Debekatu </a></li>  
  8.     <li class = "banatzailea" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Egin administratzaile </a></li>  
  10.   </ul>
  11. </div>
Botoi txikia
  1. <a class = "btn btn-small" href = "#" ><i class = "ikono-izar" ></i></a>

Nabigazioa

  1. <ul class = "nabigazio-zerrenda" > 
  2.   <li class = "aktiboa" ><a href = "#" ><i class = "ikono-home ikono-zuria" ></i> Hasiera </a></li>   
  3.   <li><a href = "#" ><i class = "ikono-liburua" ></i> Liburutegia </a></li>  
  4.   <li><a href = "#" ><i class = "ikono-arkatza" ></i> Aplikazioak </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Hainbat </a></li>  
  6. </ul>

Inprimaki-eremuak

  1. <div class = "kontrol-taldea" > 
  2.   <label class = "control-label" for = "inputIcon" > Helbide elektronikoa </label>  
  3.   <div class = "kontrolak" > 
  4.     <div class = "sarrera-aurrez" > 
  5.     <span class = "gehigarria" ><i class = "ikono-azala" ><i><span><input class = "span2" id = "inputIcon" type = "testua" >     
  6.   </div>
  7. </div>