Typographic scale hmanga ziah a ni

Typographic grid pumpui hi kan variables.less file-a Less variable pahnih atanga siam a ni: @baseFontSizeleh @baseLineHeight. A hmasa ber chu base font-size hman vek a ni a, a pahnihna chu base line-height a ni.

Chu variable te, leh math thenkhat te chu kan type zawng zawng leh a dangte margin, paddings, leh line-heights te siam nan kan hmang thin.

Entirna body text

A rilru a buai em em a, a rilru a hah em em bawk a. Nullam quis risus eget urna mollis ornare vel eu leo. A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies lirthei ut id elit.

A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a. Donec sed odio dui.

Emphasis hmangin

A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a. A rilru a buai em em a, a rilru a hah em em bawk a. Maecenas faucibus mollis interdum. Nulla vitae elit libero tih hi a ni a, a man pawh a tlawm hle.

Note: Hman zalen <b>leh <i>HTML5-ah te, mahse an hman dan a danglam deuh. <b>thumal emaw thumal emaw pawimawhna belhchhah lovin tarlanna tur a nih laiin <i>a tam zawk chu aw, technical terms, etc. atan a ni.

Entirna address te

<address>Tag hman theih dan entirnan pahnih chu hetiang hi a ni:

Entirna tawi te te

Abbreviation te chu uppercase text leh light dotted bottom border hmanga style a ni. Hover-ah help cursor an nei bawk a, chuvang chuan users te chuan extra indication an nei a, hover-ah thil engemaw a lang ang.

HTML hi chhangphut sliced ​​hnua thil tha ber a ni.

Attribute tih thumal tawifelna chu attr tih a ni.

Blockquote dah tur chuan HTML<blockquote> eng pawh chu quote atan wrap la. Straight quote atan chuan a .<p>

I source cite turin optional element dah la, styling atan a hmain <small>em dash i hmu ang .—

<blockquote> tih a ni
  <p> A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. Integer posuere erat chu a hmaa venenatis a ni. </p> tih a ni
  <small> Mi hmingthang tak </small>
</blockquote> tih a ni

Default blockquotes te chu hetiang hian style a ni:

A rilru a buai em em a, a rilru a hah em em bawk a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat chu a hmaa venenatis a ni.

Body of work -a hmingthang tak tu emaw

I blockquote chu dinglamah float tur chuan class="pull-right":

A rilru a buai em em a, a rilru a hah em em bawk a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat chu a hmaa venenatis a ni.

Body of work -a hmingthang tak tu emaw

Order loh chuan

<ul>

• Lorem ipsum dolor thu amet
• A rilru a buai em em a, a rilru a hah em em bawk a
• Integer molestie lorem chu massa ah a awm a
• Facilisis ah hian a awm a
• Nulla volutpat a ni a, a hlimthla a ni
  • Phasellus iaculis chu a lo chhuak a
  • Purus sodales chu a hring chhuak thin
  • A rilru a buai em em a, a rilru a hah em em bawk a
  • A rilru a buai em em a, a rilru a hah em em bawk a. Ac tristique libero volutpat at
• A rilru a buai em em a, a rilru a hah em em bawk a. Faucibus porta lacus fringilla vel
• Aenean thu amet erat nunc
• Eget porttitor lorem a ni

Style nei lo a ni

<ul class="unstyled">

• Lorem ipsum dolor thu amet
• A rilru a buai em em a, a rilru a hah em em bawk a
• Integer molestie lorem chu massa ah a awm a
• Facilisis ah hian a awm a
• Nulla volutpat a ni a, a hlimthla a ni
  • Phasellus iaculis chu a lo chhuak a
  • Purus sodales chu a hring chhuak thin
  • A rilru a buai em em a, a rilru a hah em em bawk a
  • A rilru a buai em em a, a rilru a hah em em bawk a. Ac tristique libero volutpat at
• A rilru a buai em em a, a rilru a hah em em bawk a. Faucibus porta lacus fringilla vel
• Aenean thu amet erat nunc
• Eget porttitor lorem a ni

Order a ni

<ol>

1. Lorem ipsum dolor thu amet
2. A rilru a buai em em a, a rilru a hah em em bawk a
3. Integer molestie lorem chu massa ah a awm a
4. Facilisis ah hian a awm a
5. Nulla volutpat a ni a, a hlimthla a ni
6. A rilru a buai em em a, a rilru a hah em em bawk a. Faucibus porta lacus fringilla vel
7. Aenean thu amet erat nunc
8. Eget porttitor lorem a ni

Hrilhfiahna

<dl>

Thuziak list te a awm

Description list hi terms sawifiahna atan a tha ber.

Euismod tih a ni

A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a.

Donec id elit non mi porta gravida chu eget metus ah a awm a.

Malesuada chu a ni

A rilru a buai em em a, a rilru a hah em em bawk a. Etiam porta sem malesuada magna mollis euismod.

Inline a ni

Code inline snippet te chu <code>.

Entirnan , <code> section </ code > chu inline anga wrap tur a ni .  

Basic block a ni

<pre>Code line tam tak atan hmang ang che . Rendering dik tak neih theih nan caret eng pawh chu an unicode character-ah chantir ngei ang che.

<p>Hetah hian thuziak entir rawh...</p>

<pre> tih a ni
  <p>Hetah hian thuziak entir rawh...</p>
</pre> tih a ni

Note: Tag chhungah code <pre>chu veilam hnaih thei ang berah dah ngei ang che; tab zawng zawng a render vek ang.

Google ah hian Prettify a awm

Element ang chiah kha la la, <pre>rendering tihchangtlun nan optional class pahnih dah belh rawh.

<p> Hetah hian thuziak entir rawh... </p>

<pre class = "a mawi em em a ni." 
     linenums te" > tih a ni
  <p>Hetah hian thuziak entir rawh...</p>
</pre> tih a ni

Google-code-prettify download la , a hman dan tur readme chu en rawh.

<table> tih a ni
  <lupui> tih a ni
    <tr> tih a ni
      <th> ... </th> tih a ni
      <th> ... </th> tih a ni
    </tr> tih a ni
  </thead> tih a ni
  <tbody> tih a ni
    <tr> tih a ni
      <td> ... </td> tih a ni
      <td> ... </td> tih a ni
    </tr> tih a ni
  </tbody> tih a ni
</table> tih a ni

Table te hi automatically styled an ni a, border tlemte chauh hmangin readability leh structure an maintain theih nan. 2.0 a nih chuan .tableclass a ngai a ni.

<table class = "table" > tih hi a ni 
  ...
</table> tih a ni

Zebra-striping dahin i table-te chu tlem tal fancy la— .table-stripedclass chu belh mai rawh.

Note: Sprited tables hian :nth-childCSS selector an hmang a, IE7-IE8 ah hian a awm lo.

<table class = "table table-a innghat" > 
  ...
</table> tih a ni

Table pumpui vel chu border leh aesthetic atan rounded corner te dah belh bawk ang che.

<table class = "table table-a awm" > 
  ...
</table> tih a ni

.table-condensedTable cell padding chu a chanve (8px atanga 4px thleng) cut turin class dahin i table te chu compact zawkin siam rawh .

<table class = "table table-a inzawm" > 
  ...
</table> tih a ni

Table class awm zawng zawng hmang tangkaiin look hrang hrang neih theih nan table class eng pawh combine turin zalen takin awm rawh.

<table class = "table table-a innghat table-a innghat table-condensed" > 
  ...
</table> tih a ni

HTML leh CSS te pawh a inthlak danglam thei

Bootstrap-a form chungchanga a tha ber chu i input leh control zawng zawng chu i markup-ah engtiang pawhin i siam pawhin a mawi vek a ni. HTML aia tam a ngai lo va, mahse a mamawhtute tan pattern kan pe a ni.

Layout buaithlak zawkte chu succinct leh scalable class te nen a rawn thleng a, styling awlsam leh event binding atan a awm a, chuvangin step tin ah i cover vek a ni.

Layout pali a awm bawk

Bootstrap hian form layout chi li support a keng tel a:

• Vertical (a hmaa awm tawh) .
• Zawng
• Inline a ni
• Khamphei

Form layout chi hrang hrangah hian markup atan hian tihdanglam engemaw zat a ngai a, mahse control te ngei pawh chu a awm reng a, an awm dan pawh a inang reng a ni.

Control state leh thil dang tam tak

Bootstrap-a form-ah hian base form control zawng zawng input, textarea, leh i beisei ang select ang chi style hrang hrang a awm a. Mahse, appended leh prepended input ang chi custom component engemaw zat a keng tel bawk a, checkbox list support pawh a awm bawk.

Form control chi hrang hrang atan error, warning, leh success ang chi state te chu dah tel a ni. Tin, disabled control te tan style te pawh a awm bawk.

v2.0 hmang hian form style hrang hrang atan default lighter leh smarter kan nei a. Extra markup a awm lo, form controls chauh a ni.

Default WebKit styles a lantir a, .form-searchextra rounded search fields atan add mai rawh.

Inputs hi block level atanga tan tur a ni. .form-inlineleh , tan chuan .form-horizontalinline-block kan hmang thin.

Eng nge a tel

Left-a kan support zawng zawng default form control zawng zawng tarlan a ni. Hetah hian bulleted list chu a awm:

• thuziak input (text, password, email, etc) te chu a hnuaia mi ang hian a ni.
• checkbox ah a awm
• radio hmanga tih a ni
• thlang
• multiple select a ni
• file a lut tur a ni
• textarea ah a awm

Default thar a awm a, v2.0 a awm bawk

v1.4 thleng khan Bootstrap-a default form style-ah chuan horizontal layout an hmang thin. Bootstrap 2 hmang hian eng form pawha default fing zawk, scalable zawk neih theih nan chu constraint chu kan paih chhuak a ni.

Browser state hrang hranga design thar a ni

Bootstrap hian browser-in a thlawp focused leh disabledstate hrang hrangte tan style a nei a. Webkit default chu kan paih a, outlinea box-shadowhmunah chuan :focus.

Form validation neih a ni

Tin, tihsual, warning, leh hlawhtlinna te validation style a awm bawk. Hman tur chuan error class chu a chhehvel ah dah la .control-group.

<fieldset a ni
  class = "control-group tihsual" >
  ...
</fieldset> tih a ni

Input te chu prepend & append theih a ni

Input group-te chuan—appended emaw prepended text emaw hmangin—i input-te tân context tam zâwk pêk theihna kawng awlsam tak a pe a ni. Entirna ropui tak tak te chu Twitter usernames atan @ sign emaw finances atan $ emaw te hi a ni.

Checkbox leh radio te pawh a awm bawk

v1.4 thleng khan Bootstrap hian checkbox leh radio vel a stack theih nan extra markup a mamawh a. Tunah chuan, a <label class="checkbox">wraps the <input type="checkbox">.

Inline checkbox leh radio te pawh a support bawk. .inlineEng .checkboxor ah pawh add mai la .radio, i zo tawh ang.

Inline form leh append/prepend tur a ni

Inline form-a inputs prepend emaw append emaw hman tur chuan .add-onleh inputchu line khatah dah ngei ang che, space awm lovin.

Ṭanpuina thuziak form rawh

I form input-te tana help text dah belh tur chuan input element hnuaiah inline help text with <span class="help-inline">emaw help text block with emaw dah tel bawk ang che.<p class="help-block">

Thiltih theihna tur buttons

Convention angin button hi action atan chauh hman tur a ni a, hyperlink erawh chu object atan hman tur a ni thung. Entirnan, "Download" chu button a nih laiin "recent activity" chu link a ni tur a ni.

Anchor leh form hrang hrang atan

Button styles hi engkim a apply theih a .btnni. <a>Mahse, typically hengte hi only leh <button>elements ah te hman i duh ang .

Note: Button zawng zawngah hian .btnclass a tel vek tur a ni. Button styles te chu apply tur a ni a <button>, <a>consistency atan elements te pawh hman tur a ni.

Size tam tak a awm

Button lian zawk emaw te zawk emaw i duh em? Have at it!

Action hmasa ber Thiltih

Action hmasa ber Thiltih

Disabled state a ni

Disabled button .btn-disabledtan chuan link :disabledatan leh <button>element atan hmang ang che.

Action hmasa ber Thiltih

Action hmasa ber Thiltih

Cross browser nena inmil theih a ni

IE9 ah chuan IE9 hian background gradient chu corner-ah a crop loh avangin rounded corner duh zawngin button zawng zawngah gradient kan drop vek a.

Related, IE9 hian disabled buttonelements te chu a jankify a, text gray chu text-shadow tenawm tak hmangin a render a—vanduaithlak takin hei hi kan siam tha thei lo.

Sprite anga sak a ni

Icon tinte chu extra request-a siam ai chuan sprite-ah kan compile a—file pakhata image bunch pakhat, CSS hmangin image-te background-positionchu Hei hi Twitter.com-a kan hman dan ang chiah kha a ni a, kan tan pawh a thawk tha hle.

Icons class zawng zawng hi .icon-namespacing leh scoping dik tak atan prefixed vek a ni a, kan component dangte ang bawkin. Hei hian hmanraw dang nena inrem lohna a thlen loh nan a pui ang.

Glyphicons chuan kan open-source toolkit-a Halflings set hi hetah docs-a link leh credit kan pek chhung chuan hman phalsak a ni. I project-ah pawh hetiang bawk hian tih ve hi ngaihtuah ve teh u.

A hman dan tur

v2.0.0 hmang hian <i>kan icon zawng zawng tan tag hman kan thlang a, mahse case class an nei lo—shared prefix chauh an nei. Hman tur chuan a hnuaia code hi khawi hmunah pawh dah la:

<i class = "icon-a zawn" ></i> tih a ni 

Inverted (white) icon tan pawh style hrang hrang a awm a, extra class pakhat nen ready-a siam a ni:

<i class = "icon-a zawn chhuah icon-white" ></i> 

I icons te tan class 120 thlan theih a awm a. Class dik tak awmna tag add mai la <i>, i set tawh ang. List kimchang chu sprites.less ah emaw hetah ngei hian he document ah hian i hmu thei ang .

Case hman dan tur

Icon te hi a ropui hle a, mahse khawiah nge mi pakhatin a hman ang? Ngaihtuahna tlemte chu hetiang hi a ni:

• I sidebar navigation atan visuals angin
• Icon-driven navigation thianghlim tak atan
• Thiltih awmzia sawifiahna atana ṭanpui thei button-te tan
• User pakhat destination-a context share theihna tur link te nen

A bul berah chuan <i>tag i dah theihna hmun apiangah icon i dah thei bawk.

Refresh rawh Checkout rawh le Ti reh

Sawizui Settings a awm bawk Thu belhchian dawl zawk