Tipograpiko a timbangan

Ti sibubukel a grid ti tipograpiko ket naibatay iti dua a Basbassit a variable iti variables.less file-tayo: @baseFontSizeken @baseLineHeight. Ti umuna ket ti base font-size a nausar iti intero ken ti maikadua ket ti base line-height.

Usarenmi dagita a variable, ken sumagmamano a matematika, tapno mangpartuat kadagiti margin, padding, ken line-heights ti amin a kitami ken dadduma pay.

Pagarigan ti bagi a teksto

Nullam quis risus eget urna mollis nga arkos nga vel eu leo. Cum sociis natoque penatibus ken magnis ti panagpasngay a montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies lugan ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus ti dolor ti panagsubasta. Duis mollis, est non commodo luctus, nisi erat nga porttitor ligula, eget lacinia odio sem nec elit. Donec sed nga odio dui.

Panangusar iti panangipaganetget

Fusce dapibus , tellus ac cursus commodo , tortor mauris kondimento nibh , ut fermentum masa justo agtugaw amet risus. Maecenas nga faucibus nga mollis nga interdum. Nulla vitae elit libero, maysa a pharetra nga augue.

Pakaammo: Siwayawaya nga usaren <b>ken <i>iti HTML5, ngem nagbaliw bassit ti pannakausar dagitoy. <b>ket nairanta a mangitag-ay kadagiti balikas wenno ragup ti sasao a saan a mangipaay iti kanayonan a kinapateg bayat <i>a kaaduanna ket para iti timek, teknikal a termino, kdpy.

Pagarigan dagiti adres

Adtoy ti dua a pagarigan no kasano <address>a mausar ti tag:

Dagiti pagarigan nga abbreviation

Dagiti abbreviation ket naistilo babaen ti dakkel a teksto ken nalawag a tulnek a baba a beddeng. Addaanda pay ti kursor ti tulong iti hover isu nga addaan dagiti agar-aramat iti ekstra nga indikasion nga adda maipakita iti hover.

HTML ti kasayaatan a banag sipud idi naiwa a tinapay.

Ti maysa nga abbreviation ti sao nga attribute ket attr .

Tapno mairaman ti blockquote, baluten <blockquote>ti ania man nga HTML a kas ti sitas. Para kadagiti diretso a sitas irekomendarmi ti <p>.

Iraman ti opsional <small>nga elemento a mangdakamat iti taudanmo ket makagun-odka iti em dash —sakbay daytoy para kadagiti panggep ti estilo.

<blockquote ti panag-block>
  <p> Lorem ipsum dolor agtugaw nga amet, consectetur adipiscing elit. Integer a posuere erat ti maysa nga ante venenatis. </p>
  <bassit> Maysa a nalatak </small>
</blockquote ti panagsurat>

Dagiti kasisigud a blockquote ket nai-estilo a kas ti kastoy:

Lorem ipsum dolor agtugaw amet, consectetur adipiscing elit. Integer a posuere erat ti maysa nga ante venenatis.

Maysa a nalatak iti Bagi ti trabaho

Tapno mai-float ti blockquote-mo iti kannawan, inayon ti class="pull-right":

Lorem ipsum dolor agtugaw amet, consectetur adipiscing elit. Integer a posuere erat ti maysa nga ante venenatis.

Maysa a nalatak iti Bagi ti trabaho

Di naurnos

<ul>

• Lorem ipsum dolor agtugaw amet
• Consectetur nga adipiscing nga elit
• Integer nga molestie lorem iti masa
• Facilisis iti pretium nisl nga aliquet
• Nulla volutpat nga aliquam nga velit
  • Phasellus nga iaculis nga neque
  • Purus dagiti sodales nga ultricies
  • Vestibulum nga laoreet nga porttitor sem
  • Ac tristique nga libero nga volutpat ni
• Faucibus porta nga lakos nga fringilla vel
• Aenean agtugaw amet erat nunc
• Eget nga porttitor nga lorem

Saan nga estilo

<ul class="unstyled">

• Lorem ipsum dolor agtugaw amet
• Consectetur nga adipiscing nga elit
• Integer nga molestie lorem iti masa
• Facilisis iti pretium nisl nga aliquet
• Nulla volutpat nga aliquam nga velit
  • Phasellus nga iaculis nga neque
  • Purus dagiti sodales nga ultricies
  • Vestibulum nga laoreet nga porttitor sem
  • Ac tristique nga libero nga volutpat ni
• Faucibus porta nga lakos nga fringilla vel
• Aenean agtugaw amet erat nunc
• Eget nga porttitor nga lorem

Nabilin

<ol>

1. Lorem ipsum dolor agtugaw amet
2. Consectetur nga adipiscing nga elit
3. Integer nga molestie lorem iti masa
4. Facilisis iti pretium nisl nga aliquet
5. Nulla volutpat nga aliquam nga velit
6. Faucibus porta nga lakos nga fringilla vel
7. Aenean agtugaw amet erat nunc
8. Eget nga porttitor nga lorem

Panangiladawan

<dl>

Dagiti listaan ​​ti panangiladawan

Ti listaan ​​ti panangiladawan ket perpekto para iti panangdepinar kadagiti termino.

Euismod nga

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit nga saan nga mi porta gravida iti eget metus.

Malesuada nga porta

Etiam porta sem malesuada nga agtagibalay nga euismod.

Inline nga

Balkoten dagiti inline a snippet ti kodigo babaen ti <code>.

Kas pagarigan , ti <code> a paset </ code > ket rumbeng a maibalkot a kas inline .  

Basic nga bloke

Usaren <pre>para iti adu a linia ti kodigo. Siguraduen a makalisi iti aniaman a bracket ti anggulo iti kodigo para iti umno a panagiparang.

<p>Pagarigan a teksto ditoy...</p>

<pre> nga
  <p>Pagarigan a teksto ditoy...</p>
</pre>

Pakaammo: Siguraduen nga pagtalinaeden ti kodigo iti uneg <pre>dagiti etiketa nga asideg iti kannigid agingga a mabalin; i-renderna amin a tab.

Mabalinmo a pagpilian nga inayon ti .pre-scrollableklase a mangikeddeng ti max-height iti 350px ken mangipaay ti y-axis scrollbar.

Google nga Pag-prettify

Alaen ti isu met laeng <pre>nga elemento ken manginayon ti dua nga opsional a klase para iti napasayaat a panagiparang.

<p> Pagarigan ti teksto ditoy... </p>

<pre klase = "napintas nga imprenta ." 
     dagiti linenum" >
  <p>Pagarigan a teksto ditoy...</p>
</pre>

I-download ti google-code-prettify ken kitaen ti readme no kasano nga usaren.

<lamisaan>
  <ulo>
    <tr> nga
      <th> ... </th> nga adda
      <th> ... </th> nga adda
    </tr>
  </tulo>
  <tibagi>
    <tr> nga
      <td> ... </td> nga adda
      <td> ... </td> nga adda
    </tr>
  </tbagi>
</table>

Dagiti lamisaan ket automatiko nga estilo nga addaan laeng kadagiti sumagmamano a beddeng tapno masigurado ti pannakabasa ken mataginayon ti estruktura. Iti 2.0, .tablekasapulan ti klase.

< klase ti lamisaan = "lamisaan" > 
  ...
</table>

Agbalinka a magarbo bassit kadagiti lamisaanmo babaen ti pananginayon iti zebra-striping—inayonmo laeng ti .table-stripedklase.

Pakaammo: Dagiti garitgaritan a lamisaan ket agus-usar ti :nth-childCSS a mangpili ken saan a magun-od iti IE7-IE8.

< klase ti lamisaan = "lamisaan nga garitgaritan" > 
  ...
</table>

Inayon dagiti beddeng iti aglawlaw ti intero a lamisaan ken nagtimbukel a suli para kadagiti panggep ti estetika.

< clase ti lamisaan = "lamisaan-nabeddengan" > 
  ...
</table>

Pagbalinem dagiti lamisaanmo nga ad-adda a kompakto babaen ti pananginayon ti .table-condensedklase tapno mangputed ti table cell padding iti kagudua (manipud iti 8px agingga iti 4px).

< klase ti lamisaan = "lamisaan-napaababa" > 
  ...
</table>

Marikna a nawaya a pagtitiponen ti aniaman kadagiti klase ti lamisaan tapno magun-od dagiti nadumaduma a langa babaen ti panangusar iti aniaman kadagiti magun-odan a klase.

<table class = "lamisaan a garitgaritan ti lamisaan a nabeddengan ti lamisaan a napaababa" > 
  ...
</table>

Nalaka a maibagay nga HTML ken CSS

Ti kasayaatan a paset maipapan kadagiti porma iti Bootstrap ket amin nga input ken kontrolmo ket nagsayaat ti langana uray kasano ti panangibangonmo kadagitoy iti markup-mo. Awan ti kasapulan a sobra nga HTML, ngem ipaaymi dagiti padron para kadagidiay agkasapulan iti dayta.

Dagiti ad-adu a komplikado a layout ket umay nga addaan kadagiti ababa ken maipadakkel a klase para iti nalaka nga estilo ken panagtengngel ti pasamak, isu a masakupanka iti tunggal addang.

Uppat a layout ti nairaman

Ti Bootstrap ket addaan iti suporta para kadagiti uppat a kita ti layout ti porma:

• Bertikal (default) .
• Agbirok
• Inline nga
• Paidda

Dagiti nadumaduma a kita ti layout ti porma ket agkasapulan kadagiti sumagmamano a panagbalbaliw iti panagmarka, ngem dagiti kontrol a mismo ket agtalinaed ken agtigtignayda a kas met laeng.

Kontrol dagiti estado ken dadduma pay

Dagiti porma ti Bootstrap ket mangiraman kadagiti estilo para kadagiti amin a kontrol ti batayan a porma a kas ti input, textarea, ken pilien a namnamaem. Ngem daytoy ket umay pay nga addaan kadagiti sumagmamano a kostumbre a paset a kas dagiti naikapet ken nasakbay nga input ken suporta para kadagiti listaan ​​dagiti kahon ti tsek.

Dagiti estado a kas ti biddut, pakdaar, ken balligi ket nairaman para iti tunggal maysa a kita ti panagtengngel ti porma. Nairaman pay dagiti estilo para kadagiti baldado a kontrol.

Pangrugian a porma

Iti v2.0, addaantayo kadagiti nalaglag-an ken nasirsirib a default para kadagiti estilo ti porma. Awan ti ekstra a markup, dagiti laeng kontrol ti porma.

<porma ti klase = "bueno" > 
  <label> Nagan ti etiketa </label>
  <input type = "teksto" klase = "span3" placeholder = "Isurat ti maysa a banag..." >   
  <span class = "help-inline" > Naikapet a teksto ti tulong! </span> 
  < klase ti etiketa = "kahon ti tsek" > 
    <input type = "kahon ti tsek" > Kitaennak 
  </label>
  <button type = "ipatuloden" klase = "btn" > Isumite </button>  
</porma>

Pormas ti panagsapul

Ti panangiparangarang kadagiti default nga estilo ti WebKit, basta manginayon .form-searchpara kadagiti ekstra a nagtimbukel a tay-ak ti panagbiruk.

<porma klase = "bueno porma-panagbiruk" > 
  <input type = "teksto" klase = "input-medium a panagsaludsod-a-panagsaludsod" >  
  <button type = "ipatulod" klase = "btn" > Agbiruk </button>  
</porma>

Inline nga porma

Inputs ket block level tapno mangrugi. Para .form-inlineken .form-horizontal, usarenmi ti inline-block.

< klase ti porma = "bueno porma-inline" > 
  < tipo ti panagserrek = "teksto" klase = "panagserrek-bassit" a pagtengngel ti lugar = "Email" >   
  <input type = "password" class = "input-bassit" nga lugar = "Password" >   
  < tipo ti buton = "ipatulod" klase = "btn" > Mapan </buton>  
</porma>

Pagarigan ti markup

No maited ti pagarigan a layout ti porma iti ngato, ditoy ti markup a nainaig iti umuna nga input ken kontrol a grupo. Ti .control-group, .control-label, ken .controlsdagiti klase ket kasapulan amin para iti estilo.

< klase ti porma = "porma-paisaad" > 
  <set ti tay-ak>
    <leyenda> Teksto ti sarsarita </legend>
    <div klase = "grupo-a-kontrol" > 
      <label class = "kontrol-etiketa" para iti = "input01" > Iserrek ti teksto </label>  
      <div klase = "dagiti kontrol" > 
        < tipo ti input = "teksto" a klase = "input-xlarge" id = "input01" >   
        <p class = "help-block" > Panangsuporta ti teksto ti tulong </p> 
      </div>
    </div>
  </fieldset ti tay-ak>
</porma>

Ania ti nairaman

Naipakita iti kannigid amin dagiti default a kontrol ti porma a suportaranmi. Ania ti listaan ​​ti bulleted:

• dagiti panagserrek ti teksto (teksto, password, email, kdpy) .
• kahon ti tsek
• radio
• agpili
• adu a pilien
• panagserrek ti file
• lugar ti teksto

Baro a default ti v2.0

Agingga iti v1.4, dagiti default nga estilo ti porma ti Bootstrap ket nagusar ti horisontal a layout. Iti Bootstrap 2, inikkatmi dayta a pagbeddengan tapno addaan kadagiti nasirsirib, ad-adu a maipadakkel a default para iti ania man a porma.

Nadisenio manen dagiti estado ti browser

Ti Bootstrap ket mangitampok kadagiti estilo para kadagiti nasuportaran ti browser a naipamaysa ken disableddagiti estado. Ikkatenmi ti default a Webkit outlineken iyaplikarmi ti box-shadowa iti lugarna para iti :focus.

Panangipaneknek ti porma

Daytoy ket mangiraman pay kadagiti estilo ti panangipaneknek para kadagiti biddut, pakdaar, ken balligi. Tapno mausar, inayon ti klase ti biddut iti aglawlaw .control-group.

<set ti tay-ak
  klase = "biddut ti kontrol-grupo" >
  ...
</fieldset ti tay-ak>

Prepend & i-append dagiti input

Dagiti grupo ti input—nga addaan iti naikapet wenno nasaksakbay a teksto—ket mangipaay iti nalaka a wagas a mangted iti ad-adu a konteksto para kadagiti inputmo. Dagiti naindaklan a pagarigan ket mairaman ti @ sign para kadagiti nagan ti agar-aramat ti Twitter wenno $ para iti pinansia.

Dagiti checkbox ken radio

Agingga iti v1.4, ti Bootstrap ket kasapulanna ti ekstra a panagmarka iti aglawlaw dagiti kahon ti tsek ken dagiti radio tapno maitumpok dagitoy. Ita, simple laeng a banag ti panangulit iti <label class="checkbox">dayta a mangbalkot iti <input type="checkbox">.

Masuportaran met dagiti inline checkbox ken radio. Basta inayonmo .inlineti aniaman .checkboxwenno .radioket nalpaskan.

Inline dagiti pormas ken append/prepend

Tapno agusar kadagiti prepend wenno append nga input iti inline a porma, siguraduen nga ikabil ti .add-onken inputiti isu met laeng a linia, nga awan dagiti espasyo.

Pormaen ti teksto ti tulong

Tapno manginayon ti teksto ti tulong para kadagiti panagserrek ti pormam, iraman ti inline a teksto ti tulong nga addaan <span class="help-inline">wenno ti bloke ti teksto ti tulong nga addaan <p class="help-block">kalpasan ti elemento ti panagserrek.

Butones para kadagiti tignay

Kas maysa a konbension, dagiti buton ket rumbeng laeng a mausar para kadagiti tignay bayat a dagiti hyperlink ket mausar para kadagiti banag. Kas pagarigan, ti "I-download" ket rumbeng a maysa a buton bayat a ti "nabiit pay nga aktibidad" ket rumbeng a maysa a silpo.

Dagiti estilo ti buton ket mabalin a mayaplikar iti ania man nga addaan ti .btnklase a naipakat. Nupay kasta, kadawyan a kayatmo nga iyaplikar dagitoy kadagiti laeng <a>ken <button>dagiti elemento.

Krus ti panagtunos ti browser

Ti IE9 ket saan a mang-crop kadagiti background gradient kadagiti nagtimbukel a suli, isu nga ikkatenmi daytoy. Mainaig, ti IE9 ket mang-janify kadagiti baldado buttonnga elemento, a mangiparang ti teksto nga abuabu nga addaan iti naalas a teksto-anniniwan a ditay mabalin nga ilinteg.

Adu ti kadakkelna

Magarbo a dakdakkel wenno basbassit a butones? Inayon ti .btn-large, .btn-small, wenno .btn-minipara iti dua a kanayonan a kadakkel.

Panguna nga aramid Aksion

Panguna nga aramid Aksion

Panguna nga aramid Aksion

Kasasaad ti baldado

Para kadagiti baldado a buton, inayon ti .disabledklase kadagiti silpo ken ti disabledattribute para kadagiti <button>elemento.

Panguna a silpo Inaig

Panguna nga buton Buton

Ulo nga agpangato! Usarenmi a .disabledkas maysa a klase ti utilidad ditoy, a kapada ti gagangay a .activeklase, isu nga awan ti kasapulan a pangrugian.

Maysa a klase, adu a tag

Usaren ti .btnklase iti maysa a <a>, <button>, wenno <input>elemento.

<a klase = "btn" href = "" > Silpo </a>  
< klase ti buton = "btn" tipo = "ipatulod" >  
  Buton
</button> nga
< klase ti panagserrek = "btn" tipo = "buton".  
         pateg = "Input" >
< klase ti panagserrek = "btn" tipo = "ipatulod".  
         value = "Isubmitir" >

Kas maysa a kasayaatan nga aramid, padasem a maipada ti elemento para kenka a konteksto tapno masigurado ti panagtunos ti panagiparang ti krus-browser. No addaanka iti input, usarem ti <input type="submit">para iti butonmo.

• icon-sarming nga
• ikono-musika
• icon-panagsapul
• icon-sobre nga
• icon-puso nga
• icon-bituen
• icon-bituen-empty
• icon-nga agus-usar
• ikono-pelikula
• icon-maika-dakkel
• icon-th
• icon-ti-listaan
• icon-ok nga
• icon-ikkaten
• ikono-ti-panag-zoom
• ikono-a-panag-zoom-out
• icon-off nga
• ikono-senyales
• icon-cog nga
• icon-basuraan
• icon-pagtaengan
• icon-file nga
• icon-panawen
• ikono-dalan
• ikono-i-download-alt
• icon-i-download
• icon-i-upload
• ikono-inbox
• icon-play-a-sirkulo
• icon-uliten

• ikono-pabaro
• ikono-listaan-alt
• ikono-kandado
• icon-bandera nga
• dagiti ikono-headphone
• icon-tomo-a-naiddep
• icon-tomo-nga-agpababa
• ikono-tomo-nga-up
• ikono-qrcode nga
• ikono-barcode nga
• ikono-ti-tag
• dagiti icon-tag
• icon-libro
• icon-marka ti libro
• ikono-i-print
• ikono-kamera
• ikono-a-letra
• icon-bold nga
• ikono-italiko nga
• ikono-teksto-kangato
• ikono-teksto-kalawa
• ikono-agtunos-kannigid
• icon-align-a-sentro
• ikono-agtunos-kannigid
• icon-align-ikalintegan
• ikono-listaan
• ikono-indent-kannigid
• ikono-indent-kannigid
• icon-rupa-panawen-video
• icon-ladawan

• icon-lapis nga
• ikono-mapa-marker
• ikono-i-adjust
• icon-tint nga
• ikono-urnosen
• ikono-ibinglay
• ikono-sukimat
• ikono-iyakar
• icon-addang-nga agpaatras
• icon-napartak-nga agpaatras
• icon-nga agpalikud
• icon-play nga
• icon-pause ti panagsardeng
• ikono-panagsardeng
• icon-agpasango
• icon-napartak-nga-agpasango
• icon-addang-nga-agpasango
• ikono-i-eject
• ikono-chevron-kannigid
• ikono-chevron-kannigid
• icon-plus-a-pagilasinan
• icon-minus-a-pagilasinan
• icon-ikkaten-a-pagilasinan
• icon-ok-a-pagilasinan
• icon-saludsod-a-pagilasinan
• icon-info-a-pagilasinan
• ikono-i-screenshot
• icon-ikkaten-ti-sirkulo
• ikono-ok-sirkulo nga
• ikono-ban-a-sirkulo

• icon-pana-kannigid
• icon-pana-kannigid
• icon-pana-nga-nga-ngato
• icon-pana-nga-pababa
• ikono-ibinglay-alt
• icon-a-padakkel-a-napno
• icon-baliwan ti kadakkel-bassit
• icon-plus nga
• ikono-minus nga
• icon-asterisko nga
• icon-pag-exclamation-a-pagilasinan
• icon-regalo nga
• icon-bulong nga
• icon-apuy nga
• icon-mata-a-luktan
• icon-mata-a-asideg
• icon-pakdaar-a-pagilasinan
• icon-plano nga
• ikono-kalendario
• icon-random nga
• ikono-komento
• ikono-imán nga
• ikono-chevron-nga-nga-up
• ikono-chevron-nga agpababa
• ikono-ti-retweet
• icon-kariton ti panaggatang
• ikono-ti-folder-a-serraan
• icon-folder-a-luktan
• ikono-baliwan ti kadakkel-a-bertikal
• ikono-baliwan ti kadakkel-paisaad

Naibangon a kas maysa nga sprite

Imbes a pagbalinen ti tunggal maysa nga ikono a maysa nga ekstra a kiddaw, inurnongmi dagitoy iti maysa nga sprite—maysa a bunggoy dagiti ladawan iti maysa a file nga agus-usar ti CSS a mangiposision kadagiti ladawan babaen ti background-position. Daytoy met laeng ti pamay-an nga us-usarenmi iti Twitter.com ken nasayaat ti panagtrabahona kadakami.

Amin a klase ti ikono ket naidasig iti .icon-para iti umno a namespacing ken scoping, a kas dagiti dadduma a pasettayo. Makatulong daytoy tapno maliklikan ti panagsusupiat kadagiti dadduma nga alikamen.

Ti Glyphicons ket nangited kadakami ti panagusar kadagiti Halflings a naikabil iti open-source a toolkitmi no la ketdi mangipaaykami ti silpo ken kredito ditoy kadagiti docs. Pangngaasiyo ta ibilangyo ti panangaramid iti kasta met laeng kadagiti proyektoyo.

No kasano nga usaren

Iti v2.0.1, pinilimi ti agusar ti <i>tag para kadagiti amin nga ikonomi, ngem awan ti klase ti kasoda—maysa laeng a naibingbingay a prefix. Tapno mausar, ikabilmo ti sumaganad a kodigo iti dandani sadinoman:

<i klase = "ikono-panagbiruk" </i> 

Adda pay dagiti estilo a magun-od para kadagiti nabaliktad (puraw) nga ikono, a naaramid a nakasagana babaen ti maysa nga ekstra a klase:

<i class = "ikono-agbirok ti ikono-puraw" ></i> 

Adda 120 a klase a pagpilian para kadagiti icon-mo. Basta mangnayonka iti <i>tag nga addaan kadagiti umno a klase ket naikabilka. Mabalinmo a sapulen ti kompleto a listaan ​​iti sprites.less wenno ditoy mismo iti daytoy a dokumento.

Usaren dagiti kaso

Nasayaat dagiti icon, ngem sadino ti pangusaran ti maysa kadagita? Adtoy ti sumagmamano nga ideya:

• Kas visuals para iti nabigasionmo iti sidebar
• Para iti puro nga icon-driven a nabigasion
• Para kadagiti buton a makatulong a mangipakaammo iti kaipapanan ti maysa nga aramid
• Adda dagiti silpo a mangibinglay ti konteksto iti destinasion ti maysa nga agar-aramat

Kangrunaanna, sadinoman a mabalinmo nga ikabil ti <i>tag, mabalinmo ti mangikabil iti icon.

Ipabaro Checkout ti panagbayad Ikkaten

Komento Dagiti Pagsaad Ad-adu pay nga Impormasion