Grid a wɔde ahyɛ mu

Default grid nhyehyɛe a wɔde ama sɛ Bootstrap fã no yɛ 940px trɛw 16-column grid. Ɛyɛ 960 grid nhyehyɛe a agye din no dɛ, nanso enni margin/padding foforo a ɛwɔ benkum ne nifa so.

Nhwɛso grid markup

Sɛnea wɔakyerɛ wɔ ha no, wobetumi ayɛ nhyehyɛe titiriw bi a "adum" abien, emu biara trɛw fapem adum 16 a yɛkyerɛkyerɛɛ mu sɛ yɛn grid nhyehyɛe no fã no dodow bi mu. Hwɛ nhwɛso ahorow a ɛwɔ ase hɔ no na woahu nsakrae pii.

<div adesuakuw="row"> adesuakuw = "row" >
  <div adesuakuw = "span6 nkyerɛwde" > 
    ...
  </div> no
  <div adesuakuw = "span10 nkyerɛwde" > 
    ...
  </div> no
</div> no

Wɔasiesie nhyehyɛe

Mfitiaseɛ 940px trɛw, mfimfini container nhyehyɛɛ ma ɛkame ayɛ sɛ site anaa kratafa biara.

<nipadua>
  <div adesuakuw = "adekorabea" > 
    ...
  </div> no
</nipadua>

Nsu nhyehyɛe

Nsu anaa nsu kratafa nhyehyɛe a ɛyɛ mmerɛw a ɛwɔ min- ne max-trɛw ne benkum so afã bi. Ɔkɛseɛ ma apps.

<nipadua>
  <div class = "ahina-nsuo" > 
    <div adesuakuw = "afã" > 
      ...
    </div> no
    <div class = "nsɛm a ɛwɔ mu" > 
      ...
    </div> no
  </div> no
</nipadua>

Nsɛmti ne nea wɔakyerɛw

Typographic hierarchy a ɛyɛ gyinapɛn a wɔde hyehyɛ wo wɛbsaet nkratafa.

h1. Asɛmti 1

h2. Asɛmti 2

h3. Asɛmti 3

h4. Asɛmti 4

h5. Asɛmti 5

h6. Asɛmti 6

Nhwɛso nkyekyem

Nullam quis risus eget urna mollis a ɛyɛ fɛ a ɛyɛ fɛ a ɛyɛ fɛ. Cum sociis natoque penatibus ne magnis awo montes, nascetur fɛwdi mus. Nullam id dolor id nibh ultricies kar a wɔde di dwuma wɔ ɔkwan a ɛfata so.

Nhwɛsoɔ asɛmti Wɔ asɛmti ketewa...

Wubetumi nso de nsɛmti nketewa aka <strong>ne ho<em>

Nneɛma ahorow. nneɛma a ɛwɔ mu

Fa nsɛm a wosi so dua, address ahorow, & nsɛmfua ntiantiaa a wɔde di dwuma

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

Bere a ɛsɛ sɛ wɔde di dwuma

Ɛsɛ sɛ wɔde nkyerɛwde a wɔde si so dua ( <strong>ne <em>) di dwuma de nsonsonoe a wotumi hu wɔ asɛmfua anaa kasasin bi ne nea atwa ho ahyia no ntam ka ho. Fa di dwuma ma <strong>plain dedaw adwene ne slick adwene ne titles.<em>

Si so dua wɔ nkyekyɛm bi mu

Fusce dapibus , tellus ac cursus commodo , tortor mauris aduru a wɔde yɛ aduan nibh , ut aduru a wɔde yɛ aduru a wɔde yɛ aduru a wɔde yɛ aduan a ɛyɛ mmerɛw sɛ wobɛtra ase amet risus. Maecenas faucibus mollis a ɛwɔ ntam no. Nulla vitae elit libero, a ɛyɛ aduru a wɔde di dwuma wɔ ɔkwan a ɛfata so.

Address ahorow

Wɔde addresselement no di dwuma ma—woasusuw ho!—address ahorow. Sɛnea ɛte ni:

795
Folsom Ave, Suite 600
San Francisco, CA 94107 Kr
: (123)

Hyɛ no nsow: Ɛsɛ sɛ nkyerɛwde biara a ɛwɔ an mu addressno de nkyerɛwde-break ( <br />) ba awiei na ama wɔatumi asiesie emu nsɛm no yiye sɛnea wɔkenkan wɔ asetra ankasa mu a wɔmfa ɔkwan biara a wɔfa so yɛ no nni dwuma.

Nsɛmfua a wɔatwa no tiaa

Sɛ wopɛ nsɛmfua ntiantiaa ne nsɛmfua a wɔatwa no tiaa a, fa abbrtag ( acronymwɔagyae wɔ HTML5 mu ). Fa nkyerɛwde tiawa no hyɛ tag no mu na fa asɛmti bi si hɔ ma edin mũ no nyinaa.

Nsɛm a wɔde siw ano

<blockquote> <p> <cite>

Hwɛ hu sɛ wobɛkyekyere wo blockquoteho paragraphne citetag ahorow. Sɛ worefa fibea bi aka a, fa citeelement no di dwuma. CSS no de em dash (—) bɛhyɛ edin bi anim ankasa.

Lorem ipsum dolor tena amet, consectetur adipisicing elit, sed yɛ eiusmod bere tiaa mu incididunt ut adwuma ne dolore magna aliqua...

Ɔbenfo Julius Hibbert na ɔkyerɛwee

Wɔnhyɛ da<ul>

• Jeremy Bixby na ɔkyerɛwee
• Robert Dezure na ɔkyerɛwee
• Josh Washington na ɔkyerɛwee
• Anton Capresi na ɔkyerɛwee
• Me Kuw no Mufo
  • George Castanza na ɔkyerɛwee
  • Jerry Seinfeld na ɔkyerɛwee
  • Cosmo Kramer a ɔyɛ ɔkyerɛkyerɛfo
  • Elaine Bennis a ɔyɛ ɔkyerɛwfo
  • Newman a ɔyɛ ɔkyerɛwfo
• Yohane Yakob
• Paul Pierce na ɔkyerɛwee
• Kevin Garnett a ɔyɛ ɔkyerɛwfo

Wɔannwene no<ul.unstyled>

• Jeremy Bixby na ɔkyerɛwee
• Robert Dezure na ɔkyerɛwee
• Josh Washington na ɔkyerɛwee
• Anton Capresi na ɔkyerɛwee
• Me Kuw no Mufo
  • George Castanza na ɔkyerɛwee
  • Jerry Seinfeld na ɔkyerɛwee
  • Cosmo Kramer a ɔyɛ ɔkyerɛkyerɛfo
  • Elaine Bennis a ɔyɛ ɔkyerɛwfo
  • Newman a ɔyɛ ɔkyerɛwfo
• Yohane Yakob
• Paul Pierce na ɔkyerɛwee
• Kevin Garnett a ɔyɛ ɔkyerɛwfo

Wɔahyɛ sɛ<ol>

1. Jeremy Bixby na ɔkyerɛwee
2. Robert Dezure na ɔkyerɛwee
3. Josh Washington na ɔkyerɛwee
4. Anton Capresi na ɔkyerɛwee
5. Me Kuw no Mufo
   1. George Castanza na ɔkyerɛwee
   2. Jerry Seinfeld na ɔkyerɛwee
   3. Cosmo Kramer a ɔyɛ ɔkyerɛkyerɛfo
   4. Elaine Bennis a ɔyɛ ɔkyerɛwfo
   5. Newman a ɔyɛ ɔkyerɛwfo
6. Yohane Yakob
7. Paul Pierce na ɔkyerɛwee
8. Kevin Garnett a ɔyɛ ɔkyerɛwfo

Nkyerɛmudl

Nkyerɛkyerɛmu a wɔahyehyɛ

Nkyerɛkyerɛmu a wɔahyehyɛ no yɛ pɛpɛɛpɛ ma nsɛmfua nkyerɛase.

Euismod ho asɛm

Vestibulum id ligula porta felis euismod awotwaa mu nsuo a ɛwɔ akyi berɛmo mu.

Donec id elit a ɛnyɛ mi porta gravida wɔ eget metus.

Malesuada a ɛwɔ porta

Etiam porta sem ɔbarima a ɔyɛ ɔbarima a ɔyɛ ɔbarima.

Apon a wɔde si so

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

Tables yɛ kɛse —ma nneɛma pii. Nanso, table akɛse hia markup dɔ kakra na ama ayɛ nea mfaso wɔ so, a wotumi sesa, na wotumi kenkan (wɔ code level no so). Afotusɛm kakraa bi a ɛbɛboa ni.

Bere nyinaa fa wo column headers no kyekyere sɛnea theadɛbɛyɛ a hierarchy bɛyɛ thead> tr> th.

Te sɛ column headers no, ɛsɛ sɛ wode wo table no nipadua mu nsɛm nyinaa kyekyere a tbodyenti wo hierarchy no yɛ tbody> tr> td.

Nhwɛso: Default table styles

Wɔbɛyɛ tables nyinaa styled automatically a borders a ɛho hia nkutoo na ama wɔatumi akenkan na wɔakura nhyehyɛe mu. Ɛho nhia sɛ wode adesua anaa su afoforo bɛka ho.

# .	Fie din	Abusuadin	Kasa
1. 1.	Bi	Baako	Borɔfo
2. 2.	Joe	Sixpack a wɔde hyɛ mu	Borɔfo
3. 3	Stu	Dent	Mmarahyɛ Bagua

<table class="pon a wɔtaa de di dwuma"> class = "pon a wɔtaa de di dwuma" >
  ...
</table> no

Nhwɛso: Ɔsebɔ-a ɛyɛ nsensanee

Nya wo pon ahorow no ho fɛfɛɛfɛ kakra denam zebra-striping a wode bɛka ho no so —fa .zebra-stripedadesuakuw no ka ho ara kwa.

# .	Fie din	Abusuadin	Kasa
1. 1.	Bi	Baako	Borɔfo
2. 2.	Joe	Sixpack a wɔde hyɛ mu	Borɔfo
3. 3	Stu	Dent	Mmarahyɛ Bagua

<table class="pon a wɔtaa de di dwuma ɔsebɔ-striped"> class = "pon a wɔtaa de di dwuma ɔsebɔ-striped" >
...
</table> no

Nhwɛso: Ɔsebɔ-a ɛyɛ nsensanee w/ TableSorter.js

Sɛ yɛfa nhwɛsoɔ a atwam no a, yɛma yɛn tables no mfasoɔ tu mpɔn denam sorting dwumadie a yɛde ma denam jQuery ne Tablesorter plugin no so. Klik kɔla biara atiri so na sesa sɛnea wɔahyehyɛ no.

# .	Fie din	Abusuadin	Kasa
1. 1.	Wo	Baako	Borɔfo
2. 2.	Joe	Sixpack a wɔde hyɛ mu	Borɔfo
3. 3	Stu	Dent	Mmarahyɛ Bagua

<script type="nkyerɛwee/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "nkyerɛwee/javascript" src = "js/jasɛmmisa/jquery.tablesorter.min.js" ></script> 
<script type = "nkyerɛwee/javascript" > 
  $ ( krataa ). ayɛ krado ( adwuma () { . 
    $ ( "table#sortTableNhwɛso" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<table class = "pon a wɔtaa de di dwuma ɔsebɔ-striped" > 
  ...
</table> no

Default ahorow a wɔde yɛ nneɛma

Wɔama nkrataa no nyinaa default styles a wɔde bɛkyerɛ wɔ ɔkwan a wotumi kenkan na wotumi sesa so. Wɔde nsɛm a wɔde hyɛ mu, nsɛm a wɔahyehyɛ a wɔpaw, mmeae a wɔkyerɛw nsɛm, radio bɔtn ne nnaka a wɔde hyɛ mu, ne bɔtn ahorow ama.

Nhwɛso form anansesɛm

X-Nsɛm a Wɔde Kyerɛw Nsɛm Kɛse

Yi ho

1. 1. 2. 2. 3. 3 4. 4. 5. 5

Yi ho

1. 1. 2. 2. 3. 3 4. 4. 5. 5

Nsɛm a Wɔde Kyerɛw Nsɛm a Wontumi Nsiesie

Ebinom So Bo wɔ Ha

Input a Wɔayɛ no Adwuma

X-Nsɛm a Wɔde Kyerɛw Nsɛm Kɛse

Mmoa nkyerɛwee no fã ketewaa bi

Nhwɛso form anansesɛm

Nsɛm a Wɔakyerɛw Adi Kan

@

Nhwehwɛmu Adaka a Wɔadi Kan Ahwɛ

Checkbox a Wɔde Aka Ho

Fael a Wɔde Hyehyɛ Mu

Nhwɛso form anansesɛm

Kyerɛw Nneɛma a Wobɛpaw

• Ɔkwan a edi kan ne eyi ne ɛno —hwɛ hu sɛ wode nea enti a ɛyɛ kɛse no bɛka ho
• Wobetumi nso ahwɛ ɔkwan a ɛto so abien no na wɔde ahyɛ kratasin no aba mu
• Wobetumi ahwɛ ɔkwan a ɛto so abiɛsa no nso—yiw, woasusuw ho—na wɔde aka kratasin no aba ho
• Wontumi nhwɛ ɔkwan a ɛto so anan no sɛnea wɔagyae no.

Hyɛ no nsow: Labels atwa nneɛma a wubetumi apaw nyinaa ho ahyia ama mmeae akɛse a wobɛkyere ne kratasin a wotumi de di dwuma kɛse.

Date a Wɔde Di Dwuma

kɔ Wɔakyerɛ mmere nyinaa sɛ Pacific Standard Time (GMT -08:00).

Textarea a wɔde kyerɛw nsɛm

Block of help text de kyerɛkyerɛ afuw a ɛwɔ atifi hɔ no mu sɛ ɛho hia a.

Kyerɛw Nneɛma a Wobɛpaw

• Ɔkwan a edi kan ne eyi ne ɛno —hwɛ hu sɛ wode nea enti a ɛyɛ kɛse no bɛka ho
• Wobetumi nso ahwɛ ɔkwan a ɛto so abien no na wɔde ahyɛ kratasin no aba mu

Fa Nsakrae no Sie Twam

Nkrataa a wɔaboaboa ano

Fa ka .form-stackedwo form no HTML ho na wobɛnya labels wɔ wɔn fields atifi sen sɛ ɛbɛkɔ wɔn benkum so. Eyi yɛ adwuma yiye sɛ wo nkrataa no yɛ tiaa anaasɛ wowɔ nkyerɛwde abien a wɔde hyɛ mu ma nkrataa a emu yɛ duru a.

Nhwɛso form anansesɛm

X-Nsɛm a Wɔde Kyerɛw Nsɛm Kɛse

Yi ho

1. 1. 2. 2. 3. 3 4. 4. 5. 5

Nhwɛso form anansesɛm

Kyerɛw Nneɛma a Wobɛpaw

• Ɔkwan a edi kan ne eyi ne ɛno —hwɛ hu sɛ wode nea enti a ɛyɛ kɛse no bɛka ho
• Wobetumi nso ahwɛ ɔkwan a ɛto so abien no na wɔde ahyɛ kratasin no aba mu

Hyɛ no nsow: Labels atwa nneɛma a wubetumi apaw nyinaa ho ahyia ama mmeae akɛse a wobɛkyere ne kratasin a wotumi de di dwuma kɛse.

Fa Nsakrae no Sie Twam

Nsɛmma nhoma no

Sɛ́ nhyiam no, wɔde bɔton di dwuma ma nneyɛe bere a wɔde link ahorow di dwuma ma nneɛma. Sɛ nhwɛso no, "Twe" betumi ayɛ bɔtn na "nnansa yi dwumadi" betumi ayɛ link.

Buttons nyinaa default yɛ light gray style, nanso blue .primaryclass wɔ hɔ. Plus, rolling w’ankasa styles yɛ mmerɛw peasy.

Nhwɛsode ahorow a wɔde yɛ nneɛma

Button styles betumi adi dwuma wɔ biribiara a wɔde adi .btndwuma no so. Mpɛn pii no wobɛpɛ sɛ wode eyinom di dwuma wɔ a, button, ne nneɛma a wɔpaw nkutoo inputso. Sɛnea ɛte ni:

Fa akɛse a ɛsesa

Fancy akɛse anaa nketewa buttons? Nya wɔ ho!

Tebea a wɔadi dɛm

Sɛ wopɛ button ahorow a ɛnyɛ adwuma anaasɛ app no ​​agyae esiane biribi anaa biribi foforo nti a, fa tebea a wɔagyae no di dwuma. Ɛno yɛ .disabledma links ne :disabledma buttonelements.

Nkitahodi ahorow

Nsɛmma nhoma no

Dɛn ne no

Yɛn topbar yɛ fixed bar a ɛwɔ wɛbsaet bi ahyɛnsode anaa din, akwankyerɛ titiriw, ne nhwehwɛmu kratasin.

Wobetumi ayɛ no sɛnea wɔpɛ

Nneɛma a ɛwɔ mu nyinaa, ne topbar no nyinaa nso, yɛ nea wopɛ. Wubetumi apaw sɛ wode logo/din, nav, search, ne nav a ɛto so abien bɛka ho—anaasɛ nea wɔaka abom biara.

Dropdowns ka ho

Sɛ́ navigation titiriw no fã no, yɛde tumi a ɛbɛma woatumi de dropdowns aka wo nav no ho aka ho. Hwɛ secondary nav a ɛwɔ atifi hɔ (right aligned) no na hwɛ sɛnea wɔayɛ no.

Tabs ne pills a wɔde di dwuma

Yɛ akwantuo a ɛtɔ so mmienu a ɛnyɛ den a wode ul. Fa tabs anaa pills sesa denam adesuakuw a ɛfata a wode bɛka ho no so.

Ɔkɛseɛ ma nsɛm no afã nketewa te sɛ yɛn akontaabu nhyehyɛe nkratafa ne ɔdefo bere nhyehyɛe ma toggling ntam nkratafa a ɛte sɛ nsɛm. Wobetumi anya wɔ tabbed anaa pill ahorow mu.

• Fie
• Ho asɛm
• Nkrasɛm ahorow
• Nsiesiei ahorow
• Di nkutaho

<ul adesuakuw="tabs"> adesuakuw = "tabs" >
  <li adesuakuw = "adwumayɛ" ><a href = "" > Ofie </a></li>  
  <li><a href = "" > Nsɛm a ɛfa ho </a></li> 
  <li><a href = "" > Nkrasɛm </a></li> 
  <li><a href = "" > Nsiesiei </a></li> 
  <li><a href = "" > Nkitahodi </a></li> 
</ul>

• Fie
• Ho asɛm
• Nkrasɛm ahorow
• Nsiesiei ahorow
• Di nkutaho

<ul class="aduru a wɔde yɛ nnuru"> class = "aduru a wɔde yɛ nnuru" >
  <li adesuakuw = "adwumayɛ" ><a href = "" > Ofie </a></li>  
  <li><a href = "" > Nsɛm a ɛfa ho </a></li> 
  <li><a href = "" > Nkrasɛm </a></li> 
  <li><a href = "" > Nsiesiei </a></li> 
  <li><a href = "" > Nkitahodi </a></li> 
</ul>

Nkratafa a wɔde kyerɛw nsɛm

Ultra simplistic na minimally styled pagination a Rdio na ɛde honhom kaa no. Block kɛse no yɛ den sɛ wobɛpa ho kyɛw, ɛnyɛ den sɛ wobɛsesa, na ɛma mmeae akɛse a wobɛbɔ.

<div class="kratafa a wɔde kyerɛw nsɛm"> class = "kratafa" >
  <ul> no
    <li class = "a wɔadi kan ayɛ adwuma" ><a href = "" > ← Nea atwam </a></li>  
    <li adesuakuw = "adwumayɛ" ><a href = "" > 1 </a></li>  
    <li><a href = "" > 2 </a></li> na ɛwɔ hɔ 
    <li><a href = "" > 3 </a></li> na ɛwɔ hɔ 
    <li><a href = "" > 4 ​​</a></li> na ɛwɔ hɔ 
    <li><a href = "" > 5 </a></li> na ɛwɔ hɔ 
    <li class = "nea edi hɔ" ><a href = "" > Nea edi hɔ → </a></li> na ɛwɔ hɔ  
  </ul>
</div> no

Kɔkɔbɔ atitiriw

Nkrasɛm a ɛwɔ ɔfa biako a wɔde si adeyɛ bi huammɔdi, huammɔdi a ebetumi aba, anaa nkonimdi so dua. Mfaso wɔ so titiriw ma nkrataa ahorow.

Siw nkrasɛm ano

Wɔ nkrasɛm a ɛhwehwɛ sɛ wɔkyerɛkyerɛ mu kakra no, yɛwɔ nkyekyɛm kwan so kɔkɔbɔ ahorow. Eyinom yɛ nea eye ma mfomso nkrasɛm atenten a wɔde bubbling, kɔkɔbɔ a wɔde bɔ obi a ɔde di dwuma wɔ adeyɛ bi a ɛda so ara wɔ hɔ ho, anaasɛ nsɛm a wɔde bɛma kɛkɛ de asi so dua kɛse wɔ kratafa no so.

Modal ahorow a wɔde di dwuma

Modals —nkɔmmɔbɔ anaa hann nnaka —yɛ papa ma nsɛm a ɛfa ho nneyɛe wɔ tebea horow a ɛho hia sɛ wɔhwɛ akyi nsɛm a ɛfa ho no so.

Popovers a wɔde wɔn ho hyɛ mu

Fa popovers di dwuma fa nsɛm a ɛwɔ ase no ma kratafa bi a ennya nhyehyɛe no so nkɛntɛnso.

Wɔde Preboot , a ɛyɛ open-source pack a ɛwɔ mixins ne variables a wɔde bɛka ho ne Less , CSS preprocessor a ɛma wɛb nkɔsoɔ ntɛmntɛm na ɛyɛ mmerɛw na ɛkyekyeree Bootstrap.

Hwɛ sɛnea yɛde Preboot dii dwuma wɔ Bootstrap mu ne sɛnea wubetumi de adi dwuma sɛ wopaw sɛ wobɛtu Less wɔ wo adwuma a edi hɔ no so a.

Sɛnea wɔde bedi dwuma

Fa saa nhyehyɛe yi di dwuma fa Bootstrap Less variables, mixins, ne nesting a ɛwɔ CSS mu no di dwuma yiye denam javascript so wɔ wo browser no mu.

<link rel="stylesheet/less" type="nkyerɛwee/css" href="less/bootstrap.less" media="ne nyinaa" /> rel = "stylesheet/less" type = "nkyerɛwee/css" href = "less/bootstrap.less" media = "ne nyinaa" />    
<script type = "nkyerɛwee/javascript" src = "js/less-1.0.41.min.js" ></script>  

Wonte .js ano aduru no nka? Sɔ Less Mac app no ​​hwɛ anaa fa Node.js boaboa ano bere a wode wo koodu no reyɛ adwuma no.

Nea ɛka ho

Nneɛma atitiriw a ɛwɔ nea ɛka Twitter Bootstrap ho sɛ Bootstrap fã no bi ni. Fa w’ani kyerɛ Bootstrap wɛbsaet anaa Github adwuma krataafa no so na twe na sua pii.

Kɔla ahorow a ɛsakra

Variables a ɛwɔ Less mu no yɛ pɛpɛɛpɛ ma wo CSS tiyɛ a ɛnyɛ yaw a wobɛhwɛ so na woayɛ no foforo. Sɛ wopɛ sɛ wosakra kɔla botae anaa botae bi a wɔtaa de di dwuma a, yɛ no foforo wɔ beae biako na woasiesie.

// Nkitahodi ahorow
@linkKɔla : #8b59c2;         
@linkColorHover :     sum ( @linkKɔla , 10 ); 
// Nneɛma a ɛyɛ fitaa
@abibifo : #000;             
@grayDark :           hann ( @ tuntum , 25 %); 
@gray :               yɛ hare ( @ tuntum , 50 %); 
@grayLight :          yɛ hare ( @ tuntum , 70 %); 
@grayLighter : ma ɛyɛ        hare ( @ tuntum , 90 %); 
@fitaa : #fff;             
// Accent Kɔla ahorow
@blue : #08b5fb na ɛyɛ fɛ yiye;              
@a ɛyɛ ahabammono : #46a546;             
@kɔkɔɔ : #9d261d;               
@kɔla kɔkɔɔ : #ffc40d;            
@orange : #f89406 na ɛwɔ hɔ;            
@pink : #c3325f na ɛyɛ fɛ;              
@kɔkɔɔ : #7a43b6;            
// Mfitiaseɛ
@gyinabea : 20px ;          

Nsɛm a wɔka kyerɛ

Less nso de ɔkwan foforo a wɔfa so ka nsɛm ho ma de ka CSS no /* ... */syntax a ɛyɛ daa no ho.

// Eyi yɛ nsɛm a wɔka
/* Eyi nso yɛ nsɛm a wɔka */

Mixins kɔ wazoo no so

Mixins yɛ titiriw a ɛka ho anaasɛ ɛyɛ fã bi ma CSS, a ɛma wotumi ka code block bi bom yɛ biako. Wɔyɛ papa ma vendor prefixed properties te sɛ box-shadow, cross-browser gradients, font stacks, ne nea ɛkeka ho. Ase hɔ no yɛ mixins a ɛka Bootstrap ho no ho nhwɛso.

Font ahorow a wɔaboaboa ano

#font { .
  . shorthand ( @mu duru : normal , @size : 14px , @lineHeight : 20px ) {     
    font - kɛse : @ kɛse ; 
    font - mu duru : @ mu duru ; 
    line - sorokɔ : @lineHeight ; 
  } .
  . sans - serif ( @mu duru : normal , @size : 14px , @lineHeight : 20px ) {     
    nkyerɛwde - abusua : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    font - kɛse : @ kɛse ; 
    font - mu duru : @ mu duru ; 
    line - sorokɔ : @lineHeight ; 
  } .
  . serif ( @mu duru : normal , @size : 14px , @lineHeight : 20px ) {     
    font - abusua : "Georgia" , Times New Roman , Nsɛm , sans - serif ;     
    font - kɛse : @ kɛse ; 
    font - mu duru : @ mu duru ; 
    line - sorokɔ : @lineHeight ; 
  } .
  . monospace ( @mu duru : normal , @kɛse : 12px , @lineHeight : 20px ) {     
    font - abusua : "Monaco" , Nkrasɛm Foforo , monospace ;   
    font - kɛse : @ kɛse ; 
    font - mu duru : @ mu duru ; 
    line - sorokɔ : @lineHeight ; 
  } .
} .

Nneɛma a ɛkɔ soro

#gradient { .
  . horizontal ( @fi aseKɔla : #555, @awieɛKɔla: #333) { . 
    akyi - kɔla : @endColor ; 
    akyi - repeat : san - x ;
    akyi - mfonini : - khtml - gradient ( linear , benkum soro , nifa soro , fi ( @startColor ), kosi ( @endColor )); // Konqueror a ɔyɛ ɔbarima   
    akyi - mfonini : -moz - linear - gradient ( benkum , @startColor , @endColor ) ; // FF 3.6+ na ɛwɔ hɔ    
    akyi - mfonini : -ms - linear - gradient ( benkum , @startColor , @endColor ) ; // IE10 na ɛwɔ hɔ    
    akyi - mfonini : - wɛbkit - gradient ( linear , benkum soro , nifa atifi , kɔla - gyinabea ( 0 %, @startColor ), kɔla - gyinabea ( 100 %, @endColor )); // Safari 4+, Chrome 2+ na ɛyɛ adwuma    
    akyi - mfonini : -webkit - linear - gradient ( benkum , @startColor , @endColor ) ; // Safari 5.1 +, Chrome 10 + na ɛyɛ adwuma    
    akyi - mfonini : -o - linear - gradient ( benkum , @startColor , @endColor ) ; // Opera 11.10 na ɛyɛ adwuma    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(fi aseKɔla='%d', awieeɛKɔla='%d', AwieeɛKɔla=1)" , @fi aseɛKɔla , @awieɛKɔla ); // IE8 + na ɛwɔ hɔ  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(fi aseKɔla='%d', awieiKɔla='%d', AwieiKɔla=1)" , @fi aseKɔla , @awieiKɔla )); // IE6 & IE7 na ɛwɔ hɔ 
    akyi - mfonini : linear - gradient ( benkum , @startColor , @endColor ); // Le gyinapɛn   
  } .
  . vertical ( @fifiaseKɔla : #555, @awieiKɔla: #333) { . 
    akyi - kɔla : @endColor ; 
    akyi - repeat : san - x ;
    akyi - mfonini : - khtml - gradient ( linear , benkum atifi , benkum ase , efi ( @startColor ), kosi ( @endColor )); // Konqueror a ɔyɛ ɔbarima   
    akyi - mfonini : -moz - linear - gradient ( @fifiaseKɔla , @ awieiKɔla ); // FF 3.6+ na ɛwɔ hɔ   
    akyi - mfonini : -ms - linear - gradient ( @fi aseKɔla , @awieiKɔla ); // IE10 na ɛwɔ hɔ   
    akyi - mfonini : - wɛbkit - gradient ( linear , benkum soro , benkum ase , kɔla - gyinabea ( 0 %, @startColor ), kɔla - gyinabea ( 100 %, @endColor )); // Safari 4+, Chrome 2+ na ɛyɛ adwuma    
    akyi - mfonini : -webkit - linear - gradient ( @fifiaseKɔla , @ awieiKɔla ); // Safari 5.1 +, Chrome 10 + na ɛyɛ adwuma   
    akyi - mfonini : -o - linear - gradient ( @fifiaseKɔla , @ awieiKɔla ); // Opera 11.10 na ɛyɛ adwuma   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(fi aseKɔla='%d', awieiKɔla='%d', GradientType=0)" , @fi aseKɔla , @awieɛKɔla ); // IE8 + na ɛwɔ hɔ  
    filter : e (%( "progid:DXMfoniniNsakrae.Microsoft.gradient(fi aseKɔla='%d', awieiKɔla='%d', GradientType=0)" , @fi aseKɔla , @awieiKɔla )); // IE6 & IE7 na ɛwɔ hɔ 
    akyi - mfonini : linear - gradient ( @fifiaseKɔla , @awieiKɔla ); // Gyinapɛn no  
  } .
  . akwankyerɛ ( @fi aseKɔla : #555, @awieiKɔla: #333, @deg: 45deg) { 
    ...
  } .
  . gyina hɔ - abiɛsa - kɔla ( @fi aseKɔla : #00b3ee, @midKɔla: #7a43b6, @kɔlaGyina: 0.5, @awieɛKɔla: #c3325f) { 
    ...
  } .
} .

Adwumayɛ ne grid nhyehyɛe

Nya fancy na yɛ akontaabu bi na ama woanya mixins a ɛyɛ mmerɛw na ahoɔden wom te sɛ nea ɛwɔ ase ha no.

// Griditude a ɛwɔ hɔ
@gridNkyekyem ahorow : 16 ;       
@gridKɔla no Trɛw : 40px ;   
@gridGutterTrɛw : 20px ;   
// Grid Nhyehyɛe
. ade a wɔde gu mu { .
  ntrɛwmu : @siteWidth ; 
  margin : 0 a ɛyɛ adwuma ankasa ;  
  . clearfix ();
} .
. nkyerɛwde ahorow ( @columnSpan : 1 ) {  
  ɔyɛkyerɛ : inline ; 
  float : benkum so ;
  width : ( @gridKɔlaTrɛw * @kɔlaSpan ) + ( @gridGutterTrɛw * ( @kɔlaSpan - 1 ));         
  margin - benkum : @gridGutterTrɛw ; 
  &: nea edi kan - abofra { .
    margin - benkum so : 0 ; 
  } .
} .
. offset ( @columnOffset : 1 ) { 1. Ɛyɛ a yɛde yɛn ho to yɛn ho so.  
  margin - benkum : ( @gridKɔlaMtrɛw * @kɔlaOffset ) + ( @gridGutterTrɛw * ( @kɔlaOffset - 1 )) ! ɛho hia ;          
} .