sanfɛ
numan
jo
jukɔrɔ

Bootstrap, ka bɔ Twitter kan

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

Sisan, v1.3.0 ye

Tariku

Twitter ka ɛntɛrinɛti injiniyɛriw ye tariku kɔnɔ, u tun bɛ gafemarayɔrɔ minnu dɔn, olu bɛ se ka baara kɛ ni gafemarayɔrɔ bɛɛ ye walasa ka ɲɛfɛla wajibiyalenw dafa. Bootstrap daminɛna i n’a fɔ gɛlɛya minnu bɛ na ni jaabi ye. Ni mɔgɔ sirannin caman ka dɛmɛ ye, Bootstrap yiriwara kosɛbɛ.

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.

A kɔrɔbɔra ani a dɛmɛna Chrome, Safari, Internet Explorer ani Firefox kɔnɔ
  • 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.

Misaliw minnu bɛ daminɛ teliya la

Aw mago bɛ template teliya dɔw la wa? An ye nin misali jɔnjɔn minnu fara ɲɔgɔn kan, olu lajɛ:

  • Layout nɔgɔman saba-kolon ni hero unit
  • Fluid layout ni kɛrɛfɛla jɔlen
  • Minɛn nɔgɔman min bɛ dulon apps kama

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 = "lafiɲɛbɔ" >
  2. <div kalasi = "span6" >
  3. ...
  4. </div> ye
  5. <div kalasi = "span10" >
  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
1/3 ye
1/3 ye
1/3 ye
1/3 ye
2/3 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
1/3 bɛrɛbɛrɛ 2/3s
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

Nesting kuluw

Nest i ka kɔnɔkow ni i ka kan ka dɔ Dabɔ .rowkulu dɔ kɔnɔ min bɛ yen.

Misali la, kulu minnu bɛ sigi sen kan

Nivo 1 ka kulu
Nivo 2nan
Nivo 2nan
  1. <div kalasi = "lafiɲɛbɔ" >
  2. <div kalasi = "span12" >
  3. Nivo 1 ka kulu
  4. <div kalasi = "lafiɲɛbɔ" >
  5. <div kalasi = "span6" >
  6. Nivo 2nan
  7. </div> ye
  8. <div kalasi = "span6" >
  9. Nivo 2nan
  10. </div> ye
  11. </div> ye
  12. </div> ye
  13. </div> ye

Aw bɛ aw yɛrɛ ka grid wuli

Built into Bootstrap ye fɛn damadɔ ye minnu bɛ se ka 940px grid system default ladilan. Ni i ye fɛn dɔw kɛ ka kɛɲɛ ni i yɛrɛ sago ye, i bɛ se ka kolonw bonya, u ka jibolisiraw, ani u sigilen bɛ minɛn min kɔnɔ, i bɛ se ka fɛn caman sɛmɛntiya.

Grid kɔnɔ

fɛn caman bɛrɛbɛrɛ minnu ka kan ka kɛ walasa ka grid system sɛmɛntiya sisan u bɛɛ sigilen bɛ preboot.less.

Yɛlɛma-yɛlɛma Nafa min bɛ sɔrɔ a daminɛ na Cogojirali
@gridColumns 16 ye Kolonw hakɛ min bɛ jabaranin kɔnɔ
@gridColumnWidth 40px ye Kolon kelen-kelen bɛɛ bonya min bɛ jabaranin kɔnɔ
@gridGutterWidth 20px ye Yɔrɔ jugu min bɛ kulu kelen-kelen bɛɛ ni ɲɔgɔn cɛ
@siteWidth Kolonw ni jibolisiraw bɛɛ lajɛlen jatebɔlen An bɛ baara Kɛ ni match basigilen dɔw ye walasa ka kolonw ni gutterw hakɛ jate ani ka .fixed-container()mixin bonya sigi.

Sisan ka customize

Grid (jatebɔlan) bεε bεε bε Yεlεma cogo min na, o kɔrɔ ye ka fɛn saba @grid-*bεε bε Yεlεma ani ka Less files (Less files) dalajɛ kokura.

Bootstrap bɛ na ni minɛnw ye walasa ka grid system (jatebɔlan) dɔ ɲɛnabɔ min bɛ se ka se koloma 24 ma; default ye 16 dɔrɔn ye.I ka jatebɔlanw bɛna kɛ cogo min na ka kɛɲɛ ni jatebɔlan 24 ye, o filɛ nin ye.

  1. @gridKolonw : 24 ;
  2. @gridKɔlɔn bonya : 20px ;
  3. @gridGutterBonya : 20px ye ;

Ni recompiled, i bɛna sigi!

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

  1. <farikolo>
  2. <div kalasi = "minɛn" >
  3. ...
  4. </div> ye
  5. </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.

  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 & 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 tun bɛ se ka baara kɛ ni a ye cogo min na, o misali fila 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
Tɔgɔ dafalen
fɔlɔ[email protected]

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 &mdash;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
  1. <blockquote> ye
  2. <p> Lorem ipsum dolor sigilen amet, consectetur adipiscing elit. Jateden dafalen posuere erat a ante venenatis dapibus posuere velit aliquet. </p> , o ye
  3. <misɛn> dɔgɔtɔrɔ juliyusi hibɛri </small>
  4. </blockquote> ye

Lisitiw

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.

Kode ye

<code> <pre>

Pimp i ka code in style ni tags nɔgɔman fila ye. Walasa ka hali siranɲɛ caman sɔrɔ javascript fɛ, i ka Google ka code prettify bibliothèque kɔnɔ ani i bɛ sigi.

Kode jirali

Kode, blokiw walima dɔrɔn snippets inline, bɛ se ka jira ni style ye dɔrɔn ni u sirili ye tag kinin fɛ. Ni kode blokiw bɛ tigɛli caman kan, aw bɛ baara kɛ ni <pre>element ye. Walasa ka inline code sɔrɔ, baara kɛ ni <code>element ye.

Fɛn Jaabi
<code> Nin cogo in na, i ka kode min sirilen bɛ, o bɛna kɛ i n’a fɔ nin >html<fɛn in.
<pre>
<div> ye
  <h1>Kunnafoni </h1>
  <p>Fɛn dɔ bɛ yan yɛrɛ...</p>
</div> ye

Kɔlɔsili: Aw ye aw jija ka kode mara pretags kɔnɔ ka surunya kinin fɛ cogo min na; a bɛna tablo bɛɛ jira.

<pre class="prettyprint">

Baara kɛli ni google-code-prettify bibliothèque ye, i bɛ kode blokiw sɔrɔ ka yecogo wɛrɛ sɔrɔ dɔɔnin ani automatique syntax highlighting.

<div> <h1> kungolo </h1> <p> fɛn dɔ bɛ yan yɛrɛ... </p> </div>
  
  

google-code-prettify telesarse ani ka readme lajɛ walasa ka baara kɛ ni a ye.

Labeli minnu bɛ kɛ inline kɔnɔ

<span class="label">

Aw ye aw hakili sama kumasen o kumasen kan aw farikolo sɛbɛn kɔnɔ walima ka a darapo kan.

Aw bɛ fɛn o fɛn sɛbɛn

A ma deli ka mago don o fɛn cɛɲiw dɔ la kelen na New! walima Darapo nafamaw ni kode sɛbɛn? Ayiwa, sisan u b'i bolo. Fɛn minnu bɛ sɔrɔ a kɔnɔ, olu filɛ nin ye:

Tàamasiyɛn Jaabi
<span class="label">Default</span> Fɔlɔ
<span class="label success">New</span> Kura
<span class="label warning">Warning</span> Lasɔmi
<span class="label important">Important</span> Nafama
<span class="label notice">Notice</span> Ka jateminɛ

Jateblaw ka kunnafonidilanw

Ja fitininw jira minnu bonya tɛ kelen ye ɲɛw kan minnu ka HTML sennasanbara ka dɔgɔ ani minnu cogoya ka dɔgɔ.

Misali la, ja fitininw

Jaa fitininw bɛ .media-gridse ka kɛ hakɛ o hakɛ ye, nka u bɛ baara kɛ ka ɲɛ ni u karti kɛra ka ɲɛsin Bootstrap grid system min bɛ a kɔnɔ. Jaw bonya i n’a fɔ 90, 210 ani 330 bɛ fara ɲɔgɔn kan ni padding pixel damadɔw ye walasa ka bɛn .span2, .span4, ani .span6kuluw hakɛw ma.

Belebeleba

Hakɛ

Fitinin

Kodeli u la

Media grids baara ka nɔgɔn ani u ka nɔgɔn kosɛbɛ markup fan fɛ. U hakɛw bɛ Bɔ ja minnu bɛ a kɔnɔ olu bonya dɔrɔn de kan.

  1. <ul kalasi = "kunnafoni-sɛbɛn" >
  2. <li>
  3. <a href = "#" > ye
  4. <img class = "jaabi fitinin" src = "https://www.mig.w/330x230" alt = "" >
  5. </a>
  6. </li>
  7. <li>
  8. <a href = "#" > ye
  9. <img class = "jaabi fitinin" src = "https://www.mig.w/330x230" alt = "" >
  10. </a>
  11. </li>
  12. </ul>

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
  1. <tabali> ye
  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

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.

  1. <tabali kalasi = "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
2 ye Joe ye Sixpack ye Angilɛtɛri
3 ye Stu. Bamako, Mali Dent Kode ye
1 ye Aw ta Kelen Angilɛtɛri
  1. <script src = "js/jquery/jquery.tabali-sɔrɔ-minɛn.min.js" </script>
  2. <sɛbɛnni >
  3. $ ( baara () { .
  4. $ ( "tabali#sortTabali misali" ). tabali sɛgɛsɛgɛlikɛla ({ sortList : [[ 1 , 0 ]] });
  5. });
  6. </script> ye
  7. <tabali kalasi = "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 bɛ nafa don 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
Dɛmɛ sɛbɛn yɔrɔ fitinin
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.
 

Foro hakɛw sɛbɛn

Formulaire input, select, walima textareabonya suguya o suguya kɛ ka kɛɲɛ ni i yɛrɛ sago ye i kɛtɔ ka kalansen damadɔw dɔrɔn fara i ka taamasiyɛn kan.

Kabini v1.3.0, an ye jatebɔlanw fara ɲɔgɔn kan minnu sinsinnen bɛ jatebɔlanw kan foroko fɛnw kan. Aw ye baara kɛ ni ninnu ye .mini, .small, etc kalanw kan minnu bɛ yen.

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.

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

 

Kɔlɔsili jɔnjɔnw

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

Aw ye javascript sɔrɔ »

×

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

×

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

×

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.

Misali la, kode

  1. <div class = "kɔlɔsili-cikan lasɔmini" >
  2. <a kalasi = "dadon" href = "#" > × </a>
  3. <p><strong> Guacamole senuma ! </strong> Best check yo yɛrɛ , i tɛ ɲɛ kojugu . </p> , o ye
  4. </div> ye

Cikanw bali

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

Aw ye javascript sɔrɔ »

×

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

×

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 ye fɛn ye min tɛ fɛn caman ye
  • Nisi erat portititor ligula
  • Eget lacinia odio sem nec elit ye
×

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.

×

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.

Misali la, kode

  1. <div class = "kɔlɔsili-cikan bloki-cikan lasɔmini" >
  2. <a kalasi = "dadon" href = "#" > × </a>
  3. <p><strong> Guacamole senuma ! Nin ye lasɔmini ye! </strong> Best check yo yɛrɛ , i tɛ ɲɛ 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. </p> , o ye
  4. <div class = "kɔlɔsili-walew" >
  5. <a class = "btn fitinin" href = "#" > nin wale in kɛ </a> <a class = "btn fitinin" href = "#" > Walima nin kɛ </a>
  6. </div> ye
  7. </div> ye

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.

Aw ye javascript sɔrɔ »

Baarakɛminɛnw ladilikanw

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

Aw ye javascript sɔrɔ »

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.

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.

Aw ye javascript sɔrɔ »

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.

Ka baara daminɛ

Javascript ni Bootstrap bibliothèque ka don ɲɔgɔn na, o ye super easy ye. Jɛ la an bɛ taa fɛn jɔnjɔnw kan ani ka plugins kabakoma dɔw di aw ma walasa k’aw daminɛ!

Javascript sɛbɛnw lajɛ »

Min bɛ a kɔnɔ

Bootstrap ka yɔrɔ fɔlɔ dɔw lase ɲɛnamaya ma ni ladamu-minɛn kura ye minnu bɛ baara kɛ ni jQuery ani Ender ye . An b’aw jija aw k’u janya ani k’u sɛmɛntiya walasa u ka bɛn aw ka yiriwali mago kɛrɛnkɛrɛnnenw ma.

Papiye Cogojirali
bootstrap-modal.js ka baarakɛminɛnw An ka Modal plugin ye super slim ta ye laada modal js plugin kan! An y’an janto kɛrɛnkɛrɛnnenya la ka baarakɛcogo jɛlen dɔrɔn de Dòn a la an bɛ min wajibiya twitter kan.
bootstrap-lasɔminiw.js Alert plugin ye super tiny class ye min bɛ kɛ ka close functionality fara alerts kan.
bootstrap-dɔgɔtɔrɔso.js Nin 'plugin in ye 'sènfɛ-sɛbɛnni-minɛnw Fàrala bootstrap sanfɛ-yɔrɔ kan walima tablɛ-yɔrɔw kan.
bootstrap-scrollspy.js ka baarakɛminɛnw ScrollSpy plugin ye auto updating nav dɔ farali ye ka da scroll jɔyɔrɔ kan bootstrap topbar kan.
bootstrap-tabs.js ka baarakɛminɛnw Nin plugin in bɛ tab ni pill baarakɛcogo teliyalen, fangama dɔ fara a kan walasa ka cycle kɛ sigida kɔnɔkow fɛ.
bootstrap-twipsy.js ka baarakɛminɛnw A sinsinnen bɛ jQuery.tipsy plugin ɲumanba kan min sɛbɛnna Jason Frame fɛ; twipsy ye sɛgɛsɛgɛli kura ye, min tɛ a jigi da jaw kan, a bɛ baara kɛ ni css3 ye animationw kama, ani data-attributes sigida tɔgɔ marali kama!
bootstrap-popover.js ka baarakɛminɛnw Popover plugin bɛ 'interface nɔgɔman Di walasa ka popovers Fàra i ka application kan. A bɛ boostrap-twipsy.js plugin janya, o la aw k’aw jija k’o filen in fana minɛ ni popovers bɛ don aw ka porozɛ kɔnɔ!

Yala javascript ka kan ka kɛ wa?

Ayi! Bootstrap dabɔra fɔlɔ ani fɔlɔ ka kɛ CSS gafemarayɔrɔ ye. Nin javascript in bɛ ɲɔgɔndan jɔnjɔn dɔ Di cogoyaw kan minnu bɛ a kɔnɔ.

Nka, minnu mago bɛ javascript la, an ye plugins (dakunw) Di sanfɛ walasa k’aw dɛmɛ ka Bootstrap ni javascript fara ɲɔgɔn kan cogo faamuya ani ka sugandili teliya, nɔgɔman di aw ma baarakɛcogo jɔnjɔnw na o yɔrɔnin bɛɛ.

Walasa ka kunnafoni wɛrɛw sɔrɔ ani ka ɲɛjirali ɲɛnama dɔw ye, i ka an ka plugin sɛbɛnw lajɛ .

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" href = "ka dɔgɔn/bootstrap.less" media = "bɛɛ" />
  2. <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.

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

  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. ...
  14. } ye .

Gradientw (gradients) (gradients).

  1. #gradient { Bamako .
  2. ...
  3. . jɔlen ( @daminɛKulɛri : #555 , @ labanKulɛri : #333 ) { .
  4. kɔkanna - kulɛri : @endColor ;
  5. kɔkan - segin : segin - x ;
  6. kɔkan - ja : - khtml - jiginni ( sinsinni , kinin fɛ sanfɛ , kinin fɛ duguma , ka bɔ ( @startColor ), ka taa ( @endColor )); // Konqueror ye
  7. kɔkanna - ja : - moz - sinsinni - sɛgɛsɛgɛli ( @daminɛKulɛri , @ labanKulɛri ); // FF 3,6+ ye
  8. kɔkanna - ja : - ms - sinsinni- gradient ( @ daminɛKulɛri , @ labanKulɛri ) ; // IE10 ye
  9. kɔkanna - ja : - webkit - gradient ( sinsinni , kinin fɛ sanfɛ , kinin fɛ duguma , kulɛri - ( 0 % , @startColor ), kulɛri - ( 100 % , @endColor )); // Safari 4+, Krom 2+
  10. kɔkanna - ja : - webkit - linear - gradient ( @daminɛKulɛri , @ labanKulɛri ); // Safari 5.1+, Krom 10+
  11. kɔkanna - ja : - o - sinsinni- gradient ( @ daminɛKulɛri , @ labanKulɛri ) ; // Opera 11.10 ye
  12. kɔkanna - ja : sinsinni- gradient ( @ daminɛKulɛri , @ labanKulɛri ); // A ka standard
  13. } ye .
  14. ...
  15. } ye .

Baarakɛcogo minnu bɛ kɛ

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. @siteWidth : ( @gridKolonw * @gridKolonw bonya ) + ( @gridGutterWidth * ( @gridKolonw - 1 ));
  6.  
  7. // Kolon dɔw dilan
  8. . kuluw ( @kolonSpan : 1 ) { .
  9. width : ( @gridKɔlɔnBɔrɔ * @kolonSpan ) + ( @gridGutterWidth * ( @kolonSpan - 1 ));
  10. } ye .

Compiling Less (Dɔgɔtɔrɔw).

/lib/ kɔnɔ filenw ladilanni kɔfɛ .less, i bɛna u lajɛ kokura walasa ka bootstrap-*.*.*.css ni bootstrap-*.*.*.min.css filenw labɛn kokura. N’i ​​bɛ samali ɲinini dɔ ci GitHub ma, i ka kan ka segin-ka-bɔnye kɛ tuma bɛɛ.

Fɛɛrɛ minnu bɛ kɛ ka fɛnw dalajɛ

Kɛcogo Taabolo minnu bɛ kɛ
Node ni makefile ye

Les command line compiler in sigi ni npm ye ni nin cikan in kɛli ye:

$ npm ka lessc sigi sen kan

Ni a sigilen don dɔrɔn i bɛ boli makeka bɔ i ka bootstrap directory ju la ani i bɛɛ bɛ labɛn.

O tɛmɛnen 'kɔ, n'i ye watchr Sìgi sen kan, i bɛ Se ka boli make watchka bootstrap jɔ kokura a yɛrɛma tuma o tuma n'i ye dosiye dɔ Labɛn bootstrap lib kɔnɔ (o tɛ wajibi ye, nɔgɔya fɛɛrɛ dɔrɔn de ye).

Javascript ye

Less.js labanw telesarse ani ka sira don a la (ani Bootstrap) head.

  1. <link rel = "stylesheet/less" href = "/sira/ka taa/bootstrap.less" >
  2. <script src = "/sira/ka taa/ka dɔgɔ.js" </script>

Walasa ka .less filew lajɛ kokura, i k’u mara dɔrɔn k’i ka ɲɛ in doni kokura. Less.js b’u Lajɛ k’u Lakodɔn sigida marayɔrɔ la.

Cikan sɛrɛkili

Ni less cikan-sɛbɛnni baarakɛminɛn bɛ i bolo kaban, i ka nin cikan in kɛ dɔrɔn:

$ lessc ./lib/bootstrap.less > kafoɲɔgɔnya.css

Aw ye aw jija ka don --compresso cikan kɔnɔ ni aw b’a ɲini ka bayt dɔw mara!

Mac app ka dɔgɔ

Mac app min tɛ ofisi ye, o bɛ .less filew ka ɲɛbilasɛbɛnw lajɛ ani ka kode lajɛ ka kɛ sigida filew ye .less file kɔlɔsilen maralen kɔfɛ.

N’i ​​b’a fɛ, i bɛ se ka fɛɛrɛw tigɛli kɛ appli kɔnɔ walasa ka automatique minifying ani directory min kɔnɔ, files compilés bɛ laban ka kɛ.