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 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.
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.
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:
Télécharger, fork, pull, file issues, ani fɛn wɛrɛw ni Bootstrap repo ofisiyali ye Github kan.
Sisan, v1.3.0 ye
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 ›
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.
Bootstrap bɛ na ni CSS lajɛlen ye, min ma labɛn, ani misali jatebɔlanw.
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ɛ.
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" >
- ...
- </div> ye
- <div kalasi = "span10" >
- ...
- </div> ye
- </div> ye
Nest i ka kɔnɔkow ni i ka kan ka dɔ Dabɔ .row
kulu dɔ kɔnɔ min bɛ yen.
- <div kalasi = "lafiɲɛbɔ" >
- <div kalasi = "span12" >
- Nivo 1 ka kulu
- <div kalasi = "lafiɲɛbɔ" >
- <div kalasi = "span6" >
- Nivo 2nan
- </div> ye
- <div kalasi = "span6" >
- Nivo 2nan
- </div> ye
- </div> ye
- </div> ye
- </div> ye
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.
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. |
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.
- @gridKolonw : 24 ;
- @gridKɔlɔn bonya : 20px ;
- @gridGutterBonya : 20px ye ;
Ni recompiled, i bɛna sigi!
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>
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>
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ɔ: @basefont
ani @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.
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.
Baara kɛ ni sinsincogo ye, ladɛrɛsiw, & surunyalenw ye
<strong>
<em>
<address>
<abbr>
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.
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.
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:
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 ɲɛ.
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.
<blockquote>
<p>
<small>
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
- <blockquote> ye
- <p> Lorem ipsum dolor sigilen amet, consectetur adipiscing elit. Jateden dafalen posuere erat a ante venenatis dapibus posuere velit aliquet. </p> , o ye
- <misɛn> dɔgɔtɔrɔ juliyusi hibɛri </small>
- </blockquote> ye
<ul>
<ul.unstyled>
<ol>
dl
<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, 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 |
<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. |
<span class="label">
Aw ye aw hakili sama kumasen o kumasen kan aw farikolo sɛbɛn kɔnɔ walima ka a darapo kan.
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ɛ |
Ja fitininw jira minnu bonya tɛ kelen ye ɲɛw kan minnu ka HTML sennasanbara ka dɔgɔ ani minnu cogoya ka dɔgɔ.
Jaa fitininw bɛ .media-grid
se 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 .span6
kuluw hakɛw ma.
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.
- <ul kalasi = "kunnafoni-sɛbɛn" >
- <li>
- <a href = "#" > ye
- <img class = "jaabi fitinin" src = "https://www.mig.w/330x230" alt = "" >
- </a>
- </li>
- <li>
- <a href = "#" > ye
- <img class = "jaabi fitinin" src = "https://www.mig.w/330x230" alt = "" >
- </a>
- </li>
- </ul>
<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 .
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>
Aw ye fansi dɔɔnin sɔrɔ ni aw ka tabali ye ni zebra-striping farali ye—aw ye .zebra-striped
kalan 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>
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 |
- <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>
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.
I bɛ Fàra .form-stacked
i 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.
Formulaire input
, select
, walima textarea
bonya 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.
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 .primary
ye, kalasi bulu jɛman .info
, kalasi wuluwulu .success
ani kalasi bilenman .danger
.
Butɔn cogoyaw bɛ se ka kɛ fɛn o fɛn na ni a .btn
kɛ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:
Fancy butɔni belebelebaw walima fitininw? Have at it!
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 .disabled
ye jὲɲɔgɔnyaw ye ani :disabled
fɛnw <button>
ye.
.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.
- <div class = "kɔlɔsili-cikan lasɔmini" >
- <a kalasi = "dadon" href = "#" > × </a>
- <p><strong> Guacamole senuma ! </strong> Best check yo yɛrɛ , i tɛ ɲɛ kojugu . </p> , o ye
- </div> ye
.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.
- <div class = "kɔlɔsili-cikan bloki-cikan lasɔmini" >
- <a kalasi = "dadon" href = "#" > × </a>
- <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
- <div class = "kɔlɔsili-walew" >
- <a class = "btn fitinin" href = "#" > nin wale in kɛ </a> <a class = "btn fitinin" href = "#" > Walima nin kɛ </a>
- </div> ye
- </div> ye
Modalw — dialogues walima lightboxes — ka ɲi kosɛbɛ sigida walew la ko minnu na a nafa ka bon ko kɔkankow ka mara.
Farikolo ɲuman kelen...
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.
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.
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.
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ɛ!
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ɔ! |
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ɛ 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.
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ɔ.
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 ;
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 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 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 .
- ...
- } ye .
- #gradient { Bamako .
- ...
- . 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 .
- ...
- } ye .
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 ));
- // Kolon dɔw dilan
- . kuluw ( @kolonSpan : 1 ) { .
- width : ( @gridKɔlɔnBɔrɔ * @kolonSpan ) + ( @gridGutterWidth * ( @kolonSpan - 1 ));
- } ye .
/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ɛɛ.
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 O tɛmɛnen 'kɔ, n'i ye watchr Sìgi sen kan, i bɛ Se ka boli |
Javascript ye | Less.js labanw telesarse ani ka sira don a la (ani Bootstrap)
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 |
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ɛ. |