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 (lehenespenez 10 px).<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 zehar erabilitako oinarrizko letra-tamaina 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 itzazu 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>

Lodia

Letra-pisu pisu handiagoa duen testu zati bat azpimarratzeko.

Hurrengo testu zatia testu lodi gisa errendatzen da .

<strong> testu lodi gisa errendatuta </strong>

Etzana

Letra etzanarekin testu zati bat 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.

Lerrokatze klaseak

Erraz lerrokatu testua osagaiekin testua lerrokatzeko klaseekin.

Ezkerrean lerrokatuta dagoen testua.

Erdian lerrokatuta dagoen testua.

Eskuinean lerrokatuta dagoen testua.

  1. <p class = "text-left" > Ezkerrean lerrokatuta dagoen testua. </p> 
  2. <p class = "text-center" > Erdian lerrokatuta dagoen testua. </p> 
  3. <p class = "text-right" > Eskuinean lerrokatuta dagoen testua. </p>

Enfasi klaseak

Transmititu esanahia kolorearen bidez enfasi-erabilgarritasun-klase gutxi batzuekin.

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, ez da komenigarria luctus, ez da ligula eramangarria.

  1. <p class = "muted" > Fusce dapibus, tellus ac cursus commodo, torttor 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, is not commodo luctus, nisi erat porttitor ligula. </p>

Laburdurak

HTML 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 = "HyperText Markup Language" class = "initialism" > HTML </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 osoa
[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.

Blokeoaurreko 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-kota estandar baten aldaera errazetarako.

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

Kendu lehenetsitako list-styleeta ezkerreko betegarria zerrendako elementuetan (berehalako haurrak soilik).

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

Sarean

Jarri zerrendako elementu guztiak lerro bakarrean inline-blocketa betegarri arin batekin.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla voltpat
  1. <ul class = "lerroan" > 
  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 > & lt ; atala & gt ;</ code > lerroan bezala bildu 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-8-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.
.warning Arreta beharko lukeen abisu 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
4 TB - Hilerokoa 2012/04/04 Deitu berresteko 
  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 taula formatuan bistaratzeko bilgarri-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> Taula-gelaxka berezia zutabeetarako (edo errenkada, esparruaren eta kokapenaren arabera) etiketetarako
<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.   <eremu multzoa>
  3.     <legend> Kondaira </legend>
  4.     <label> Etiketa izena </label>
  5.     <input type = "text" placeholder = "Idatzi zerbait..." >  
  6.     <span class = "help-block" > Bloke-mailako laguntza testuaren adibidea hemen. </span> 
  7.     <label class = "marka-laukia" > 
  8.       <input type = "checkbox" > Begira nazazu 
  9.     </label>
  10.     <button type = "submit" class = "btn" > Bidali </button>  
  11.   </fieldset>
  12. </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
  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 guztientzako euskarria barne hartzen du: testua, pasahitza, data-ordua, data-ordua, data, hilabetea, ordua, astea, zenbakia, posta elektronikoa, url, bilaketa, telefonoa 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 rowsatributua behar izanez gero.

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

Koadroak eta irratiak

Kontrol-laukiak zerrenda bateko aukera bat edo batzuk hautatzeko dira, eta irratiak, berriz, askotariko aukera bat 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 = "irratia" 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-multzo bati lerro berean agertzen diren kontrolak izateko.

  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> 
  3.   <input class = "span2" id = "prependedInput" type = "text" placeholder = "Erabiltzaile izena" >    
  4. </div>
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "appendedInput " type = "testua" >   
  7.   <span class = "gehigarria" > .00 </span> 
  8. </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> 
  3.   <input class = "span2" id = "appendedPrependedInput " type = "testua" >   
  4.   <span class = "gehigarria" > .00 </span> 
  5. </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 " type = "testua" >   
  3.   <button class = "btn" type = "button" > Joan! </button>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons " type = "testua" >   
  3.   <button class = "btn" type = "button" > Bilatu </button>  
  4.   <button class = "btn" type = "button" > Aukerak </button>  
  5. </div>

Botoien goitibeherakoak

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedDropdownButton " type = "testua" >   
  3.   <div class = "btn-group" > 
  4.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  5.       Ekintza
  6.       <span class = "caret" ></span> 
  7.     </button>
  8.     <ul class = "menua goitibeherako" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "sarrera-aurrez" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       Ekintza
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "menua goitibeherako" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "prependedDropdownButton" type = "testua" >   
  12. </div>
  1. <div class = "sarrera-aurrez sarrera-erantsi" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       Ekintza
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "menua goitibeherako" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "appendedPrependedDropdownButton " type = "testua" >   
  12.   <div class = "btn-group" > 
  13.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  14.       Ekintza
  15.       <span class = "caret" ></span> 
  16.     </button>
  17.     <ul class = "menua goitibeherako" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Segmentatutako goitibeherako taldeak

  1. <forma>
  2.   <div class = "sarrera-aurrez" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     <sarrera mota = "testua" > 
  5.   </div>
  6.   <div class = "input-append" > 
  7.     <sarrera mota = "testua" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

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.

Bloke mailako sarrerak

Egin ezazu edozein <input>edo <textarea>elementu bloke-mailako elementu baten antzera jokatzeko.

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

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 sareko sarrera anitzetarako, erabili .controls-rowmodifikatzaile klasea tarte egokia izateko . Sarrerak mugitzen ditu zuriuneak 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-actions, 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 baliogabeak

Estilo-sarrerak arakatzailearen funtzionalitate lehenetsiaren bidez :invalid. Zehaztu a type, gehitu requiredatributua eremua hautazkoa ez bada eta (hala badagokio) zehaztu a pattern.

Hau ez dago erabilgarri Internet Explorer 7-9 bertsioetan CSS sasi-hautatzaileentzako laguntza falta dela eta.

  1. <input class = "span3" type = "email" beharrezkoa >

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-, informazio- eta arrakasta-mezuen baliozkotze-estiloak biltzen ditu. Erabiltzeko, gehitu dagokion klasea ingurukoari .control-group.

Baliteke zerbait gaizki ateratzea
Mesedez, zuzendu errorea
Erabiltzaile izena hartzen da
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.  
  9. <div class = "kontrol-taldearen errorea" > 
  10.   <label class = "control-label" for = "inputError" > Sarrera errorearekin </label>  
  11.   <div class = "kontrolak" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Mesedez zuzendu errorea </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "kontrol-taldearen informazioa" > 
  18.   <label class = "control-label" for = "inputInfo" > Sarrera informazioarekin </label>  
  19.   <div class = "kontrolak" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Erabiltzaile izena dagoeneko hartua da </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "kontrol-taldearen arrakasta" > 
  26.   <label class = "control-label" for = "inputSuccess" > Sarrera arrakastatsuarekin </label>  
  27.   <div class = "kontrolak" > 
  28.     <sarrera mota = "testua" id = "sarrera arrakastatsua" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </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. Gainera, klase hau estetikarako bakarrik da; JavaScript pertsonalizatua erabili behar duzu hemen estekak desgaitzeko.

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.

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

Buruak gora! .img-roundedeta .img-circleez dute funtzionatzen IE7-8-n 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
  • ikono-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 dohainik eskuragarri, baina Bootstrap eta Glyphicons sortzaileen arteko akordio batek posible egin du hau 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.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  4.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  7.   </div>
  8. </div>
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>
Botoien neurriak
Izarra Izarra Izarra 
  1. <a class = "btn btn-large" href = "#" ><i class = "ikono-izar" ></i> Izarra </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "ikono-izar" ></i> Izarra </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "ikono-izar" ></i> Izarra </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-gutun-azala" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "testua" >   
  7.     </div>
  8.   </div>
  9. </div>