Typographic scale

Tag nrho daim phiaj typographic yog raws li ob qhov sib txawv tsawg hauv peb cov ntaub ntawv variables.less: @baseFontSizethiab @baseLineHeight. Qhov thib ib 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, los tsim cov npoo, paddings, thiab kab-qhov siab ntawm txhua hom thiab ntau dua.

Piv txwv lub cev ntawv

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. Ua tsaug os.

Siv qhov tseem ceeb

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra auggue.

Nco tseg: Xav tias dawb siv <b>thiab <i>hauv HTML5, tab sis lawv cov kev siv tau hloov me ntsis. <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.

Piv txwv chaw nyob

Nov yog ob qho piv txwv ntawm yuav ua li cas <address>siv tag:

Piv txwv abbreviations

Cov ntawv luv yog styled nrog cov ntawv loj thiab lub teeb dotted hauv qab ciam teb. Lawv kuj muaj tus cursor pab ntawm hover yog li cov neeg siv muaj qhov taw qhia ntxiv ib yam dab tsi yuav pom ntawm hover.

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

Lub ntsiab lus ntawm lo lus attribute yog attr .

Txhawm rau suav nrog blockquote, qhwv <blockquote>ib ncig ntawm txhua HTML raws li qhov tsocai. Rau cov quotes ncaj peb pom zoo a <p>.

suav nrog ib qho kev xaiv <small>los hais txog koj qhov chaw thiab koj yuav tau txais em khiav —ua ntej nws rau lub hom phiaj styling.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante venenatis. </p>
  <small> Ib tug neeg nto moo </small>
</blockquote>

Default blockquotes yog styled xws li:

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

Ib tug neeg nto moo hauv Lub Cev Ua Haujlwm

Txhawm rau ntab koj blockquote mus rau sab xis, ntxiv class="pull-right":

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

Ib tug neeg nto moo hauv Lub Cev Ua Haujlwm

Unordered

<ul>

• 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

Tsis zoo li

<ul class="unstyled">

• 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

Txiav txim

<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem thiab massa
4. Facilisis nyob rau hauv pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean zaum amet erat nunc
8. Eget porttitor lorem

Kev piav qhia

<dl>

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.

Hauv kab

Qhwv inline snippet ntawm code nrog <code>.

Piv txwv li , <code> seem </ code > yuav tsum tau qhwv li inline .  

Basic thaiv

Siv <pre>rau ntau kab ntawm cov cai. Nco ntsoov tig ib qho kev saib xyuas rau hauv lawv cov cim unicode rau kev ua kom raug.

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

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

Nco tseg: Nco ntsoov khaws cov lej hauv <pre>cov cim npe ze rau sab laug li sai tau; nws yuav muab tag nrho cov tabs.

Google Prettify

Siv tib lub <pre>ntsiab lus thiab ntxiv ob chav kawm xaiv rau kev ua kom zoo dua qub.

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

<pre class = "prettyprint 
     cov ntaub ntawv" >
  <p>Sample text here...</p>
</pre>

Rub tawm google-code-prettify thiab saib readme rau kev siv.

<tab>
  <thead>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

Cov ntxhuav tau cia li styled nrog tsuas yog ob peb ciam teb kom paub meej nyeem tau thiab tswj cov qauv. Nrog 2.0, .tablechav kawm yuav tsum.

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

Tau txais me ntsis zoo nkauj nrog koj cov ntxhuav los ntawm kev ntxiv zebra-striping - tsuas yog ntxiv cov .table-stripedchav kawm.

Nco tseg: Sprited tables siv :nth-childCSS selector thiab tsis muaj nyob rau hauv IE7-IE8.

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

Ntxiv ciam teb nyob ib ncig ntawm tag nrho cov rooj thiab cov ces kaum sib npaug rau lub hom phiaj zoo nkauj.

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

Ua kom koj cov ntxhuav ntau dua los ntawm kev ntxiv cov .table-condensedchav kawm los txiav cov lus cell padding hauv ib nrab (los ntawm 8px txog 4px).

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

Xav tias dawb los ua ke ib qho ntawm cov chav kawm ntawv kom ua tiav qhov sib txawv los ntawm kev siv ib qho ntawm cov chav kawm muaj.

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

Yooj yim HTML thiab CSS

Qhov zoo tshaj plaws txog cov ntawv hauv Bootstrap yog tias tag nrho koj cov tswv yim thiab kev tswj hwm zoo li zoo txawm tias koj tsim lawv li cas hauv koj cov cim. Tsis xav tau HTML superfluous, tab sis peb muab cov qauv rau cov neeg xav tau.

Cov txheej txheem nyuaj dua tuaj nrog cov chav kawm succinct thiab scalable rau kev yooj yim styling thiab kev tshwm sim losis tswvyim dabtsi, yog li koj nyob nraum them ntawm txhua kauj ruam.

Plaub layouts suav nrog

Bootstrap los nrog kev txhawb nqa rau plaub hom ntawv layouts:

• Vertical (default)
• Nrhiav
• Hauv kab
• Kab rov tav

Ntau hom kev layouts xav tau qee qhov kev hloov pauv rau kev kos npe, tab sis cov tswj lawv tus kheej nyob twj ywm thiab coj tus cwj pwm zoo ib yam.

Tswj xeev thiab lwm yam

Bootstrap cov ntaub ntawv suav nrog cov qauv rau txhua lub hauv paus daim ntawv tswj hwm xws li cov tswv yim, textarea, thiab xaiv koj xav tau. Tab sis nws kuj los nrog ib tug xov tooj ntawm kev cai Cheebtsam xws li appended thiab prepended inputs thiab txhawb rau cov npe ntawm checkboxes.

Cov xeev xws li kev ua yuam kev, ceeb toom, thiab kev ua tiav yog suav nrog rau txhua hom kev tswj xyuas daim ntawv. Kuj suav nrog yog cov qauv rau kev tswj tsis tau.

Nrog v2.0, peb muaj qhov sib dua thiab ntse dua qub rau cov qauv qauv. Tsis muaj qhov cim ntxiv, tsuas yog daim ntawv tswj hwm.

Xav txog lub neej ntawd WebKit styles, tsuas yog ntxiv .form-searchrau cov kev tshawb nrhiav ntxiv.

Inputs yog thaiv theem pib. Rau .form-inlinethiab .form-horizontal, peb siv inline-block.

Dab tsi suav nrog

Qhia rau sab laug yog tag nrho cov qauv kev tswj hwm peb txhawb nqa. Ntawm no yog daim ntawv teev npe:

• cov ntaub ntawv nkag (ntawv nyeem, password, email, thiab lwm yam)
• checkbox
• xov tooj cua
• xaiv
• ntau xaiv
• cov ntaub ntawv nkag
• textarea

Tshiab defaults nrog v2.0

Txog rau v1.4, Bootstrap's default form styles siv cov kab rov tav layout. Nrog Bootstrap 2, peb tshem tawm qhov kev txwv ntawd kom muaj kev txawj ntse, ua kom muaj txiaj ntsig ntau dua rau txhua daim ntawv.

Redesigned browser xeev

Bootstrap nta style rau browser-txhawb tsom thiab disabledhais. Peb tshem tawm lub neej ntawd Webkit outlinethiab siv ib qho box-shadowhauv nws qhov chaw rau :focus.

Daim ntawv validation

Nws kuj suav nrog cov qauv kev lees paub rau qhov yuam kev, ceeb toom, thiab ua tiav. Txhawm rau siv, ntxiv cov chav kawm yuam kev rau ib puag ncig .control-group.

<fieldset
  class = "control-group yuam kev" >
  …
</fieldset>

Prepend & append inputs

Cov pab pawg tawm tswv yim-nrog cov ntawv txuas ntxiv lossis cov ntawv sau ua ntej-muab txoj hauv kev yooj yim los muab cov ntsiab lus ntxiv rau koj cov tswv yim. Cov piv txwv zoo suav nrog @ kos npe rau Twitter usernames lossis $ rau nyiaj txiag.

Checkboxes thiab xov tooj cua

Txog rau v1.4, Bootstrap yuav tsum tau kos npe ntxiv nyob ib ncig ntawm lub checkboxes thiab xov tooj cua los tso lawv. Tam sim no, nws yog ib qho teeb meem yooj yim ntawm kev rov ua dua qhov <label class="checkbox">uas qhwv lub <input type="checkbox">.

Inline checkboxes thiab xov tooj cua kuj tau txais kev txhawb nqa. Tsuas yog ntxiv .inlinerau ib qho .checkboxlossis .radiothiab koj ua tiav.

Inline forms thiab append/prepend

Txhawm rau siv prepend lossis append inputs nyob rau hauv ib daim ntawv inline, nco ntsoov muab tso .add-onrau inputhauv tib kab, tsis muaj qhov chaw.

Daim ntawv qhia kev pab

Txhawm rau ntxiv cov ntawv pab rau koj cov ntaub ntawv nkag, suav nrog cov ntawv pab hauv kab nrog <span class="help-inline">lossis cov ntawv pab cuam thaiv nrog <p class="help-block">tom qab lub ntsiab lus nkag.

Khawm rau kev ua

Raws li lub rooj sib tham, cov nyees khawm yuav tsum tsuas yog siv rau kev ua thaum hyperlinks yuav tsum tau siv rau cov khoom. Piv txwv li, "Download" yuav tsum yog lub pob thaum "kev ua haujlwm tsis ntev los no" yuav tsum yog qhov txuas.

Rau anchors thiab cov ntawv

Khawm style tuaj yeem siv rau txhua yam nrog rau kev .btnthov. Txawm li cas los xij, feem ntau koj yuav xav siv cov no rau nkaus xwb <a>thiab <button>cov ntsiab lus.

Nco tseg: Tag nrho cov nyees khawm yuav tsum suav nrog .btnchav kawm. Khawm style yuav tsum tau siv rau <button>thiab <a>cov ntsiab lus kom sib xws.

Ntau qhov ntau thiab tsawg

Xav tau cov nyees khawm loj lossis me dua? Muaj ntawm nws!

Thawj qhov ua Kev ua

Thawj qhov ua Kev ua

Lub xeev tsis taus

Rau cov nyees khawm xiam oob qhab, siv .btn-disabledrau kev sib txuas thiab :disabledrau <button>cov ntsiab lus.

Thawj qhov ua Kev ua

Thawj qhov ua Kev ua

Hla browser compatibility

Hauv IE9, peb tso cov gradient ntawm txhua cov nyees khawm hauv kev pom zoo ntawm cov ces kaum sib npaug li IE9 tsis qoob loo tom qab gradients rau cov ces kaum.

Muaj feem xyuam, IE9 jankifies cov neeg xiam oob khab button, ua cov ntawv grey nrog cov ntawv tsis zoo-ntxhais duab ntxoov ntxoo-hmoov peb kho tsis tau qhov no.

Ua li sprite

Es tsis txhob ua txhua lub cim thov ntxiv, peb tau muab tso ua ke rau hauv sprite - ib pawg ntawm cov duab hauv ib cov ntaub ntawv uas siv CSS los tso cov duab nrog background-position. Qhov no yog tib txoj kev uas peb siv hauv Twitter.com thiab nws tau ua haujlwm zoo rau peb.

All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.

Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.

How to use

With v2.0.0, we have opted to use an <i> tag for all our icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:

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

There are also styles available for inverted (white) icons, made ready with one extra class:

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

Muaj 120 chav kawm xaiv los ntawm koj lub cim. Tsuas yog ntxiv ib <i>daim ntawv nrog cov chav kawm zoo thiab koj tau teeb tsa. Koj tuaj yeem pom cov npe tag nrho hauv sprites.less lossis nyob ntawm no hauv daim ntawv no.

Siv cov ntaub ntawv

Icons zoo heev, tab sis qhov twg yuav siv lawv? Nov yog ob peb lub tswv yim:

• Raws li kev pom rau koj lub sidebar navigation
• Rau ib tug ntshiab icon-tsav navigation
• Rau cov nyees khawm los pab qhia lub ntsiab lus ntawm kev ua
• Nrog kev sib txuas los qhia cov ntsiab lus ntawm tus neeg siv lub hom phiaj

Qhov tseem ceeb, txhua qhov chaw koj tuaj yeem tso <i>tag, koj tuaj yeem tso lub cim.

Hloov tshiab Txheeb xyuas Rho tawm

Saib Chaw Xav paub ntxiv