Twitter ka baarakɛminɛnw

Bootstrap ye baarakɛminɛn ye min bɛ bɔ Twitter fɛ min dabɔra ka webappw ni sitew yiriwali daminɛ.
CSS ni HTML basigilen bɛ a kɔnɔ sɛbɛnnikɛcogo, foroko, butɔni, tabali, jatebɔlanw, navigatiɔn ani fɛn wɛrɛw kama.

Nerd alert: Bootstrap jɔra ni Less ye wa a dabɔra ka baara kɛ ka bɔ da la ni bi navigatɛriw dɔrɔn de ye a hakili la.

Hotlink ye CSS ye

Walasa ka daminɛ teliya la ani nɔgɔya la, i ka nin yɔrɔ in kopi kɛ dɔrɔn i ka ɛntɛrinɛti yɔrɔ la.

Baara kɛ n’a ye ni Less ye

Fan min bɛ baara kɛ ni Less ye? Gɛlɛya tɛ, i ka repo clone dɔrɔn ka nin zana ninnu fara a kan:

Foroko bɛ GitHub kan

Télécharger, fork, pull, file issues, ani fɛn wɛrɛw ni Bootstrap repo ofisiyali ye Github kan.

Bootstrap bɛ GitHub kan »

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.

  1. <div kalasi="row"> kalasi = "lajɛ" >
  2. <div kalasi = "span6 kuluw" >
  3. ...
  4. </div> ye
  5. <div kalasi = "span10 kuluw" >
  6. ...
  7. </div> ye
  8. </div> ye
1 ye
1 ye
1 ye
1 ye
1 ye
1 ye
1 ye
1 ye
1 ye
1 ye
1 ye
1 ye
1 ye
1 ye
1 ye
1 ye
2 ye
2 ye
2 ye
2 ye
2 ye
2 ye
2 ye
2 ye
3 ye
3 ye
3 ye
3 ye
3 ye
1 ye
4 ye
4 ye
4 ye
4 ye
4 ye
6. 6
6. 6
8 ye
8 ye
5 ye
11 ye
16 ye

Kolonw (offset) kɛli

4 ye
8 offset 4 ye
4 bɛrɛbɛrɛ 4
4 bɛrɛbɛrɛ 4
5 bɛrɛbɛrɛ 3
5 bɛrɛbɛrɛ 3
10 bɛrɛbɛrɛ 6

Layout fixe

A basigilen 940px bonya, cɛmancɛ minɛnw labɛncogo ye site walima ɲɛ suguya bɛɛ ye.

  1. <farikolo>
  2. <div kalasi = "minɛn" >
  3. ...
  4. </div> ye
  5. </farikolo>

Fluidw labɛncogo

Fɛnɲɛnɛma walima jilama ɲɛ jɔcogo 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 ma.

  1. <farikolo>
  2. <div kalasi = "minɛn-ji" >
  3. <div kalasi = "kɛrɛfɛ-baara" >
  4. ...
  5. </div> ye
  6. <div kalasi = "kɔnɔkow" >
  7. ...
  8. </div> ye
  9. </div> ye
  10. </farikolo>

Kumakunw ani kopiw

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.

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

I bɛ se fana ka barokun fitininw fara a kan ni <strong>ani<em>

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 danfara yelen dɔ fara daɲɛ walima kumasen dɔ ni a lamini kopi cɛ. Aw bɛ baara kɛ ni <strong>a ye walasa ka jateminɛ kɔrɔ gansanw kɛ ani <em>ka jateminɛ kɛ ni ɲɛmajɔ ye ani tɔgɔw.

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.

Adrɛsiw

Eleman addressbɛ baara kɛ ni—i y’a jateminɛ!—adrɛsiw kama. 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 addresska kan ka laban ni zana-tigɛ ( <br />) ye walasa ka kɔnɔkow labɛn ka ɲɛ i n’a fɔ a bɛ kalan cogo min na ɲɛnamaya yɛrɛ kɔnɔ k’a sɔrɔ cogoya si ma kɛ.

Kuma surunw

Ni aw bɛ daɲɛ surunw ni daɲɛ surunw sɔrɔ, aw bɛ baara kɛ ni abbrtaamasiyɛn ye ( acronyma 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> <cite>

Aw ye aw jija ka aw ka blockquotelamini paragraphni citetaamasiyɛnw siri. Ni i bɛ sɔrɔyɔrɔ dɔ fɔ, i ka baara kɛ ni o citeyɔrɔ ye. CSS bɛna tɔgɔ dɔ daminɛ a yɛrɛma ni em dash (—) ye.

Lorem ipsum dolor sigi amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut baara ani dolore magna aliqua...

Dɔgɔtɔrɔ Julius Hibbert

Lisitiw

A ma yamaruya sɔrɔ<ul>

  • Jeremi Bixby ye
  • Robert Dezure ye o kɛ
  • Josh Washinton ye
  • Anton Kapɛrɛsi ye
  • N ka Ekipu mɔgɔw
    • George Castanza ye a ka baara kɛ
    • Jerry Seinfeld ye a ka baara kɛ
    • Kosmo Kramer ye
    • Elaine Bennis ye a fɔ
    • Newman ye
  • Yuhana Yakuba
  • Paul Pierce ye a ka baara kɛ
  • Kevin Garnett ye a ka baara kɛ

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

  • Jeremi Bixby ye
  • Robert Dezure ye o kɛ
  • Josh Washinton ye
  • Anton Kapɛrɛsi ye
  • N ka Ekipu mɔgɔw
    • George Castanza ye a ka baara kɛ
    • Jerry Seinfeld ye a ka baara kɛ
    • Kosmo Kramer ye
    • Elaine Bennis ye a fɔ
    • Newman ye
  • Yuhana Yakuba
  • Paul Pierce ye a ka baara kɛ
  • Kevin Garnett ye a ka baara kɛ

A ye yamaruya di<ol>

  1. Jeremi Bixby ye
  2. Robert Dezure ye o kɛ
  3. Josh Washinton ye
  4. Anton Kapɛrɛsi ye
  5. N ka Ekipu mɔgɔw
    1. George Castanza ye a ka baara kɛ
    2. Jerry Seinfeld ye a ka baara kɛ
    3. Kosmo Kramer ye
    4. Elaine Bennis ye a fɔ
    5. Newman ye
  6. Yuhana Yakuba
  7. Paul Pierce ye a ka baara kɛ
  8. Kevin Garnett ye a ka baara kɛ

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 theadto jatebɔ bɛ kɛ thead> tr> thye .

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

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
  1. <tabali kalasi="komini-tabali"> class = "tabali jɛlen" >
  2. ...
  3. </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
  1. <tabali kalasi="tabali jɛlen zebra-striped"> class = "tabali jɛlen zebra-striped" >
  2. ...
  3. </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
  1. <script type="texte/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "texte/javascript" src = "js/jquery/jquery.tabali sɛgɛsɛgɛli.min.js" ></script>
  2. <script suguya = "sɛbɛnni/javascript" >
  3. $ ( sɛbɛn ). labɛn ( baara () { .
  4. $ ( "tabali#sortTabali misali" ). tabali sɛgɛsɛgɛlikɛlan ( { sortList : [[ 1 , 0 ]]} );
  5. });
  6. </script> ye
  7. <tabali kalasi = "tabali jɛlen zebra-striped" >
  8. ...
  9. </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
Dɔw nafa ka bon Yan
Dɛmɛ sɛbɛn yɔrɔ fitinin
Misali foroko taasibila
@ Bamako
Misali foroko taasibila
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.
Waati bɛɛ bɛ jira i n’a fɔ Pasifiki waati (GMT -08:00).
Dɛmɛ sɛbɛn bloki walasa ka foro ɲɛfɔ sanfɛ ni mago bɛ o la.

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
Misali foroko taasibila
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.

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ɛ default kɛ cogo la min bɛ kɛ ni gris jɛman ye, nka .primarykalasi bulu bɛ sɔrɔ. 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 inputkan. 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 buttonye.

Jɛɲɔgɔnyaw

Butɔnw

Kɔlɔsili jɔnjɔnw

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.

×

Oh snap! Aw bɛ nin ni nin fɛn caman Changer ani ka segin ka a lajɛ.

×

Gaucamole senuma! Best check yo self, i ma filɛ ka ɲɛ kojugu.

×

A ɲɛna! I ye nin lasɔmini cikan kalan ka ɲɛ.

×

Kungolow bɛ wuli! Nin ye lasɔmini ye min mago bɛ i ka jateminɛ na, nka a tɛ fɔlɔfɔlɔkoba ye fɔlɔ dɔrɔn.

Cikanw bali

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.

×

Oh snap! I ye fili dɔ sɔrɔ!Aw bɛ nin ni nin fɛn caman Changer ani ka segin ka a lajɛ. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus bɛ sigi amet fermentum la.

Aw ye nin wale in kɛ Walima aw ka nin kɛ

×

Gaucamole senuma! Nin ye lasɔmini ye!Best check yo self, i ma filɛ ka ɲɛ kojugu. Nulla vitae elit libero, o ye fura ye min bɛ wele ko pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl ye fɛn ye min bɛ se ka kɛ fɛn ye min bɛ se ka kɛ fɛn ye.

Aw ye nin wale in kɛ Walima aw ka nin kɛ

×

A ɲɛna!I ye nin lasɔmini cikan kalan ka ɲɛ. Cum sociis natoque penatibus ni magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis ye jiri ye min bɛ wele ko mollis interdum.

Aw ye nin wale in kɛ Walima aw ka nin kɛ

×

Kungolow bɛ wuli!Nin ye lasɔmini ye min mago bɛ i ka jateminɛ na, nka a tɛ fɔlɔfɔlɔkoba ye fɔlɔ dɔrɔn.

Aw ye nin wale in kɛ Walima aw ka nin kɛ

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.

Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuuntur consequuuntur, aut 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 sigi i n'a fɔ fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis quasi quae.

jukɔrɔ!
jo!
numan!
sanfɛ!

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

Popover Titre Bamako

Etiam porta sem cɛmanba min bɛ wele ko magna mollis euismod. Maecenas faucibus mollis ye jiri ye min bɛ wele ko mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum min bɛ eros 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ɔ.

  1. <link rel="stylesheet/less" type="texte/css" href="ka dɔgɔ/bootstrap.less" media="bɛɛ" /> rel = "stylesheet/less" suguya = "texte/css" href = "ka dɔgɔ/bootstrap.less" media = "bɛɛ" />
  2. <script suguya = "sɛbɛnni/javascript" src = "js/less-1.0.41.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ɔ.

Kulɛriw bɛrɛbɛrɛw

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.

  1. // Jɛɲɔgɔnyaw
  2. @linkKulɛri : #8b59c2;
  3. @linkColorHover : dibi don ( @linkColor , 10 );
  4. // Gris ye
  5. @nɛrɛma : #000;
  6. @grayDark : yeelen ( @nɛrɛ , 25 %);
  7. @gray : yeelen ( @nɛrɛ , 50 %);
  8. @grayLight : yeelen ( @nɛrɛ , 70 %);
  9. @grayLighter : ka yeelen bɔ ( @nɛrɛ , 90 %);
  10. @nɛrɛma : #fff ;
  11. // Kulɛriw Accent
  12. @bulu : #08b5fb ye ;
  13. @green : #46a546 ye ;
  14. @ bilenman : #9d261d ;
  15. @jɛman : #ffc40d ye;
  16. @oranjɛ : #f89406 ye ;
  17. @pink : #c3325f ye ;
  18. @purple : #7a43b6 ye ;
  19. // Bamanankan na
  20. @baseline : 20px 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.

  1. // Nin ye kumasen ye
  2. /* 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ɛlaw ka ɲɛfɔlisenw na 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).

  1. #font ye { .
  2. . sɛbɛnfura ( @ girinya : normal , @ bonya : 14px , @lineHeight : 20px ) { .
  3. sɛbɛnnibolo - hakɛ : @size ;
  4. font - girinya : @ girinya ;
  5. layini - janya : @lineHeight ;
  6. } ye .
  7. . sans - serif ( @ girinya : normal , @ bonya : 14px , @lineHeight : 20px ) { .
  8. sɛbɛnnibolo - denbaya : "Hɛlwɛtika Neue" , ​​Hɛlwɛtika , Arial , sans - serif ;
  9. sɛbɛnnibolo - hakɛ : @size ;
  10. font - girinya : @ girinya ;
  11. layini - janya : @lineHeight ;
  12. } ye .
  13. . serif ( @ girinya : normal , @ bonya : 14px , @layini janya : 20px ) { .
  14. sɛbɛnnibolo - denbaya : "Georgie" , Times New Roman , Times , sans - serif ;
  15. sɛbɛnnibolo - hakɛ : @size ;
  16. font - girinya : @ girinya ;
  17. layini - janya : @lineHeight ;
  18. } ye .
  19. . monospace ( @ girinya : normal , @ bonya : 12px , @lineHeight : 20px ) { .
  20. sɛbɛnnibolo - denbaya : "Monaco" , Kuriyɛri kura , yɔrɔ kelen ;
  21. sɛbɛnnibolo - hakɛ : @size ;
  22. font - girinya : @ girinya ;
  23. layini - janya : @lineHeight ;
  24. } ye .
  25. } ye .

Gradientw (gradients) (gradients).

  1. #gradient { Bamako .
  2. . horizontal ( @daminɛKulɛri : #555 , @ labanKulɛri : #333 ) { .
  3. kɔkanna - kulɛri : @endColor ;
  4. kɔkan - segin : segin - x ;
  5. kɔkanna - ja : - khtml - jiginni ( sinsinni , kinin fɛ sanfɛ , kinin fɛ sanfɛ , ka bɔ ( @startColor ), ka taa ( @endColor )); // Konqueror ye
  6. kɔkan - ja : - moz - linear - gradient ( kinin fɛ , @daminɛColor , @endColor ); // FF 3,6+ ye
  7. kɔkanna - ja : - ms - sinsinni- gradient ( kinin , @ daminɛColor , @endColor ); // IE10 ye
  8. kɔkan - ja : - webkit - gradient ( sinsinni , kinin fɛ sanfɛ , kinin fɛ sanfɛ , kulɛri - ( 0 % , @startColor ), kulɛri - ( 100 % , @endColor )); // Safari 4+, Krom 2+
  9. kɔkanna - ja : - webkit - linear - gradient ( kinin fɛ , @daminɛKulɛri , @ labanKulɛri ); // Safari 5.1+, Krom 10+
  10. kɔkanna - ja : - o - sinsinni- gradient ( kinin , @ daminɛColor , @endColor ); // Opera 11.10 ye
  11. - ms - filter : %( "progid:DXJaTransform.Microsoft.gradient(daminɛKulɛri='%d', labanKulɛri='%d', Kulɛri laban=1)" , @daminɛKulɛri , @ labanKulɛri ); // IE8+ ye
  12. filɛri : e (%( "progid:DXJaTransform.Microsoft.gradient(daminɛKulɛri='%d', labanKulɛri='%d', Kulɛri laban=1)" , @daminɛKulɛri , @ labanKulɛri )); // IE6 ani IE7
  13. kɔkanna - ja : sinsinni- gradient ( kinin , @startColor , @endColor ); // Le standard
  14. } ye .
  15. . jɔlen ( @daminɛKulɛri : #555 , @ labanKulɛri : #333 ) { .
  16. kɔkanna - kulɛri : @endColor ;
  17. kɔkan - segin : segin - x ;
  18. kɔkan - ja : - khtml - jiginni ( sinsinni , kinin fɛ sanfɛ , kinin fɛ duguma , ka bɔ ( @startColor ), ka taa ( @endColor )); // Konqueror ye
  19. kɔkanna - ja : - moz - sinsinni - sɛgɛsɛgɛli ( @daminɛKulɛri , @ labanKulɛri ); // FF 3,6+ ye
  20. kɔkanna - ja : - ms - sinsinni- gradient ( @ daminɛKulɛri , @ labanKulɛri ) ; // IE10 ye
  21. kɔkanna - ja : - webkit - gradient ( sinsinni , kinin fɛ sanfɛ , kinin fɛ duguma , kulɛri - ( 0 % , @startColor ), kulɛri - ( 100 % , @endColor )); // Safari 4+, Krom 2+
  22. kɔkanna - ja : - webkit - linear - gradient ( @daminɛKulɛri , @ labanKulɛri ); // Safari 5.1+, Krom 10+
  23. kɔkanna - ja : - o - sinsinni- gradient ( @ daminɛKulɛri , @ labanKulɛri ) ; // Opera 11.10 ye
  24. - ms - filter : %( "progid:DXJaTransform.Microsoft.gradient(daminɛKulɛri='%d', labanKulɛri='%d', Kulɛri laban=0)" , @daminɛKulɛri , @ labanKulɛri ); // IE8+ ye
  25. filɛri : e (%( "progid:DXJaTransform.Microsoft.gradient(daminɛKulɛri='%d', labanKulɛri='%d', Kulɛri laban=0)" , @daminɛKulɛri , @ labanKulɛri )); // IE6 ani IE7
  26. kɔkanna - ja : sinsinni- gradient ( @ daminɛKulɛri , @ labanKulɛri ); // A ka standard
  27. } ye .
  28. . ɲɛsincogo ( @daminɛKulɛri : #555 , @ labanKulɛri : #333 , @deg : 45deg ) { .
  29. ...
  30. } ye .
  31. . jɔlen - saba - kulɛriw ( @daminɛKulɛri : #00b3ee, @midKulɛri: #7a43b6, @kulɛri jɔ: 0.5, @ labanKulɛri: #c3325f) {
  32. ...
  33. } ye .
  34. } 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.

  1. // Griditude (Griditude).
  2. @gridKolonw : 16 ;
  3. @gridKɔlɔn bonya : 40px ;
  4. @gridGutterBonya : 20px ye ;
  5. // Sistɛmu min bɛ wele ko Grid
  6. . minɛn kɔnɔ { .
  7. bonya : @siteBonya ;
  8. margin : 0 otomatiki ;
  9. . ɲɛfɔli jɛlen ();
  10. } ye .
  11. . kuluw ( @kolonSpan : 1 ) { .
  12. jirali : kɔnɔna na ;
  13. flot : kinin fɛ ;
  14. width : ( @gridKɔlɔnBɔrɔ * @kolonSpan ) + ( @gridGutterWidth * ( @kolonSpan - 1 ));
  15. margin - kinin fɛ : @gridGutterWidth ;
  16. &: fɔlɔ - den { .
  17. margin - kinin fɛ : 0 ;
  18. } ye .
  19. } ye .
  20. . offset ( @kolonOffset : 1 ) { .
  21. margin - kinin fɛ : ( @gridKɔlɔnJɛkulu * @kolonOffset ) + ( @gridGutterWidth * ( @kolonOffset - 1 )) ! nafama ;
  22. } ye .