Hotlink lub CSS

Txhawm rau pib sai thiab yooj yim tshaj plaws, tsuas yog luam cov kab lus no rau hauv koj lub vev xaib.

Siv nws nrog tsawg

Ib tug kiv cua ntawm kev siv tsawg? Tsis muaj teeb meem, tsuas yog clone lub repo thiab ntxiv cov kab no:

Fork ntawm GitHub

Download, diav rawg, rub, teeb meem cov ntaub ntawv, thiab ntau ntxiv nrog cov nom Bootstrap repo ntawm Github.

Keeb kwm

Nyob rau hauv cov hnub dhau los ntawm Twitter, engineers siv yuav luag txhua lub tsev qiv ntawv uas lawv paub txog kom tau raws li qhov yuav tsum tau ua hauv ntej. Bootstrap pib raws li cov lus teb rau cov kev cov nyom uas nthuav tawm thiab kev loj hlob sai sai thaum lub sij hawm Twitter thawj Hackweek.

Nrog kev pab thiab kev tawm tswv yim los ntawm ntau tus engineers ntawm Twitter, Bootstrap tau loj hlob los ua kom tsis tsuas yog cov qauv yooj yim xwb, tab sis ntau dua elegant thiab ruaj rau pem hauv ntej-kawg tsim qauv.

Nyeem ntxiv ntawm dev.twitter.com ›

Kev them nyiaj yug browser

Bootstrap tau sim thiab txhawb nqa hauv cov browser niaj hnub loj xws li Chrome, Safari, Internet Explorer, thiab Firefox.

Tseeb Safari
Tseeb Google Chrome
Firefox 4+
Internet Explorer 7+
Opera 11

Dab tsi suav nrog

Bootstrap los ua kom tiav nrog CSS compiled, uncompiled, thiab piv txwv templates.

Tag nrho cov ntaub ntawv qub .less
Ua kom tiav thiab txo qis CSS
Ua kom tiav cov ntaub ntawv qhia txog style
Piv txwv nplooj ntawv template (ntau ntxiv tuaj sai sai)

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 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 columns" > 
    ...
  </div>
  <div class = "span10 columns" > 
    ...
  </div>
</div>

Offsetting kab

8 ua 4

4 offset 4

5 ua 3

10 ua 6

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

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 qhov nws zoo li no:

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

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

Cov npe

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>`

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

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.

Tsev rooj

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

Cov rooj yog qhov zoo heev - rau ntau yam. Cov ntxhuav zoo, txawm li cas los xij, xav tau me ntsis ntawm kev hlub kev hlub 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 muab qhwv rau hauv ib qho <tbody>kom koj hierarchy yog <tbody>>> <tr>.<td>

Piv txwv li: Default table styles

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

#	Lub Npe	Lub Npe	Lus
1	Ib txhia	Ib	Lus Askiv
2	Joe	Sixpack	Lus Askiv
3	Stu	Khob	Code

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

#	Lub Npe	Lub Npe	Lus
1	Ib txhia	Ib	Lus Askiv
2	Joe	Sixpack	Lus Askiv
3	Stu	Khob	Code

Nco tseg: Zebra-striping yog ib qho kev nce qib uas tsis muaj rau cov browsers 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.

#	Lub Npe	Lub Npe	Lus
1	Koj	Ib	Lus Askiv
2	Joe	Sixpack	Lus Askiv
3	Stu	Khob	Code

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

Tsau topbar

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.

Nco tseg: Thaum siv lub topbar ntawm ib nplooj ntawv, nco ntsoov account rau qhov sib tshooj nws ua los ntawm kev ntxiv padding-top: 40px;rau koj body.

Tabs thiab tshuaj

Tsim kev yooj yim theem nrab navigation nrog a <ul>. Sib pauv ntawm tabs lossis 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.

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

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

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

div.alert-message

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

Dawb huv gaucamole! Qhov zoo tshaj plaws xyuas koj tus kheej, koj tsis zoo heev.

Aw snap! Hloov qhov no thiab qhov ntawd thiab sim dua.

Ua tau zoo! Koj tau nyeem cov lus ceeb toom no tiav.

Tau taub hau! Qhov no yog ib qho kev ceeb toom uas xav tau koj cov xim, tab sis nws tsis yog qhov tseem ceeb loj heev.

Thaiv cov lus

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

Dawb huv gaucamole! Nov yog lus ceeb toom! Qhov zoo tshaj plaws xyuas koj tus kheej, koj tsis zoo heev. Nulla vitae elit libero, pharetra auggue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Ua qhov no Los yog ua qhov no

Aw snap! Koj tau qhov yuam kev! Hloov qhov no thiab qhov ntawd thiab sim dua. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus zaum amet fermentum.

Ua qhov no Los yog ua qhov no

Ua tau zoo! Koj tau nyeem cov lus ceeb toom no tiav. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

Ua qhov no Los yog ua qhov no

Tau taub hau! Qhov no yog ib qho kev ceeb toom uas xav tau koj cov xim, tab sis nws tsis yog qhov tseem ceeb loj heev.

Ua qhov no Los yog ua qhov no

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.

Cov Lus Qhia

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

Lorem ipsum dollar sit amet illo yuam kev ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem dolorupquetam. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae volitam volupta quagit accusant .

hauv qab!

txoj cai!

sab laug!

saum toj no!

Popovers

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

Bootstrap tau tsim nrog Preboot , qhov qhib-qhov pob ntawm mixins thiab hloov pauv los siv ua ke nrog Less , CSS preprocessor rau kev txhim kho lub vev xaib sai thiab yooj yim dua.

Tshawb xyuas seb peb siv Preboot hauv Bootstrap li cas thiab koj tuaj yeem siv nws li cas yog tias koj xaiv khiav tsawg dua ntawm koj qhov project tom ntej.

Yuav siv li cas

Siv qhov kev xaiv no los ua kom tag nrho siv Bootstrap's Less variables, mixins, thiab zes hauv CSS ntawm javascript hauv koj tus browser.

<link rel = "stylesheet/less" href = "tsawg/bootstrap.less" media = "tag nrho" />    
<script src = "js/less-1.1.3.min.js" ></script>

Tsis hnov qhov .js daws? Sim tsawg Mac app lossis siv Node.js los sau thaum koj xa koj cov lej.

Dab tsi suav nrog

Nov yog qee qhov tseem ceeb ntawm qhov muaj nyob hauv Twitter Bootstrap ua ib feem ntawm Bootstrap. Lub taub hau mus rau lub vev xaib Bootstrap lossis Github qhov project nplooj ntawv rub tawm thiab kawm ntxiv.

Hloov pauv

Qhov sib txawv hauv Less yog qhov zoo meej rau kev tswj hwm thiab hloov kho koj CSS mob taub hau dawb. Thaum koj xav hloov tus nqi xim lossis tus nqi nquag siv, hloov kho nws hauv ib qho chaw thiab koj tau teeb tsa.

// Links
@linkColor : #8b59c2;         
@linkColorHover :     tsaus ntuj ( @linkColor , 10 ); 
 
// Grey
@dub : #000;             
@greyDark :           lighten ( @black , 25 % ); 
@grey :               lighten ( @black , 50 % ); 
@greyLight :          lighten ( @black , 70 % ); 
@greyLighter :        lighten ( @black , 90 % ); 
@white : #ff;             
 
// Xim Xim
@blue : #08b5fb;              
@ntsuab : #46a546;             
@red : #9d261d;               
@yellow : #ffc40d;            
@orange : #f89406;            
@pink : #c3325f;              
@purple : #7a43b6;            
 
// Daim phiaj xwm txheej
@basefont : 13 px ;          
@pib : 18px ;

Kev tawm tswv yim

Tsawg dua kuj tseem muab lwm hom kev tawm tswv yim ntxiv rau CSS cov lus qhia ib txwm muaj /* ... */.

// Qhov no yog ib qho lus qhia
/* Qhov no kuj yog ib qho kev tawm tswv yim */

Mixing up the wazoo

Mixins yog qhov pib suav nrog lossis ib feem rau CSS, tso cai rau koj los ua ke ib qho thaiv ntawm cov lej rau hauv ib qho. Lawv zoo heev rau cov neeg muag khoom ua ntej cov khoom xws li box-shadow, cross-browser gradients, font stacks, thiab ntau dua. Hauv qab no yog ib qho piv txwv ntawm cov mixins uas suav nrog Bootstrap.

Font pawg

#font {
  . shorthand ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - loj : @size ; 
    font - luj : @weight ; 
    kab - qhov siab : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - tsev neeg : "Helvetica Neue" , Helvetica , Arial , sans - serif ;   
    font - loj : @size ; 
    font - luj : @weight ; 
    kab - qhov siab : @lineHeight ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - tsev neeg : "Georgia" , Times New Roman , Times , sans - serif ;     
    font - loj : @size ; 
    font - luj : @weight ; 
    kab - qhov siab : @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    font - tsev neeg : "Monaco" , Courier Tshiab , monospace ;   
    font - loj : @size ; 
    font - luj : @weight ; 
    kab - qhov siab : @lineHeight ; 
  }
}

Gradints

#gradient {
  . kab rov tav ( @startColor : #555, @endColor: #333) { 
    tom qab - xim : @endColor ; 
    keeb kwm yav dhau - rov ua dua : rov ua dua - x ;
    background - duab : - khtml - gradient ( linear , sab laug saum toj , sab xis saum , los ntawm ( @startColor ), mus rau ( @endColor )); // Konqueror   
    background - duab : - moz - linear - gradient ( s laug , @startColor , @endColor ); // FWV 3.6+    
    background - duab : - ms - linear - gradient ( sab laug , @startColor , @endColor ); // IB 10    
    keeb kwm yav dhau - duab : - webkit - gradient ( linear , sab laug , sab xis saum toj , xim - nres ( 0 %, @startColor ), xim - nres ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    background - duab : - webkit - linear - gradient ( s laug , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    background - duab : - o - linear - gradient ( s laug , @startColor , @endColor ); // Opera 11.10    
    background - duab : linear - gradient ( sab laug , @startColor , @endColor ); // Le standard   
  }
  . ntsug ( @startColor : #555, @endColor: #333) { 
    tom qab - xim : @endColor ; 
    keeb kwm yav dhau - rov ua dua : rov ua dua - x ;
    keeb kwm yav dhau - duab : - khtml - gradient ( linear , sab laug saum toj , sab laug hauv qab , los ntawm ( @startColor ), mus rau ( @endColor )); // Konqueror   
    background - duab : - moz - linear - gradient ( @startColor , @endColor ); // FWV 3.6+   
    background - duab : - ms - linear - gradient ( @startColor , @endColor ); // IB 10   
    keeb kwm yav dhau - duab : - webkit - gradient ( linear , sab laug saum toj , sab laug hauv qab , xim - nres ( 0 %, @startColor ), xim - nres ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    background - duab : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    background - duab : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10   
    background - duab : linear - gradient ( @startColor , @endColor ); // Tus qauv  
  }
  . directional ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . ntsug - peb - xim ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  }
}

Kev ua haujlwm thiab kab sib chaws

Tau txais kev zoo nkauj thiab ua qee qhov kev ua lej los tsim kom muaj kev hloov pauv thiab muaj zog sib xyaw zoo li cov hauv qab no.

// Griditude
@gridKawm : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Grid System
. thawv {
  dav : @siteWidth ; 
  npoo : 0 auto ;.  
  . clearfix ();
}
. columns ( @columnSpan : 1 ) {  
  dav : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. offset ( @columnOffset : 1 ) {  
  margin - laug : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}

Bootstrap

Bootstrap, los ntawm Twitter

Hotlink lub CSS

Siv nws nrog tsawg

Fork ntawm GitHub

Txog Bootstrap Luv keeb kwm, kev txhawb nqa browser, thiab ntau dua

Keeb kwm

Kev them nyiaj yug browser

Dab tsi suav nrog

Grid system Pob zeb tus qauv 940px lossis yob koj tus kheej

Default daim phiaj

Piv txwv daim phiaj markup

Offsetting kab

Layouts Basic templates los tsim webpages

Tsau layout

Cov dej layout

Typography Headings, kab lus, cov npe, thiab lwm yam inline hom ntsiab

Headings & luam

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

Piv txwv lub taub hau muaj sub-heading…

Lwm yam. cov ntsiab lus

Thaum siv

Ua kom pom tseeb hauv ib nqe lus

Chaw nyob

Cov ntawv luv

Blockquotes

Yuav ua li cas hais

Cov npe

Unordered<ul>

Tsis zoo li<ul.unstyled>

Txiav txim<ol>

Kev piav qhiadl

Tables Rau, koj twv nws, cov ntaub ntawv tabular

Tsev rooj

Piv txwv li: Default table styles

Piv txwv li: Zebra-striped

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

Cov ntawv

Cov qauv qub

Cov ntawv sib dhos

Khawm

Piv txwv khawm

Hloov qhov ntau thiab tsawg

Lub xeev tsis taus

Txuas

Khawm

Kev taw qhia

Tsau topbar

Lub npe qhov project

Nws yog dab tsi

Customizable

Dropdowns suav nrog

Tabs thiab tshuaj

Pagination

Alerts & Errors Styles rau kev ua tiav, ceeb toom, thiab cov lus yuam kev lossis kev ceeb toom

Kev ceeb toom yooj yim

Thaiv cov lus

Popovers Cheebtsam rau kev nthuav qhia cov ntsiab lus hauv modals, tooltips, thiab popovers

Cov qauv

Modal Heading

Cov Lus Qhia

Popovers

Popover Title

Siv Bootstrap nrog Tsawg Supercharge koj CSS nrog kev sib txawv, mixins, thiab ua haujlwm

Yuav siv li cas

Dab tsi suav nrog

Hloov pauv

Kev tawm tswv yim

Mixing up the wazoo

Font pawg

Gradints

Kev ua haujlwm thiab kab sib chaws

Unordered`<ul>`

Tsis zoo li`<ul.unstyled>`

Txiav txim`<ol>`

Kev piav qhia`dl`