Eskala tipografikoa

Sare tipografiko osoa gure aldagaietako bi aldagai Gutxiagotan oinarritzen da.fitxategirik gabe: @baseFontSizeeta @baseLineHeight. Lehenengoa oinarrizko letra-tamaina erabiltzen da eta bigarrena oinarrizko lerroaren altuera da.

Aldagai horiek eta matematika batzuk erabiltzen ditugu gure mota guztietako marjinak, betegarriak eta lerro-altuerak sortzeko.

Gorputz testuaren adibidea

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.

Enfasea erabiliz

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.

Helbide adibideak

<address>Hona hemen etiketa nola erabil daitekeen bi adibide :

Laburdura adibideak

Laburdurek maiuskulak eta beheko ertza puntu argi batekin idazten dute. Gainera, laguntza-kurtsorea dute pasatzean, erabiltzaileek pasatzean zerbait erakutsiko den adierazgarri gehigarria izan dezaten.

HTML gauzarik onena da ogi xerratik.

Atributu hitzaren laburdura attr da .

Bloke-koma 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

Ordenatu gabe

<ul>

• 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

Estilorik gabekoa

<ul class="unstyled">

• 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

Agindua

<ol>

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

Deskribapena

<dl>

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.

Sarean

Itzulbiratu lerroko kode zatiak <code>.

Adibidez , <code> atala </ code > lerroan sartuta egon behar da .  

Oinarrizko blokea

Erabili <pre>kode-lerro anitzetarako. Ziurtatu edozein karaktere unicode karaktere bihurtzen 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.

Google Prettify

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.

<taula>
  <burua>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

Taulak automatikoki ertz gutxi batzuekin diseinatzen dira irakurgarritasuna bermatzeko eta egitura mantentzeko. 2.0rekin, .tableklasea beharrezkoa da.

<table class = "taula" > 
  …
</table>

Sortu pixka bat zure mahaiekin zebra-marra gehituz, gehitu .table-stripedklasea.

Oharra: Sprite-taulek :nth-childCSS hautatzailea erabiltzen dute eta ez dago eskuragarri IE7-IE8-n.

<table class = "taula-marradun mahaia" > 
  …
</table>

Gehitu ertzak mahai osoaren inguruan eta ertz biribilduak helburu estetikoetarako.

<table class = "taularen ertzetan" > 
  …
</table>

Egin zure taulak trinkoagoak .table-condensedklasea gehituta mahaiko gelaxken betegarria erditik mozteko (8px-tik 4px-ra).

<table class = "taula-kondentsatua" > 
  …
</table>

Anima zaitez mahaiko edozein klase konbinatu itxura desberdinak lortzeko, eskuragarri dauden klaseetako edozein erabiliz.

<table class = "taula mahai-marradun mahai-ertzadun mahai-kondentsatua" > 
  ...
</table>

HTML eta CSS malguak

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.

Lau diseinu barne

Bootstrap-ek lau inprimakien diseinu motaren laguntzarekin dator:

• Bertikala (lehenetsia)
• Bilatu
• Sarean
• Horizontala

Inprimaki-diseinu mota ezberdinek aldaketa batzuk behar dituzte markatzailean, baina kontrolak berek mantentzen dira eta berdin jokatzen dute.

Kontrol-egoerak eta gehiago

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.

v2.0-rekin, inprimaki-estiloetarako lehenespen arinagoak eta adimentsuagoak ditugu. Ez dago markaketa gehigarririk, inprimaki-kontrolak besterik ez.

WebKit estilo lehenetsiak islatuz, gehitu .form-searchbilaketa-eremu biribilduak.

Sarrerak bloke mailan daude hasteko. eta .form-inline, .form-horizontalinline-block erabiltzen dugu.

Zer sartzen den

Ezkerrean erakusten dira onartzen ditugun inprimaki-kontrol lehenetsi guztiak. Hona hemen buleten zerrenda:

• testu-sarrerak (testua, pasahitza, posta elektronikoa, etab.)
• kontrol-laukia
• irratia
• hautatu
• aukera anitz
• fitxategiaren sarrera
• testu eremua

Lehenetsi berriak v2.0-rekin

v1.4 arte, Bootstrap-en inprimaki-estilo lehenetsiek diseinu horizontala erabiltzen zuten. Bootstrap 2-rekin, muga hori kendu genuen edozein inprimakirako lehenespen adimentsuagoak eta eskalagarriagoak izateko.

Arakatzailearen egoerak birdiseinatuta

Bootstrap-ek arakatzaileak onartzen dituen fokatutako eta disabledestatuetarako estiloak ditu. Webkit lehenetsia kentzen dugu eta bere lekuan outlinea aplikatzen dugu .box-shadow:focus

Formularioaren baliozkotzea

Akatsak, abisuak eta arrakastarako baliozkotze estiloak ere biltzen ditu. Erabiltzeko, gehitu errore-klasea ingurukoari .control-group.

<eremu multzoa
  class = "kontrol-taldearen errorea" >
  …
</fieldset>

Sarrerak aurretik jarri eta erantsi

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.

Koadroak eta irratiak

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.

Sartu inprimakiak eta erantsi/aurrez

Aurrez aurreko edo eransteko sarrerak lerro-forma batean erabiltzeko, ziurtatu .add-oneta inputlerro berean jartzen duzula, zuriunerik gabe.

Inprimakiaren laguntza-testua

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.

Ekintzak egiteko botoiak

Konbentzio gisa, botoiak ekintzetarako soilik erabili behar dira hiperestekak objektuetarako erabili behar diren bitartean. Esate baterako, "Deskargatu" botoi bat izan behar da eta "azken jarduerak" esteka izan behar du.

Aingura eta formetarako

Botoien estiloak aplikatuta dagoen edozertan .btnaplika daitezke. <a>Hala ere, normalean hauek eta <button>elementuei soilik aplikatu nahi dituzu .

Oharra: botoi guztiek .btnklasea izan behar dute. <button>Botoien estiloak eta <a>koherentziarako elementuei aplikatu behar zaizkie .

Tamaina anitz

Botoi handiagoak edo txikiagoak nahi dituzu? Izan ezazu!

Lehen mailako ekintza Ekintza

Lehen mailako ekintza Ekintza

Ezindu egoera

Desgaitutako botoietarako, erabili .btn-disabledesteketarako eta :disabledelementuetarako <button>.

Lehen mailako ekintza Ekintza

Lehen mailako ekintza Ekintza

Arakatzaileen arteko bateragarritasuna

IE9-n, botoi guztietan gradientea askatzen dugu ertz biribilduen alde, IE9-k ez baititu atzeko planoko gradienteak mozten ertzetan.

Erlazionatuta, IE9-k desgaitutako elementuak jankifies buttonditu, testua grisa bihurtuz testu-itzal gaizto batekin, zoritxarrez ezin dugu hau konpondu.

Sprite gisa eraikia

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.

Nola erabili

2.0.0 bertsioarekin, <i>etiketa bat erabiltzea aukeratu dugu gure 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.

Erabilera kasuak

Ikonoak bikainak dira, baina non erabiliko lirateke? Hona hemen ideia batzuk:

• Zure alboko barran nabigaziorako bisual gisa
• Ikonoek gidatutako nabigazio huts baterako
• Ekintza baten esanahia transmititzen laguntzeko botoietarako
• Erabiltzaile baten helmugan testuingurua partekatzeko estekekin

Funtsean, <i>etiketa bat jarri dezakezun lekuan, ikono bat jar dezakezu.

Freskatu Errebisatu Ezabatu

Iruzkina Ezarpenak Informazio gehiago