Tariku

Twitter don fɔlɔw la, ɛntɛrinɛti kalanbagaw tun bɛ baara kɛ ni gafemarayɔrɔ bɛɛ ye, u tun bɛ minnu dɔn walasa ka ɲɛfɛla wajibiyalenw dafa. Bootstrap daminɛna i n’a fɔ jaabi ye gɛlɛyaw la minnu jirala ani yiriwali teliyalen don teliya la Twitter ka Hackweek fɔlɔ kɔnɔ.

Twitter kan ɛntɛrinɛti injiniyɛri caman ka dɛmɛ n’u ka hakilinaw fɛ, Bootstrap yiriwara kosɛbɛ walasa a tɛ dan cogoya jɔnjɔnw dɔrɔn ma, nka a bɛ ɲɛfɛla dilancogo misaliw la minnu ka ɲi kosɛbɛ ani minnu bɛ mɛn.

Aw ye kunnafoni wɛrɛw kalan dev.twitter.com kan ›

Navigatɛri dɛmɛni

Bootstrap bɛ kɔrɔbɔ ani ka dɛmɛ sɔrɔ bi navigatɔrɔnbaw kɔnɔ i n’a fɔ Chrome, Safari, Internet Explorer ani Firefox.

• Safari laban
• Google Chrome laban
• Firefox 4+ ye
• Ɛntɛrinɛti Explorer 7+
• Opera ye 11 ye

Min bɛ a kɔnɔ

Bootstrap bɛ na ni CSS lajɛlen ye, min ma labɛn, ani misali jatebɔlanw.

• .less file fɔlɔw bɛɛ
• CSS min labɛnna ka dafa ani min dɔgɔyara
• Styleguide sɛbɛnw dafalenw
• Misali ɲɛw jatebɔcogo (dɔ wɛrɛw bɛna na sɔɔni)

Grid fɔlɔ

Grid system default min dira Bootstrap kɔnɔ, o ye grid ye min bonya ye 940px ye, 16-column grid. O ye 960 grid system min bɛ fɔ kosɛbɛ, o daji ye, nka ni margin/padding faralen tɛ a kan kinin fɛ ni kinin fɛ.

Misali la, grid markup (jatebɔlan taamasiyɛn).

I n’a fɔ a jiralen bɛ cogo min na yan, layidu jɔnjɔn dɔ bɛ se ka dabɔ ni "kolon" fila ye, u kelen-kelen bɛɛ bɛ jusigilan 16 hakɛ dɔ lamini an ye minnu ɲɛfɔ i n'a fɔ an ka jatebɔcogo dɔ. Aw ye misaliw lajɛ jukɔrɔ walasa ka fɛn wɛrɛw sɔrɔ minnu bɛ se ka ɲɔgɔn falen.

<div kalasi = "lafiɲɛbɔ" > 
  <div kalasi = "span6 kuluw" > 
    ...
  </div> ye
  <div kalasi = "span10 kuluw" > 
    ...
  </div> ye
</div> ye

Layout fixe

A daminɛ na ani a nɔgɔn 940px-wide, centered layout for just about any site web or page provided by a single <div.container>.

<farikolo>
  <div kalasi = "minɛn" > 
    ...
  </div> ye
</farikolo>

Fluidw labɛncogo

A ɲɛ jɔcogo wɛrɛ, min bɛ se ka wuli ka bɔ a nɔ na ni min- ani max-widths ani kininbolo-kɛrɛfɛ-yɔrɔ ye. A ka ɲi kosɛbɛ apps ani docs kama.

<farikolo>
  <div kalasi = "minɛn-ji" > 
    <div kalasi = "kɛrɛfɛ-baara" > 
      ...
    </div> ye
    <div kalasi = "kɔnɔkow" > 
      ...
    </div> ye
  </div> ye
</farikolo>

Kumakunw & kopi

Sɛbɛnni-sɛbɛnni-yɔrɔ-ko jɔnjɔn dɔ min bɛ kɛ ka i ka ɛntɛrinɛti yɔrɔw labɛn.

Sɛbɛnni jatebɔlan bɛɛ sinsinnen bɛ Less variables fila kan an ka preboot.less file kɔnɔ: @basefontani @baseline. Fɔlɔ ye basigi sɛbɛnnibolo-size ye min bɛ Kɛ a bɛɛ la ani filanan ye basigi-yɔrɔ-janya ye.

An bɛ baara Kɛ n’o fɛn caman sɛgɛsɛgɛli ye, ani jatebɔ dɔw, walasa ka an ka suguya bɛɛ ka margins, paddings, ani line-heights (dakunw) Dabɔ ani fɛn wɛrɛw.

h1. Kumakun 1nan

h2. Kumakun 2nan

h3. Kumakun 3nan

h4. Kumakun 4nan

h5. Kumakun 5nan

h6. Kumakun 6nan

Misali la dakun

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ni magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies bolifɛnw ut id elit.

Misali dakun A bɛ ni dakun fitinin ye...

Misc. fɛnɲɛnɛmaw

Baara kɛ ni sinsincogo ye, ladɛrɛsiw, & surunyalenw ye

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

A ka kan ka baara kɛ waati min na

Sinsinnan taamasiyɛnw ( <strong>ani <em>) ka kan ka kɛ walasa ka daɲɛ walima kumasen dɔ nafa walima a sinsincogo wɛrɛ jira ka kɛɲɛ n’a lamini sɛbɛn ye. Baara kɛ ni <strong>nafa ye ani <em>ka sinsin degunw kan.

Sinsin kɛli dakun dɔ kɔnɔ

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sigi amet risus. Maecenas faucibus mollis ye jiri ye min bɛ wele ko mollis interdum. Nulla vitae elit libero, o ye fura ye min bɛ wele ko pharetra augue.

Kɔlɔsili: A tɛ baasi ye hali bi ka baara Kɛ <b>ni ni <i>tags (taamaʃyɛnw) ye HTML5 kɔnɔ wa u man kan ka Kɛ ni cogoya ye min bɛ Kɛ ni nɛrɛmuguma ni nɛrɛmuguma ye, o cogo la (hali n’a y’a Sɔrɔ ni kɔrɔko-yɔrɔ dɔ bɛ yen min ka ca ni kɔrɔɲɔgɔnmaya ye, i ka baara Kɛ n’a ye). <b>kɔrɔ ye ka daɲɛw walima kumasenw Bɔ kɛnɛ kan k’a sɔrɔ a ma nafa wɛrɛ Lase, k’a sɔrɔ <i>a fanba ye kumakan, fɛɛrɛko daɲɛw, a ɲɔgɔnnaw de ye.

Adrɛsiw

Eleman <address>in bɛ Kɛ ka kunnafoni di a bɛnbakɛ gɛrɛfɛ, walima baara farikolo bɛɛ ma. A cogoya filɛ nin ye:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Fransisko, CA 94107
P: (123) 456-7890. Kalanjɛ ni sɛbɛnni : kalanjɛ ni sɛbɛnni gafew

Kɔlɔsili: Zana kelen-kelen minnu bɛ an kɔnɔ, <address>olu ka kan ka laban ni tigɛli-yɔrɔ ( <br />) ye walima ka siri ni bloki-dakun taamasiyɛn ye (misali la, <p>) walasa ka kɔnɔkow labɛn ka ɲɛ.

Kuma surunw

Ni aw bɛ daɲɛ surunw ni daɲɛ surunw sɔrɔ, aw bɛ baara kɛ ni <abbr>taamasiyɛn ye ( <acronym>a tɛ baara kɛ HTML5 kɔnɔ ). Aw bɛ sɛbɛnfura surun bila taamasiyɛn kɔnɔ ani ka tɔgɔ dafalen tɔgɔ dɔ sigi sen kan.

Blokiw ka kumaw

<blockquote> <p> <small>

Cogo min na ka kuma fɔ

Walasa ka blockquote dɔ don a kɔnɔ, i ka wrap <blockquote>around <p>ani <small>tags. Baara kɛ ni <small>element ye ka i ka source cite ani i bɛ em dash —sɔrɔ ka kɔn a ɲɛ.

Lorem ipsum dolor sigilen amet, consectetur adipiscing elit. Jateden dafalen posuere erat a ante venenatis dapibus posuere velit aliquet.

Dɔgɔtɔrɔ Julius Hibbert

A ma yamaruya sɔrɔ<ul>

• Lorem ipsum dolor sigi amet
• Consectetur ye farikolojidɛsɛ ye
• Jateden dafalen molestie lorem ka mass
• Fasilisi bɛ sɔrɔ pretium nisl aliquet la
• Nulla volutpat ye aliquam ye
  • Fasellus iaculis ye jiri ye
  • Purus sodales bɛ sɔgɔsɔgɔninjɛ furakɛ
  • Vestibulu laoreet porttitor sem.. Bamako, Mali
  • Ac tristique libero volutpat ka baara kɛ
• Faucibus porta lacus ye jiri ye min bɛ wele ko fringilla vel
• Aenean sigi amet erat nunc
• Eget porttitor ka lorem

A ma kɛ cogo min na<ul.unstyled>

• Lorem ipsum dolor sigi amet
• Consectetur ye farikolojidɛsɛ ye
• Jateden dafalen molestie lorem ka mass
• Fasilisi bɛ sɔrɔ pretium nisl aliquet la
• Nulla volutpat ye aliquam ye
  • Fasellus iaculis ye jiri ye
  • Purus sodales bɛ sɔgɔsɔgɔninjɛ furakɛ
  • Vestibulu laoreet porttitor sem.. Bamako, Mali
  • Ac tristique libero volutpat ka baara kɛ
• Faucibus porta lacus ye jiri ye min bɛ wele ko fringilla vel
• Aenean sigi amet erat nunc
• Eget porttitor ka lorem

A ye yamaruya di<ol>

1. Lorem ipsum dolor sigi amet
2. Consectetur ye farikolojidɛsɛ ye
3. Jateden dafalen molestie lorem ka mass
4. Fasilisi bɛ sɔrɔ pretium nisl aliquet la
5. Nulla volutpat ye aliquam ye
6. Faucibus porta lacus ye jiri ye min bɛ wele ko fringilla vel
7. Aenean sigi amet erat nunc
8. Eget porttitor ka lorem

Cogojiralidl

Ɲɛfɔli lisiw

Ɲɛfɔli lisi dafalen don daɲɛw ɲɛfɔli kama.

Euismod ye

Vestibulum id ligula porta felis euismod cɛya bɛ sɔrɔ lacinia odio sem nec elit.

Donec id elit non mi porta gravida ye eget metus ye.

Malesuada ka porta

Etiam porta sem cɛmanba min bɛ wele ko magna mollis euismod.

Tabaliw jɔli

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

Tabali ka bon kosɛbɛ—fɛn caman kama. Tabalibaw kɔni, u mago bɛ markup kanuya dɔɔnin na walasa u ka se ka nafa sɔrɔ, ka se ka sɛgɛsɛgɛli kɛ, ani ka se ka kalan (kode hakɛ la). Ladilikan damadɔw filɛ nin ye minnu bɛ se ka dɛmɛ don.

aw bɛ aw ka kuluw kunkankow siri tuma bɛɛ cogo la min b' a <thead>to jatebɔ bɛ kɛ <thead>> <tr>> <th>ye .

I n’a fɔ kuluw kunkankow, i ka tabali farikolo kɔnɔkow bɛɛ ka kan ka siri ni a ye <tbody>walasa i ka jatebɔ ka kɛ <tbody>> <tr>> <td>ye .

Misali: Tabali cogoya dafalenw

Tabali bɛɛ bɛna kɛ cogo la min bɛ kɛ u yɛrɛma ni danyɔrɔ nafamaw dɔrɔn ye walasa ka kalan sɔrɔ ani ka sigicogo mara. Wajibi tɛ ka kalan wɛrɛw walima fɛn dɔw fara a kan.

# Bamako .	Tɔgɔ	Jamu	Kan
1 ye	Dɔw	Kelen	Angilɛtɛri
2 ye	Joe ye	Sixpack ye	Angilɛtɛri
3 ye	Stu. Bamako, Mali	Dent	Kode ye

<tabali> ye
  ...
</tabali>

Misali: Zebra-striped

Aw ye fansi dɔɔnin sɔrɔ ni aw ka tabali ye ni zebra-striping farali ye—aw ye .zebra-stripedkalan fara dɔrɔn.

# Bamako .	Tɔgɔ	Jamu	Kan
1 ye	Dɔw	Kelen	Angilɛtɛri
2 ye	Joe ye	Sixpack ye	Angilɛtɛri
3 ye	Stu. Bamako, Mali	Dent	Kode ye

Kɔlɔsili: Zebra-striping ye ɲɛtaa ɲɛtaa ye min tɛ sɔrɔ navigatɔrɔ kɔrɔw la i n’a fɔ IE8 ani duguma.

<tabali kalasi = "zebra-striped" > 
...
</tabali>

Misali: Zebra-striped w/ TableSorter.js

Ni an ye misali tɛmɛnen ta, an bɛ an ka tabali nafa ɲɛ ka taa a fɛ ni jatebɔ baarakɛcogo dilen ye jQuery ni Tablesorter plugin fɛ. Kolon o kulu kuncɛyɔrɔ digi walasa ka jatebɔcogo Changer.

# Bamako .	Tɔgɔ	Jamu	Kan
1 ye	Aw ta	Kelen	Angilɛtɛri
2 ye	Joe ye	Sixpack ye	Angilɛtɛri
3 ye	Stu. Bamako, Mali	Dent	Kode ye

<script src = "js/jquery/jquery.tabali-sɔrɔ-minɛn.min.js" </script> 
<sɛbɛnni > 
  $ ( baara () { . 
    $ ( "tabali#sortTabali misali" ). tabali sɛgɛsɛgɛlikɛla ({ sortList : [[ 1 , 0 ]] });  
  });
</script> ye
<tabali kalasi = "zebra-striped" > 
  ...
</tabali>

Default cogoyaw

Sɛbɛnw bɛɛ bɛ di cogoya dafalenw ma walasa k’u jira cogo la min bɛ se ka kalan ani min bɛ se ka sɛgɛsɛgɛ. Fɛɛrɛw bɛ dilan sɛbɛnniw doncogo kama, lisi sugandilenw, sɛbɛnniyɔrɔw, arajo butɔni ni jatebɔyɔrɔw, ani butɔni.

Misali foroko taasibila

X-Dɔnniyaba

Ka sugandi

1 ye 2 ye 3 ye 4 ye 5 ye

Ka sugandi

1 ye 2 ye 3 ye 4 ye 5 ye

Input min tɛ Se ka Labɛn

Dɔw nafa ka bon Yan

Input min bɛ se ka baara kɛ

X-Dɔnniyaba

Dɛmɛ sɛbɛn yɔrɔ fitinin

Misali foroko taasibila

Sɛbɛn minnu bɛ ka kɔn o ɲɛ

@ Bamako

Checkbox min bɛ ka kɔn o ɲɛ

Checkbox min bɛ fara a kan

Filen doncogo

Misali foroko taasibila

Sugandili minnu bɛ kɛ, olu lisɛli

• Sugandili fɔlɔ ye nin ni nin ye—aw ye aw jija ka a fɔ mun na a ka ɲi kosɛbɛ
• Sugandili filanan fana bɛ se ka lajɛ ani ka don sɛbɛnfura jaabiw kɔnɔ
• Sugandili sabanan bɛ se ka lajɛ—ɔwɔ, i y’a jateminɛ—o fana bɛ se ka lajɛ ani ka don sɛbɛnfura jaabiw kɔnɔ
• Sugandili naani tɛ se ka lajɛ bawo a bɛ baara la.

Kɔlɔsili: Labɛnw bɛ sugandiliw bɛɛ lamini walasa ka digi yɔrɔ minnu ka bon kosɛbɛ ani sɛbɛnfura min bɛ se ka baara kɛ ni a ye.

Date Range (date Range).

fɛ Waati bɛɛ bɛ jira i n’a fɔ Pasifiki waati (GMT -08:00).

Sɛbɛnni yɔrɔ

Dɛmɛ sɛbɛn bloki walasa ka foro ɲɛfɔ sanfɛ ni mago bɛ o la.

Sugandili minnu bɛ kɛ, olu lisɛli

• Sugandili fɔlɔ ye nin ni nin ye—aw ye aw jija ka a fɔ mun na a ka ɲi kosɛbɛ
• Sugandili filanan bɛ se ka kɛ fɛn wɛrɛ ye wa n’i y’a sugandi, o bɛna sugandili 1 bɔ

  ka dankari

Foroko minnu bɛ ɲɔgɔn kan

I bɛ Fàra .form-stackedi ka foroko HTML kan i bɛ sɛbɛnniw Sɔrɔ u ka forow sanfɛ sanni u ka Kɛ u kinin fɛ. O bɛ baara kɛ kosɛbɛ ni i ka sɛbɛnw ka surun walima ni i ye dontaw kulu fila sɔrɔ sɛbɛnw kama minnu ka gɛlɛn.

Misali foroko taasibila

X-Dɔnniyaba

Ka sugandi

1 ye 2 ye 3 ye 4 ye 5 ye

Misali foroko taasibila

X-Dɔnniyaba

Dɛmɛ sɛbɛn yɔrɔ fitinin

Sugandili minnu bɛ kɛ, olu lisɛli

• Sugandili fɔlɔ ye nin ni nin ye—aw ye aw jija ka a fɔ mun na a ka ɲi kosɛbɛ
• Sugandili filanan fana bɛ se ka lajɛ ani ka don sɛbɛnfura jaabiw kɔnɔ

Kɔlɔsili: Labɛnw bɛ sugandiliw bɛɛ lamini walasa ka digi yɔrɔ minnu ka bon kosɛbɛ ani sɛbɛnfura min bɛ se ka baara kɛ ni a ye.

Yɛlɛma minnu kɛra, olu mara  ka dankari

Butɔnw

I n’a fɔ bɛnkansɛbɛn, butɔni bɛ Kɛ walew ye k’a sɔrɔ jὲɲɔgɔnya bɛ Kɛ fɛnw ye. Misali la, "Télécharger" bɛ se ka kɛ butɔni ye ani "baara kɛlen kɔsa in na" bɛ se ka kɛ jɛgɛnsira ye.

Butɔnw bɛɛ bɛ daminɛ ka kɛ cogoya gris jɛman ye, nka baarakɛcogo kalansen damadɔ bɛ se ka kɛ kulɛri cogoya wɛrɛw la. O kalanw ye kalasi bulu .primaryye, kalasi bulu jɛman .info, kalasi wuluwulu .successani kalasi bilenman .danger. Plus, rolling i yɛrɛ ka styles ye easy peasy ye.

Misali butɔni

Butɔn cogoyaw bɛ se ka kɛ fɛn o fɛn na ni a .btnkɛra. A ka c’a la, i b’a fɛ ka ninnu waleya <a>, <button>, ani fɛn sugandilenw dɔrɔn de <input>kan. A cogoya filɛ nin ye:

Aw bɛ hakɛw ɲɔgɔn falen-falen

Fancy butɔni belebelebaw walima fitininw? Have at it!

Jamana min ye bololabaara ye

Butɔn minnu tɛ baara la walima minnu bɛ baara kɛ ni porogaramu ye kun dɔ la walima kun wɛrɛ la, baara kɛ ni o cogoya ye min bɛ baara kɛ. O .disabledye jὲɲɔgɔnyaw ye ani :disabledfɛnw <button>ye.

Jɛɲɔgɔnyaw

Butɔnw

O ye mun ye

An ka sanfɛyɔrɔ ye bara jɔlen ye min kɔnɔ, site web dɔ taamasiyɛn walima a tɔgɔ, a ɲɛminɛcogo fɔlɔ ani a ɲinini sɛbɛn bɛ sɔrɔ yen.

A bɛ se ka kɛ ka kɛɲɛ ni mɔgɔw sago ye

Fɛn minnu bɛ a kɔnɔ, olu bɛɛ, ani sanfɛla bɛɛ fana, olu ye ŋaniyataama ye. I bɛ se k’a sugandi ka logo/tɔgɔ, nav, ɲinini, ani nav filanan dɔ don a kɔnɔ—walima o faralen ɲɔgɔn kan cogo o cogo.

Dropdowns (Dropdowns) bɛ sɔrɔ a kɔnɔ

Navigasiyɔn kunba dɔ ye, an ye seko dɔ Dòn i la walasa i ka se ka fɛnw Fàra i ka nav kan. Aw ye nav filanan lajɛ sanfɛ (a bɛ kinin fɛ) walasa k’a dɔn a bɛ kɛ cogo min na.

Tabs ni furakisɛw

Navigasiyɔn filanan nɔgɔmanw dabɔ ni a ye <ul>. Aw bɛ ɲɔgɔn falen-falen tabuw walima furakisɛw ni ɲɔgɔn cɛ ni aw ye kalansen bɛnnen fara a kan.

A ka ɲi kosɛbɛ kɔnɔkow tilayɔrɔ fitininw ma i n’a fɔ an ka jatebɔsɛbɛnw sigicogo ɲɛw ani baarakɛlaw ka waatibolodacogo walasa ka fɛnw sɛgɛsɛgɛli kɛ i n’a fɔ kɔnɔkow ɲɛw cɛ. A bɛ sɔrɔ tablɛtiw walima furakisɛw cogoyaw la.

• So
• Porofili
• Cikanw
• Settings (Labɛnw).
• Ka wele
• Dropdown (Donkilidala).
  • Lien filanan
  • Fɛn wɛrɛ bɛ yan
  • Lien wɛrɛ

<ul kalasi = "tabu" > 
  <li kalasi = "baarakɛla" ><a href = "#" > So </a></li>  
  <li><a href = "#" > ɲɛfɔli </a></li> 
  <li><a href = "#" > Cikanw </a></li> 
  <li><a href = "#" > Labɛnw </a></li> 
  <li><a href = "#" > Lajɛ </a></li> 
</ul>

• So
• Porofili
• Cikanw
• Settings (Labɛnw).
• Ka wele

<ul kalasi = "furakisɛw" > 
  <li kalasi = "baarakɛla" ><a href = "#" > So </a></li>  
  <li><a href = "#" > ɲɛfɔli </a></li> 
  <li><a href = "#" > Cikanw </a></li> 
  <li><a href = "#" > Labɛnw </a></li> 
  <li><a href = "#" > Lajɛ </a></li> 
</ul>

Ɲɛjirali sɛbɛnw

Ultra simpliste et minimalement style pagination inspiré par Rdio. Bloki belebele in ka gɛlɛn ka tɛmɛn, a bɛ se ka sɛgɛsɛgɛ nɔgɔya la, wa a bɛ digi yɔrɔbaw di.

<div kalasi = "ɲɛnajɛ" > 
  <ul>
    <li kalasi = "kɔrɔlenko balilen" ><a href = "#" > ← Tɛmɛnen </a></li>  
    <li kalasi = "baarakɛla" ><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 kalasi = "nata" ><a href = "#" > Nata → </a></li> , o ye  
  </ul>
</div> ye

Kɔlɔsili jɔnjɔnw

div.alert-message

Layini kelen cikanw walasa ka wale dɔ dɛsɛ, dɛsɛ min bɛ se ka kɛ, walima a ɲɛtaa jira. Kɛrɛnkɛrɛnnenya la, a nafa ka bon sɛbɛnw na.

Cikanw bali

div.alert-message.block-message

Cikan minnu bɛ ɲɛfɔli dɔɔnin wajibiya, an bɛ dakun cogoya lasɔminiw sɔrɔ. Olu dafalen don walasa ka fili cikan janw bubbling up, ka baarakɛla lasɔmi wale dɔ la min bɛ sen na, walima ka kunnafoniw jira dɔrɔn walasa ka sinsin kosɛbɛ ɲɛ kan.

Modaliw (modaliw).

Modalw — dialogues walima lightboxes — ka ɲi kosɛbɛ sigida walew la ko minnu na a nafa ka bon ko kɔkankow ka mara.

Baarakɛminɛnw Ladilikanw

Twipsies ye super nafama ye walasa ka baarakɛla hakili ɲagaminen dɛmɛ ani k’u jira sira ɲuman kan.

Popovers (Popovers) ye

Baara kɛ ni popovers ye walasa ka kunnafoni sɛbɛnnenw di ɲɛ dɔ ma k’a sɔrɔ u ma nɔ bila a labɛncogo la.

Bootstrap jɔra ni Preboot ye , o ye mixins ni variables pack open-source ye min bɛna baara kɛ ni Less ye , CSS preprocessor ye walasa ka ɛntɛrinɛti yiriwali teliya ani ka nɔgɔya.

A lajɛ an ye Preboot baara cogo min na Bootstrap kɔnɔ ani i bɛ se ka baara kɛ n’a ye cogo min na n’i y’a sugandi ka Less boli i ka porozɛ nata kan.

Baara kɛcogo n’a ye

Baara kɛ ni nin sugandi in ye walasa ka baara dafalen kɛ ni Bootstrap ka Less variables, mixins ani nesting ye CSS kɔnɔ javascript fɛ i ka navigatɔrɔ kɔnɔ.

<link rel = "stylesheet/less" href = "ka dɔgɔn/bootstrap.less" media = "bɛɛ" .     />
<script src = "js/ ka dɔgɔ-1.1.3.min.js" </script> 

Aw tɛ dusukunnataw sɔrɔ .js furakɛli la wa? A’ ye Less Mac app lajɛ walima ka Node.js kɛ ka fɛnw lajɛ ni i bɛ i ka kode bila sen kan.

Min bɛ a kɔnɔ

Fɛn minnu bɛ Twitter Bootstrap kɔnɔ Bootstrap kɔnɔko dɔ ye, olu ɲɛfɔli dɔw filɛ nin ye. Aw bɛ taa Bootstrap siti kan walima Github porozɛ ɲɛ kan walasa ka telesarse ani ka kunnafoni wɛrɛw sɔrɔ.

Yɛlɛma-yɛlɛmaw

Variables in Less ye dafalen ye i ka CSS kunkolodimi tɛ min na, o marali n’a kurayali kama. Ni i b’a fɛ ka kulɛri nafa dɔ Changer walima ka nafa dɔ Changer tuma caman na, i k’a kuraya yɔrɔ kelen na ani i bɛ sigi.

// Jɛɲɔgɔnyaw
@linkKulɛri : #8b59c2;         
@linkColorHover :     dibi don ( @linkColor , 10 ); 
 
// Gris ye
@nɛrɛma : #000;             
@grayDark :           yeelen ( @nɛrɛ , 25 %); 
@gray :               yeelen ( @nɛrɛ , 50 %); 
@grayLight :          yeelen ( @nɛrɛ , 70 %); 
@grayLighter : ka        yeelen bɔ ( @nɛrɛ , 90 %); 
@nɛrɛma : #fff ;             
 
// Kulɛriw Accent
@bulu : #08b5fb ye ;              
@green : #46a546 ye ;             
@ bilenman : #9d261d ;               
@jɛman : #ffc40d ye;            
@oranjɛ : #f89406 ye ;            
@pink : #c3325f ye ;              
@purple : #7a43b6 ye ;            
 
// Baseline ka jatebɔ
@basefont : 13px ye ;          
@baseline : 18px ye ;          

Ka kuma fɔ

Less fana bɛ kuma fɔcogo wɛrɛ Di ka Fàra CSS ka /* ... */kɔrɔɲɔgɔnmaya nɔrɔlen kan.

// Nin ye kumasen ye
/* Nin fana ye commentaire ye */

Mixins ka wazoo

Mixins ye basigi ye walima a yɔrɔ dɔw ye CSS kama, o b’a To i bɛ se ka kode bloki dɔ fara ɲɔgɔn kan ka Kɛ kelen ye. U ka ɲi kosɛbɛ feerekɛla prefixed properties i n'a fɔbox-shadow , cross-browser gradients, font stacks, ani fɛn wɛrɛw. Mixin minnu bɛ Bootstrap la, olu misali dɔ bɛ duguma.

Font stacks (sɛbɛnniw kuluw).

#font ye { .
  . sɛbɛnfura ( @ girinya : normal , @ bonya : 14px , @lineHeight : 20px ) { .     
    sɛbɛnnibolo - hakɛ : @size ; 
    font - girinya : @ girinya ; 
    layini - janya : @lineHeight ; 
  } ye .
  . sans - serif ( @ girinya : normal , @ bonya : 14px , @lineHeight : 20px ) { .     
    sɛbɛnnibolo - denbaya : "Hɛlwɛtika Neue" , ​​Hɛlwɛtika , Arial , sans - serif ;   
    sɛbɛnnibolo - hakɛ : @size ; 
    font - girinya : @ girinya ; 
    layini - janya : @lineHeight ; 
  } ye .
  . serif ( @ girinya : normal , @ bonya : 14px , @layini janya : 20px ) { .     
    sɛbɛnnibolo - denbaya : "Georgie" , Times New Roman , Times , sans - serif ;     
    sɛbɛnnibolo - hakɛ : @size ; 
    font - girinya : @ girinya ; 
    layini - janya : @lineHeight ; 
  } ye .
  . monospace ( @ girinya : normal , @ bonya : 12px , @lineHeight : 20px ) { .     
    sɛbɛnnibolo - denbaya : "Monaco" , Kuriyɛri kura , yɔrɔ kelen ;   
    sɛbɛnnibolo - hakɛ : @size ; 
    font - girinya : @ girinya ; 
    layini - janya : @lineHeight ; 
  } ye .
} ye .

Gradientw (gradients) (gradients).

#gradient { Bamako .
  . horizontal ( @daminɛKulɛri : #555 , @ labanKulɛri : #333 ) { . 
    kɔkanna - kulɛri : @endColor ; 
    kɔkan - segin : segin - x ;
    kɔkanna - ja : - khtml - jiginni ( sinsinni , kinin fɛ sanfɛ , kinin fɛ sanfɛ , ka bɔ ( @startColor ), ka taa ( @endColor )); // Konqueror ye   
    kɔkan - ja : - moz - linear - gradient ( kinin fɛ , @daminɛColor , @endColor ); // FF 3,6+ ye    
    kɔkanna - ja : - ms - sinsinni- gradient ( kinin fɛ , @ daminɛColor , @endColor ); // IE10 ye    
    kɔkan - ja : - webkit - gradient ( sinsinni , kinin fɛ sanfɛ , kinin fɛ sanfɛ , kulɛri - jɔ ( 0 % , @startColor ), kulɛri - jɔ ( 100 % , @endColor )); // Safari 4+, Krom 2+    
    kɔkanna - ja : - webkit - linear - gradient ( kinin fɛ , @daminɛKulɛri , @ labanKulɛri ); // Safari 5.1+, Krom 10+    
    kɔkanna - ja : - o - sinsinni- gradient ( kinin fɛ , @ daminɛColor , @endColor ); // Opera 11.10 ye    
    kɔkanna - ja : sinsinni- gradient ( kinin fɛ , @startColor , @endColor ); // Le standard   
  } ye .
  . jɔlen ( @daminɛKulɛri : #555 , @ labanKulɛri : #333 ) { . 
    kɔkanna - kulɛri : @endColor ; 
    kɔkan - segin : segin - x ;
    kɔkan - ja : - khtml - jiginni ( sinsinni , kinin fɛ sanfɛ , kinin fɛ duguma , ka bɔ ( @startColor ), ka taa ( @endColor )); // Konqueror ye   
    kɔkanna - ja : - moz - sinsinni - sɛgɛsɛgɛli ( @daminɛKulɛri , @ labanKulɛri ); // FF 3,6+ ye   
    kɔkanna - ja : - ms - sinsinni- gradient ( @ daminɛKulɛri , @ labanKulɛri ) ; // IE10 ye   
    kɔkanna - ja : - webkit - gradient ( sinsinni , kinin fɛ sanfɛ , kinin fɛ duguma , kulɛri - jɔ ( 0 % , @startColor ), kulɛri - jɔ ( 100 % , @endColor )); // Safari 4+, Krom 2+    
    kɔkanna - ja : - webkit - linear - gradient ( @daminɛKulɛri , @ labanKulɛri ); // Safari 5.1+, Krom 10+   
    kɔkanna - ja : - o - sinsinni- gradient ( @ daminɛKulɛri , @ labanKulɛri ) ; // Opera 11.10 ye   
    kɔkanna - ja : sinsinni- gradient ( @ daminɛKulɛri , @ labanKulɛri ); // A ka standard  
  } ye .
  . ɲɛsincogo ( @daminɛKulɛri : #555 , @ labanKulɛri : #333 , @deg : 45deg ) { . 
    ...
  } ye .
  . jɔlen - saba - kulɛriw ( @daminɛKulɛri : #00b3ee, @midKulɛri: #7a43b6, @kulɛri jɔ: 50%, @ labanKulɛri: #c3325f) { 
    ...
  } ye .
} ye .

Baarakɛcogo ani grid system

Aw ye fansi sɔrɔ ka jatebɔ dɔw kɛ walasa ka mixin flexible ani powerful sɔrɔ i n’a fɔ min bɛ duguma.

// Griditude (Griditude).
@gridKolonw : 16 ;       
@gridKɔlɔn bonya : 40px ;   
@gridGutterBonya : 20px ye ;   
@siteWidth : ( @gridKolonw * @gridKolonw bonya ) + ( @gridGutterWidth * ( @gridKolonw - 1 ));                 
 
// Sistɛmu min bɛ wele ko Grid
. minɛn kɔnɔ { .
  bonya : @siteBonya ; 
  margin : 0 otomatiki ;  
  . ɲɛfɔli jɛlen ();
} ye .
. kuluw ( @kolonSpan : 1 ) { .  
  width : ( @gridKɔlɔnBɔrɔ * @kolonSpan ) + ( @gridGutterWidth * ( @kolonSpan - 1 ));         
} ye .
. offset ( @kolonOffset : 1 ) { .  
  margin - kinin fɛ : ( @gridKɔlɔnJɛkulu * @kolonOffset ) + ( @gridGutterWidth * ( @kolonOffset - 1 )) + @extraSpace ;           
} ye .