Scaffolding chungah hian HTML element bulpui ber berte chu style leh tihchangtlun a ni a, extensible class hmangin a thar, inmil takin a lang leh a.
Typographic grid pumpui hi kan variables.less file-a Less variable pahnih atanga siam a ni: @baseFontSize
leh @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.
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.
Paragraph pakhat chu .lead
.
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. Duis mollis, est non commodo luctus tih a ni a, a man pawh a tlawm hle.
Thil bul | Hman dan tur | Duh zawk thlang |
---|---|---|
<strong> |
Thuziak snippet pakhat pawimawh tak nena ngaih pawimawh a nih avangin | Pakhatmah |
<em> |
Thuziak snippet pakhat stress nena ngaih pawimawh a nih avangin | Pakhatmah |
<abbr> |
Hover-a expanded version entir turin abbreviation leh acronym te a wrap thin |
.initialism Uppercase abbreviation atan class hmang rawh . |
<address> |
A pi leh pu hnai ber emaw, hnathawhna taksa pum pui emaw biak theihna tur | Line zawng zawng tih tawp hmangin formatting humhim rawh<br> |
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.
<address>
Tag hman theih dan entirnan pahnih chu hetiang hi a ni:
Attribute nei abbreviation te title
hian light dotted bottom border an nei a, hover laiin help cursor an nei bawk. Hei hian users te hnenah extra indication a pe a, hover-ah thil engemaw a lang dawn a ni.
Class chu abbreviation-ah dah la, initialism
typographic harmony tihpun nan text size tlem deuh pein.
HTML hi chhangphut sliced hnua thil tha ber a ni.
Attribute tih thumal tawifelna chu attr tih a ni.
Thil bul | Hman dan tur | Duh zawk thlang |
---|---|---|
<blockquote> |
Source dang atanga thu awmte quote theihna tur block-level element |
.pull-left leh class te.pull-right |
<small> |
User-facing citation dah belhna tur optional element, a tlangpuiin author pakhat hnathawh hming nei | <cite> Title emaw source hming emaw vel chu dah rawh |
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
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Lu a ti sang a! Horizontal description lists hian term sei lutuk te chu left column fix a fit theih loh tur te chu a truncate ang text-overflow
. Viewport tawi zawkah chuan default stacked layout ah an inthlak ang.
Code inline snippet te chu <code>
.
- Entirnan , <code> section </ code > chu inline anga wrap tur a ni .
<pre>
Code line tam tak atan hmang ang che . Rendering dik tak neih theih nan code chhunga angle bracket awm zawng zawng chu escape ngei ngei tur a ni.
<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.
Class chu duhthusamin i dah thei .pre-scrollable
a, chu chuan max-height 350px a set ang a, y-axis scrollbar a pe ang.
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.
Thlung | Hrilhfiahna |
---|---|
<table> |
Tabular format-a data tarlanna tur wrapping element |
<thead> |
Table header row ( <tr> ) atanga table column label tur container element |
<tbody> |
<tr> Table taksa chhunga table row ( ) awmte tan container element |
<tr> |
Row khata lang table cell ( <td> or ) set pakhat tana container element<th> |
<td> |
Table cell hmasa ber a ni |
<th> |
Column (or row, scope leh dahna a zirin) label siamna tur table cell bik chu a chhungah hman tur a ni <thead> |
<caption> |
Table-a thil awmte sawifiahna emaw, a tawi zawngin emaw, a bik takin screen reader-te tan a tangkai hle |
- <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
Hming | Pawl | Hrilhfiahna |
---|---|---|
Hlawhchhamna | Pakhatmah | Style a awm lo, column leh row chauh a awm |
Bulthut | .table |
Row inkar ah horizontal line chauh a awm |
Border nei a ni | .table-bordered |
Corner a round a, outer border a dah belh bawk |
Zebra-stripe a ni | .table-striped |
Odd row (1, 3, 5, etc) ah light grey background color a dah belh thin. |
Condensed a ni | .table-condensed |
Vertical padding chu a chanveah a cut a, 8px atanga 4px ah a cut a, all td leh th elements chhungah a cut thin |
Table te hi automatically styled an ni a, border tlemte chauh hmangin readability leh structure an maintain theih nan. 2.0 a nih chuan .table
class a ngai a ni.
- <table class = "table" > tih hi a ni
- ...
- </table> tih a ni
# a ni. | Hming hmasa | Hming hnuhnung | User hming a ni |
---|---|---|---|
1. a ni | Mark | Otto chuan a ti a | @mdo a ni |
2. 2. | Jakoba chu a ni | Thornton-a chuan a ti a | @thau |
3. A ni | Larry chuan a ti a | chu Sava chu a ni | @twitter ah a awm |
Zebra-striping dahin i table-te chu tlem tal fancy la— .table-striped
class chu belh mai rawh.
Note: Striped tables hian :nth-child
CSS selector an hmang a, IE7-IE8 ah hian a awm lo.
- <table class = "table table-a innghat" >
- ...
- </table> tih a ni
# a ni. | Hming hmasa | Hming hnuhnung | User hming a ni |
---|---|---|---|
1. a ni | Mark | Otto chuan a ti a | @mdo a ni |
2. 2. | Jakoba chu a ni | Thornton-a chuan a ti a | @thau |
3. A ni | Larry chuan a ti a | chu Sava chu a ni | @twitter ah a awm |
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
# a ni. | Hming hmasa | Hming hnuhnung | User hming a ni |
---|---|---|---|
1. a ni | Mark | Otto chuan a ti a | @mdo a ni |
Mark | Otto chuan a ti a | @getbootstrap ah hian a awm | |
2. 2. | Jakoba chu a ni | Thornton-a chuan a ti a | @thau |
3. A ni | Larry chuan a ti a | @twitter ah a awm |
.table-condensed
Table 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
# a ni. | Hming hmasa | Hming hnuhnung | User hming a ni |
---|---|---|---|
1. a ni | Mark | Otto chuan a ti a | @mdo a ni |
2. 2. | Jakoba chu a ni | Thornton-a chuan a ti a | @thau |
3. A ni | Larry chuan a ti a | @twitter ah a awm |
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
Hming kimchang | |||
---|---|---|---|
# a ni. | Hming hmasa | Hming hnuhnung | User hming a ni |
1. a ni | Mark | Otto chuan a ti a | @mdo a ni |
2. 2. | Jakoba chu a ni | Thornton-a chuan a ti a | @thau |
3. A ni | Larry chuan a ti a | @twitter ah a awm |
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.
Bootstrap hian form layout chi li support a keng tel a:
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.
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.
Bootstrap hian web form hman tlanglawn style pali tan markup awlsam tak leh style a pe a.
Hming | Pawl | Hrilhfiahna |
---|---|---|
Vertical (a hmaa awm tawh) . | .form-vertical (a ngai lo) |
Controls chungah label dahkhawm, veilam hawia dah |
Inline a ni | .form-inline |
Left-aligned label leh inline-block control te chu compact style atan hman theih a ni |
Zawng | .form-search |
Typical search aesthetic atan extra-rounded text input a awm bawk |
Khamphei | .form-horizontal |
Controls te nen line khatah veilam, dinglam hawia label te chu float rawh |
Smart leh lightweight default a ni a, extra markup a awm lo.
- <form class = "a tha" > tih a ni
- <label> Label hming </label> tih a ni
- <input type = "text" class = "span3" placeholder = "Thil pakhat ziak rawh..." >
- <span class = "help-block" > Hetah hian block-level help text entir rawh. </span> tih a ni
- <label class = "checkbox" > tih hi a ni
- <input type = "checkbox" > Min lo en ve teh
- </label> tih a ni
- <button type = "submit" class = "btn" > A rawn thawn chhuak rawh </button>
- </form> tih a ni
Form .form-search
ah leh .search-query
a input
.
- <form class = "well form-a zawn chhuah" >
- <input type = "text" class = "input-medium zawn-zawhna" >
- <button type = "submit" class = "btn" > zawng rawh </button>
- </form> tih a ni
.form-inline
Form control-te vertical alignment leh spacing te chu finesse turin belh rawh .
- <form class = "a tha form-inline" > tih a ni
- <input type = "text" class = "input-te tak te" hmun dahna = "Email" >
- <input type = "password" class = "input-te tak te" hmunpui = "Password" >
- <label class = "checkbox" > tih hi a ni
- <input type = "checkbox" > Min hre reng ang che
- </label> tih a ni
- < button type = "submit" class = "btn" > A chhuahna tur hmun leh a hmanna tur hmun chu a in ang lo
- </form> tih a ni
Dinglama kan support zawng zawng default form control zawng zawng tarlan a ni. Hetah hian bulleted list chu a awm:
A chunga form layout entirnan kan tarlan ang hian input leh control group hmasa ber nena inzawm markup chu hetiang hi a ni. Styling atan chuan , , leh class te hi a ngai vek a .control-group
ni .control-label
..controls
- <form class = "a awm dan tur" >
- <fieldset> tih a ni
- <legend> Thuziak thuziak </legend> tih a ni
- <div class = "thunun-tu pawl" >
- <label class = "control-label" for = "input01" > Thuziak ziah luh </label>
- <div class = "a thunun" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Ṭanpuina thuziak ṭanpui </p>
- </div> tih a ni
- </div> tih a ni
- </fieldset> tih a ni
- </form> tih a ni
Bootstrap hian browser-in a thlawp focused leh disabled
state hrang hrangte tan style a nei a. Webkit default chu kan paih a, a aiah a outline
kan apply a, .box-shadow
:focus
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 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.
v1.4 thleng khan Bootstrap hian checkbox leh radio vel a stack theih nan extra markup a mamawh a. Tunah chuan, a repeat theih dan awlsam tak a ni tawh a, <label class="checkbox">
chu chuan a wraps the<input type="checkbox">
.
Inline checkbox leh radio te pawh a support bawk. .inline
Eng .checkbox
or ah pawh add mai la .radio
, i zo tawh ang.
Inline form-a prepend emaw append emaw inputs hman tur chuan .add-on
and chu dah ngei ngei tur a niinput
chu line khatah dah ngei ang che, space awm lovin.
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">
Icon tinte chu extra request-a siam ai chuan sprite-ah kan compile a—file pakhata image bunch pakhat, CSS hmangin image-te background-position
chu 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.
Bootstrap hian <i>
icon zawng zawng tan tag an hmang 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 140 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 .
Lu a ti sang a! Button emaw nav link emaw ang bawkin text string bulah i hman hunah, a <i>
inkar hlat zawng dik tak neih theih nan tag hnuaiah space dah ngei ngei tur a ni.
Icon te hi a ropui hle a, mahse khawiah nge mi pakhatin a hman ang? Ngaihtuahna tlemte chu hetiang hi a ni:
A bul berah chuan <i>
tag i dah theihna hmun apiangah icon i dah thei bawk.
Button-ah te, toolbar atan button group-ah te, navigation-ah te, prepended form input-ah te hmang ang che.