Aldamioen gainean, oinarrizko HTML elementuak estilo hedagarriekin hobetzen dira eta itxura fresko eta koherentea emateko.
Sare tipografiko osoa gure aldagaietako bi aldagai Gutxiagotan oinarritzen da.fitxategirik gabe: @baseFontSizeeta @baseLineHeight. Lehenengoa zehar erabilitako oinarrizko letra-tamaina da eta bigarrena oinarrizko lerroaren altuera da.
Aldagai horiek eta matematika batzuk erabiltzen ditugu gure mota guztietako marjinak, betegarriak eta lerro-altuerak sortzeko.
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 vehicula ut id elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, ez da komodoa luctus, ez da ligula garraiatzen, eta lacinia odio ez dago elit. Donec sed odio dui.
| Elementua | Erabilera | Aukerakoa |
|---|---|---|
<strong> |
Garrantzitsuarekin testu zati bat azpimarratzeko | Bat ere ez |
<em> |
Testu zati bat enfasiarekin azpimarratzeko | Bat ere ez |
<abbr> |
Laburdurak eta akronimoak biltzen ditu bertsio zabaldua pasatzean erakusteko | Sartu aukerako .initialismklasea maiuskulak egiteko. |
<address> |
Hurbilen dagoen arbasoaren edo lan-talde osoaren harremanetarako informazioa lortzeko | Gorde formatua lerro guztiak honekin amaituz<br> |
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
Oharra: lasai erabili <b>eta <i>HTML5-en, baina haien erabilera pixka bat aldatu da. <b>hitzak edo esaldiak nabarmendu nahi ditu garrantzi gehigarririk eman gabe, <i>eta batez ere ahotsa, termino teknikoak, etab.
<address>Hona hemen etiketa nola erabil daitekeen bi adibide :
Atributu bat duten laburdurek titlepuntu argidun beheko ertza dute eta laguntza-kurtsorea pasatzean. Honek erabiltzaileei pasatzean zerbait erakutsiko zaiela adierazten du.
Gehitu initialismklasea laburdura bati harmonia tipografikoa areagotzeko, testuaren tamaina apur bat txikiagoa emanez.
HTML gauzarik onena da ogi xerratik.
Atributu hitzaren laburdura attr da .
| Elementua | Erabilera | Aukerakoa |
|---|---|---|
<blockquote> |
Beste iturri bateko edukia aipatzeko bloke mailako elementua | Gehitu .pull-lefteta klaseak.pull-right |
<small> |
Erabiltzaileentzako aipamen bat gehitzeko aukerako elementua, normalean lanaren izenburua duen egilea | Jarri <cite>izenburua edo iturriaren izenaren inguruan |
Bloke-aipamen bat sartzeko, bildu <blockquote>edozein HTML aipamen gisa. Komatxo zuzenetarako <p>.
Sartu aukerako <small>elementu bat zure iturburua aipatzeko eta marratxo bat jasoko duzu —aurretik, estiloetarako.
- <blokeoa>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
- <small> Norbait ospetsua </small>
- </blockquote>
Bloke-koma lehenetsiak honela daude estiloa:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Body of work- en ospetsua den norbait
Zure blokeoa eskuinera mugitzeko, gehitu class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Body of work- en ospetsua den norbait
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Buruak gora! Azalpen zerrenda horizontalek ezkerreko zutabeko konponketan sartzeko luzeegiak diren terminoak moztuko dituzte text-overflow. Ikuspegi estuagoetan, pilatutako diseinu lehenetsira aldatuko dira.
Itzulbiratu lerroko kode zatiak <code>.
- Adibidez , <code> atala </ code > lerroan sartuta egon behar da .
Erabili <pre>kode-lerro anitzetarako. Ziurtatu kodean angelu-kortxeteetatik ihes egiten duzula errendatze egokia lortzeko.
<p>Hemen testua...</p>
- <aurre>
- <p>Hemen testua...</p>
- </pre>
Oharra: 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.
Hartu <pre>elementu bera eta gehitu aukerako bi klase errendatze hobetu ahal izateko.
- <p> Testuaren adibidea hemen... </p>
- <pre class = "prettyprint
- linenums" >
- <p>Hemen testua...</p>
- </pre>
Deskargatu google-code-prettify eta ikusi irakurme-a nola erabili jakiteko.
| 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> |
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 |
- <taula>
- <burua>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| Izena | Klasea | Deskribapena |
|---|---|---|
| Lehenetsia | Bat ere ez | Estilorik ez, zutabeak eta errenkadak soilik |
| Oinarrizkoa | .table |
Lerroen arteko lerro horizontalak bakarrik |
| Mugatuta | .table-bordered |
Ertzak biribildu eta kanpoko ertza gehitzen du |
| Zebra-marra | .table-striped |
Atzeko plano gris argia gehitzen du errenkada bakoitietan (1, 3, 5, etab.) |
| Kondentsatua | .table-condensed |
Betegarri bertikala erditik mozten du, 8px-tik 4px-ra, guztien tdeta thelementuen barruan |
Taulak automatikoki moldatzen dira ertz gutxi batzuekin, irakurgarritasuna bermatzeko eta egitura mantentzeko. 2.0rekin, .tableklasea beharrezkoa da.
- <table class = "taula" >
- …
- </table>
| # | Izena | Abizena | Erabiltzaile izena |
|---|---|---|---|
| 1 | Markatu | Otto | @mdo |
| 2 | Jakob | Thornton | @potolo |
| 3 | Larry | txoria |
Sortu pixka bat zure mahaiekin zebra-marra gehituz, gehitu .table-stripedklasea.
Oharra: marradun taulek :nth-childCSS hautatzailea erabiltzen dute eta ez dago eskuragarri IE7-IE8-n.
- <table class = "taula-marradun mahaia" >
- …
- </table>
| # | Izena | Abizena | Erabiltzaile izena |
|---|---|---|---|
| 1 | Markatu | Otto | @mdo |
| 2 | Jakob | Thornton | @potolo |
| 3 | Larry | txoria |
Gehitu ertzak mahai osoaren inguruan eta ertz biribilduak helburu estetikoetarako.
- <table class = "taularen ertzetan" >
- …
- </table>
| # | Izena | Abizena | Erabiltzaile izena |
|---|---|---|---|
| 1 | Markatu | Otto | @mdo |
| Markatu | Otto | @getbootstrap | |
| 2 | Jakob | Thornton | @potolo |
| 3 | Larry Txoria | ||
Egin zure taulak trinkoagoak .table-condensedklasea gehituta mahaiko gelaxken betegarria erditik mozteko (8px-tik 4px-ra).
- <table class = "taula-kondentsatua" >
- …
- </table>
| # | Izena | Abizena | Erabiltzaile izena |
|---|---|---|---|
| 1 | Markatu | Otto | @mdo |
| 2 | Jakob | Thornton | @potolo |
| 3 | Larry Txoria | ||
Anima zaitez mahaiko edozein klase konbinatu itxura desberdinak lortzeko, eskuragarri dauden klaseetako edozein erabiliz.
- <table class = "taula mahai-marradun mahai-ertzadun mahai-kondentsatua" >
- ...
- </table>
| Izen osoa | |||
|---|---|---|---|
| # | Izena | Abizena | Erabiltzaile izena |
| 1 | Markatu | Otto | @mdo |
| 2 | Jakob | Thornton | @potolo |
| 3 | Larry Txoria | ||
Bootstrap-eko inprimakiei buruzko zatirik onena zure sarrera eta kontrol guztiek itxura bikaina dutela da, markaketa nola eraikitzen dituzun ere. Ez da soberako HTMLrik behar, baina eskatzen dutenei ereduak ematen dizkiegu.
Diseinu korapilatsuagoak klase labur eta eskalagarriekin datoz estilismoa eta gertaerak lotzeko erraztasuna lortzeko, pauso bakoitzean estalita zaude.
Bootstrap-ek lau inprimakien diseinu motaren laguntzarekin dator:
Inprimaki-diseinu mota ezberdinek aldaketa batzuk behar dituzte markatzailean, baina kontrolak berek mantentzen dira eta berdin jokatzen dute.
Bootstrap-en inprimakiek oinarrizko inprimaki-kontrol guztietarako estiloak barne hartzen dituzte, hala nola, sarrera, testu-eremua eta espero zenukeen hautaketa. Baina osagai pertsonalizatu batzuk ere badakartza, hala nola, sarrera erantsiak eta aurretik erantsiak eta kontrol-laukien zerrendetarako laguntza.
Errorea, abisua eta arrakasta bezalako estatuak sartzen dira inprimaki-kontrol mota bakoitzerako. Desgaitutako kontroletarako estiloak ere sartzen dira.
Bootstrap-ek markaketa eta estilo sinpleak eskaintzen ditu web-inprimaki arrunten lau estiloetarako.
| Izena | Klasea | Deskribapena |
|---|---|---|
| Bertikala (lehenetsia) | .form-vertical (ez da beharrezkoa) |
Ezkerretara lerrokatuta dauden etiketak kontrolen gainean |
| Sarean | .form-inline |
Ezkerrean lerrokatuta dagoen etiketa eta lerro-blokearen kontrolak estilo trinkorako |
| Bilatu | .form-search |
Testu-sarrera oso biribildua bilaketa-estetika tipiko baterako |
| Horizontala | .form-horizontal |
Mugitu ezkerrera, eskuinera lerrokatuta dauden etiketak kontrolen lerro berean |
Lehenetsi adimentsuak eta arinak marka gehigarririk gabe.
- <form class = "ondo" >
- <label> Etiketa izena </label>
- <input type = "text" class = "span3" placeholder = "Idatzi zerbait..." >
- <span class = "help-block" > Bloke-mailako laguntza testuaren adibidea hemen. </span>
- <label class = "marka-laukia" >
- <input type = "checkbox" > Begira nazazu
- </label>
- <button type = "submit" class = "btn" > Bidali </button>
- </form>
Gehitu .form-searchformulariora .search-queryeta input.
- <form class = "inprimaki-bilaketa ondo" >
- <input type = "text" class = "sarrera-erdiko bilaketa-kontsulta" >
- <button type = "submit" class = "btn" > Bilatu </button>
- </form>
Gehitu .form-inlineinprimaki-kontrolen lerrokadura bertikala eta tartea fintzeko.
- <form class = "ondo inprimakia lerroan" >
- <input type = "text" class = "input-small" placeholder = "E-posta" >
- <input type = "password" class = "input-small" placeholder = "Pasahitza" >
- <label class = "marka-laukia" >
- <input type = "checkbox" > Gogoratu nirekin
- </label>
- <button type = "submit" class = "btn" > Hasi saioa </button>
- </form>
Eskuinean erakusten dira onartzen ditugun inprimaki-kontrol lehenetsi guztiak. Hona hemen buleten zerrenda:
Goiko inprimakiaren diseinuaren adibidea ikusita, hona hemen lehen sarrera eta kontrol taldearekin lotutako marka. Estiloa egiteko .control-group, .control-label, eta .controlsklaseak beharrezkoak dira.
- <form class = "forma-horizontal" >
- <eremu multzoa>
- <legend> Kondaira testua </legend>
- <div class = "kontrol-taldea" >
- <label class = "control-label" for = "input01" > Testu-sarrera </label>
- <div class = "kontrolak" >
- <input type = "text" class = "input-xlarge" id = "sarrera01" >
- <p class = "help-block" > Laguntza- testua lagungarria </p>
- </div>
- </div>
- </fieldset>
- </form>
Bootstrap-ek arakatzaileak onartzen dituen fokatutako eta disabledestatuetarako estiloak ditu. Webkit lehenetsia kentzen dugu eta bere lekuan outlinea aplikatzen dugu .box-shadow:focus
Akatsak, abisuak eta arrakastaren baliozkotze estiloak ere biltzen ditu. Erabiltzeko, gehitu errore-klasea ingurukoari .control-group.
- <eremu multzoa
- class = "kontrol-taldearen errorea" >
- …
- </fieldset>
Sarrera-taldeek (testua erantsia edo aurretik jarrita) zure sarrerak testuinguru gehiago emateko modu erraz bat eskaintzen dute. Adibide bikainak dira @ ikurra Twitterren erabiltzaile-izenetarako edo $ finantzaketarako.
1.4 bertsiora arte, Bootstrap-ek markaketa gehigarria behar zuen kontrol-lauki eta irratien inguruan pilatzeko. Orain, gauza sinplea da itzultzen duen <label class="checkbox">hori errepikatzea <input type="checkbox">.
Sareko kontrol-laukiak eta irratiak ere onartzen dira. Gehitu .inlineedozein .checkboxedo .radioeta listo.
Aurrez aurreko edo eransteko sarrerak lerro-forma batean erabiltzeko, ziurtatu .add-oneta inputlerro berean jartzen duzula, zuriunerik gabe.
Inprimaki-sarrerak egiteko laguntza-testua gehitzeko, sartu lerroko laguntza-testua <span class="help-inline">edo laguntza-testu-bloke bat <p class="help-block">sarrerako elementuaren ondoren.
Ikono bakoitza eskaera gehigarri bat egin beharrean, sprite batean bildu ditugu, irudiak fitxategi batean CSS erabiltzen dituen irudi mordoa background-position. Twitter.com-en erabiltzen dugun metodo bera da eta ondo funtzionatu digu.
Ikono-klase guztiek aurrizkia .icon-dute izen-tarte eta esparru egokirako, gure gainerako osagaien antzera. Horrek beste tresna batzuekiko gatazkak saihesten lagunduko du.
Glyphicons -ek gure kode irekiko tresna-kutxako Halflings multzoa erabiltzeko baimena eman digu, dokumentuetan esteka eta kreditu bat ematen badugu hemen. Mesedez, kontuan hartu gauza bera egitea zure proiektuetan.
Bootstrap -ek <i>etiketa bat erabiltzen du ikono guztientzat, baina ez dute kasu-klaserik, partekatutako aurrizki bat baizik. Erabiltzeko, jarri kode hau ia edozein lekutan:
- <i class = "ikono-bilaketa" ></i>
Alderantzizko (zuriak) ikonoentzako estiloak ere eskuragarri daude, klase gehigarri batekin prestatuta:
- <i class = "ikono-bilaketa ikono-zuria" ></i>
Zure ikonoetarako 120 klase daude aukeran. Gehitu <i>etiketa bat klase egokiekin eta listo. Zerrenda osoa sprites.less -en aurki dezakezu edo hementxe dokumentu honetan.
Buruak gora! Testu-kateen ondoan erabiltzen duzunean, botoietan edo nabigazio-esteketan bezala, ziurtatu <i>etiketaren ondoren tarte bat uzten duzula tarte egokia izateko.
Ikonoak bikainak dira, baina non erabiliko lirateke? Hona hemen ideia batzuk:
Funtsean, <i>etiketa bat jarri dezakezun lekuan, ikono bat jar dezakezu.
Erabili itzazu botoietan, botoi-taldeetan tresna-barran, nabigazioan edo inprimaki-sarreran.