Tinye njikọ CSS

Maka mmalite kacha dị mfe na nke kachasị mfe, detuo snippet a na ibe weebụ gị.

Jiri ya na Obere

Onye na-akwado iji obere? Enweghị nsogbu, naanị mechie repo ma tinye ahịrị ndị a:

Fork na GitHub

Budata, ndụdụ, dọpụta, nsogbu faịlụ na ihe ndị ọzọ site na iji Bootstrap repo gọọmentị na Github.

Akụkọ ihe mere eme

N'ụbọchị mbụ nke Twitter, ndị injinia na-eji ihe fọrọ nke nta ka ọ bụrụ ọbá akwụkwọ ọ bụla ha maara nke ọma iji mezuo ihe achọrọ n'ihu. Bootstrap malitere dị ka azịza nye ihe ịma aka ndị wetara na mmepe mere ngwa ngwa n'oge Twitter Hackweek mbụ.

Site n'enyemaka na nzaghachi nke ọtụtụ ndị injinia na Twitter, Bootstrap etoola nke ukwuu iji gbasaa ọ bụghị naanị ụdị isi, kama ọ bụ ihe mara mma na nke dịgidere n'ihu.

Gụkwuo na dev.twitter.com ›

Nkwado ihe nchọgharị

A na-anwale ma kwado bootstrap na ihe nchọgharị ọgbara ọhụrụ dị ka Chrome, Safari, Internet Explorer na Firefox.

Safari kacha ọhụrụ
Google Chrome kacha ọhụrụ
Firefox 4+
Internet Explorer 7+
Opera 11

Kedu ihe gụnyere

Bootstrap na-abịa zuru oke na CSS achịkọtara, achịkọtabeghị, yana ndebiri ihe atụ.

Faịlụ na-adịchaghị mbụ
CSS chịkọtara nke ọma yana obere
Akwụkwọ ntuziaka ụdị zuru ezu
Nleta ibe akwụkwọ (ihe ndị ọzọ ga-abịa n'oge adịghị anya)

Grid ezighi ezi

Sistemụ grid ndabara enyere dị ka akụkụ nke Bootstrap bụ grid kọlụm 16 obosara 940px. Ọ bụ ụtọ nke sistemu grid 960 na-ewu ewu, mana enweghị oke / padding n'akụkụ aka ekpe na aka nri.

Ọmụmaatụ akara akara

Dịka egosiri n'ebe a, enwere ike ịmepụta okirikiri nhọrọ ukwuu na "ogidi abụọ," nke ọ bụla na-agbakọ ọnụ ọgụgụ nke kọlụm 16 ntọala anyị kọwara dịka akụkụ nke usoro grid anyị. Lee ihe atụ n'okpuru maka ndịiche ọzọ.

<div klas = "ahịrị" > 
  <div klas = "span6 kọlụm" > 
    ...
  </div>
  <div klas = "span10 kọlụm" > 
    ...
  </div>
</div>

1/3

2/3

Kọlụm na-emezigharị

8 nke 4

1/3 na-ewepu 2/3 s

4 nke 4

5 nke 3

10 nke 6

Nhazi edoziri

Ihe ndabara na dị mfe 940px-obosara, okirikiri nhọrọ ukwuu maka naanị webụsaịtị ma ọ bụ ibe ọ bụla nke otu faịlụ nyere <div.container>.

<ahụ>
  <div klas = "container" > 
    ...
  </div>
</ ahu>

Nhazi mmiri mmiri

Nhazi ibe mmiri nke ọzọ, na-agbanwe agbanwe nke nwere obere- na max-obosara yana akụkụ aka ekpe. Ọ dị mma maka ngwa na docs.

<ahụ>
  <div class = "container-fluid" > 
    <div class = " sidebar" > 
      ...
    </div>
    <div class = "ọdịnaya" > 
      ...
    </div>
  </div>
</ ahu>

Isi & oyiri

Ọkọlọtọ typographic ọkwa maka ịhazi ibe weebụ gị.

Ihe niile grid ederede dabere na mgbanwe abụọ pere mpe na faịlụ preboot.less anyị: @basefontna @baseline. Nke mbụ bụ nha font-isi ejiri mee ihe niile na nke abụọ bụ ogologo ahịrị ntọala.

Anyị na-eji mgbanwe ndị ahụ, yana ụfọdụ mgbakọ na mwepụ, iji mepụta oke, paddings, na ogologo ahịrị ụdị anyị niile na ndị ọzọ.

h1. Isi nke 1

h2. Isi nke 2

h3. Isi nke 3

h4. Isi nke 4

h5. Isi nke 5

h6. Isi nke 6

Paragraf ọmụmaatụ

Nullam quis risus eget urna mollis ornare vel eu leo. N'ihi ya, ọ bụ ezie na ọ dị mkpa ka anyị na-eme ihe, na-akpa ọchị. Nullam id dolor id nibh ultricies vehicula ut id elit.

Isi ihe atụ nwere isi-isi…

Ụdị dị iche iche. ihe

Iji nkwusi okwu ike, adreesị, na ndebiri

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

Mgbe iji

Ekwesịrị iji mkpado mesiri ike ( <strong>na <em>) iji gosi mkpa ọzọ ma ọ bụ mesiri okwu ma ọ bụ nkebiokwu metụtara nnomi ya gbara ya gburugburu. Jiri <strong>maka mkpa yana <em>maka nrụgide nrụgide.

Emesiri ike na paragraf

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, a pharetra augue.

Rịba ama: Ọ ka dị mma iji <b>na <i>mkpado na HTML5 na ha ekwesịghị ịkepụta nkwuwa okwu na italic n'otu n'otu (ọ bụ ezie na ọ bụrụ na e nwere ihe ọmụmụ ihe ọzọ, jiri ya). <b>bu n'obi ime ka okwu ma ọ bụ nkebiokwu pụta ìhè n'ebughị ihe dị mkpa ọzọ, ebe ọ <i>na-abụkarị maka olu, okwu teknụzụ, wdg.

Adreesị

A <address>na-eji mmewere ahụ maka ozi kọntaktị maka nna nna ya nso, ma ọ bụ ahụ dum nke ọrụ. Nke a bụ ka ọ dị:

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

Cheta na: Ahịrị ọ bụla dị n'ime <address>ga-ejedebe na nkwụsị ahịrị ( <br />) ma ọ bụ kechie ya na mkpado ngọngọ (dịka ọmụmaatụ <p>) iji hazie ọdịnaya nke ọma.

Ndebiri

Maka ndebiri na mkpọghe okwu, jiri <abbr>mkpado ( <acronym>emebiela na HTML5 ). Tinye mpempe akwụkwọ n'ime mkpado ahụ wee tọọ aha maka aha zuru ezu.

Ihe mgbochi

<blockquote> <p> <small>

Otu esi ekwu okwu

Iji tinye ihe mgbochi , kechie <blockquote>na mkpado. Jiri mmewere gosi isi mmalite gị ma ị ga-enweta em dash n'ihu ya.<p><small><small>—

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer na-eme ka ọ bụrụ ihe na-eme ka ọ bụrụ ihe na-atọ ụtọ.
Dr Julius Hibbert

Ndepụta

Enyereghị iwu`<ul>`

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem na massa
Facilisis na pretium nisl aliquet
Ngwa ngwa ngwa ngwa
- Phasellus iaculis bụ ihe atụ
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat na
Faucibus Porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Ekebeghị ụdị`<ul.unstyled>`

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem na massa
Facilisis na pretium nisl aliquet
Ngwa ngwa ngwa ngwa
- Phasellus iaculis bụ ihe atụ
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat na
Faucibus Porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Enyere iwu`<ol>`

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem na massa
Facilisis na pretium nisl aliquet
Ngwa ngwa ngwa ngwa
Faucibus Porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Nkọwa`dl`

Ndepụta nkọwa: Ndepụta nkọwa zuru oke maka ịkọwa okwu.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Achọpụtaghị m porta gravida na eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

Tebụl ụlọ

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

Tebụl dị mma - maka ọtụtụ ihe. Tebụl ndị mara mma, Otú ọ dị, chọrọ ntakịrị ịhụnanya nrịbama ka ọ bụrụ ihe bara uru, nke a na-atụgharị, na nke a na-agụ (na ọkwa koodu). Nke a bụ ndụmọdụ ole na ole iji nyere aka.

Kechie ndị nkụnye eji isi mee kọlụm gị mgbe niile n'ụdị ọkwa <thead>ahụ bụ <thead>> <tr>> <th>.

Dị ka ndị nkụnye eji isi mee kọlụm, ọdịnaya ahụ dị na tebụl gị niile kwesịrị ka a kechie ya <tbody>ka ndị isi gị wee bụrụ <tbody>> <tr>> <td>.

Ọmụmaatụ: Ụdị tebụl nke emepụtara

A ga-eji naanị oke dị mkpa hazie tebụl niile na-akpaghị aka iji hụ na enwere ike ịgụ na idobe nhazi. Ọ dịghị mkpa itinye mgbakwunye klaasị ma ọ bụ àgwà.

#	Aha mbụ	Aha ikpeazụ	Asụsụ
1	Ụfọdụ	Otu	Bekee
2	Joe	Sixpack	Bekee
3	Stu	Det	Koodu

<tebụl>
  ...
</table>

Ọmụmaatụ: Zebra nwere eriri

Nweta ntakịrị mmasị na tebụl gị site na ịgbakwunye zebra-striping - naanị tinye .zebra-stripedklas ahụ.

#	Aha mbụ	Aha ikpeazụ	Asụsụ
1	Ụfọdụ	Otu	Bekee
2	Joe	Sixpack	Bekee
3	Stu	Det	Koodu

Mara: Zebra-striping bụ nkwalite na-aga n'ihu adịghị maka ihe nchọgharị ochie dị ka IE8 na n'okpuru.

<tebụl klas = "zebra-striped" > 
...
</table>

Ọmụmaatụ: Zebra-striped w/TableSorter.js

N'iji ihe atụ gara aga, anyị na-eme ka uru nke tebụl anyị dịkwuo mma site n'inye ọrụ nhazi site na jQuery na ngwa mgbakwunye Tablesorter . Pịa nkụnye eji isi mee kọlụm ọ bụla ka ịgbanwee ụdị.

#	Aha mbụ	Aha ikpeazụ	Asụsụ
1	Gị	Otu	Bekee
2	Joe	Sixpack	Bekee
3	Stu	Det	Koodu

<script src = "js/jquery/jquery.tablesorter.min.js" >> script> 
<edemede > 
  $ ( ọrụ () { 
    $ ( "okpokoro#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  }
</script>
<tebụl klas = "zebra-striped" > 
  ...
</table>

Ogwe elu edobere

Kedu ihe ọ bụ

Topbar anyị bụ ụlọ mmanya edobere nke nwere akara ma ọ bụ aha webụsaịtị, igodo ụzọ na ụdị ọchụchọ.

Enwere ike ịhazi ya

Ihe niile dị n'ime, yana topbar dum, bụ nhọrọ. Ị nwere ike ịhọrọ itinye akara/aha, igodo, ọchụchọ na ụgbọ mmiri nke abụọ-ma ọ bụ ngwakọta ọ bụla nke ahụ.

Mbudata gụnyere

Dịka akụkụ nke igodo igodo, anyị etinyela ikike ị gbakwunye mkpọda na ụgbọ mmiri gị. Lelee ụgbọ mmiri nke abụọ dị n'elu (dakọtara aka nri) ka ịhụ ka esi eme ya.

Cheta na: Mgbe ị na-eji topbar na ibe ọ bụla, jide n'aka na ị ga-aza ajụjụ maka nkpuchi ọ na-akpata site na ịgbakwunye padding-top: 40px;na faịlụ body.

Taabụ na ọgwụ

Mepụta igodo nsoro dị mfe site na iji a <ul>. Gbanwee n'etiti taabụ ma ọ bụ ọgwụ site na ịgbakwunye klaasị kwesịrị ekwesị.

Ọ dị mma maka obere akụkụ nke ọdịnaya dị ka ibe ntọala akaụntụ anyị yana usoro oge onye ọrụ maka ịtụgharị n'etiti ibe ọdịnaya. Dị na tabbed ma ọ bụ pill ụdị.

<ul klas = "taabụ" > 
  <li class = "ọrụ" ><a href = "#" > Ụlọ </a></li>  
  <li><a href = "#" > Profaịlụ </a></li> 
  <li><a href = "#" > Ozi </a></li> 
  <li><a href = "#" > Ntọala </a></li> 
  <li><a href = "#" > Kọntaktị </a></li> 
</ul>

<ul klas = "ọgwụ" > 
  <li class = "ọrụ" ><a href = "#" > Ụlọ </a></li>  
  <li><a href = "#" > Profaịlụ </a></li> 
  <li><a href = "#" > Ozi </a></li> 
  <li><a href = "#" > Ntọala </a></li> 
  <li><a href = "#" > Kọntaktị </a></li> 
</ul>

Pagination

Pagination dị mfe ma dị ntakịrị nke sitere n'ike mmụọ nsọ Rdio. Nnukwu ngọngọ siri ike ịgbaghara, na-adị mfe ịrị elu, ma na-enye nnukwu mpaghara pịa.

<div klas = "pagination" > 
  <ul>
    <li class = "Agbanyụrụ nke gara aga" ><a href = "#" > ← Nke gara aga </a></li>  
    <li class = "ọrụ" ><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 = "na-esote" ><a href = "#" > Ọzọ → </a></li>  
  </ul>
</div>

Ngosipụta ndị bụ isi

div.alert-message

Ozi otu ahịrị maka igosipụta ọdịda, ọdịda enwere ike, ma ọ bụ ihe ịga nke ọma nke ihe omume. Karịsịa bara uru maka ụdị.

Guacamole dị nsọ! Kachasị mma ịlele onwe gị, ị naghị adị oke mma.

Oh snoo! Gbanwee nke a na nke ahụ wee nwaa ọzọ.

Ị mere nke ọma! Ị gụchara ozi njikere a nke ọma.

Welie isi elu! Nke a bụ njikere chọrọ nlebara anya gị, mana ọ bụghị nnukwu mkpa ugbu a.

Gbochie ozi

div.alert-message.block-message

Maka ozi chọrọ ntakịrị nkọwa, anyị nwere ọkwa ọkwa paragraf. Ndị a zuru oke maka iwepụta ozi njehie dị ogologo, dọọ onye ọrụ aka na ntị maka ihe na-echere, ma ọ bụ naanị iwepụta ozi maka itinyekwu ike na ibe ahụ.

Guacamole dị nsọ! Nke a bụ ịdọ aka ná ntị! Kachasị mma ịlele onwe gị, ị naghị adị oke mma. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel selerisque nisl consectetur et.

Mee ihe a Ma ọ bụ mee nke a

Oh snoo! Ị nwetara mperi! Gbanwee nke a na nke ahụ wee nwaa ọzọ. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Mee ihe a Ma ọ bụ mee nke a

Ị mere nke ọma! Ị gụchara ozi njikere a nke ọma. N'ihi ya, ọ bụ ezie na ọ dị mkpa ka a na-eme ihe nkiri, na-akpa ọchị. Maecenas faucibus mollis interdum.

Mee ihe a Ma ọ bụ mee nke a

Welie isi elu! Nke a bụ njikere chọrọ nlebara anya gị, mana ọ bụghị nnukwu mkpa ugbu a.

Mee ihe a Ma ọ bụ mee nke a

Ụdị ụdị

Modals — dialogs ma ọ bụ igbe ọkụ — dị mma maka omume ọnọdụ n'ọnọdụ ebe ọ dị mkpa ka edobe ọnọdụ ndabere.

Atụmatụ Ngwá Ọrụ

Twipsies bara uru nke ukwuu maka inyere onye ọrụ mgbagwoju anya aka na ịtụ ha aka n'ụzọ ziri ezi.

Lorem ipsum dolar sit amet illo error ipsum veritatis ma ọ bụ na-eme ka perspiciatis bụ voluptas natus illo dị ka odit ma natus consequuntur consequuntur, ma ọ bụ natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. 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 accusantium fugit accusantium accusantium na -arụ ọrụ nke ọma .

n'okpuru!

nri!

aka ekpe!

n'elu!

Popovers

Jiri popovers iji nye ozi subtextual na ibe na-emetụtaghị okirikiri nhọrọ ukwuu.

Ejiri Preboot wuo Bootstrap , ngwugwu ngwakọta na-emepe emepe nke a ga-eji na obere obere , onye na-ebu ụzọ CSS maka mmepe weebụ ngwa ngwa ma dị mfe.

Lelee ka anyị si jiri Preboot na Bootstrap yana otu ị ga-esi jiri ya mee ihe ma ọ bụrụ na ịhọrọ ịgba ọsọ obere na ọrụ ọzọ gị.

Otu esi eji ya

Jiri nhọrọ a mee ihe nke ọma Bootstrap's Less variables, mixins, na nesting na CSS site na javascript na ihe nchọgharị gị.

<njikọ rel = "stylesheet/ less" href = " less/bootstrap.less" media = "niile" />    
<script src = "js/less-1.1.3.min.js" </script>

Enweghị mmetụta ngwọta .js? Gbalịa ngwa Mac obere ma ọ bụ jiri Node.js chịkọta mgbe ị na-ebuga koodu gị.

Kedu ihe gụnyere

Nke a bụ ụfọdụ isi ihe agbakwunyere na Twitter Bootstrap dịka akụkụ nke Bootstrap. Gaa na webụsaịtị Bootstrap ma ọ bụ ibe ọrụ Github ka ibudata ma mụtakwuo.

Mgbanwe

Mgbanwe dị na Less zuru oke maka idowe na imelite isi ọwụwa CSS gị n'efu. Mgbe ịchọrọ ịgbanwe uru agba ma ọ bụ uru a na-ejikarị, melite ya n'otu ebe wee tọọ gị.

// Njikọ
@linkColor : #8b59c2;         
@linkColorHover : gbara     ọchịchịrị ( @linkColor , 10 ); 
 
// Agba
@nwa : #000;             
@grayDark : gbaa           ọkụ ( @ nwa , 25 %); 
@isi awọ : gbaa               ọkụ ( @ nwa , 50 %); 
@greyLight : gbaa          ọkụ ( @ nwa , 70 %); 
@grayLighter : gbaa        ọkụ ( @ nwa , 90 %); 
@ọcha : #ff;             
 
// Agba olu
@acha anụnụ anụnụ : #08b5fb;              
@ akwụkwọ ndụ akwụkwọ ndụ : #46a546 ;             
@ uhie : #9d261d;               
@edo edo : #ffc40d;            
@oroma : #f89406;            
@pink : #c3325f;              
@acha odo odo : #7a43b6;            
 
// grid ntọala
@bashent : 13px ;          
@baseline : 18px ;

Na-aza ajụjụ

Obere na-enyekwa ụdị nkọwa ọzọ na mgbakwunye na /* ... */syntax nkịtị nke CSS.

// Nke a bụ okwu
/* Nke a bụkwa okwu */

Na-agwakọta wazoo

Mixins na-agụnye ma ọ bụ akụkụ maka CSS, na-enye gị ohere ijikọta ngọngọ koodu n'ime otu. Ha dị mma maka ihe ndị na-ere ahịa prefixed dị ka box-shadow, gradients cross-browser, font stacks, na ndị ọzọ. N'okpuru ebe a bụ ihe atụ nke mixins nke etinyere na Bootstrap.

Ụdị mkpụrụedemede

# font {
  . mkpirisi ( @ arọ : nkịtị , @size : 14px , @lineHeight : 20px ) {     
    font - nha : @ size ; 
    font - arọ : @ arọ ; 
    ahịrị - elu : @lineHeight ; 
  }
  . sans - serif ( @ arọ : nkịtị , @size : 14px , @lineHeight : 20px ) {     
    font - ezinụlọ : "Helvetica Neue" , Helvetica , Arial , sans - serif ;   
    font - nha : @ size ; 
    font - arọ : @ arọ ; 
    ahịrị - elu : @lineHeight ; 
  }
  . serif ( @ arọ : nkịtị , @size : 14px , @lineHeight : 20px     ) { 
    font - ezinụlọ : "Georgia" , Times New Roman , Times , sans -      serif ;
    font - nha : @ size ;
    font - arọ : @ arọ ;
    ahịrị - elu : @lineHeight ;
  }
  . monospace ( @ arọ : nkịtị , @ size : 12px , @lineHeight : 20px ) {     
    font - ezinụlọ : "Monaco" , Courier New , monospace ;   
    font - nha : @ size ; 
    font - arọ : @ arọ ; 
    ahịrị - elu : @lineHeight ; 
  }
}

Gradients

#gradient {
  . kehoraizin ( @startColor : #555, @endColor: #333) { 
    ndabere - agba : @endColor ; 
    ndabere - megharịa : kwugharịa - x ;
    ndabere - onyonyo : - khtml - gradient ( linear , n'elu aka ekpe , elu aka nri , site na ( @startColor ), ruo ( @endColor ) );   // Konqueror
    ndabere - onyonyo : - moz - linear - gradient ( aka ekpe , @startColor , @endColor ); // FF 3.6+    
    ndabere - onyonyo : - ms - linear - gradient ( aka ekpe , @startColor , @endColor ); // IE10    
    ndabere - onyonyo : - webkit - gradient ( linear , n'elu aka ekpe , elu aka nri , agba - nkwụsị ( 0 % , @startColor ), agba - nkwụsị ( 100 % , @endColor ));    // Safari 4+, Chrome 2+
    ndabere - onyonyo : - webkit - linear - gradient ( aka ekpe , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    ndabere - onyonyo : - o - linear - gradient ( aka ekpe , @startColor , @endColor );    // Opera 11.10
    ndabere - onyonyo : linear - gradient ( aka ekpe , @startColor , @endColor ); // Le ọkọlọtọ   
  }
  . vetikal ( @startColor : #555, @endColor: #333) { 
    ndabere - agba : @endColor ; 
    ndabere - megharịa : kwugharịa - x ;
    ndabere - onyonyo : - khtml - gradient ( linear , n'elu aka ekpe , ala aka ekpe , site na ( @startColor ), ruo ( @endColor ) ); // Konqueror   
    ndabere - onyonyo : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+   
    ndabere - onyonyo : - ms - linear - gradient ( @startColor , @endColor );   // IE10
    ndabere - oyiyi : - webkit - gradient ( linear , n'elu aka ekpe , aka ekpe , agba - nkwụsị ( 0 % , @startColor ), agba - nkwụsị ( 100 % , @endColor )); // Safari 4+, Chrome 2+    
    ndabere - onyonyo : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    ndabere - onyonyo : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10   
    ndabere - onyonyo : linear - gradient ( @startColor , @endColor ); // Ọkọlọtọ  
  }
  . ntụziaka ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . vetikal - atọ - agba ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  }
}

Sistemụ arụ ọrụ na grid

Nweta ọmarịcha ma mee ụfọdụ mgbakọ na mwepụ iji mepụta ngwakọta na-agbanwe agbanwe ma dị ike dị ka nke dị n'okpuru.

// Griditude
@grid kọlụm : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Sistemụ grid
. akpa {
  obosara : @siteWidth ; 
  oke : 0 akpaaka ;  
  . mkpochapụ ();
}
. kọlụm ( @columnSpan : 1 ) {  
  obosara : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. kwụsịrị ( @columnOffset : 1 ) {  
  oke - aka ekpe : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}

eriri akpụkpọ ụkwụ

Bootstrap, sitere na Twitter

Tinye njikọ CSS

Jiri ya na Obere

Fork na GitHub

Banyere akụkọ mkpirikpi Bootstrap , nkwado ihe nchọgharị, na ndị ọzọ

Akụkọ ihe mere eme

Nkwado ihe nchọgharị

Kedu ihe gụnyere

Sistemụ Grid Gwuo ọkọlọtọ 940px ma ọ bụ tụgharịa nke gị

Grid ezighi ezi

Ọmụmaatụ akara akara

Kọlụm na-emezigharị

Nhazi ndebiri iji mepụta ibe weebụ

Nhazi edoziri

Nhazi mmiri mmiri

Isi akwụkwọ edemede, paragraf, ndepụta na ihe ndị ọzọ ụdị inline

Isi & oyiri

h1. Isi nke 1

h2. Isi nke 2

h3. Isi nke 3

h4. Isi nke 4

h5. Isi nke 5

h6. Isi nke 6

Paragraf ọmụmaatụ

Isi ihe atụ nwere isi-isi…

Ụdị dị iche iche. ihe

Mgbe iji

Emesiri ike na paragraf

Adreesị

Ndebiri

Ihe mgbochi

Otu esi ekwu okwu

Ndepụta

Enyereghị iwu<ul>

Ekebeghị ụdị<ul.unstyled>

Enyere iwu<ol>

Nkọwadl

Tebụlụ Maka, ị chepụtara ya, data tabular

Tebụl ụlọ

Ọmụmaatụ: Ụdị tebụl nke emepụtara

Ọmụmaatụ: Zebra nwere eriri

Ọmụmaatụ: Zebra-striped w/TableSorter.js

Ụdị

Ụdị ndị ezighi ezi

Ụdị ekpokọtara

Bọtịnụ

Bọtịnụ ihe atụ

Nha ọzọ

Ọnọdụ nkwarụ

Njikọ

Bọtịnụ

Nsoro ụzọ

Ogwe elu edobere

Aha oru ngo

Kedu ihe ọ bụ

Enwere ike ịhazi ya

Mbudata gụnyere

Taabụ na ọgwụ

Pagination

Ụdị ọkwa ọkwa na mperi maka ịga nke ọma, ịdọ aka ná ntị na ozi njehie ma ọ bụ ọkwa

Ngosipụta ndị bụ isi

Gbochie ozi

Ngwa popovers maka igosipụta ọdịnaya n'ụdị modal, ndụmọdụ ngwaọrụ na popovers

Ụdị ụdị

Isi Modal

Atụmatụ Ngwá Ọrụ

Popovers

Aha Popover

Iji Bootstrap na obere Supercharge gị CSS nwere mgbanwe, mixins, na ọrụ

Otu esi eji ya

Kedu ihe gụnyere

Mgbanwe

Na-aza ajụjụ

Na-agwakọta wazoo

Ụdị mkpụrụedemede

Gradients

Sistemụ arụ ọrụ na grid

Enyereghị iwu`<ul>`

Ekebeghị ụdị`<ul.unstyled>`

Enyere iwu`<ol>`

Nkọwa`dl`