Cov ntsiab lus

Tag nrho cov ntsiab lus HTML, <h1>dhau los <h6>muaj.

h 1. Ntsiab lus 1

h 2. Ntsiab lus 2

h 3. Ntsiab lus 3

h 4. Ntsiab lus 4

h 5. Ntsiab lus 5

h 6. Nqe lus piav qhia 6

Lub cev luam tawm

Bootstrap lub ntiaj teb no default font-sizeyog 14px , nrog ib tug line-heightntawm 20px . Qhov no yog siv rau <body>tag nrho cov kab lus. Tsis tas li ntawd, <p>(cov kab lus) tau txais cov kab hauv qab ntawm ib nrab ntawm lawv cov kab-qhov siab (10px los ntawm lub neej ntawd).

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.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit zaum amet tsis magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Lead lub cev luam

Ua ib kab lus sawv tawm los ntawm kev ntxiv .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, nws tsis yog commodo luctus.

<p class = "lead" > ... </p>

Ua nrog Tsawg

Qhov ntsuas typographic yog nyob ntawm ob qhov sib txawv LESS hauv variables.less : @baseFontSizethiab @baseLineHeight. Thawj yog lub hauv paus font-loj siv thoob plaws thiab qhov thib ob yog lub hauv paus kab-qhov siab. Peb siv cov kev hloov pauv no thiab qee qhov lej yooj yim los tsim cov npoo, paddings, thiab kab-qhov siab ntawm txhua yam peb hom thiab ntau dua. Customize lawv thiab Bootstrap adapts.

Ntsiab lus

Ua kom siv HTML's default emphasis tags nrog cov qauv hnyav.

`<small>`

Txhawm rau tshem tawm qhov tseem ceeb hauv kab lossis thaiv cov ntawv, siv lub cim me me.

Cov kab ntawv no yog txhais tau tias yuav tsum tau kho raws li kev luam zoo.

<p> <small> Cov kab ntawv no txhais tau hais tias yuav tsum tau kho kom zoo zoo. </small> </p>

Ua siab loj

Rau kev hais txog ib qho snippet ntawm cov ntawv nrog hnyav font-qhov hnyav.

Cov snippet hauv qab no yog rendered ua bold text .

<strong> rendered as bold text </strong>

Italics

Rau kev hais txog ib ntu ntawm cov ntawv nrog italics.

Cov kab lus hauv qab no tau muab ua cov ntawv italicized .

<em> ua li ntawv italicized </em>

Tau taub hau!Txaus siab rau siv <b>thiab <i>hauv HTML5. <b>yog txhais tau hais tias tseem ceeb cov lus lossis kab lus yam tsis muaj qhov tseem ceeb ntxiv thaum <i>feem ntau yog rau lub suab, cov lus qhia, thiab lwm yam.

Cov chav kawm Alignment

Yooj yim realign cov ntawv rau cov khoom nrog cov chav kawm ntawv nyeem.

Left aligned text.

Center aligned ntawv nyeem.

Txoj cai dlhos ntawv.

<p class = "text-left" > Left aligned text. </p> 
<p class = "text-center" > Nruab nrab cov ntawv nyeem. </p> 
<p class = "text-right" > Cov ntawv nyeem txoj cai. </p>

Cov chav kawm tseem ceeb

Qhia lub ntsiab lus los ntawm cov xim nrog ib txhais tes ntawm cov chav kawm siv hluav taws xob.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, tsis yog commodo luctus, nisi erat porttitor ligula.

<p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
<p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
<p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
<p class = "text-info" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
<p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Cov ntawv luv

Stylized kev siv ntawm HTML lub <abbr>ntsiab lus rau cov ntawv luv thiab cov lus sau los qhia qhov nthuav dav ntawm hover. Cov ntawv luv luv nrog tus titlecwj pwm muaj lub teeb dotted hauv qab ciam teb thiab tus cursor pab ntawm hover, muab cov ntsiab lus ntxiv ntawm hover.

`<abbr>`

Rau cov ntawv nthuav dav ntawm qhov ntev hover ntawm cov ntawv luv, suav nrog tus titlecwj pwm.

Lub ntsiab lus ntawm lo lus attribute yog attr .

<abbr title = "attribute" > attr </abbr>

`<abbr class="initialism">`

Ntxiv .initialismrau cov ntawv luv rau me me font-loj.

HTML yog qhov zoo tshaj plaws txij li lub khob cij hlais.

<abbr title = "HyperText Markup Language" class = "initialism" > HTML </abbr>

Chaw nyob

Muab cov ntaub ntawv tiv tauj tam sim no rau cov poj koob yawm txwv ze tshaj plaws lossis tag nrho lub cev ua haujlwm.

`<address>`

Khaws formatting los ntawm kev xaus tag nrho cov kab nrog <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Lub Npe Lub Npe
[email protected]

<chaw nyob>
  <strong> Twitter, Inc. </strong><br>
  795 Folsom Ave, Suite 600
  San Francisco, CA 94107 <br>
  <abbr title = "Phone" > P: </abbr> (123) 456-7890 
</ address>
 
<chaw nyob>
  <strong> Npe tag nrho </strong><br>
  <a href = "mailto:#" > [email protected] </a> 
</ address>

Blockquotes

Rau quoting blocks ntawm cov ntsiab lus los ntawm lwm qhov chaw hauv koj cov ntaub ntawv.

Default blockquote

Qhwv <blockquote>ib ncig ntawm HTML raws li cov lus tsocai. Rau cov quotes ncaj peb pom zoo a <p>.

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

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante. </p>
</blockquote>

Blockquote xaiv

Style thiab cov ntsiab lus hloov pauv rau cov kev hloov pauv yooj yim ntawm tus qauv blockquote.

Sau npe qhov chaw

Ntxiv <small>tag rau kev txheeb xyuas qhov chaw. Muab lub npe ntawm qhov chaw ua haujlwm hauv <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
Ib tug neeg nto moo nyob rau hauv Lub Npe Lub Npe

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante. </p>
  <small> Ib tug neeg nto moo <cite title = "Source Title" > Source Title </cite></small> 
</blockquote>

Hloov cov duab

Siv .pull-rightrau qhov floated, right-aligned blockquote.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
Ib tug neeg nto moo nyob rau hauv Lub Npe Lub Npe

<blockquote class = "rub-right" > 
  ...
</blockquote>

Cov npe

Unordered

Ib daim ntawv teev cov khoom uas qhov kev txiav txim tsis meej meej.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem thiab massa
Facilisis nyob rau hauv pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat ntawm
Faucibus porta lacus fringilla vel
Aenean zaum amet erat nunc
Eget porttitor lorem

<ul>
  <li> ... </li>
</ul>

Txiav txim

Ib daim ntawv teev cov khoom uas qhov kev txiav txim tsis meej.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem thiab massa
Facilisis nyob rau hauv pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean zaum amet erat nunc
Eget porttitor lorem

<ol>
  <li> ... </li>
</ol>

Tsis zoo li

Tshem tawm lub neej ntawd list-stylethiab sab laug padding ntawm cov npe khoom (cov me nyuam tam sim ntawd xwb).

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem thiab massa
Facilisis nyob rau hauv pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat ntawm
Faucibus porta lacus fringilla vel
Aenean zaum amet erat nunc
Eget porttitor lorem

<ul class = "unstyled" > 
  <li> ... </li>
</ul>

Hauv kab

Muab tag nrho cov npe khoom rau ntawm ib kab nrog inline-blockthiab qee lub teeb padding.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class = "inline" > 
  <li> ... </li>
</ul>

Kev piav qhia

Ib daim ntawv teev cov ntsiab lus nrog lawv cov lus piav qhia.

Cov npe piav qhia: Daim ntawv teev lus piav qhia zoo meej rau kev txhais cov ntsiab lus.
Euismod: Vestibulum id ligula porta felis euismod semper 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.

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Kab rov tav piav qhia

Ua cov ntsiab lus thiab cov lus piav qhia nyob rau hauv <dl>kab ntawm ib sab.

Cov npe piav qhia: Daim ntawv teev lus piav qhia zoo meej rau kev txhais cov ntsiab lus.
Euismod: Vestibulum id ligula porta felis euismod semper 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.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl class = "dl-horizontal" > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Tau taub hau!Kab rov tav cov npe piav qhia yuav txiav cov ntsiab lus uas ntev dhau los ua kom haum rau sab laug kho text-overflow. Nyob rau hauv nqaim viewports, lawv yuav hloov mus rau lub default stacked layout.

Hauv kab

Qhwv inline snippet ntawm code nrog <code>.

Piv txwv li, <section>yuav tsum tau qhwv li inline.

Piv txwv li , <code> & lt ; seem & gt ;</ code > yuav tsum tau qhwv li inline .

Basic thaiv

Siv <pre>rau ntau kab ntawm cov cai. Nco ntsoov khiav txhua lub kaum sab xis hauv cov cai rau kev ua kom raug.

<p>Simple text here...</p>

<pre>
  <p>Sample text here...</p>
</pre>

Tau taub hau!Nco ntsoov khaws cov cai hauv <pre>cov cim npe ze rau sab laug li sai tau; nws yuav muab tag nrho cov tabs.

Koj tuaj yeem xaiv ntxiv cov .pre-scrollablechav kawm uas yuav teeb tsa max-qhov siab ntawm 350px thiab muab y-axis scrollbar.

Cov qauv qub

Rau qhov yooj yim styling - lub teeb padding thiab tsuas yog kab rov tav dividers - ntxiv cov hauv paus chav kawm .tablerau ib qho twg <table>.

#	Lub Npe	Lub Npe	Tus neeg siv lub npe
1	Mark	Otto	@mdo
2	Yakhauj	Thornton	@fat
3	Larry	noog	@twitter

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

Xaiv cov chav kawm

Ntxiv ib qho ntawm cov chav kawm hauv qab no rau .tablehauv chav kawm hauv paus.

`.table-striped`

Ntxiv zebra-striping rau ib kab kab hauv kab <tbody>ntawm :nth-childCSS selector (tsis muaj nyob hauv IE7-8).

#	Lub Npe	Lub Npe	Tus neeg siv lub npe
1	Mark	Otto	@mdo
2	Yakhauj	Thornton	@fat
3	Larry	noog	@twitter

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

`.table-bordered`

Ntxiv ciam teb thiab cov ces kaum sib npaug rau lub rooj.

#	Lub Npe	Lub Npe	Tus neeg siv lub npe
1	Mark	Otto	@mdo
1	Mark	Otto	@getbootstrap
2	Yakhauj	Thornton	@fat
3	Larry noog		@twitter

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

`.table-hover`

Ua kom lub xeev hover ntawm cov kab lus hauv ib <tbody>.

#	Lub Npe	Lub Npe	Tus neeg siv lub npe
1	Mark	Otto	@mdo
2	Yakhauj	Thornton	@fat
3	Larry noog		@twitter

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

`.table-condensed`

Ua cov ntxhuav ntau dua los ntawm kev txiav cell padding hauv ib nrab.

#	Lub Npe	Lub Npe	Tus neeg siv lub npe
1	Mark	Otto	@mdo
2	Yakhauj	Thornton	@fat
3	Larry noog		@twitter

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

Optional row classes

Siv cov chav kawm contextual rau xim kab kab.

Chav kawm	Kev piav qhia
`.success`	Qhia tau tias muaj kev vam meej lossis zoo.
`.error`	Qhia txog qhov txaus ntshai lossis qhov ua tsis zoo.
`.warning`	Qhia ceeb toom uas yuav xav tau kev saib xyuas.
`.info`	Siv raws li ib qho kev xaiv rau lub neej ntawd styles.

#	Khoom	Them Nyiaj	xwm txheej
1	TB - Txhua hli	01/04/2012	Pom zoo
2	TB - Txhua hli	02/04/2012	Tsis kam
3	TB - Txhua hli	03/04/2012	Tseem tos
4	TB - Txhua hli	04/04/2012	Hu rau hauv kom paub meej

...
  < tr class = "success" >
    <td> 1 < /td>
    <td>TB - Txhua hli</ td >
    < td > 01/04/2012 < / td >
    <td>pom</ td >
  </ tr >
...

Txhawb lub rooj markup

Cov npe ntawm cov lus txhawb HTML ntsiab lus thiab lawv yuav tsum siv li cas.

Tag	Kev piav qhia
`<table>`	Wrapping keeb los tso saib cov ntaub ntawv hauv hom ntawv tabular
`<thead>`	Cov khoom ntim rau lub rooj header kab ( `<tr>`) rau daim ntawv lo rau kab lus
`<tbody>`	Thawv khoom rau kab kab ( `<tr>`) nyob rau hauv lub cev ntawm lub rooj
`<tr>`	Thawv khoom rau ib pawg ntawm cov kab lus ( `<td>`lossis `<th>`) uas tshwm ntawm ib kab
`<td>`	Default rooj cell
`<th>`	Cov lus tshwj xeeb ntawm tes rau kem (los yog kab, nyob ntawm seb qhov twg thiab qhov chaw) cov ntawv
`<caption>`	Cov lus piav qhia lossis cov ntsiab lus ntawm cov lus tuav, tshwj xeeb tshaj yog muaj txiaj ntsig zoo rau cov neeg nyeem ntawv

<tab>
  <caption> ... </caption>
  <thead>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</table>

Cov qauv qub

Cov kev tswj ntawm tus kheej tau txais styling, tab sis tsis tas yuav tsum muaj cov chav kawm hauv paus ntawm <form>lossis kev hloov pauv loj hauv kev kos. Qhov tshwm sim nyob rau hauv stacked, sab laug-aligned daim ntawv nyob rau sab saum toj ntawm daim ntawv tswj.

<form>
  <fieldset>
    <Legend> Lus dab neeg </legend>
    <label> Label name </label>
    <input type = "text" placeholder = "Type something..." >  
    <span class = "help-block" > Piv txwv block-level help text here. </span> 
    <label class = "checkbox" > 
      <input type = "checkbox" > Kos kuv tawm 
    </label>
    <button type = "submit" class = "btn" > Xa </button>  
  </fieldset>
</form>

Xaiv layouts

Xws li nrog Bootstrap yog peb txoj hauv kev xaiv daim ntawv layouts rau cov neeg siv ntau.

Nrhiav daim ntawv

Ntxiv .form-searchrau daim ntawv thiab .search-querymus rau qhov kev nkag <input>mus rau cov ntawv nyeem ntxiv.

<form class = "form-search" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > Nrhiav </button>  
</form>

Inline daim ntawv

Ntxiv .form-inlinerau cov ntawv sau sab laug thiab inline-block tswj rau kev sib cog lus.

<form class = "form-inline" > 
  <input type = "text" class = "input-small" placeholder = "Email" >   
  <input type = "password" class = "input-small" placeholder = "password" >   
  <label class = "checkbox" > 
    <input type = "checkbox" > Nco kuv 
  </label>
  <button type = "submit" class = "btn" > Kos npe rau hauv </button>  
</form>

Kab rov tav daim ntawv

Txoj cai dlhos cov ntawv thiab ntab lawv mus rau sab laug kom lawv tshwm ntawm tib kab li kev tswj hwm. Yuav tsum muaj kev hloov pauv feem ntau los ntawm daim ntawv ua ntej:

Ntxiv .form-horizontalrau daim ntawv
Qhwv daim ntawv lo thiab tswj hauv.control-group
Ntxiv .control-labelrau daim ntawv lo
Qhwv ib qho kev sib txuam tswj rau hauv .controlskev sib raug zoo

<form class = "form-horizontal" > 
  <div class = "control-group" > 
    <label class = "control-label" for = "inputEmail" > Email </label>  
    <div class = "controls" > 
      <input type = "text" id = "inputEmail" placeholder = "Email" >   
    </div>
  </div>
  <div class = "control-group" > 
    <label class = "control-label" rau = "inputPassword" > Password </label>  
    <div class = "controls" > 
      <input type = "password" id = "inputPassword" placeholder = "Password" >   
    </div>
  </div>
  <div class = "control-group" > 
    <div class = "controls" > 
      <label class = "checkbox" > 
        <input type = "checkbox" > Nco kuv 
      </label>
      <button type = "submit" class = "btn" > Kos npe rau hauv </button>  
    </div>
  </div>
</form>

Txhawb daim ntawv tswj

Piv txwv ntawm cov qauv kev tswj hwm kev txhawb nqa hauv ib qho piv txwv daim ntawv layout.

Cov tswv yim

Feem ntau hom kev tswj, cov ntawv nyeem-raws li kev nkag teb chaws. Xws li kev txhawb nqa rau txhua hom HTML5: ntawv nyeem, lo lus zais, hnub tim, hnub tim-hauv zos, hnub tim, hli, sijhawm, lub limtiam, tus lej, email, url, tshawb nrhiav, xov tooj, thiab xim.

Yuav tsum tau siv cov lus teev tseg typetxhua lub sijhawm.

<input type = "text" placeholder = "Text input" >

Textarea

Daim ntawv tswj uas txhawb nqa ntau cov kab ntawv. Hloov rowstus cwj pwm raws li qhov tsim nyog.

<textarea rows = "3" ></textarea>

Checkboxes thiab xov tooj cua

Checkboxes yog xaiv ib lossis ntau txoj hauv kev hauv ib daim ntawv teev npe thaum lub xov tooj cua yog xaiv ib qho kev xaiv los ntawm ntau.

Default (stacked)

<label class = "checkbox" > 
  <input type = "checkbox" tus nqi = "" >  
  Kev xaiv ib qho yog qhov no thiab qhov ntawd - nco ntsoov suav nrog vim li cas nws zoo heev
</label>
 
<label class = "radio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios1" tus nqi = "option1" kos >     
  Kev xaiv ib qho yog qhov no thiab qhov ntawd - nco ntsoov suav nrog vim li cas nws zoo heev
</label>
<label class = "radio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios2" tus nqi = "option2" >    
  Kev xaiv ob tuaj yeem yog lwm yam thiab xaiv nws yuav tsis xaiv qhov kev xaiv ib qho
</label>

Inline checkboxes

Ntxiv cov .inlinechav kawm rau ib lub thawv kos lossis xov tooj cua rau kev tswj hwm tshwm sim ntawm tib kab.

<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox1" tus nqi = "option1" > 1   
</label>
<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox2" tus nqi = "option2" > 2   
</label>
<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox3" tus nqi = "option3" > 3   
</label>

Xaiv

Siv lub neej ntawd xaiv los yog qhia ib tug multiple="multiple"los qhia ntau yam kev xaiv ib zaug.

<xaiv>
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>
 
<xaiv ntau = "ntau yam" > 
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>

Extending daim ntawv tswj

Ntxiv rau sab saum toj ntawm qhov browser uas twb muaj lawm, Bootstrap suav nrog lwm cov ntaub ntawv tseem ceeb.

Prepended thiab appended inputs

Ntxiv cov ntawv los yog cov nyees khawm ua ntej lossis tom qab cov ntawv nyeem raws li kev nkag. Nco ntsoov tias selectcov ntsiab lus tsis txhawb nqa ntawm no.

Default xaiv

Qhwv ib qho .add-onthiab ib qho inputnrog ib qho ntawm ob chav kawm los ua ntej lossis ntxiv cov ntawv rau kev nkag.

<div class = "input-prepend" > 
  <span class = "add-on" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "text" placeholder = "Username" >    
</div>
<div class = "input-append" > 
  <input class = "span2" id = "appendedInput" type = "text" >   
  <span class = "add-on" > .00 </span> 
</div>

Ua ke

Siv ob chav kawm thiab ob qho piv txwv ntawm .add-onlos ua ntej thiab ntxiv ib qho kev tawm tswv yim.

<div class = "input-prepend input-append" > 
  <span class = "add-on" > $ </span> 
  <input class = "span2" id = "appendedPrependedInput" type = "text" >   
  <span class = "add-on" > .00 </span> 
</div>

Khawm es tsis txhob ntawv

Hloov cov ntawv <span>nrog cov ntawv, siv .btnlub khawm (lossis ob) rau kev nkag.

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButton" type = "text" >   
  <button class = "btn" type = "button" > Mus! </button>  
</div>

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButtons" type = "text" >   
  <button class = "btn" type = "button" > Nrhiav </button>  
  <button class = "btn" type = "button" > Xaiv </button>  
</div>

Khawm dropdowns

<div class = "input-append" > 
  <input class = "span2" id = "appendedDropdownButton" type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Kev ua
      <span dir = "ltr" >Tswv Yim Vaj</span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Kev ua
      <span dir = "ltr" >Tswv Yim Vaj</span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "prependedDropdownButton" type = "text" >   
</div>

<div class = "input-prepend input-append" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Kev ua
      <span dir = "ltr" >Tswv Yim Vaj</span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "appendedPrependedDropdownButton" type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Kev ua
      <span dir = "ltr" >Tswv Yim Vaj</span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
</div>

Segmented dropdown pawg

<form>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    <input type = "text" > 
  </div>
  <div class = "input-append" > 
    <input type = "text" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

Nrhiav daim ntawv

<form class = "form-search" > 
  <div class = "input-append" > 
    <input type = "text" class = "span2 search-query" >  
    <button type = "submit" class = "btn" > Nrhiav </button>  
  </div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" > Nrhiav </button>  
    <input type = "text" class = "span2 search-query" >  
  </div>
</form>

Tswj qhov loj me

Siv cov chav kawm txheeb ze sib txawv xws li .input-largelossis phim koj cov khoom siv rau cov kab sib chaws kab uas siv .span*cov chav kawm.

Thaiv qib inputs

Ua ib qho <input>los yog <textarea>lub hauv paus coj zoo li qhov thaiv qib theem.

<input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

kwv tij sizing

<input class = "input-mini" type = "text" placeholder = ".input-mini" >   
<input class = "input-small" type = "text" placeholder = ".input-small" >   
<input class = "input-medium" type = "text" placeholder = ".input-medium" >   
<input class = "input-large" type = "text" placeholder = ".input-large" >   
<input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
<input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

Tau taub hau!Nyob rau hauv lub neej yav tom ntej versions, peb yuav tau hloov kho kev siv ntawm cov txheeb ze input chav kawm kom phim peb cov pob loj. Piv txwv li, .input-largeyuav ua rau kom cov padding thiab font-loj ntawm cov tswv yim.

Daim phiaj sizing

Siv .span1rau .span12cov khoom siv uas sib xws tib qhov ntau thiab tsawg ntawm kab kab sib chaws.

<input class = "span1" type = "text" placeholder = ".span1" >   
<input class = "span2" type = "text" placeholder = ".span2" >   
<input class = "span3" type = "text" placeholder = ".span3" >   
<select class = "span1" > 
  ...
</select>
<select class = "span2" > 
  ...
</select>
<select class = "span3" > 
  ...
</select>

Rau ntau daim phiaj inputs ib kab, siv cov .controls-rowchav hloov kho kom haum qhov sib nrug . Nws floats cov inputs kom tawg dawb-qhov chaw, teeb tsa cov npoo kom zoo, thiab tshem tawm cov ntab.

<div class = "controls" > 
  <input class = "span5" type = "text" placeholder = ".span5" >   
</div>
<div class = "controls-kab" > 
  <input class = "span4" type = "text" placeholder = ".span4" >   
  <input class = "span1" type = "text" placeholder = ".span1" >   
</div>
...

Uneditable inputs

Tshaj tawm cov ntaub ntawv hauv ib daim ntawv uas kho tsis tau yam tsis siv daim ntawv kos npe tiag tiag.

<span class = "input-xlarge uneditable-input" > Qee tus nqi ntawm no </span>

Tsim cov yeeb yam

Xaus daim ntawv nrog ib pab pawg ua haujlwm (khawm). Thaum muab tso rau hauv ib qho .form-actions, cov nyees khawm yuav cia li nkag mus rau kab nrog cov ntawv tswj hwm.

<div class = "form-actions" > 
  <button type = "submit" class = "btn btn-primary" > Txuag hloov pauv </button>  
  <button type = "button" class = "btn" > Ncua tseg </button>  
</div>

Pab ntawv nyeem

Inline thiab thaiv qib kev txhawb nqa rau kev pab cov ntawv uas tshwm nyob ib ncig ntawm daim ntawv tswj.

Inline pab

<input type = "text" ><span class = "help-inline" > Inline pab ntawv </span>

Thaiv kev pab

<input type = "text" ><span class = "help-block" > Ib qhov thaiv ntev ntawm kev pab cov ntawv uas tawg mus rau ib kab tshiab thiab tuaj yeem txuas ntxiv mus dhau ib kab. </span>

Daim ntawv tswj xeev

Muab cov lus tawm tswv yim rau cov neeg siv lossis cov neeg tuaj saib nrog cov lus qhia yooj yim hais txog cov ntawv tswj thiab cov ntawv sau.

Kev tsom xam

Peb tshem tawm cov outlineqauv qub ntawm qee daim ntawv tswj hwm thiab siv ib qho box-shadowhauv nws qhov chaw rau :focus.

<input class = "input-xlarge" id = "focusedInput" type = "text" tus nqi = "Qhov no yog tsom ..." >

Invalid inputs

Style inputs ntawm default browser functionality nrog :invalid. Qhia meej a type, ntxiv tus requiredcwj pwm yog tias daim teb tsis yog xaiv tau, thiab (yog tias tsim nyog) qhia a pattern.

Qhov no tsis muaj nyob rau hauv versions ntawm Internet Explorer 7-9 vim tsis muaj kev txhawb nqa rau CSS pseudo selectors.

<input class = "span3" type = "email" xav tau >

Disabled inputs

Ntxiv tus disabledcwj pwm ntawm ib qho kev tawm tswv yim los tiv thaiv cov neeg siv tswv yim thiab ua rau pom qhov txawv me ntsis.

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Disabled input here..." disabled >

Validation hais

Bootstrap suav nrog cov qauv kev lees paub rau kev ua yuam kev, ceeb toom, cov ntaub ntawv, thiab cov lus ua tiav. Txhawm rau siv, ntxiv cov chav kawm tsim nyog rau ib puag ncig .control-group.

<div class = "control-group ceeb toom" > 
  <label class = "control-label" rau = "inputWarning" > Cov tswv yim nrog ceeb toom </label>  
  <div class = "controls" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > Ib yam dab tsi yuav mus tsis ncaj ncees lawm </span> 
  </div>
</div>
 
<div class = "control-group yuam kev" > 
  <label class = "control-label" for = "inputError" > Cov tswv yim nrog yuam kev </label>  
  <div class = "controls" > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" > Thov kho qhov yuam kev </span> 
  </div>
</div>
 
<div class = "control-group info" > 
  <label class = "control-label" for = "inputInfo" > Cov lus qhia nrog cov ntaub ntawv </label>  
  <div class = "controls" > 
    <input type = "text" id = "inputInfo" >  
    <span class = "help-inline" > Tus neeg siv lub npe twb coj lawm </span> 
  </div>
</div>
 
<div class = "control-group ua tau zoo" > 
  <label class = "control-label" rau = "inputSuccess" > Cov tswv yim nrog kev vam meej </label>  
  <div class = "controls" > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "help-inline" > Woohoo! </span> 
  </div>
</div>

Default khawm

Khawm style tuaj yeem siv rau txhua yam nrog rau .btnchav kawm. Txawm li cas los xij, feem ntau koj yuav xav siv cov no rau nkaus xwb <a>thiab <button>cov ntsiab lus rau qhov zoo tshaj plaws rendering.

Khawm	chav kawm = ""	Kev piav qhia
	`btn`	Standard grey khawm nrog gradient
	`btn btn-primary`	Muab qhov muag pom qhov hnyav ntxiv thiab txheeb xyuas qhov ua haujlwm tseem ceeb hauv ib pawg ntawm cov nyees khawm
	`btn btn-info`	Siv raws li ib qho kev xaiv rau lub neej ntawd styles
	`btn btn-success`	Qhia tau tias muaj kev vam meej lossis zoo
	`btn btn-warning`	Qhia tias yuav tsum tau ceev faj nrog qhov kev ua no
	`btn btn-danger`	Qhia txog qhov txaus ntshai lossis qhov ua tsis zoo
	`btn btn-inverse`	Hloov khawm grey tsaus, tsis khi rau qhov kev txiav txim siab lossis siv
	`btn btn-link`	Deemphasize ib pob los ntawm kev ua kom nws zoo li ib qho txuas thaum tuav tus cwj pwm khawm

Hla browser compatibility

IE9 tsis qoob loo tom qab gradients ntawm cov ces kaum sib npaug, yog li peb tshem nws. Muaj feem xyuam, IE9 jankifies buttoncov ntsiab lus tsis taus, ua cov ntawv grey nrog cov ntawv tsis zoo-duab ntxoov ntxoo uas peb kho tsis tau.

khawm qhov ntau thiab tsawg

Xav tau cov nyees khawm loj lossis me dua? Ntxiv .btn-large, .btn-small, lossis .btn-minirau qhov ntau thiab tsawg.

<p>
  <button class = "btn btn-large btn-primary" type = "button" > khawm loj </button>  
  <button class = "btn btn-large" type = "button" > khawm loj </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > khawm Default </button>  
  <button class = "btn" type = "button" > khawm Default </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > khawm me </button>  
  <button class = "btn btn-small" type = "button" > khawm me </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "button" > Mini khawm </button>  
  <button class = "btn btn-mini" type = "button" > Mini khawm </button>  
</p>

Tsim thaiv qib nyees khawm-cov uas nthuav dav dav ntawm niam txiv- los ntawm kev ntxiv .btn-block.

<button class = "btn btn-large btn-block btn-primary" type = "button" > Thaiv qib khawm </button>  
<button class = "btn btn-large btn-block" type = "button" > Thaiv qib khawm </button>

Lub xeev tsis taus

Ua cov nyees khawm zoo li unclickable los ntawm fading lawv rov qab 50%.

Anchor element

Ntxiv cov .disabledchav kawm rau <a>cov nyees khawm.

Thawj qhov txuas Txuas

<a href="#" class="btn btn-large btn-primary disabled"> Thawj qhov txuas </a>  
<a href="#" class="btn btn-large disabled"> Txuas </a> _ _ _

Tau taub hau!Peb siv .disabledraws li chav kawm siv hluav taws xob ntawm no, zoo ib yam li cov .activechav kawm sib xws, yog li tsis tas yuav tsum tau ua ntej. Tsis tas li ntawd, chav kawm no tsuas yog ua kom zoo nkauj xwb; koj yuav tsum siv kev cai JavaScript los lov tes taw txuas ntawm no.

Khawm element

Ntxiv tus disabledcwj pwm rau <button>cov nyees khawm.

<button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > khawm thawj </button>   
<button type = "button" class = "btn btn-large" disabled > Khawm </button>

Ib chav kawm, ntau lub cim

Siv cov .btnchav kawm ntawm ib qho <a>, <button>, lossis <input>cov khoom.

<a class="btn" href=""> Link </a> _ _ _ _ _  
<button class = "btn" type = "submit" > khawm </button>  
<input class = "btn" type = "button" tus nqi = "Input" >   
<input class = "btn" type = "submit" value = "Submit" >

Raws li qhov kev coj ua zoo tshaj plaws, sim ua kom phim lub ntsiab lus rau koj cov ntsiab lus kom ntseeg tau tias kev sib piv ntawm qhov browser rendering. Yog tias koj muaj input, siv ib qho <input type="submit">rau koj lub pob.

Ntxiv cov chav kawm rau ib <img>lub caij kom yooj yim style dluab nyob rau hauv txhua qhov project.

<img src = "..." class = "img-rounded" >  
<img src = "..." class = "img-circle" >  
<img src = "..." class = "img-polaroid" >

Tau taub hau! .img-roundedthiab .img-circletsis ua haujlwm hauv IE7-8 vim tsis muaj kev border-radiustxhawb nqa.

Icon glyphs

140 icons nyob rau hauv daim ntawv sprite, muaj nyob rau hauv tsaus grey (default) thiab dawb, muab los ntawm Glyphicons .

icon-iav
icon-music
icon-search
icon-lub hnab ntawv
icon-lub siab
icon-hnub qub
icon-hnub qub-kho
icon-neeg siv
icon-film
icon-th-loj
icon-th
icon-th-list
icon-ok
icon-tshem tawm
icon-zoom-in
icon-zoom-out
icon-tawm
icon-xov xwm
icon- cog
icon-tso tseg
icon-tsev
icon-file
icon-lub sij hawm
icon-kev
icon-download-alt
icon-download tau
icon-upload
icon-inbox
icon-play-lub voj voog
icon-rov ua dua
icon-refresh
icon-list-alt
icon-lock
icon- chij
icon-headphones
icon-volume-tawm
icon-volume-down
icon-volume-up
icon-qrcode
icon-barcode
icon-tag
icon-tags
icon-book
icon-bookmark
icon-print
icon-lub koob yees duab
icon-font
icon-bold
icon-italic
icon-text-siab
icon-text-dav
icon-align-left
icon-align-center
icon-align-right
icon-align-justify
icon-list
icon-indent-sab laug
icon-indent-txoj cai
icon-facetime-video
icon-daim duab
icon-xiav
icon-map-marker
icon-kho
icon-tint
icon-edit
icon-share
icon-check
icon-tsav
icon-step-rov qab
icon-ceev-rov qab
icon-rov qab
icon-ua si
icon-pause
icon-nres
icon-forward
icon-fast-forward
icon-step-forward
icon-eject
icon-chevron-sab laug
icon-chevron-txoj cai
icon-plus-sign
icon-muab-kos npe
icon-remove-kos npe
icon-ok-sign
icon-cov lus nug-kos npe
icon-info-kos npe
icon-screenshot
icon-remove-lub voj voog
icon-ok-lub voj voog
icon-ban-lub voj voog
icon- xub-sab laug
icon- xub-txoj cai
icon- xub-up
icon- xub-down
icon-share-alt
icon-resize-tag nrho
icon-resize-me me
icon-plus
icon- rho tawm
icon-asterisk
icon-exclamation-kos npe
icon- khoom plig
icon- nplooj
icon-hluav taws
icon-qhov muag-qhib
icon-qhov muag-kaw
icon-warning-kos npe
icon-plane
icon-calendar
icon-random
icon-comment
icon-magnet
icon-chevron-up
icon-chevron-down
icon-retweet
icon-shopping-lub tawb nqa khoom
icon-folder-kaw
icon-folder-qhib
icon-resize-ntev
icon-resize-horizontal
icon-hdd
icon-bullhorn
icon- tswb
icon-daim ntawv pov thawj
icon-thumbs-up
icon-thumbs-down
icon-tes-txoj cai
icon-tes-sab laug
icon-hand-up
icon-hand-down
icon-lub voj voog- xub-txoj cai
icon-lub voj voog- xub-sab laug
icon-circle- xub-up
icon-lub voj voog- xub-down
icon-globe
icon-wrench
icon-ua haujlwm
icon-filter
icon-briefcase
icon-fullscreen

Glyphicons attribution

Glyphicons Halflings ib txwm tsis muaj pub dawb, tab sis kev teeb tsa ntawm Bootstrap thiab Glyphicons creators tau ua qhov no tsis muaj nqi rau koj li cov neeg tsim khoom. Ua tsaug rau koj, peb hais kom koj suav nrog qhov kev xaiv txuas rov qab mus rau Glyphicons thaum twg los tau.

Yuav siv li cas

Txhua lub cim xav tau ib <i>daim ntawv nrog cov chav kawm tshwj xeeb, ua ntej nrog icon-. Txhawm rau siv, tso cov cai hauv qab no tsuas yog nyob txhua qhov chaw:

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

Tseem muaj cov qauv muaj rau inverted (dawb) icons, npaj txhij nrog ib chav kawm ntxiv. Peb yuav tshwj xeeb tswj cov chav kawm no ntawm hover thiab active xeev rau nav thiab dropdown links.

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

Tau taub hau!Thaum siv ib sab ntawm cov hlua ntawm cov ntawv nyeem, xws li hauv cov nyees khawm lossis cov kev sib txuas nav, nco ntsoov tawm qhov chaw tom qab lub <i>cim rau qhov sib nrug.

Icon piv txwv

Siv lawv nyob rau hauv cov nyees khawm, khawm pawg rau ib lub toolbar, navigation, los yog prepended daim ntawv inputs.

Khawm

Khawm pab pawg nyob rau hauv ib lub pob toolbar

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  </div>
</div>

Dropdown hauv ib pawg khawm

Cov neeg siv

<div class = "btn-group" > 
  <a class="btn btn-primary" href="#"> < i class = " icon - user icon-white" > < /i> User </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "dropdown-menu" > 
    <li><a href = "#" ><i class = "icon-pencil" ></i> Edit </a></li>  
    <li><a href = "#" ><i class = "icon-trash" ></i> Delete </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> Ban </a></li>  
    <li class = "divider" ></li> 
    <li><a href = "#" ><i class = "i" ></i> Ua admin </a></li>  
  </ul>
</div>

khawm qhov ntau thiab tsawg

Lub hnub qub Lub hnub qub Lub hnub qub

<a class="btn btn-large" href="#"> < i class = " icon - star" > < /i> Star </a>   
<a class="btn btn-small" href="#"> < i class = " icon - star" > < /i> Star </a>   
<a class="btn btn-mini" href="#"> < i class = " icon - star" > < /i> Star </a>

Kev taw qhia

<ul class = "nav nav-list" > 
  <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Home </a></li>   
  <li><a href = "#" ><i class = "icon-book" ></i> Library </a></li>  
  <li><a href = "#" ><i class = "icon-pencil" ></i> Applications </a></li>  
  <li><a href = "#" ><i class = "i" ></i> Misc </a></li>  
</ul>

Daim teb

<div class = "control-group" > 
  <label class = "control-label" rau = "inputIcon" > Email chaw nyob </label>  
  <div class = "controls" > 
    <div class = "input-prepend" > 
      <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
      <input class = "span2" id = "inputIcon" type = "text" >   
    </div>
  </div>
</div>

Typography

Cov ntsiab lus

h 1. Ntsiab lus 1

h 2. Ntsiab lus 2

h 3. Ntsiab lus 3

h 4. Ntsiab lus 4

h 5. Ntsiab lus 5

h 6. Nqe lus piav qhia 6

Lub cev luam tawm

Lead lub cev luam

Ua nrog Tsawg

Ntsiab lus

<small>

Ua siab loj

Italics

Cov chav kawm Alignment

Cov chav kawm tseem ceeb

Cov ntawv luv

<abbr>

<abbr class="initialism">

Chaw nyob

<address>

Blockquotes

Default blockquote

Blockquote xaiv

Sau npe qhov chaw

Hloov cov duab

Cov npe

Unordered

Txiav txim

Tsis zoo li

Hauv kab

Kev piav qhia

Kab rov tav piav qhia

Code

Hauv kab

Basic thaiv

Rooj

Cov qauv qub

Xaiv cov chav kawm

.table-striped

.table-bordered

.table-hover

.table-condensed

Optional row classes

Txhawb lub rooj markup

Cov ntawv

Cov qauv qub

Xaiv layouts

Nrhiav daim ntawv

Inline daim ntawv

Kab rov tav daim ntawv

Txhawb daim ntawv tswj

Cov tswv yim

Textarea

Checkboxes thiab xov tooj cua

Default (stacked)

Inline checkboxes

Xaiv

Extending daim ntawv tswj

Prepended thiab appended inputs

Default xaiv

Ua ke

Khawm es tsis txhob ntawv

Khawm dropdowns

Segmented dropdown pawg

Nrhiav daim ntawv

Tswj qhov loj me

Thaiv qib inputs

kwv tij sizing

Daim phiaj sizing

Uneditable inputs

Tsim cov yeeb yam

Pab ntawv nyeem

Inline pab

Thaiv kev pab

Daim ntawv tswj xeev

Kev tsom xam

Invalid inputs

Disabled inputs

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`