Quick-start piv txwv

Xav tau ib co templates sai? Tshawb xyuas cov piv txwv yooj yim no peb tau muab tso ua ke:

Default daim phiaj

Lub default grid system muab raws li ib feem ntawm Bootstrap yog 940px wide 16-kem daim phiaj. Nws yog ib qho tsw ntawm qhov nrov 960 kab sib chaws, tab sis tsis muaj cov npoo ntxiv / padding ntawm sab laug thiab sab xis.

Piv txwv daim phiaj markup

Raws li tau pom ntawm no, ib qho kev teeb tsa yooj yim tuaj yeem tsim nrog ob "kab", txhua qhov txuas ntxiv ntawm 16 kab hauv paus peb tau txhais ua ib feem ntawm peb cov kab sib chaws. Saib cov piv txwv hauv qab no rau ntau qhov kev hloov pauv.

<div class = "row" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

Zes kab

Zes koj cov ntsiab lus yog tias koj yuav tsum los ntawm kev tsim ib qho .rowhauv ib kab uas twb muaj lawm.

Piv txwv ntawm nested kab

<div class = "row" > 
  <div class = "span12" > 
    Qib 1 ntawm kab
    <div class = "row" > 
      <div class = "span6" > 
        Qib 2
      </div>
      <div class = "span6" > 
        Qib 2
      </div>
    </div>
  </div>
</div>

Yob koj tus kheej daim phiaj

Ua rau hauv Bootstrap yog ib txhais tes ntawm qhov sib txawv rau customizing lub neej ntawd 940px kab sib chaws. Nrog me ntsis ntawm kev hloov kho, koj tuaj yeem hloov kho qhov loj ntawm kab, lawv cov gutters, thiab lub thawv uas lawv nyob hauv.

Hauv daim phiaj

Cov kev hloov pauv uas xav tau los hloov kho cov kab sib chaws tam sim no txhua tus nyob hauv preboot.less.

Tam sim no los customize

Hloov kho daim phiaj txhais tau tias hloov peb @grid-*qhov sib txawv thiab rov ua dua cov ntaub ntawv tsawg dua.

Bootstrap tuaj nruab los tswj cov kab sib chaws nrog txog 24 kab; Lub neej ntawd tsuas yog 16. Ntawm no yog li cas koj daim phiaj sib txawv yuav zoo li kho tau rau 24-kab kab sib chaws.

@gridKawm : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;   

Thaum recompied, koj yuav tau teem!

Tsau layout

Lub neej ntawd thiab yooj yim 940px-dav, nruab nrab layout rau ib lub vev xaib lossis nplooj ntawv muab los ntawm ib leeg <div.container>.

<lub cev>
  <div class = "container" > 
    ...
  </div>
</body>

Cov dej layout

Ib qho kev hloov pauv, hloov pauv hloov pauv nplooj qauv nrog min- thiab max-dav thiab sab laug-tes sab. Zoo heev rau apps thiab docs.

<lub cev>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "cov ntsiab lus" > 
      ...
    </div>
  </div>
</body>

Headings & luam

Tus qauv typographic hierarchy rau kev teeb tsa koj lub vev xaib.

Tag nrho daim phiaj typographic yog raws li ob qhov sib txawv tsawg hauv peb cov ntaub ntawv preboot.less: @basefontthiab @baseline. 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.

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

Piv txwv kab lus

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.

Piv txwv lub taub hau muaj sub-heading…

Lwm yam. cov ntsiab lus

Siv cov ntsiab lus, chaw nyob, & cov ntawv luv

<strong> <em> <address> <abbr>

Thaum siv

Cov cim cim ( <strong>thiab <em>) yuav tsum tau siv los qhia qhov tseem ceeb ntxiv lossis qhov tseem ceeb ntawm ib lo lus lossis kab lus txheeb ze rau nws cov ntawv ib puag ncig. Siv <strong>rau qhov tseem ceeb thiab tseem ceeb <em>rau kev ntxhov siab .

Ua kom pom tseeb hauv ib nqe lus

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: Nws tseem zoo siv <b>thiab <i>cov cim npe hauv HTML5 thiab lawv tsis tas yuav tsum tau ua kom zoo nkauj thiab italic, raws li (txawm tias muaj cov ntsiab lus ntau dua, siv nws). <b>yog txhais tau hais tias cov lus los yog kab lus tsis muaj qhov tseem ceeb ntxiv, thaum <i>feem ntau yog rau lub suab, cov ntsiab lus, thiab lwm yam.

Chaw nyob

Lub <address>caij yog siv rau cov ntaub ntawv tiv tauj rau nws cov poj koob yawm txwv ze tshaj plaws, lossis tag nrho lub cev ua haujlwm. Nov yog ob qho piv txwv ntawm kev siv nws li cas:

Nco tseg: Txhua kab hauv ib qho <address>yuav tsum xaus nrog kab-tawg ( <br />) lossis muab qhwv rau hauv daim ntawv thaiv qib (piv txwv li, <p>) kom tsim cov ntsiab lus kom raug.

Cov ntawv luv

Rau cov ntawv luv thiab cov ntawv sau, siv lub <abbr>cim ( <acronym>yog deprecated hauv HTML5 ). Muab daim ntawv luv luv rau hauv daim ntawv thiab teem lub npe rau lub npe tag.

Blockquotes

<blockquote> <p> <small>

Yuav ua li cas hais

Txhawm rau suav nrog blockquote, qhwv <blockquote>ib ncig <p>thiab <small>cim npe. Siv lub <small>ntsiab lus los txheeb koj qhov chaw thiab koj yuav tau txais ib qho em khiav —ua ntej nws.

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

Dr. Julius Hibbert

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> Dr. Julius Hibbert </small>
</blockquote>

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.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 qhiadl

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.

Code

<code> <pre>

Pimp koj cov cai hauv style nrog ob lub cim npe yooj yim. Txhawm rau kom muaj txiaj ntsig ntau dua los ntawm javascript, poob rau hauv Google tus lej prettify tsev qiv ntawv thiab koj tau teeb tsa.

Kev nthuav qhia code

Code, blocks ntawm lossis tsuas yog snippets inline, tuaj yeem tso tawm kom pom nrog cov style tsuas yog los ntawm kev qhwv rau hauv txoj cai tag. Rau cov blocks ntawm cov lej hla ntau kab, siv lub <pre>caij. Rau inline code, siv lub <code>caij.

<div>
  <h1>Heading </h1>
  <p>Ib yam li no...</p>
</div>

<div> <h1> Nqe lus </h1> <p> Ib yam ntawm no... </p> </div>
  
  

Inline labels

<span class="label">

Hu rau mloog los yog chij ib kab lus hauv koj lub cev ntawv.

Sau npe dab tsi

Puas xav tau ib qho ntawm cov zoo nkauj Tshiab! lossis tseem ceeb chij thaum sau code? Zoo, tam sim no koj muaj lawv. Nov yog dab tsi suav nrog los ntawm lub neej ntawd:

Media kab sib chaws

Tso cov duab me me ntawm qhov sib txawv ntawm cov nplooj ntawv nrog HTML hneev taw qis thiab cov qauv tsawg.

Piv txwv thumbnails

Thumbnails nyob rau hauv .media-gridyuav ua tau txhua yam loj, tab sis lawv ua hauj lwm zoo tshaj plaws thaum mapped ncaj qha mus rau lub built-in Bootstrap grid system. Cov duab dav zoo li 90, 210, thiab 330 ua ke nrog ob peb pixels ntawm padding kom sib npaug ntawm .span2, .span4, thiab .span6kab loj.

Loj

Nruab nrab

Me me

Coding lawv

Media daim phiaj yog ib qho yooj yim mus use thiab yooj yim dua nyob rau sab markup. Lawv qhov ntev yog ua raws li qhov loj ntawm cov duab suav nrog.

<ul class = "media-grid" > 
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

Tsev rooj

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Cov rooj yog qhov zoo heev - rau ntau yam. Cov rooj zoo, txawm li cas los xij, xav tau me ntsis ntawm kev hlub kos npe los ua kom muaj txiaj ntsig, scalable, thiab nyeem tau (ntawm qib code). Nov yog ob peb lub tswv yim los pab.

Ib txwm qhwv koj cov kab ntawv hauv kab hauv ib qho <thead>uas hierarchy yog <thead>>> <tr>.<th>

Zoo ib yam li cov kab ntawv hauv kab ntawv, tag nrho koj cov lus lub cev cov ntsiab lus yuav tsum tau qhwv hauv ib qho <tbody>kom koj lub hierarchy yog <tbody>>> <tr>.<td>

Piv txwv li: Default table styles

Tag nrho cov rooj yuav raug txiav txim siab nrog tsuas yog cov ciam teb tseem ceeb kom paub meej nyeem tau thiab tswj cov qauv. Tsis tas yuav ntxiv cov chav kawm ntxiv lossis cov cwj pwm.

<tab>
  ...
</table>

Piv txwv li: Zebra-striped

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

Nco tseg: Zebra-striping yog ib qho kev nce qib uas tsis muaj rau cov browser qub xws li IE8 thiab hauv qab no.

<table class = "zebra-striped" > 
...
</table>

Piv txwv li: Zebra-striped w/ TableSorter.js

Ua piv txwv yav dhau los, peb txhim kho qhov muaj txiaj ntsig ntawm peb cov ntxhuav los ntawm kev muab kev txheeb xyuas ua haujlwm ntawm jQuery thiab Tablesorter plugin. Nyem txhua kab ntawv header los hloov qhov kev xaiv.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( function () { 
    $ ( "table #sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "zebra-striped" > 
  ...
</table>

Cov qauv qub

Txhua daim ntawv tau muab cov qauv qub los nthuav qhia lawv hauv txoj kev nyeem tau thiab scalable. Cov qauv yog muab rau cov ntawv nkag, xaiv cov npe, cov ntawv nyeem, xov tooj cua nyees khawm thiab checkboxes, thiab cov nyees khawm.

Cov ntawv sib dhos

Ntxiv .form-stackedrau koj daim ntawv HTML thiab koj yuav muaj cov ntawv sau rau saum lawv daim teb es tsis txhob mus rau sab laug. Qhov no ua haujlwm zoo yog tias koj cov ntawv luv luv lossis koj muaj ob kab ntawv nkag rau cov ntawv hnyav dua.

Daim ntawv qhov ntau thiab tsawg

Customize txhua daim ntawv input, select, lossis textareadav los ntawm kev ntxiv ob peb chav rau koj qhov cim.

Raws li ntawm v1.3.0, peb tau ntxiv cov kab sib chaws raws li qhov loj me rau cov ntsiab lus. Thov siv cov no dhau cov chav kawm uas twb muaj lawm .mini, .small, thiab lwm yam.

Khawm

Raws li lub rooj sib tham, cov nyees khawm yog siv rau kev ua thaum sib txuas siv rau cov khoom. Piv txwv li, "Download" tuaj yeem yog lub pob thiab "kev ua haujlwm tsis ntev los no" tuaj yeem yog qhov txuas.

Tag nrho cov nyees khawm default mus rau lub teeb grey style, tab sis ib tug xov tooj ntawm cov chav kawm ua haujlwm tuaj yeem siv rau cov xim sib txawv. Cov chav kawm no suav nrog chav xiav xiav .primary, chav xiav xiav .info, chav ntsuab .success, thiab chav liab .danger.

Piv txwv khawm

Khawm style tuaj yeem siv rau txhua yam nrog rau kev .btnthov. Feem ntau koj yuav xav siv cov no rau tsuas yog <a>, <button>, thiab xaiv <input>cov ntsiab lus. Nov yog qhov nws zoo li no:

Hloov qhov ntau thiab tsawg

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

Lub xeev tsis taus

Rau cov nyees khawm uas tsis ua haujlwm lossis tsis ua haujlwm los ntawm lub app rau ib qho laj thawj lossis lwm qhov, siv lub xeev tsis taus. Qhov ntawd yog .disabledrau kev sib txuas thiab :disabledrau <button>cov ntsiab lus.

Txuas

Khawm

Nws yog dab tsi

Peb lub topbar yog ib qho chaw ruaj khov uas muaj lub vev xaib lub logo lossis lub npe, thawj qhov kev taw qhia, thiab daim ntawv tshawb fawb.

Customizable

Tag nrho cov ntsiab lus hauv, thiab tag nrho cov topbar zoo li, yog xaiv tau. Koj tuaj yeem xaiv suav nrog lub logo / lub npe, nav, tshawb nrhiav, thiab lwm qhov nav-los yog ib qho kev sib xyaw ua ke ntawm qhov ntawd.

Dropdowns suav nrog

Raws li ib feem ntawm lub ntsiab navigation, peb tau suav nrog lub peev xwm rau koj los ntxiv cov dropdowns rau koj nav. Tshawb xyuas qhov thib ob nav sab saum toj (txoj cai sib dhos) kom pom tias nws ua tiav li cas. Dropdowns litags kuj txhawb .activekev qhia cov nplooj ntawv xaiv tam sim no.

Tabs thiab tshuaj

Tsim kev yooj yim theem nrab navigation nrog a <ul>. Sib pauv ntawm tabs lossis ntsiav tshuaj los ntawm kev ntxiv cov chav kawm tsim nyog.

Zoo rau cov ntu ntu ntawm cov ntsiab lus zoo li peb cov nplooj ntawv teeb tsa tus account thiab cov sijhawm siv sijhawm rau kev sib tw ntawm nplooj ntawv nyiam cov ntsiab lus. Muaj nyob rau hauv tabbed lossis ntsiav tshuaj hom.

• Tsev
• Profile
• Cov lus
• Chaw
• Hu rau
• poob
  • Secondary link
  • Lwm yam ntawm no
  • Lwm qhov txuas

<ul class = "tabs" > 
  <li class = "active" ><a href = "#"> Tsev </a></li >  
  <li><a href = "#" > Profile </a></li> 
  <li><a href = "#" > Messages </a></li> 
  <li><a href = "#" > Chaw </a></li> 
  <li><a href = "#" > Hu rau </a></li> 
</ul>

• Tsev
• Profile
• Cov lus
• Chaw
• Hu rau

<ul class = "pills" > 
  <li class = "active" ><a href = "#"> Tsev </a></li >  
  <li><a href = "#" > Profile </a></li> 
  <li><a href = "#" > Messages </a></li> 
  <li><a href = "#" > Chaw </a></li> 
  <li><a href = "#" > Hu rau </a></li> 
</ul>

Breadcrumbs

Breadcrumb navigation yog siv los ua ib txoj hauv kev los qhia cov neeg siv qhov twg lawv nyob hauv ib qho app lossis ib qhov chaw, tab sis tsis yog rau thawj qhov kev taw qhia.

• Tsev

• Tsev /
• Nplooj nruab nrab

• Tsev /
• Nplooj ntawv nruab nrab /
• Lwm tus

• Tsev /
• Nplooj ntawv nruab nrab /
• Lwm tus /
• Koj nyob ntawm no

<ul class = "breadcrumb" > 
  <li><a href="#"> Tsev </a> < span class = " divider " > / < / span></li>   
  <li><a href = "#" > nplooj ntawv nruab nrab </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Lwm tus </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Koj nyob ntawm no </li> 
</ul>

Pagination

Ultra simplistic thiab minimally styled pagination tshwm sim los ntawm Rdio. Qhov loj thaiv yog ib qho nyuaj rau nco, yooj yim scalable, thiab muab loj nias qhov chaw.

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Previous </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "next" ><a href="#" > Next &rarr ; </a></li>  
  </ul>
</div>

Kev ceeb toom yooj yim

.alert-message

Ib kab lus qhia txog qhov ua tsis tiav, ua tsis tiav, lossis ua tiav ntawm qhov kev ua. Tshwj xeeb yog pab tau rau cov ntawv.

Tau txais javascript »

Piv txwv li code

<div class = "alert-message warning" > 
  <a class = "kaw" href = "#" > × </a>  
  <p><strong> Holy guacamole! </strong> Zoo tshaj koj tus kheej, koj tsis saib zoo heev. </p>
</div>

Thaiv cov lus

.alert-message.block-message

Rau cov lus uas xav tau me ntsis piav qhia, peb muaj cov lus ceeb toom kab lus. Cov no yog qhov zoo tshaj plaws rau bubbling cov lus yuam kev ntev dua, ceeb toom rau tus neeg siv ntawm qhov tseem tab tom ua, lossis tsuas yog nthuav tawm cov ntaub ntawv rau qhov tseem ceeb ntawm nplooj ntawv.

Tau txais javascript »

Piv txwv li code

<div class = "alert-message block-message warning" > 
  <a class = "kaw" href = "#" > × </a>  
  <p><strong> Holy guacamole! Nov yog lus ceeb toom! </strong> Zoo tshaj koj tus kheej, koj tsis saib zoo heev. Nulla vitae elit libero, pharetra auggue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "alert-actions" > 
    <a class="btn small" href="#"> Ua qhov no </a> <a class="btn small" href="#"> Los yog ua qhov no </a> _ _     
  </div>
</div>

Cov qauv

Modals-dialogs lossis lightboxes-yog qhov zoo rau kev ua haujlwm hauv cov xwm txheej uas nws tseem ceeb uas cov ntsiab lus keeb kwm yav dhau tau khaws cia.

Tau txais javascript »

Cov lus qhia

Twipsies yog qhov muaj txiaj ntsig zoo rau kev pab tus neeg siv tsis meej pem thiab taw qhia lawv mus rau qhov raug.

Tau txais javascript »

Popovers

Siv popovers los muab cov ntaub ntawv subtextual rau ib nplooj ntawv yam tsis muaj kev cuam tshuam layout.

Tau txais javascript »

pib

Kev koom ua ke javascript nrog lub tsev qiv ntawv Bootstrap yog qhov yooj yim heev. Hauv qab no peb mus dhau qhov pib thiab muab rau koj nrog qee cov plugins txaus kom koj pib!

Saib javascript docs »

Dab tsi suav nrog

Nqa qee qhov ntawm Bootstrap cov khoom tseem ceeb rau lub neej nrog cov kev cai tshiab plugins uas ua haujlwm nrog jQuery thiab Ender . Peb txhawb kom koj txuas ntxiv thiab hloov kho lawv kom haum rau koj qhov kev xav tau tshwj xeeb.

Puas tsim nyog javascript?

Tsis yog! Bootstrap yog tsim ua ntej thiab foremost los ua ib lub tsev qiv ntawv CSS. Qhov javascript no muab cov txheej txheem sib tham sib tham saum toj ntawm cov qauv suav nrog.

Txawm li cas los xij, rau cov neeg uas xav tau javascript, peb tau muab cov plugins saum toj no los pab koj nkag siab yuav ua li cas koom ua ke Bootstrap nrog javascript thiab muab kev xaiv ceev, hnyav rau cov haujlwm yooj yim tam sim ntawd.

Yog xav paub ntxiv thiab pom qee qhov kev ua yeeb yam nyob, thov mus saib peb nplooj ntawv nplooj ntawv plugin .