Typographic scale

Ang tibuok typographic grid gibase sa duha ka Less variables sa among variables.less file: @baseFontSizeug @baseLineHeight. Ang una mao ang base nga gidak-on sa font nga gigamit sa tibuok ug ang ikaduha mao ang base-line-gitas-on.

Gigamit namo kadtong mga baryable, ug pipila ka matematika, sa paghimo sa mga margin, paddings, ug line-heights sa tanan namong tipo ug uban pa.

Pananglitan sa teksto sa lawas

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis 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, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

Gigamit ang pagpasiugda

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Espesye sa tanom nga bulak ang Maecenas faucibus mollis interdum. Nulla vitae elit libero, usa ka pharetra augue.

Mubo nga sulat: Mobati nga gawasnon sa paggamit <b>ug <i>sa HTML5, apan ang ilang paggamit nausab og gamay. <b>gituyo aron ipasiugda ang mga pulong o hugpong sa mga pulong nga wala maghatag dugang nga importansya samtang <i>kadaghanan alang sa tingog, teknikal nga mga termino, ug uban pa.

Pananglitan nga mga adres

Ania ang duha ka pananglitan kung giunsa paggamit ang <address>tag:

Pananglitan nga mga minubo

Ang mga abbreviation gi-istilo gamit ang uppercase nga text ug usa ka light dotted bottom border. Adunay usab sila usa ka tabang nga cursor sa hover aron ang mga tiggamit adunay dugang nga timailhan nga adunay ipakita sa hover.

Ang HTML mao ang labing maayo nga butang sukad sa hiniwa nga tinapay.

Ang minubo sa pulong nga attribute kay attr .

Aron maapil ang usa ka blockquote, ibutang <blockquote>ang bisan unsang HTML ingon nga kinutlo. Alang sa tul-id nga mga kinutlo among girekomendar ang usa ka <p>.

Ilakip ang usa ka opsyonal <small>nga elemento sa pagkutlo sa imong tinubdan ug makakuha ka og em dash —sa wala pa kini alang sa mga katuyoan sa pag-istilo.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  <small> Usa ka tawo nga bantogan </small>
</blockquote>

Ang mga default nga blockquotes gi-istilo sa ingon:

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

Usa ka sikat sa Lawas sa trabaho

Aron molutaw ang imong blockquote sa tuo, idugang class="pull-right":

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

Usa ka sikat sa Lawas sa trabaho

Wala ma-order

<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem ug masa
• Facilisis sa pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Espesye sa tanom nga bulak ang Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat ug
• Faucibus porta lacus fringilla vel
• Aenean naglingkod amet erat nunc
• Eget porttitor lorem

Dili istilo

<ul class="unstyled">

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem ug masa
• Facilisis sa pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Espesye sa tanom nga bulak ang Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat ug
• Faucibus porta lacus fringilla vel
• Aenean naglingkod amet erat nunc
• Eget porttitor lorem

Nagmando

<ol>

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

Deskripsyon

<dl>

Mga lista sa paghulagway

Ang usa ka lista sa paghulagway perpekto alang sa pagtino sa mga termino.

Euismod

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

Donec id elit non mi porta gravida ug eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Inline

I-wrap ang inline nga mga snippet sa code gamit ang <code>.

Pananglitan , < code> section </ code > kinahanglang iputos isip inline .  

Basic block

Gigamit <pre>alang sa daghang linya sa code. Siguruha nga himuon ang bisan unsang mga caret sa ilang unicode nga mga karakter alang sa husto nga paghubad.

<p>Sample nga teksto dinhi...</p>

<pre>
  <p>Sample nga teksto dinhi...</p>
</pre>

Mubo nga sulat: Siguroha nga ibutang ang code sulod sa <pre>mga tag nga duol sa wala kutob sa mahimo; kini maghatag sa tanan nga mga tab.

Google Pagpatahom

Kuhaa ang parehas <pre>nga elemento ug idugang ang duha nga opsyonal nga mga klase alang sa gipaayo nga paghubad.

<p> Sample nga teksto dinhi... </p>

<pre class = "prettyprint 
     linyanum" >
  <p>Sample nga teksto dinhi...</p>
</pre>

Pag-download sa google-code-prettify ug tan-awa ang readme kung unsaon paggamit.

<lamesa>
  <ulo>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </head>
  <lawas>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

Ang mga lamesa awtomatiko nga gi-istilo nga adunay pipila ra nga mga utlanan aron masiguro nga mabasa ug mapadayon ang istruktura. Uban sa 2.0, .tablegikinahanglan ang klase.

< klase sa lamesa = "lamesa" > 
  …
</table>

Paglingaw og gamay sa imong mga lamesa pinaagi sa pagdugang og zebra-striping—idugang lang ang .table-stripedklase.

Mubo nga sulat: Ang mga sprited table naggamit sa :nth-childCSS selector ug dili magamit sa IE7-IE8.

<table class = "table table-striped" > 
  …
</table>

Idugang ang mga utlanan sa tibuok lamesa ug mga lingin nga mga kanto para sa aesthetic nga mga katuyoan.

<table class = "table table-bordered" > 
  …
</table>

Himua nga mas compact ang imong mga lamesa pinaagi sa pagdugang sa .table-condensedklase sa pagputol sa table cell padding sa tunga (gikan sa 8px hangtod sa 4px).

<table class = "table table-condensed" > 
  …
</table>

Mobati nga gawasnon sa paghiusa sa bisan unsang mga klase sa lamesa aron makab-ot ang lainlaing hitsura pinaagi sa paggamit sa bisan unsang magamit nga mga klase.

<table class = "table table-striped table-bordered table-condensed" > 
  ...
</table>

Flexible nga HTML ug CSS

Ang labing kaayo nga bahin bahin sa mga porma sa Bootstrap mao nga ang tanan nimong mga input ug mga kontrol nindot tan-awon bisan giunsa nimo kini paghimo sa imong markup. Wala'y gikinahanglan nga sobra nga HTML, apan naghatag kami og mga sumbanan alang niadtong nagkinahanglan niini.

Ang labi ka komplikado nga mga layout moabut uban ang malip-ot ug mabag-o nga mga klase alang sa dali nga pag-istilo ug pagbugkos sa panghitabo, mao nga nasakup ka sa matag lakang.

Upat ka mga layout gilakip

Ang Bootstrap adunay suporta alang sa upat ka mga klase sa mga layout sa porma:

• Bertikal (default)
• Pangitaa
• Inline
• Pahigda

Ang lain-laing mga matang sa porma nga mga layout nanginahanglan pipila ka mga pagbag-o sa pagmarka, apan ang mga kontrol sa ilang kaugalingon nagpabilin ug naglihok nga parehas.

Control states ug uban pa

Ang mga porma sa Bootstrap naglakip sa mga estilo alang sa tanan nga mga kontrol sa base nga porma sama sa input, textarea, ug pagpili nga imong gipaabut. Apan kini usab adunay daghang mga naandan nga sangkap sama sa gidugtong ug giandam nga mga input ug suporta alang sa mga lista sa mga checkbox.

Ang mga estado sama sa sayup, pasidaan, ug kalampusan gilakip alang sa matag matang sa pagkontrol sa porma. Apil usab ang mga estilo para sa mga kontrol nga may kapansanan.

Uban sa v2.0, kami adunay mas gaan ug mas maalamon nga mga default alang sa mga estilo sa porma. Wala'y dugang nga markup, mga kontrol sa porma.

Nagpakita sa default nga mga istilo sa WebKit, idugang lang .form-searchalang sa dugang nga mga natad sa pagpangita.

Ang mga input kay block level aron magsugod. Alang .form-inlinesa ug .form-horizontal, naggamit kami og inline-block.

Unsa ang gilakip

Gipakita sa wala ang tanan nga mga default nga kontrol sa porma nga among gisuportahan. Ania ang bullet list:

• mga input sa teksto (teksto, password, email, ug uban pa)
• checkbox
• radyo
• pilia
• daghang pagpili
• input sa file
• textarea

Bag-ong mga default nga adunay v2.0

Hangtod sa v1.4, ang default nga mga estilo sa porma sa Bootstrap migamit sa pinahigda nga layout. Uban sa Bootstrap 2, among gitangtang kana nga pagpugong aron adunay mas maalamon, mas scalable nga mga default alang sa bisan unsang porma.

Gidisenyo pag-usab nga mga estado sa browser

Ang Bootstrap adunay mga istilo alang sa gisuportahan sa browser nga naka-focus ug disabledestado. Among tangtangon ang default Webkit outlineug i-apply ang usa box-shadowsa lugar niini para sa :focus.

Pag-validate sa porma

Naglakip usab kini sa mga istilo sa pag-validate alang sa mga sayup, pasidaan, ug kalampusan. Aron magamit, idugang ang klase sa sayup sa palibot .control-group.

<fieldset
  class = "control-group error" >
  …
</fieldset>

Pag-andam ug pagdugang sa mga input

Ang mga grupo sa pag-input-nga adunay gidugtong o gi-prepend nga teksto-naghatag usa ka dali nga paagi aron mahatagan ang dugang nga konteksto alang sa imong mga input. Ang maayong mga pananglitan naglakip sa @ sign para sa mga username sa Twitter o $ para sa panalapi.

Mga checkbox ug radyo

Hangtod sa v1.4, ang Bootstrap nanginahanglan ug dugang nga marka sa palibot sa mga checkbox ug mga radyo aron ma-stack kini. Karon, kini usa ka yano nga butang sa pagsubli sa <label class="checkbox">nga nagputos sa <input type="checkbox">.

Gisuportahan usab ang mga inline nga checkbox ug radyo. Idugang lang .inlinesa bisan unsa .checkboxo .radioug nahuman ka.

Inline nga mga porma ug idugang/i-prepend

Aron magamit ang prepend o idugang ang mga input sa usa ka inline nga porma, siguroha nga ibutang ang .add-onug inputsa parehas nga linya, nga wala’y mga espasyo.

Porma sa tabang nga teksto

Aron makadugang sa tabang nga teksto alang sa imong mga porma nga mga input, ilakip ang inline nga tabang nga teksto nga adunay <span class="help-inline">o usa ka tabang nga text block nga adunay <p class="help-block">pagkahuman sa input nga elemento.

Mga buton alang sa mga aksyon

Isip usa ka kombensiyon, ang mga buton kinahanglan lang gamiton alang sa mga aksyon samtang ang mga hyperlink kay gamiton alang sa mga butang. Pananglitan, ang "Pag-download" kinahanglan usa ka buton samtang ang "bag-o nga kalihokan" kinahanglan usa ka link.

Alang sa mga angkla ug mga porma

Ang mga istilo sa buton mahimong magamit sa bisan unsang butang nga adunay .btngipadapat. Bisan pa, kasagaran gusto nimo nga gamiton kini sa mga elemento lamang <a>ug .<button>

Mubo nga sulat: Ang tanan nga mga buton kinahanglan nga maglakip sa .btnklase. Ang mga istilo sa butones kinahanglan nga magamit <button>ug <a>mga elemento alang sa pagkamakanunayon.

Daghang gidak-on

Gusto nga mas dako o mas gagmay nga mga buton? Himoa kini!

Panguna nga aksyon Aksyon

Panguna nga aksyon Aksyon

Baldado nga estado

Para sa disabled buttons, gamita .btn-disabledpara sa mga link ug :disabledpara sa <button>mga elemento.

Panguna nga aksyon Aksyon

Panguna nga aksyon Aksyon

Cross browser compatibility

Sa IE9, gihulog namo ang gradient sa tanang buton pabor sa mga rounded corner kay ang IE9 wala mag-crop sa background gradients ngadto sa mga kanto.

Nalambigit, IE9 jankifies disabled buttonelemento, rendering teksto gray uban sa usa ka ngil-ad nga text-anino-sa kasubo dili kami makaayo niini.

Gitukod isip usa ka sprite

Imbis nga himoong dugang nga hangyo ang matag icon, gihugpong namo kini ngadto sa usa ka sprite—usa ka hugpong sa mga hulagway sa usa ka file nga naggamit sa CSS aron ipahimutang ang mga hulagway sa background-position. Kini ang parehas nga pamaagi nga among gigamit sa Twitter.com ug kini nagtrabaho og maayo alang kanamo.

Ang tanan nga mga klase sa mga icon adunay prefix .icon-alang sa tukma nga namespace ug scoping, sama sa among ubang mga sangkap. Makatabang kini nga malikayan ang mga panagsumpaki sa ubang mga himan.

Gihatagan kami sa Glyphicons sa paggamit sa Halflings set sa among open-source toolkit basta maghatag kami ug link ug credit dinhi sa mga docs. Palihug hunahunaa ang pagbuhat sa parehas sa imong mga proyekto.

Unsaon paggamit

Uban sa v2.0.0, mipili kami sa paggamit ug <i>tag para sa tanan namong mga icon, apan wala silay klase sa kaso—usa ra ka gipaambit nga prefix. Aron magamit, ibutang ang mosunod nga code bisan asa:

<i class = "icon-search" ></i> 

Adunay usab mga istilo nga magamit alang sa balit-ad (puti) nga mga icon, nga andam sa usa ka dugang nga klase:

<i class = "icon-search icon-white" ></i> 

Adunay 120 ka klase nga mapilian para sa imong mga icon. Pagdugang lang usa ka <i>tag nga adunay husto nga mga klase ug andam ka na. Makita nimo ang tibuok listahan sa sprites.less o dinhi mismo niini nga dokumento.

Paggamit sa mga kaso

Nindot ang mga icon, apan asa man kini gamiton? Ania ang pipila ka mga ideya:

• Ingon mga biswal alang sa imong nabigasyon sa sidebar
• Para sa lunsay nga icon-driven navigation
• Para sa mga buton nga makatabang sa pagpasabot sa kahulogan sa usa ka aksyon
• Uban ang mga link aron ipaambit ang konteksto sa destinasyon sa usa ka tiggamit

Sa tinuud, bisan asa nimo ibutang ang usa ka <i>tag, mahimo nimong ibutang ang usa ka icon.

I-refresh Checkout Pagtangtang

Komento Mga setting Dugang Impormasyon