hejuru

ibumoso

iburyo

hepfo

Shyira kuri CSS

Kugirango utangire byihuse kandi byoroshye, kora iki gice kurupapuro rwawe.

Koresha na Buke

Umufana wo gukoresha Buke? Ntakibazo, kora repo gusa ongeraho iyi mirongo:

Fork on GitHub

Kuramo, fork, gukurura, ibibazo bya dosiye, nibindi byinshi hamwe na repot ya Bootstrap yemewe kuri Github.

Bootstrap kuri GitHub »

Kugeza ubu v1.3.0

Amateka

Ba injeniyeri kuri Twitter bakoresheje amateka hafi yisomero ryose bari bamenyereye kugirango bahuze ibyifuzo byimbere. Bootstrap yatangiye nkigisubizo cyibibazo byatanzwe. Hamwe nubufasha bwabantu benshi bateye ubwoba, Bootstrap yakuze cyane.

Soma byinshi kuri dev.twitter.com ›

Inkunga ya mushakisha

Bootstrap irageragezwa kandi igashyigikirwa muri mushakisha nini zigezweho nka Chrome, Safari, Internet Explorer, na Firefox.

Yageragejwe kandi ishyigikiwe muri Chrome, Safari, Internet Explorer, na Firefox

Safari igezweho
Google Chrome igezweho
Firefox 4+
Internet Explorer 7+
Opera 11

Harimo iki

Bootstrap ije yuzuye hamwe na CSS yakozwe, idakusanyijwe, nurugero rwerekana.

Amacomeka ya Javascript
Byose byumwimerere .nta dosiye
Byuzuye kandi byuzuye CSS _
Inyandiko yuzuye ya styleguide
Ingero eshatu zimpapuro zifite imiterere itandukanye

Ingero zihuse

Ukeneye inyandikorugero zihuse? Reba izi ngero zifatizo twashyize hamwe:

Urusobemiyoboro

Sisitemu isanzwe ya grid yatanzwe nkigice cya Bootstrap ni 940px ubugari bwa 16-inkingi. Nuburyohe bwa sisitemu izwi cyane ya 960, ariko idafite margin / padding yinyongera ibumoso niburyo.

Urugero rwa gride

Nkuko bigaragara hano, imiterere shingiro irashobora gushirwaho hamwe n "" inkingi "ebyiri, buri kimwekimwe cyose cyumubare winkingi 16 zifatizo twasobanuye nkigice cya sisitemu ya gride. Reba ingero zikurikira kugirango zitandukanye.

<div class = "umurongo" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

1/3

2/3

Kureka inkingi

8 offset 4

1/3 guhagarika 2 / 3s

4 offset 4

5 offset 3

10 offset 6

Inkingi

Nuhitemo ibikubiyemo niba ugomba gukora mugukora .rowinkingi ihari.

Urugero rwinkingi

Urwego 1 rwinkingi

Urwego 2

<div class = "umurongo" > 
  <div class = "span12" > 
    Urwego 1 rwinkingi
    <div class = "umurongo" > 
      <div class = "span6" > 
        Urwego 2
      </div>
      <div class = "span6" > 
        Urwego 2
      </div>
    </div>
  </div>
</div>

Kuzuza gride yawe

Yubatswe muri Bootstrap nintoki zimpinduka zo gutandukanya sisitemu ya gride ya 940px. Hamwe na gato yo kwihindura, urashobora guhindura ingano yinkingi, imyanda yabo, hamwe nibikoresho babamo.

Imbere muri gride

Ibihinduka bikenewe kugirango uhindure sisitemu ya grid kuri ubu byose bibamo variables.less.

Birahinduka	Agaciro gasanzwe	Ibisobanuro
`@gridColumns`	16	Umubare winkingi muri gride
`@gridColumnWidth`	40px	Ubugari bwa buri nkingi muri gride
`@gridGutterWidth`	20px	Umwanya mubi hagati ya buri nkingi
`@siteWidth`	Kubara igiteranyo cyinkingi zose	Dukoresha bimwe byibanze kugirango tubare umubare winkingi nigituba hanyuma dushyireho ubugari bwa `.fixed-container()`mixin.

Noneho guhitamo

Guhindura grid bisobanura guhindura ibintu bitatu @grid-*bihinduka no gusubiramo dosiye Ntoya.

Bootstrap ije ifite ibikoresho byo kuyobora sisitemu ifite inkingi zigera kuri 24; Mburabuzi ni 16. Gusa Dore uko impinduka zawe za grid zasa nkizisanzwe kuri 24-inkingi ya gride.

@gridColumns : 24 ;       
@gridColumnUbugari : 20px ;   
@GridGutterUbugari : 20px ;

Numara gusubiramo, uzashyirwaho!

Imiterere ihamye

Mburabuzi kandi yoroshye 940px-ubugari, imiterere igizwe nurubuga rwose cyangwa page yatanzwe numwe <div.container>.

<body>
  <div class = "kontineri" > 
    ...
  </div>
</body>

Imiterere y'amazi

Ubundi buryo bworoshye, bworoshye page page imiterere hamwe na min- na max-ubugari hamwe nu ruhande rwibumoso. Nibyiza kuri porogaramu na doc.

<body>
  <div class = "kontineri-fluid" > 
    <div class = "kuruhande " 
      ...
    </div>
    <div class = "ibirimo" > 
      ...
    </div>
  </div>
</body>

Imitwe & kopi

Urwego rusanzwe rwimyandikire yo gutunganya urubuga rwawe.

Imashini yimyandikire yose ishingiye kubintu bibiri bito bihinduka mubihinduka.nta dosiye: @basefontna @baseline. Iya mbere ni ishingiro ryimyandikire-nini ikoreshwa mugihe cyose naho icya kabiri ni umurongo-muremure.

Dukoresha izo mpinduka, hamwe nimibare imwe, kugirango dukore marge, padi, hamwe numurongo-muremure wubwoko bwacu nibindi byinshi.

h1. Umutwe 1

h2. Umutwe 2

h3. Umutwe 3

h4. Umutwe 4

h5. Umutwe 5

h6. Umutwe 6

Urugero

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur comiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Urugero Umutwe Ufite umutwe-mutwe…

Misc. Ibintu

Ukoresheje gushimangira, aderesi, & amagambo ahinnye

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

Igihe cyo gukoresha

Ibimenyetso byibandaho ( <strong>na <em>) bigomba gukoreshwa kugirango byerekane akamaro cyangwa gushimangira ijambo cyangwa interuro ugereranije na kopi yacyo. Koresha <strong>akamaro no <em>gushimangira ibitekerezo .

Shimangira mu gika

Fusce dapibus , tellus ac cursus commodo , iyicarubozo mauris condimentum nibh , ut fermentum massa justo icara amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra augue.

Icyitonderwa: Biracyari byiza gukoresha <b>na <i>tagi muri HTML5 kandi ntibigomba kwandikwa bitinyitse kandi byanditseho (nubwo niba hari ibintu byinshi bisobanutse, koresha). <b>igamije kwerekana amagambo cyangwa interuro utagaragaje akamaro kiyongereye, mugihe <i>ahanini ari ijwi, amagambo tekinike, nibindi.

Aderesi

Ikintu <address>gikoreshwa muguhuza amakuru kubakurambere ba hafi, cyangwa umubiri wose wakazi. Dore ingero ebyiri z'uburyo byakoreshwa:

Twitter, Inc
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Izina ryuzuye
[email protected]

Icyitonderwa: Buri murongo muburyo <address>bugomba kurangirana numurongo-ucamo ( <br />) cyangwa ugapfundikirwa murwego rwo guhagarika (urugero, <p>) kugirango wubake neza ibirimo.

Amagambo ahinnye

Ku magambo ahinnye n'amagambo ahinnye, koresha <abbr>tagi ( <acronym>itaye agaciro muri HTML5 ). Shira ifoto ngufi muri tagi hanyuma ushireho umutwe wizina ryuzuye.

Inzitizi

<blockquote> <p> <small>

Uburyo bwo gusubiramo

Kugirango ushiremo blocote, <blockquote>uzenguruke <p>hamwe na <small>tagi. Koresha <small>element kugirango utange inkomoko yawe uzabona em dash —mbere yayo.

Lorem ipsum dolor icara amet, consectetur adipiscing elit. Integer posuere erat ante venenatis dapibus posuere velit aliquet.
Dr. Julius Hibbert

<blockquote>
  <p> Lorem ipsum dolor icara amet, consectetur adipiscing elit. Integer posuere erat ante venenatis dapibus posuere velit aliquet. </p>
  <small> Dr. Julius Hibbert </small>
</blockquote>

Urutonde

Urutonde`<ul>`

Lorem ipsum dolor icara amet
Consectetur adipiscing elit
Integer molestie lorem kuri massa
Facilisis muri pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat kuri
Faucibus porta lacus fringilla vel
Aenean bicara amet erat nunc
Eget porttitor lorem

Unstyled`<ul.unstyled>`

Lorem ipsum dolor icara amet
Consectetur adipiscing elit
Integer molestie lorem kuri massa
Facilisis muri pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat kuri
Faucibus porta lacus fringilla vel
Aenean bicara amet erat nunc
Eget porttitor lorem

Rutegetse`<ol>`

Lorem ipsum dolor icara amet
Consectetur adipiscing elit
Integer molestie lorem kuri massa
Facilisis muri pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean bicara amet erat nunc
Eget porttitor lorem

Ibisobanuro`dl`

Urutonde rwibisobanuro: Urutonde rwibisobanuro rwiza rwo gusobanura amagambo.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida kuri eget metus.
Malesuada porta: Etiam porta sem maleuada magna mollis euismod.

Kode

<code> <pre>

Shyira kode yawe muburyo hamwe nibirango bibiri byoroshye. Kubindi byinshi bitangaje ukoresheje javascript, manuka muri code ya Google yerekana isomero hanyuma ushireho.

Kugaragaza kode

Kode, guhagarika cyangwa gucamo ibice gusa, birashobora kwerekanwa nuburyo bwo gupfunyika ikirango cyiburyo. Kubice bya code izenguruka imirongo myinshi, koresha ikintu <pre>. Kuri inline code, koresha ikintu <code>.

Ikintu Igisubizo

<code> Mu murongo winyandiko nkiyi, code yawe ipfunyitse izasa nkiyi <html>element.

Ikintu	Igisubizo
`<code>`	Mu murongo winyandiko nkiyi, code yawe ipfunyitse izasa nkiyi `<html>`element.
`<pre>`	<div> <h1> Umutwe </h1> <p> Ikintu hano hano ... </p> </div> Icyitonderwa: Witondere kubika code muri `<pre>`tagi hafi ibumoso bushoboka; Bizatanga ibisobanuro byose.
`<pre class="prettyprint">`	Ukoresheje isomero rya google-code-yerekana neza isomero, uduce twa code yawe tubona uburyo butandukanye bwo kubona amashusho hamwe na syntax yerekana. <div> <h1> Umutwe </h1> <p> Ikintu hano hano ... </p> </div> Kuramo google-code- yerekana neza hanyuma urebe ibisobanuro byuburyo bwo gukoresha.

<pre>

<div>
  <h1> Umutwe </h1>
  <p> Ikintu hano hano ... </p>
</div>

Icyitonderwa: Witondere kubika code muri <pre>tagi hafi ibumoso bushoboka; Bizatanga ibisobanuro byose.

<pre class="prettyprint">

Ukoresheje isomero rya google-code-yerekana neza isomero, uduce twa code yawe tubona uburyo butandukanye bwo kubona amashusho hamwe na syntax yerekana.

<div> <h1> Umutwe </h1> <p> Ikintu hano hano ... </p> </div>

Kuramo google-code- yerekana neza hanyuma urebe ibisobanuro byuburyo bwo gukoresha.

Ibirango

<span class="label">

Hamagara witondere cyangwa ushireho interuro iyo ari yo yose mumyandiko yawe.

Andika ikintu icyo ari cyo cyose

Burigihe ukeneye kimwe muri ibyo Gishya! cyangwa Ibendera ryingenzi mugihe wandika code? Noneho, ubu urabafite. Dore ibirimo kubisanzwe:

Ikirango	Igisubizo
`<span class="label">Default</span>`	Mburabuzi
`<span class="label success">New</span>`	Gishya
`<span class="label warning">Warning</span>`	Iburira
`<span class="label important">Important</span>`	Ni ngombwa
`<span class="label notice">Notice</span>`	Menyesha

Urusobe rw'itangazamakuru

Erekana igikumwe cyubunini butandukanye kurupapuro rufite ikirenge gito cya HTML hamwe nuburyo buto.

Urugero ruto

Thumbnail in the .media-gridcan irashobora kuba ingano iyo ari yo yose, ariko ikora neza mugihe yashushanyije neza muri sisitemu ya Bootstrap ya gride. Ubugari bwibishusho nka 90, 210, na 330 bihuza hamwe na pigiseli nkeya ya padding kugirango bangane.span2 ,, .span4hamwe .span6nubunini bwinkingi.

Kinini

Hagati

Ntoya

Kode

Imiyoboro ya media iroroshye gukoresha kandi byoroshye kuruhande rwibimenyetso. Ibipimo byabo bishingiye gusa kubunini bw'amashusho arimo.

<ul class = "media-grid" > 
  <li>
    <a href = "#"> _ 
      <img class = "igikumwe" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#"> _ 
      <img class = "igikumwe" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

Kubaka ameza

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

Imbonerahamwe ni nziza-kubintu byinshi. Imbonerahamwe nini, ariko, ikenera akantu gato ko gushiraho urukundo kugirango ibe ingirakamaro, nini, kandi isomeka (kurwego rwa kode). Hano hari inama nkeya zifasha.

Buri gihe uzenguruke inkingi zumutwe muburyo bukurikira <thead>ni <thead>>> .<tr><th>

Bisa ninkingi yimitwe, ibirimo kumeza yameza yawe byose bigomba kuba bipfunyitse kuburyo urwego rwawe <tbody>ari <tbody>>> .<tr><td>

Urugero: Imiterere isanzwe yimbonerahamwe

Imbonerahamwe zose zizahita zandikwa nimbibi zingenzi gusa kugirango tumenye neza kandi dukomeze imiterere. Ntibikenewe ko wongera amasomo yinyongera cyangwa ibiranga.

#	Izina	Izina ryanyuma	Ururimi
1	Bamwe	Imwe	Icyongereza
2	Joe	Isakoshi	Icyongereza
3	Stu	Dent	Kode

<table>
  ...
</table>

Urugero: Imbonerahamwe yuzuye

Ku mbonerahamwe isaba amakuru menshi ahantu hafunganye, koresha uburyohe bwuzuye bugabanya padi mo kabiri. Irashobora kandi gukoreshwa ifatanije nimbibi na zebra-imirongo, nkuburyo busanzwe bwimbonerahamwe.

#	Izina	Izina ryanyuma	Ururimi
1	Bamwe	Imwe	Icyongereza
2	Joe	Isakoshi	Icyongereza
3	Stu	Dent	Kode

Urugero: Imbonerahamwe ihana imbibi

Kora ameza yawe asa neza gusa wee bitondetse mukuzenguruka inguni no kongeramo imipaka kumpande zose.

#	Izina	Izina ryanyuma	Ururimi
1	Bamwe	Imwe	Icyongereza
2	Joe	Isakoshi	Icyongereza
3	Stu	Dent	Kode

<imbonerahamwe yimeza = " imbibi-imbonerahamwe" > 
  ...
</table>

Urugero: Zebra-umurongo

Shaka akantu gato hamwe nameza yawe wongeyeho zebra-striping - ongeraho .zebra-stripedishuri.

#	Izina	Izina ryanyuma	Ururimi
1	Bamwe	Imwe	Icyongereza
2	Joe	Isakoshi	Icyongereza
3	Stu	Dent	Kode
Inkingi 4
Inkingi 2		Inkingi 2

Icyitonderwa: Zebra-striping niterambere ryiterambere ntiriboneka kubakoresha mushakisha nka IE8 na hepfo.

<imbonerahamwe yimeza = " zebra-striped" > 
  ...
</table>

Urugero: Zebra-yambuwe w / ImbonerahamweSorter.js

Dufashe urugero rwabanje, tunonosora akamaro kameza yacu dutanga uburyo bwo gutondeka dukoresheje jQuery hamwe na plugin ya Tablesorter . Kanda inkingi iyo ari yo yose kugirango uhindure ubwoko.

#	Izina	Izina ryanyuma	Ururimi
2	Joe	Isakoshi	Icyongereza
3	Stu	Dent	Kode
1	Iwawe	Imwe	Icyongereza

<inyandiko src = "js / jquery / jquery.tablesorter.min.js" > </script> 
<Inyandiko > 
  $ ( imikorere () { 
    $ ( "imbonerahamwe # sortTableUrugero" ). imbonerahamwe ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<imbonerahamwe yimeza = " zebra-striped" > 
  ...
</table>

Umwanya wo hejuru

Niki

Topbar yacu ni umurongo uhamye urimo ikirango cyurubuga cyangwa izina, kugendana kwambere, nuburyo bwo gushakisha.

Guhindura

Ibintu byose biri imbere, hamwe na topbar yose kimwe, birashoboka. Urashobora guhitamo gushyiramo ikirango / izina, nav, gushakisha, hamwe na kabiri ya kabiri - cyangwa guhuza ibyo aribyo byose.

Ibitonyanga birimo

Nkigice cyingenzi cyo kugendagenda, twashizemo ubushobozi kugirango wongere ibitonyanga kuri nav yawe. Reba kuri nav ya kabiri hejuru (iburyo ihujwe) kugirango urebe uko bikorwa. Ibitonyanga byamanuka linabyo bishyigikira .activekwerekana ihitamo ryurupapuro.

Icyitonderwa: Mugihe ukoresheje topbar kurupapuro urwo arirwo rwose, menya neza kubara kubirenze bitera padding-top: 40px;wongeyeho body.

Amababi n'ibinini

Kora inzira yoroheje ya kabiri hamwe na a <ul>. Hinduranya hagati ya tabs cyangwa ibinini wongeyeho urwego rukwiye.

Nibyiza kubice byibirimo nkurupapuro rwa konte igenamiterere ya konte hamwe nigihe cyabakoresha cyo guhinduranya hagati yimpapuro nkibirimo. Biraboneka muburyo bwanditseho cyangwa ibinini.

Urugero rwibanze urugero

Tabs irashobora gukoreshwa nkigikorwa gisanzwe (gupakira impapuro zo hanze muri tab imwe) cyangwa nkibice byibirimo byo guhinduranya ibice byibirimo. Dufite tabs plugin ishobora gukoreshwa muguhuza ibyanyuma.

<ul class = "tabs" > 
  <li urwego = "rukora" > <a href = "#"> Urugo </a> </li>  
  <li> <a href = "#"> Umwirondoro </a> </li> 
  <li> <a href = "#"> Ubutumwa </a> </li> 
  <li> <a href = "#"> Igenamiterere </a> </li> 
  <li> <a href = "#"> Twandikire </a> </li> 
</ul>

Ibinini byibanze urugero

<ul class = "ibinini" > 
  <li urwego = "rukora" > <a href = "#"> Urugo </a> </li>  
  <li> <a href = "#"> Umwirondoro </a> </li> 
  <li> <a href = "#"> Ubutumwa </a> </li> 
  <li> <a href = "#"> Igenamiterere </a> </li> 
  <li> <a href = "#"> Twandikire </a> </li> 
</ul>

Imitsima

Kugenda kwa Breadcrumb ikoreshwa nkuburyo bwo kwereka abakoresha aho bari muri porogaramu cyangwa kurubuga, ariko ntabwo ari inzira yambere.

<ul class = "umutsima" > 
  <li> <a href = "#"> Urugo </a> < span class = " divider " > / < / span> </li>   
  <li> <a href = "#"> Urupapuro rwo hagati </a> <span class = "divider" > / </span> </li>   
  <li> <a href = "#"> Undi </a> < span class = " divider " > / < / span> </li>   
  <li urwego = "ukora" > Uri hano </li> 
</ul>

Pagination

Ultra yoroshye kandi yoroheje yerekana pagination yahumetswe na Rdio. Inzitizi nini iragoye kubura, byoroshye kugereranywa, kandi itanga ahantu hanini ho gukanda.

<div class = "pagination" > 
  <ul>
    <li class = "ibimugaye mbere" > <a href = "#"> & larr ; Mbere </a> </li>  
    <li urwego = "rukora" > <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 urwego = "ubutaha" > <a href = "#"> Ibikurikira & rarr ; </a> </li>  
  </ul>
</div>

Ibimenyesha by'ibanze

.alert-message

Ubutumwa bumwe kumurongo wo kwerekana kunanirwa, ibishoboka bishoboka, cyangwa intsinzi yibikorwa. Byumwihariko Byingirakamaro kumpapuro.

Shaka javascript »

Guacamole yera! Byiza kugenzura yo wenyine, ntabwo ureba neza cyane .

Yoo! Hindura ibi n'ibi hanyuma ugerageze .

Muraho neza! Urasoma neza ubu butumwa bwo kumenyesha.

Umutwe! Ubu ni integuza ikeneye kwitabwaho, ariko ntabwo aribyingenzi cyane kugeza ubu.

Urugero kode

<div class = "integuza-ubutumwa bwo kuburira" > 
  <a class = "close" href = "#"> × </a> _  
  <p> <strong> Guacamole yera! </strong> Kugenzura neza yo wenyine, ntabwo ureba neza. </p>
</div>

Hagarika ubutumwa

.alert-message.block-message

Kubutumwa busaba ibisobanuro bike, dufite paragarafu yuburyo bwo kumenyesha. Ibi nibyiza kubutumwa bwikosa rirerire, kuburira umukoresha igikorwa gitegereje, cyangwa kwerekana gusa amakuru kugirango ushimangire kurupapuro.

Shaka javascript »

Guacamole yera! Iyi ni umuburo! Byiza kugenzura yo wenyine, ntabwo ureba neza cyane. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Fata iki gikorwa Cyangwa ukore ibi

Yoo! Wabonye ikosa! Hindura ibi n'ibi hanyuma ugerageze .

Duis mollis est non commodo luctus
Nisi erat porttitor ligula
Eget lacinia odio sem nec elit

Fata iki gikorwa Cyangwa ukore ibi

Muraho neza! Urasoma neza ubu butumwa bwo kumenyesha. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur comiculus mus. Maecenas faucibus mollis interdum.

Fata iki gikorwa Cyangwa ukore ibi

Umutwe! Ubu ni integuza ikeneye kwitabwaho, ariko ntabwo aribyingenzi cyane.

Fata iki gikorwa Cyangwa ukore ibi

Urugero kode

<div class = "kumenyesha-ubutumwa guhagarika-ubutumwa bwo kuburira" > 
  <a class = "close" href = "#"> × </a> _  
  <p> <strong> Guacamole yera! Iyi ni umuburo! </strong> Kugenzura neza yo wenyine, ntabwo ureba neza. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "kumenyesha-ibikorwa" > 
    <a class = "btn small" href = "#"> Fata iki gikorwa </a> <a class = "btn small" href = "#"> Cyangwa ukore ibi </a>     
  </div>
</div>

Uburyo

Uburyo - ibiganiro cyangwa agasanduku k'amatara - nibyiza kubikorwa byerekeranye nibihe aho ari ngombwa ko imiterere yinyuma ikomeza.

Shaka javascript »

Ibikoresho

Twipsies ningirakamaro cyane mugufasha ukoresha urujijo no kubereka inzira nziza.

Shaka javascript »

Lorem ipsum dolar kwicara amet illo ikosa ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus inkurikizi ziterwa, 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 sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas nemo volu .

Amashanyarazi

Koresha popovers kugirango utange amakuru adasobanutse kurupapuro utagize ingaruka kumiterere.

Shaka javascript »

Gutangira

Guhuza javascript hamwe nibitabo bya Bootstrap biroroshye cyane. Hasi turareba ibyibanze tuguha amacomeka ateye ubwoba kugirango utangire!

Reba inyandiko za javascript »

Harimo iki

Zana bimwe mubice byibanze bya Bootstrap mubuzima hamwe namacomeka mashya akorana na jQuery na Ender . Turagutera inkunga yo kwagura no kuyihindura kugirango uhuze ibikenewe byiterambere.

Idosiye	Ibisobanuro
bootstrap-modal.js	Amacomeka yacu ya Modal ni super slim ifata gakondo ya modal js plugin! Twitaye cyane kugirango dushyiremo imikorere yambaye ubusa dukeneye kuri twitter.
bootstrap-imenyesha.js	Amacomeka yo kumenyesha ni super ntoya yo kongeramo imikorere yegeranye.
bootstrap-yamanutse.js	Gucomeka ni ukongeramo imikoreshereze ya bootstrap topbar cyangwa tabbed navigations.
bootstrap-umuzingo.js	Gucomeka kwa ScrollSpy ni ukongeramo auto ivugurura nav ishingiye kumwanya wizingo kuri topstrap topbar.
bootstrap-buto.js	Gucomeka kwa ScrollSpy ni ukongeramo auto ivugurura nav ishingiye kumwanya wizingo kuri topstrap topbar.
bootstrap-tabs.js	Gucomeka kongeramo byihuse, imbaraga za tab hamwe nibinini byo gusiganwa ku magare binyuze mu bice byaho.
bootstrap-twipsy.js	Ukurikije plaque nziza ya jQuery.tipsy plugin yanditswe na Jason Frame; twipsy ni verisiyo ivuguruye, idashingiye kumashusho, ikoresha css3 kuri animasiyo, hamwe na data-ibiranga kubika umutwe waho!
bootstrap-popover.js	Amacomeka ya popover atanga interineti yoroshye yo kongeramo popovers muri porogaramu yawe. Yagura plugrap ya boostrap-twipsy.js , bityo rero wemeze gufata iyo dosiye kimwe mugihe ushizemo popovers mumushinga wawe!

Javascript irakenewe?

Oya! Bootstrap yateguwe mbere na mbere kuba isomero rya CSS. Iyi javascript itanga urwego rwibanze rwimikorere hejuru yuburyo bwashyizwemo.

Ariko, kubakeneye javascript, twatanze amacomeka hejuru kugirango tugufashe kumva uburyo bwo guhuza Bootstrap na javascript no kuguha uburyo bwihuse, bworoshye kubikorwa byibanze ako kanya.

Kubindi bisobanuro no kubona demo nzima, nyamuneka reba urupapuro rwacu rwa plugin .

Bootstrap yubatswe muri Preboot , ifunguye-isoko yuzuye ya mixin na variable igomba gukoreshwa ifatanije na Less , progaramu ya CSS kugirango iteze imbere byihuse kandi byoroshye.

Reba uburyo twakoresheje Preboot muri Bootstrap nuburyo ushobora kuyikoresha uramutse uhisemo gukora bike kumushinga wawe utaha.

Uburyo bwo kuyikoresha

Koresha ubu buryo kugirango ukoreshe byuzuye impinduka nke za Bootstrap, ivanga, hamwe nicyari muri CSS ukoresheje javascript muri mushakisha yawe.

<ihuza rel = "urupapuro rwerekana / ruto" href = "gake / bootstrap.less" media = "byose" />    
<inyandiko src = "js / munsi-1.1.3.min.js" > </script>

Ntabwo wumva igisubizo .js? Gerageza porogaramu Ntoya ya Mac cyangwa ukoreshe Node.js kugirango ukusanye mugihe ukoresheje code yawe.

Harimo iki

Hano hari bimwe mu byaranze ibiri muri Twitter Bootstrap nkigice cya Bootstrap. Jyana kurubuga rwa Bootstrap cyangwa urupapuro rwumushinga wa Github kugirango ukuremo kandi wige byinshi.

Ibihinduka

Ibihinduka muri bike birahagije kubungabunga no kuvugurura umutwe wa CSS kubuntu. Mugihe ushaka guhindura ibara cyangwa agaciro gakunze gukoreshwa, vugurura ahantu hamwe hanyuma ushireho.

// Ihuza
@linkIbara : # 8b59c2;         
@linkColorHover :     umwijima ( @linkColor , 10 ); 
 
// Imvi
@black : # 000;             
@grayDark :           koroshya ( @umukara , 25 %); 
@gray :               koroshya ( @black , 50 %); 
@Umucyo :          koroshya ( @umukara , 70 %); 
@grayUmucyo :        koroshya ( @black , 90 %); 
@Umuzungu : #fff;             
 
// Amabara ya Acent
@ururimi : # 08b5fb;              
@icyatsi : # 46a546;             
@red : # 9d261d;               
@umusangirangendo : # ffc40d;            
@orange : # f89406;            
@pink : # c3325f;              
@purple : # 7a43b6;            
 
// Urusobe rw'ibanze
@basefont : 13px ;          
@baseline : 18px ;

Gutanga ibitekerezo

Guto nayo itanga ubundi buryo bwo gutanga ibitekerezo hiyongereyeho CSS isanzwe /* ... */.

// Iki ni igitekerezo
/ * Iki nacyo ni igitekerezo * /

Kuvanga wazoo

Imvange zirimo ahanini cyangwa ibice bya CSS, bikwemerera guhuza umurongo wa code murimwe. Nibyiza kubacuruzi babanziriza ibintu nka box-shadow, cross-mushakisha gradients, imyandikire yimyandikire, nibindi byinshi. Hasi nicyitegererezo cyuruvange rurimo na Bootstrap.

Imyandikire yimyandikire

#imyandikire {
  . bigufi ( @ibiro : bisanzwe , @size : 14px , @umurongo muremure : 20px ) {     
    Imyandikire - ingano : @size ; 
    Imyandikire - uburemere : @ uburemere ; 
    umurongo - uburebure : @umurongo ; 
  }
  . sans - serif ( @ibiro : bisanzwe , @size : 14px , @umurongo muremure : 20px ) {     
    Imyandikire - umuryango : "Helvetica Neue" , Helvetica , Arial , sans - serif ;   
    Imyandikire - ingano : @size ; 
    Imyandikire - uburemere : @ uburemere ; 
    umurongo - uburebure : @umurongo ; 
  }
  ...
}

Gradients

#gradient {
  ...
  . uhagaritse ( @Ibara : # 555, @Ibara: # 333) { 
    inyuma - ibara : @Ibara ; 
    inyuma - subiramo : subiramo - x ;
    inyuma - ishusho : - khtml - icyiciro ( umurongo , ibumoso hejuru , ibumoso hepfo , kuva ( @startColor ), kugeza ( @endColor )); // Konqueror   
    inyuma - ishusho : - moz - umurongo - icyiciro ( @startColor , @endColor ); // FF 3.6+   
    inyuma - ishusho : - ms - umurongo - icyiciro ( @startColor , @endColor ); // IE10   
    inyuma - ishusho : - webkit - icyiciro ( umurongo , ibumoso hejuru , ibumoso hepfo , ibara - guhagarara ( 0 %, @startColor ), ibara - guhagarara ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    inyuma - ishusho : - webkit - umurongo - icyiciro ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    inyuma - ishusho : - o - umurongo - icyiciro ( @startColor , @endColor ); // Opera 11.10   
    inyuma - ishusho : umurongo - icyiciro ( @Ibara , @Ibara ); // Igipimo  
  }
  ...
}

Ibikorwa

Fata neza kandi ukore imibare kugirango ubyare ibintu byoroshye kandi bikomeye bivanze nkibi biri hepfo.

// Ubunini
@GridColumns : 16 ;       
@gridColumnUbugari : 40px ;   
@GridGutterUbugari : 20px ;   
@Urubuga Ubugari : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Kora inkingi
. inkingi ( @inkingiSpan : 1 ) {  
  ubugari : ( @gridColumnUbugari * @InkingiSpan ) + ( _ _ _ _ _ _ _         
}

Gukusanya bike

Nyuma yo guhindura .lessdosiye muri / lib /, uzakenera kuzisubiramo kugirango ubashe kuvugurura bootstrap - *. *. *. Css na bootstrap - *. *. *. Min.css dosiye. Niba utanze icyifuzo cyo gukurura GitHub, ugomba guhora usubiramo.

Inzira zo gukusanya

Uburyo	Intambwe
Node hamwe na makefile	Shyiramo umurongo muto wateguye hamwe npm ukoresheje itegeko rikurikira: $ npm shyiramo lessc Iyo umaze kwinjizamo gusa ukore `make`mumuzi yububiko bwa bootstrap kandi mwese murashizeho. Byongeye kandi, niba ufite watchr yashizwemo, urashobora kwiruka `make watch`kugirango bootstrap ihite yubaka burigihe burigihe uhinduye dosiye muri bootstrap lib (ibi ntibisabwa, gusa uburyo bworoshye).
Javascript	Kuramo ibishya Less.js hanyuma ushiremo inzira igana (na Bootstrap) muri `head`. <ihuza rel = "urupapuro rwerekana / munsi" href = "/ inzira/to/bootstrap.less" > <inyandiko src = "/ inzira/to/ less.js" > </script> Kugirango usubiremo dosiye .idafite, gusa uzigame hanyuma wongere usubiremo page yawe. Gito.js irabakusanya ikabika mububiko bwaho.
Umurongo	Niba usanzwe ufite igikoresho gito cyateganijwe, koresha itegeko rikurikira: $ lessc ./lib/bootstrap.less> bootstrap.css Wemeze gushyiramo `--compress`iryo tegeko niba ugerageza kubika byite!
Porogaramu nkeya ya Mac	Porogaramu idasanzwe ya Mac ireba ububiko bwamadosiye adafite kandi ikusanya kode kumadosiye yaho nyuma yo kubika dosiye ireba. Idafite. Niba ubishaka, urashobora guhinduranya ibyo ukunda muri porogaramu yo kugabanya mu buryo bwikora kandi ni ubuhe bubiko dosiye zakozwe zirangirira.

Shyira kuri CSS

Koresha na Buke

Fork on GitHub

Ibyerekeye Bootstrap Amagambo magufi, inkunga ya mushakisha, nibindi byinshi

Amateka

Inkunga ya mushakisha

Harimo iki

Ingero zihuse

Sisitemu ya sisitemu Urutare rusanzwe 940px cyangwa uzenguruke urwawe

Urusobemiyoboro

Urugero rwa gride

Kureka inkingi

Inkingi

Urugero rwinkingi

Kuzuza gride yawe

Imbere muri gride

Noneho guhitamo

Imiterere Inyandikorugero Yibanze yo gukora Urubuga

Imiterere ihamye

Imiterere y'amazi

Imyandikire yimyandikire , paragarafu, urutonde, nibindi bikoresho byubwoko

Imitwe & kopi

h1. Umutwe 1

h2. Umutwe 2

h3. Umutwe 3

h4. Umutwe 4

h5. Umutwe 5

h6. Umutwe 6

Urugero

Urugero Umutwe Ufite umutwe-mutwe…

Misc. Ibintu

Igihe cyo gukoresha

Shimangira mu gika

Aderesi

Amagambo ahinnye

Inzitizi

Uburyo bwo gusubiramo

Urutonde

Urutonde<ul>

Unstyled<ul.unstyled>

Rutegetse<ol>

Ibisobanurodl

Kode

Kugaragaza kode

Ibirango

Andika ikintu icyo ari cyo cyose

Itangazamakuru Kwerekana amashusho na videwo

Urusobe rw'itangazamakuru

Urugero ruto

Kinini

Hagati

Ntoya

Kode

Imbonerahamwe Kuri, wabitekereje, amakuru yimbonerahamwe

Kubaka ameza

Urugero: Imiterere isanzwe yimbonerahamwe

Urugero: Imbonerahamwe yuzuye

Urugero: Imbonerahamwe ihana imbibi

Urugero: Zebra-umurongo

Urugero: Zebra-yambuwe w / ImbonerahamweSorter.js

Ifishi

Imiterere isanzwe

Impapuro zegeranye

Ingano yumurima

Utubuto

Urugero Utubuto

Ubundi bunini

Leta yamugaye

Ihuza

Utubuto

Kugenda

Umwanya wo hejuru

Izina ry'umushinga

Niki

Guhindura

Ibitonyanga birimo

Amababi n'ibinini

Urugero rwibanze urugero

Ibinini byibanze urugero

Imitsima

Urutonde`<ul>`

Unstyled`<ul.unstyled>`

Rutegetse`<ol>`

Ibisobanuro`dl`