ka godimo
nngele
nepagetše
ka fase

Bootstrap, go tšwa go Twitter

Bootstrap ke sedirišwa go tšwa go Twitter seo se hlamilwego go thoma tlhabollo ya di-webapp le mafelo.
E akaretša CSS ya motheo le HTML ya go thaepa, diforomo, dikonope, ditafola, digridi, go sepelasepela, le tše dingwe.

Nerd temošo: Bootstrap e agilwe ka Less gomme e be e reretšwe go šoma ka ntle ga kgoro ka diphensele tša sebjalebjale ka kgopolong.

Hotlink ya CSS

Bakeng sa go thoma ka pela le bonolo, e no kopiša seripa se letlakaleng la gago la wepe.

E šomiše ka Less

Fan ya go diriša Less? Ga go na bothata, e no clone repo gomme o tlaleletše mela ye:

Fork ka GitHub

Download, foroko, hula, faele litaba, le ho feta le semmuso Bootstrap repo ka Github.

Bootstrap ka GitHub »

Ga bjale v1.3.0

Histori

Baentšeneare ba Twitter go ya ka histori ba šomišitše mo e nyakilego go ba bokgobapuku bjo bongwe le bjo bongwe bjo ba bego ba bo tlwaelane le go fihlelela dinyakwa tša mafelelo a ka pele. Bootstrap e thomile e le karabo ya ditlhohlo tšeo di ilego tša tšweletša. Ka thušo ya batho ba bantši ba go šiiša, Bootstrap e gotše kudu.

Bala ka botlalo go dev.twitter.com ›

Thekgo ya sephephediši

Bootstrap e lekwa le go thekgwa ka go diphensele tše kgolo tša sebjalebjale tša go swana le Chrome, Safari, Internet Explorer, le Firefox.

E lekilwe le go thekgwa ka go Chrome, Safari, Internet Explorer, le Firefox
  • Safari ya moragorago
  • Google Chrome ya moragorago
  • Firefox 4+ e le
  • Mohlophisi wa Inthanete 7+
  • Opera e le 11

Seo se akareditšwego

Bootstrap e tla e feletše ka CSS e kgobokeditšwego, e sa kgoboketšwago, le dithempleite tša mohlala.

Mehlala ya go thoma ka pela

O hloka dithempleite tše dingwe tša ka pela? Lekola mehlala ye ya motheo yeo re e kopantšego:

  • Bonolo tse tharo-kholomo thulaganyo le mohale unit trust
  • Peakanyo ya seela ka sidebar ya go se fetoge
  • Bonolo leketlile setshelo bakeng sa ditiriso tse dingwe

Keriti ya kamehla

Tshepedišo ya keriti ya go se fetoge yeo e filwego bjalo ka karolo ya Bootstrap ke keriti ya dikholomo tše 16 tša bophara bja 940px. Ke tatso ya tshepedišo ya keriti ya 960 ye e tumilego, eupša ntle le mošito wa tlaleletšo/padding ka mahlakoreng a nngele le a go ja.

Mohlala wa go swaya keriti

Bjalo ka ge go bontšhitšwe mo, peakanyo ya motheo e ka hlolwa ka "dikholomo" tše pedi, ye nngwe le ye nngwe e akaretša palo ya dikholomo tše 16 tša motheo tšeo re di hlalošitšego bjalo ka karolo ya tshepedišo ya rena ya keriti. Bona mehlala ye e lego ka mo tlase bakeng sa diphetogo tše dingwe.

  1. <div sehlopha = "moleng" >
  2. <div sehlopha = "span6" >
  3. ...
  4. </div> e
  5. <div sehlopha = "span10" >
  6. ...
  7. </div> e
  8. </div> e
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
2.
2.
2.
2.
2.
2.
2.
2.
3.
3.
3.
3.
3.
1. 1.
4.
4.
4.
4.
1/3 e
1/3 e
1/3 e
1/3 e
2/3 e le
4.
6.
6.
8.
8.
5. 5.
11.
16.

Go lefela dikholomo

4.
8 offset 4.
1/3 offset 2/3s
4 offset 4.
4 offset 4.
5 offset 3.
5 offset 3.
10 offset 6.

Dikholomo tša go bea dihlaga

Bea diteng tša gago ge o swanetše ka go hlama ka .rowgare ga kholomo ye e lego gona.

Mohlala wa dikholomo tše di tsentšwego ka gare ga sehlaga

Maemo a 1 a kholomo
Maemo a 2
Maemo a 2
  1. <div sehlopha = "moleng" >
  2. <div sehlopha = "span12" >
  3. Maemo a 1 a kholomo
  4. <div sehlopha = "moleng" >
  5. <div sehlopha = "span6" >
  6. Maemo a 2
  7. </div> e
  8. <div sehlopha = "span6" >
  9. Maemo a 2
  10. </div> e
  11. </div> e
  12. </div> e
  13. </div> e

Roll keriti ya gago

E agilwe ka gare ga Bootstrap ke diphetogo tše mmalwa tša go tlwaetša tshepedišo ya keriti ya 940px ya go se fetoge. Ka go tlwaetša go se nene, o ka fetoša bogolo bja dikholomo, diphaephe tša tšona le setshelo seo di dulago go sona.

Ka gare ga keriti

Diphetogo tše di nyakegago go fetoša tshepedišo ya keriti ga bjale ka moka di dula ka go variables.less.

E feto-fetogago Boleng bja go se fetoge Tlhalošo
@gridColumns 16. Palo ya dikholomo ka gare ga keriti
@gridColumnWidth 40px e le Bophara bja kholomo ye nngwe le ye nngwe ka gare ga keriti
@gridGutterWidth 20px e le Sebaka se sebe magareng ga kholomo ye nngwe le ye nngwe
@siteWidth Computed palo yohle ya dikholomo tsohle le gutters Re šomiša papadi ye nngwe ya motheo go bala palo ya dikholomo le diphaephe le go beakanya bophara bja .fixed-container()mixin.

Bjale go tlwaetša

Go fetoša keriti go ra go fetoša @grid-*diphetogo tše tharo le go kgoboketša gape difaele tša Ka fase.

Bootstrap e tla e hlometše go swara tshepedišo ya keriti yeo e nago le dikholomo tše di fihlago go tše 24; ya go se fetoge ke 16 fela.Mo ke ka fao diphetogo tša gago tša keriti di bego di tla lebelega di rulagantšwe go keriti ya dikholomo tše 24.

  1. @gridDikholomo : 24 ;
  2. @gridBophara bja Kholomo : 20px ;
  3. @gridBophara ba Sethiba : 20px ;

Ge e šetše e kgobokeditšwe gape, o tla bewa!

Peakanyo ye e sa fetogego

Peakanyo ya go se fetoge le ye bonolo ya 940px-ka bophara, yeo e tsepamego bakeng sa mo e ka bago weposaete efe goba efe goba letlakala leo le filwego ke e tee <div.container>.

  1. <mmele>
  2. <div sehlopha = "setshelo" >
  3. ...
  4. </div> e
  5. </mmele>

Peakanyo ya seela

Sebopego sa letlakala la seela se sengwe, se se fetofetogago ka bophara bja min- le max le sidebar ya letsogong le letshadi. E kgolo bakeng sa ditiriso tse dingwe le docs.

  1. <mmele>
  2. <div sehlopha = "setshelo-seela" >
  3. <div sehlopha = "sidebar" >
  4. ...
  5. </div> e
  6. <div sehlopha = "diteng" >
  7. ...
  8. </div> e
  9. </div> e
  10. </mmele>

Dihlogo & khopi

Tatelano ya maemo ya go thaepa ya go rulaganya matlakala a gago a wepe.

Keriti ka moka ya go thaepa e theilwe godimo ga diphetogo tše pedi tša Ka fase ka faeleng ya rena ya diphetogo.less: @basefontle @baseline. Ya pele ke motheo wa fonte-bogolo bjo bo šomišitšwego gohle gomme ya bobedi ke motheo wa mola-bophagamo.

Re šomiša diphetogo tšeo, le dipalo tše dingwe, go hlama mapheko, dipadding, le line-heights ya mohuta wa rena ka moka le tše dingwe.

h1. Hlogo ya 1

h2. Hlogo ya 2

h3. Hlogo ya 3

h4. Hlogo ya 4

h5. Hlogo ya 5
h6. Hlogo ya 6

Mohlala wa temana

Nullam quis risus eget urna mollis e kgabišitšwego vel eu leo. Cum sociis natoque penatibus le magnis dis pelego montes, nascetur ya go segiša mus. Nullam id dolor id nibh dikoloi tša dikoloi ut id elit.

Mohlala wa hlogo E na le hlogo ya ka fasana...

Misc. dielemente

Go šomiša kgatelelo, diaterese, & dikgutsufatšo

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

O swanetše go diriša neng

Dithepo tša kgatelelo ( <strong>le <em>) di swanetše go šomišwa go laetša bohlokwa bjo bo oketšegilego goba kgatelelo ya lentšu goba polelwana ge e bapetšwa le khopi yeo e e dikologilego. Diriša <strong>bakeng sa bohlokwa le <em>bakeng sa go gatelela kgateletšego .

Kgatelelo serapeng

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa feela dula amet risus. Maecenas faucibus mollis ya go ba le sebopego sa magareng. Nulla vitae elit libero, e lego pharetra e lego augue.

Ela hloko: Go sa dutše go lokile go šomiša <b>le <i>dithepo ka go HTML5 gomme ga go nyakege gore di be le setaele se se sete le se se sekamego, ka go latelelana (le ge e le gore ge go na le elemente ye e nago le semantiki kudu, e šomiše). <b>e reretšwe go tšweletša mantšu goba dipolelwana ntle le go fetišetša bohlokwa bja tlaleletšo, mola <i>bontši e le ya lentšu, mareo a sethekniki, bjalobjalo.

Diaterese

Elemente <address>e šomišwa go tshedimošo ya kgokagano ya rakgolokhukhu wa yona wa kgauswi, goba mmele ka moka wa mošomo. Mehlala e mebedi ya kamoo e bego e ka dirišwa ka gona še:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, C. A. 94107
P: (123) 456-7890. Ke batla go nyoba nnyo e kgolo ya monate ya mosadi wa go tseba go nyobana wa go rata go nyobana mo
Leina ka botlalo
[email protected]

Ela hloko: Mothaladi wo mongwe le wo mongwe ka go o <address>swanetše go felela ka go kgaotša mothaladi ( <br />) goba o phuthelwe ka leswao la maemo a boloko (mohlala, <p>) go rulaganya diteng gabotse.

Dikhutsofatšo

Bakeng sa dikgutsufatšo le diakhronimi, diriša <abbr>tag ( <acronym>e tlogetšwe go HTML5 ). Bea foromo ya mongwalokopana ka gare ga thepo gomme o beakantše thaetlele ya leina le le feletšego.

Ditsopolwa tša go thibela

<blockquote> <p> <small>

Tsela ya go tsopola

Go akaretša setsopolwa sa go thibela, phuthela <blockquote>go dikologa <p>le <small>dithepo. Šomiša <small>elemente go tsopola mothopo wa gago gomme o tla hwetša em dash &mdash;pele ga yona.

Lorem ipsum dolor lula amet, consectetur adipiscing elit. Palo e feletseng ya posuere erat a ante venenatis dapibus posuere velit aliquet.

Ngaka Julius Hibbert o ile a hlokomela
  1. <setsopolwa sa go thibela>
  2. <p> Lorem ipsum dolor dula amet, kgethehileng ya madipiscing elit. Palo e feletseng ya posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  3. <ye nnyane> Ngaka Julius Hibbert </e nnyane>
  4. </blockquote> ya go tswalela

Mananeo

E sa laelwago<ul>

  • Lorem ipsum dolor dula amet
  • Consectetur adipiscing ya maemo a godimo
  • Palo e feletseng molestie lorem ka massa
  • Facilisis ka pretium nisl aliquet
  • Nulla volutpat aliquam ya go swana le yona
    • Phasellus iaculis ya go swana le yona
    • Purus sodales di-ultricies
    • Vestibulum laoreet ya go rwala dithoto sem
    • A k tristique libero volutpat ka
  • Faucibus porta lacus e le 'ngoe e le 'ngoe
  • Aenean dula amet erat nunc
  • Eget porttitor lorem ya go rwala dilo

E sa setaele<ul.unstyled>

  • Lorem ipsum dolor dula amet
  • Consectetur adipiscing ya maemo a godimo
  • Palo e feletseng molestie lorem ka massa
  • Facilisis ka pretium nisl aliquet
  • Nulla volutpat aliquam ya go swana le yona
    • Phasellus iaculis ya go swana le yona
    • Purus sodales di-ultricies
    • Vestibulum laoreet ya go rwala dithoto sem
    • A k tristique libero volutpat ka
  • Faucibus porta lacus e le 'ngoe e le 'ngoe
  • Aenean dula amet erat nunc
  • Eget porttitor lorem ya go rwala dilo

E laetšwe<ol>

  1. Lorem ipsum dolor dula amet
  2. Consectetur adipiscing ya maemo a godimo
  3. Palo e feletseng molestie lorem ka massa
  4. Facilisis ka pretium nisl aliquet
  5. Nulla volutpat aliquam ya go swana le yona
  6. Faucibus porta lacus e le 'ngoe e le 'ngoe
  7. Aenean dula amet erat nunc
  8. Eget porttitor lorem ya go rwala dilo

Tlhalošodl

Mananeo a tlhaloso
Lenaneo la tlhalošo le phethagetše bakeng sa go hlaloša mareo.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit e seng mi porta gravida ka eget metus.
Malesuada porta ya go tswalela
Etiam porta sem malesuada ea mollis euismod.

Khoutu ya

<code> <pre>

Pimp khoutu ya gago ka setaele ka dithegi tše pedi tše bonolo. Bakeng sa go šiiša le go feta ka javascript, lahlela ka gare ga khoutu ya Google ya prettify bokgobapuku gomme o beakantšwe.

Go tšweletša khoutu

Khoutu, diboloko tša goba diripana fela ka gare ga mothaladi, di ka bontšhwa ka setaele fela ka go phuthela ka gare ga thepo ya maleba. Bakeng sa diboloko tša khoutu tšeo di akaretšago mela ye mentši, šomiša <pre>elemente. Bakeng sa khoutu ya ka gare ga mothaladi, šomiša <code>elemente.

Ntlha Poelo
<code> Mo moleng wa sengwalwa sa go swana le se, khoutu ya gago ye e phuthetšwego e tla lebelega bjalo ka <html>elemente ye.
<pre>
<div>
  <h1>Hlogo ya ditaba</h1>
  <p>Selo se sengwe thwi mo...</p>
</div> e

Ela hloko: Kgonthiša gore o boloka khoutu ka gare ga <pre>dithepo kgauswi le ka go le letshadi ka mo go kgonegago; e tla fetolela dithepo ka moka.

<pre class="prettyprint">

Ka go diriša bokgobapuku bja google-code-prettify, diboloko tša gago tša khoutu di hwetša setaele sa pono se se fapanego ganyenyane le go gatelela ga polelo ya go itiriša.

<div> <h1> Hlogo </h1> <p> Selo se sengwe thwi mo... </p> </div>
  
  

Download google-code-prettify le sheba readme bakeng sa kamoo ho sebelisa.

Dileibole tša ka gare ga mothaladi

<span class="label">

Bitša tlhokomelo goba o folaga polelwana efe goba efe mo sengwalong sa gago sa mmele.

Leina selo le ge e le sefe

Ever needed e nngwe ya tšeo tša maemo a godimo tše Mpsha! goba Difolaga tša bohlokwa ge o ngwala khoutu? Go lokile, bjale o na le tšona. Se se akaretšwago ka go ikemela ke se:

Leibole Poelo
<span class="label">Default</span> Hlokomologa
<span class="label success">New</span> Mpsha
<span class="label warning">Warning</span> Temošo
<span class="label important">Important</span> Bohlokwa
<span class="label notice">Notice</span> Tsebišo

Keriti ya boraditaba

Bontšha diswantšho tše nnyane tša bogolo bjo bo fapanego matlakaleng ao a nago le kgato ya fase ya HTML le ditaele tše nnyane.

Mohlala wa diswantšho tše nnyane

Diswantšho tše nnyane ka go e .media-gridka ba bogolo bjo bofe goba bofe, eupša di šoma gabotse ge di beakantšwe ka go lebanya go tshepedišo ya keriti ya Bootstrap yeo e agetšwego ka gare. Bophara bja seswantšho bja go swana le 90, 210, le 330 bo kopana le dipiksele tše mmalwa tša go tlatša go lekana le bogolo bja .span2, .span4, le .span6bja dikholomo.

Kgolo

Dirišwago

Nnyane

Go ba ngwala dikhoutu

Digridi tša methopo ya ditaba di bonolo go di šomiša gomme go e na le moo di bonolo ka lehlakoreng la go swaya. Ditekanyo tša tšona di theilwe feela godimo ga bogolo bja diswantšho tšeo di akaretšwago.

  1. <ul sehlopha = "media-grid" >
  2. <li>
  3. <a href = "#" >
  4. <img sehlopha = "setshwantsho se senyenyane" src = "https://placehold.it/330x230" alt = "" >
  5. </a>
  6. </li>
  7. <li>
  8. <a href = "#" . >
  9. <img sehlopha = "setšoantšo se senyenyane" src = "https://placehold.it/330x230" alt = "" >
  10. </a>
  11. </li>
  12. </ul>

Go aga ditafola

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

Ditafola ke tše kgolo—bakeng sa dilo tše dintši. Ditafole tše kgolo, le ge go le bjalo, di nyaka go se nene ga lerato la go swaya gore di be le mohola, di ka lekanywago le go balega (boemong bja khoutu). Maele a mmalwa a go thuša ke a.

Ka mehla phuthela dihlogo tša gago tša dikholomo ka mokgwa wo e <thead>lego gore tatelano ya maemo e be <thead>><tr> > <th>.

Go swana le dihlogo tša dikholomo, diteng ka moka tša mmele wa tafola ya gago di swanetše go phuthelwa ka a <tbody>gore tatelano ya gago e be <tbody>> <tr>> <td>.

Mohlala: Ditaele tša tafola tša maitirelo

Ditafola ka moka di tla bewa setaele ka go iketla ka mellwane ye bohlokwa fela go netefatša go balega le go hlokomela sebopego. Ga go nyakege gore o oketše diklase tše oketšegilego goba dika.

# . Leina Sefane Polelo
1. 1. Dingwe Tee Seisimane
2. Joe o ile a Sephuthelwana sa Sixpack Seisimane
3. Stu Dent Khoutu ya
  1. <tafola>
  2. ...
  3. </tafola>

Mohlala: Tafole e khutsofaditšwego

Bakeng sa ditafola tšeo di nyakago ya data ye ntši ka dikgoba tše di tiilego, šomiša tatso ye e khutsofaditšwego yeo e segago padding ka bogare. E ka šomišwa gape ka kopanelo le mellwane le methalo ya diphiri, go swana le mekgwa ya tafola ya go se fetoge.

# . Leina Sefane Polelo
1. 1. Dingwe Tee Seisimane
2. Joe o ile a Sephuthelwana sa Sixpack Seisimane
3. Stu Dent Khoutu ya

Mohlala: Tafole e nang le mellwane

Dira gore ditafola tša gago di bonagale di le boreledi go se nene feela ka go dikologa dikhutlo tša tšona le go oketša mellwane ka mahlakoreng ka moka.

# . Leina Sefane Polelo
1. 1. Dingwe Tee Seisimane
2. Joe o ile a Sephuthelwana sa Sixpack Seisimane
3. Stu Dent Khoutu ya
  1. <tafole sehlopha = "bordered-tafole" >
  2. ...
  3. </tafola>

Mohlala: Zebra-striped

Hwetša go se nene go makatša ka ditafola tša gago ka go oketša zebra-striping—e no oketša .zebra-stripedklase.

# . Leina Sefane Polelo
1. 1. Dingwe Tee Seisimane
2. Joe o ile a Sephuthelwana sa Sixpack Seisimane
3. Stu Dent Khoutu ya
span 4 dikholomo
span 2 dikholomo span 2 dikholomo

Ela hloko: Zebra-striping ke kaonafatšo ye e tšwelago pele yeo e sa hwetšagalego go diphensele tša kgale tša go swana le IE8 le ka fase.

  1. < sehlopha sa tafole = "methalo ea pitsi" >
  2. ...
  3. </tafola>

Mohlala: Zebra-methalo w / TableSorter.js

Ge re tšea mohlala wa peleng, re kaonafatša mohola wa ditafola tša rena ka go fa mošomo wa go hlopha ka jQuery le plugin ya Tablesorter . Klika hlogo ya kholomo efe goba efe go fetoa hlopha.

# . Leina Sefane Polelo
2. Joe o ile a Sephuthelwana sa Sixpack Seisimane
3. Stu Dent Khoutu ya
1. 1. A gago Tee Seisimane
  1. <script src = "js / jquery / jquery.mohlophisi wa tafola.min.js" ></script>
  2. <sengwalwa >
  3. $ ( mosebetsi () { .
  4. $ ( "tafola # hlophaMohlala wa Tafole" ). tablesorter ({ Lenaneo la go hlopha : [[ 1 , 0 ]] });
  5. });
  6. </script>
  7. < sehlopha sa tafole = "methalo ea pitsi" >
  8. ...
  9. </tafola>

Ditaele tša go se fetoge

Diforomo ka moka di fiwa mekgwa ya go se fetoge go di tšweletša ka tsela ye e balegago le ye e ka lekanywago. Ditaele di fiwa bakeng sa ditseno ta sengwalwa, mananeo a go kgetha, mafelo a sengwalwa, dikonope ta radio le mapokisi a go hlahloba, le dikonope.

Mohlala foromo tšōmo
Ba bangwe ba tšeela godimo mo
Seripa se sennyane sa sengwalwa sa thušo
Katlego!
Ruh roh!
Mohlala foromo tšōmo
@
Sengwalwa se sengwe sa thušo ke se
Mohlala foromo tšōmo
Ela hloko: Dileibole di dikologa dikgetho ka moka tša mafelo a go klika a magolo kudu le foromo ye e šomišegago kudu.
go Dinako tsohle di bontšitsoe e le Pacific Standard Time (GMT -08:00).
Thibelo ya sengwalwa sa thušo go hlaloša tšhemo ye e lego ka godimo ge go nyakega.
 

Diforomo tše di kgobokeditšwego

Oketša .form-stackedgo HTML ya foromo ya gago gomme o tla ba le dileibole godimo ga mafelo a bona go e na le go ba ka go la nngele la bona. Se se šoma gabotse ge e le gore diforomo tša gago di le kopana goba o na le dikholomo tše pedi tša ditseno tša diforomo tše boima.

Mohlala foromo tšōmo
Mohlala foromo tšōmo
Seripa se sennyane sa sengwalwa sa thušo
Ela hloko: Dileibole di dikologa dikgetho ka moka tša mafelo a go klika a magolo kudu le foromo ye e šomišegago kudu.
 

Foromo bogolo bja tšhemo

Tlwaetša foromo efe goba efe input, select, gobatextarea bophara ka go oketša diklase tše mmalwa fela go swaya ya gago.

Go tloga go v1.3.0, re okeditše diklase tša go lekanyetša bogolo tše di theilwego godimo ga keriti bakeng sa dielemente tša foromo. Hle diriša tše godimo ga diklase tše di lego gona tša .mini, .small, bj.bj.

Dikonope

Bjalo ka kopano, dikonope di šomišwa go ditiro mola dikgokagano di šomišwa go dilo. Go fa mohlala, "Download" e ka ba konope gomme "mošomo wa morago bjale" e ka ba kgokagano.

Dikonope ka moka tša go se fetoge go setaele sa bohlokwa bjo bo bofefo, eupša palo ya diklase tša mošomo di ka dirišwa bakeng sa mekgwa ya mebala ye e fapanego. Diklase tše di akaretša sehlopha sa mmala o mopududu .primary, sehlopha sa mmala o mopududu o bofefo .info, sehlopha se setala le .successsehlopha se sehwibidu .danger.

Dikonope tša mohlala

Button mekgwa ya tshebetso ka sebediswa ho leha e le efe le .btnsebediswa. Ka tlwaelo o tla nyaka go diriša tše go fela <a>, <button>, le go kgetha <input>dielemente. Ke kamoo e lebelegago ka gona:

       

Bogolo bjo bo fapanego

Fancy dikonope tše kgolo goba tše nnyane? Eba le go yona!

Boemo bjo bo golofetšego

Bakeng sa dikonope tšeo di sa šomego goba tšeo di šitišitšwego ke tirišo ka lebaka le lengwe goba le lengwe, diriša boemo bjo bo golofetšego. Seo ke .disabledsa dikgokagano le :disabledsa <button>dielemente.

Dikgokagano

Dikonope

 

Ditemošo tša motheo

.alert-message

Melaetša ya mothaladi o tee bakeng sa go tšweletša go palelwa, go palelwa mo go ka bago gona goba katlego ya tiro. Kudu-kudu e nago le mohola bakeng sa diforomo.

Hwetša javascript » .

×

Guacamole e kgethwa! Best check yo self, ga o bonagale gabotse kudu .

×

Ao snap! Fetoša se le sela gomme o leke gape .

×

O šomile gabotse! O bala molaetša wo wa temošo ka katlego .

×

Dihlogo godimo! Ye ke temošo yeo e nyakago tlhokomelo ya gago, eupša ga se selo se segolo seo se tlago pele go fihla ga bjale.

Mohlala wa khoutu

  1. <div class = "temošo-molaetša temošo" >
  2. <a sehlopha = "tswalela" href = "#" > × </a>
  3. <p><strong> Guacamole e kgethwa! </strong> Best check yo self, ga o bonagale gabotse kudu. </p>
  4. </div> e

Thibela melaetša

.alert-message.block-message

Bakeng sa melaetša yeo e nyakago tlhalošo ye nnyane, re na le ditemošo tša setaele sa temana. Tše di phethagetše bakeng sa go bubbling godimo ga melaetša e metelele ya phošo, go lemoša modiriši ka tiro yeo e sa emetšego, goba go fo tšweletša tsebišo bakeng sa go gatelela kudu letlakaleng.

Hwetša javascript » .

×

Guacamole e kgethwa! Ye ke temošo! Best check yo self, ga o bonagale gabotse kudu. Nulla vitae elit libero, e lego pharetra e lego augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

×

Ao snap! O hweditše phošo! Fetoša se le sela gomme o leke gape .

  • Duis mollis est yeo e sego ya commodo luxus
  • Nisi erat porttitor ligula ya go rwala dilo
  • Eget lacinia odio sem nec elit
×

O šomile gabotse! O bala molaetša wo wa temošo ka katlego. Cum sociis natoque penatibus le magnis dis pelego montes, nascetur ya go segiša mus. Maecenas faucibus mollis ya go ba le sebopego sa magareng.

×

Dihlogo godimo! Ye ke temošo yeo e nyakago tlhokomelo ya gago, eupša ga se selo se segolo seo se tlago pele go fihla ga bjale.

Mohlala wa khoutu

  1. <div class = "temošo-molaetša thibelo-molaetša temošo" >
  2. <a sehlopha = "tswalela" href = "#" > × </a>
  3. <p><strong> Guacamole e kgethwa! Ye ke temošo! </strong> Best check yo self, ga o bonagale gabotse kudu. Nulla vitae elit libero, e lego pharetra e lego augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  4. <div sehlopha = "temošo-ditiro" >
  5. <a class = "btn small" href = "#" > Tšea kgato ye </a> <a class = "btn small" href = "#" > Goba dira se </a>
  6. </div> e
  7. </div> e

Di-modal

Dimodal—dipoledišano goba mapokisi a seetša—di kgolo bakeng sa ditiro tša seemo maemong ao go ona go lego bohlokwa gore seemo sa morago se hlokomelwe.

Hwetša javascript » .

Dikeletšo tša didirišwa

Twipsies ke super molemo bakeng sa thusa mosebedisi ferekane le ho ba supa ka tsela e nepahetseng.

Hwetša javascript » .

Lorem ipsum dolar sit amet illo phošo ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus ditlamorago ditlamorago, 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 dula go swana le go tšhaba go tšhaba, go swana le go tšhaba go tšhaba, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis quasi quae.

Dipopovers

Šomiša dipopo go fa tshedimošo ya sengwalwa sa ka fase go letlakala ntle le go ama peakanyo.

Hwetša javascript » .

Sehlogo sa Popover

Etiam porta sem malesuada ea mollis euismod. Maecenas faucibus mollis ya go ba le sebopego sa magareng. Morbi leo risus, porta ac consectetur ac, vestibulum ka eros.

Go thoma

Go kopanya javascript le bokgobapuku bja Bootstrap go bonolo kudu. Ka tlase re ya godimo ga dilo tša motheo gomme re go fa di-plugin tše dingwe tše di makatšago go go thoma!

Lebelela ditokomane tša javascript »

Seo se akareditšwego

Tliša tše dingwe tša dikarolo tša mathomo tša Bootstrap bophelong ka di-plugin tše mpsha tša tlwaelo tšeo di šomago ka jQuery le Ender . Re go hlohleletša go di katološa le go di fetoša gore di swane le dinyakwa tša gago tše di itšego tša tlhabollo.

Faele Tlhalošo
bootstrap-modal.js ya go swara Rona Modal plugin ke super tshesane nka ka setso modal js plugin! Re ile ra tšea tlhokomelo e kgethegilego go akaretša feela mošomo wa go hloka selo wo re o nyakago go twitter.
bootstrap-ditemošo.js Plugin ya temošo ke sehlopha se senyenyane kudu sa go oketša mošomo wa kgauswi go ditemošo.
bootstrap-go theoga.js Plugin ye ke ya go oketša tirišano ya go theoga go bootstrap topbar goba go sepelasepela ka dithepo.
bootstrap-scrollspy.js ya go phutholla The ScrollSpy plugin ke bakeng sa eketsa auto ntjhafatsa nav e thehiloeng scroll boemo ho bootstrap topbar.
bootstrap-dikonope.js The ScrollSpy plugin ke bakeng sa eketsa auto ntjhafatsa nav e thehiloeng scroll boemo ho bootstrap topbar.
bootstrap-dithepo.js Plugin ye e tlaleletša ka ka pela, ye e fetogago ya thepo le tšhomišo ya pilisi bakeng sa go sepela ka dipaesekele ka dikagare tša selegae.
bootstrap-twipsy.js ya go swara E theilwe godimo ga plugin ye botse kudu ya jQuery.tipsy yeo e ngwadilwego ke Jason Frame; twipsy ke phetolelo e mpshafaditšwego, yeo e sa ithekgago ka diswantšho, e diriša css3 bakeng sa ditshwantšho tša go phela, le di-data-dika bakeng sa polokelo ya sehlogo sa lefelong leo!
bootstrap-popover.js ya go swara Plugin ya popover e fana ka segokanyimmediamentsi sa sebolokigolo se bonolo bakeng sa ho eketsa popovers ho kopo ya hao. E atološa boostrap-twipsy.js plugin, ka gona kgonthišetša gore o tšea faele yeo gape ge o akaretša di-popovers mo protšekeng ya gago!

Na javascript e a nyakega?

Aowa!Bootstrap e hlamilwe pele le pele go ba bokgobapuku bja CSS. Javascript ye e fa legato la motheo la tirišano godimo ga mekgwa ye e akareditšwego.

Le ge go le bjalo, go bao ba nyakago javascript, re file di-plugin tše di lego ka mo godimo go go thuša go kwešiša kamoo o ka kopanyago Bootstrap le javascript le go go fa kgetho ya ka pela, e bobebe bakeng sa mošomo wa motheo gatee-tee.

Bakeng sa tshedimošo e oketšegilego le go bona di-demo tše dingwe tše di phelago, hle lebelela letlakala la rena la ditokomane tša plugin .

Bootstrap e ile ya agwa go tšwa go Preboot , e lego sephuthelwana sa mohlodi wo o bulegilego sa mixins le diphetogo tšeo di tlago go dirišwa ka kopanelo le Less , e lego preprocessor ya CSS bakeng sa tlhabollo ya wepe ka lebelo le e bonolo.

Lekola ka moo re šomišitšego Preboot ka go Bootstrap le gore o ka e šomiša bjang ge o ka kgetha go sepetša Less go projeke ya gago ye e latelago.

Tsela ya go e diriša

Šomiša kgetho ye go diriša ka botlalo diphetogo tša Less tša Bootstrap, mixins, le go bea dihlaga ka go CSS ka javascript go sephephediši sa gago.

  1. <link rel = "letlakala la setaele / ka tlase" href = "ka tlase / bootstrap.less" mecha ea litaba = "kaofela" />
  2. <script src = "js / ka tlase-1.1.3.min.js" </script>

Ga o kwe tharollo ya .js? Leka tirišo ya Less Mac goba o šomiše Node.js go kgoboketša ge o tsenya khoutu ya gago.

Seo se akareditšwego

Ke tše dingwe tša dintlha tše kgolo tša seo se akaretšwago go Twitter Bootstrap bjalo ka karolo ya Bootstrap. Hlogo godimo go weposaete ya Bootstrap goba letlakala la projeke ya Github go taonelouta le go ithuta ka botlalo.

Diphetogo

Diphetogo ka Less di phethagetše bakeng sa go hlokomela le go mpshafatša CSS ya gago ya go opša ke hlogo ntle le go opša ke hlogo. Ge o nyaka go fetoša boleng bja mmala goba boleng bjo bo šomišwago gantši, bo mpshafatše lefelong le tee gomme o beakantšwe.

  1. // Dikgokagano
  2. @KgokaganoMmala : #8b59c2;
  3. @KgokaganoMmalaHover : fifala ( @kgokaganyoMmala , 10 );
  4.  
  5. // Diputswa
  6. @ e ntsho : # 000;
  7. @ bohloohoDark : bobebe ( @ botsho , 25 %);
  8. @ bohlooho : bobebe ( @ botsho , 50 %);
  9. @ bohloohoLight : bobebe ( @ botsho , 70 %);
  10. @ bohloohoLighter : bobebe ( @ botsho , 90 %);
  11. @ bošweu : #fff ;
  12.  
  13. // Mebala ya Accent
  14. @ botalalerata : # 08b5fb;
  15. @ botala : # 46a546;
  16. @ khubelu : # 9d261d;
  17. @ mosehla : # ffc40d;
  18. @ mmala wa namune : # f89406;
  19. @ e pinki : # c3325f;
  20. @ bo pherese : # 7a43b6;
  21.  
  22. // Keriti ya motheo
  23. @fonte ya motheo : 13px ;
  24. @motheo : 18px ;

Go swaya diphošo

Less e fana gape ka mokgwa o mongwe wa go swaya diphošo go tlaleletša go polelo ya go tlwaelega ya CSS /* ... */.

  1. // Ye ke tshwaelo
  2. /* Ye le yona ke tshwaelo */

Mixins godimo ga wazoo

Mixins ge e le gabotse ke di akaretša goba dikarolo bakeng sa CSS, e go dumelela go kopanya boloko ya khoutu go ba e tee. Ba e khōlō bakeng sa morekisi prefixed thepa joalokabox-shadow , sefapano-browser gradients, fonte mekgobo, le ho feta. Ka tlase ke sampole ya di-mixin tšeo di akaretšwago le Bootstrap.

Mekgobo ya difonte

  1. # fonte { .
  2. . shorthand ( @boima : tloaelehileng , @boholo : 14px , @lineHeight : 20px ) {
  3. fonte - boholo : @boholo ;
  4. fonte - boima : @boima ;
  5. mola - bophagamo : @lineHeight ;
  6. } .
  7. . sans - serif ( @boima : tloaelehileng , @boholo : 14px , @lineHeight : 20px ) {
  8. fonte - lelapa : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;
  9. fonte - boholo : @boholo ;
  10. fonte - boima : @boima ;
  11. mola - bophagamo : @lineHeight ;
  12. } .
  13. ...
  14. } .

Dikelo tša go sepelelana

  1. # gradient { .
  2. ...
  3. . paatsepama ( @Mmala oa ho qala : #555, @Mmala oa bofelo: #333) {
  4. mmala wa bokamorago : @endColor ;
  5. bokamorago - boeletša : boeletša - x ;
  6. bokamorao - setšoantšo : - khtml - gradient ( linear , letšehali holimo , letšehali tlase , ho tloha ( @startColor ), ho ( @endColor )); // Monyakišiši
  7. bokamorao - setšoantšo : - moz - linear - gradient ( @ Qala Mmala , @ mafelelo Mmala ); // FF 3,6 +
  8. bokamorago - seswantšho : - ms - linear - gradient ( @ Mmala wa go thoma , @ Mmala wa mafelelo ); // IE10
  9. bokamorao - setšoantšo : - webkit - gradient ( linear , letšehali holimo , letšehali tlase , mmala - ema ( 0 %, @startColor ), mmala - ema ( 100 %, @endColor )); // Safari 4+, Krome 2+
  10. bokamorago - seswantšho : - webkit - linear - gradient ( @ Mmala wa go thoma , @ Mmala wa mafelelo ); // Safari 5.1+, Krom 10+
  11. bokamorao - setšoantšo : - o - linear - gradient ( @ Qala Mmala , @ mafelelo Mmala ); // Opera 11.10
  12. bokamorao - setšoantšo : linear - gradient ( @ Qala Mmala , @ mafelelo Mmala ); // Maemo a
  13. } .
  14. ...
  15. } .

Ditiro tša go šoma

Fumana majabajaba le phetha ba bang ba dipalo ho hlahisa tenyetsehang le matla mixins joaloka e mong ka tlase.

  1. // Griditude ya go ba le selo
  2. @gridDikholomo : 16 ;
  3. @gridBophara bja Kholomo : 40px ;
  4. @gridBophara ba Sethiba : 20px ;
  5. @siteWidth : ( @Dikholomo tša keriti * @Bophara bja Kholomo ya keriti ) + ( @Bophara bja Keriti ya Gutter * ( @Dikholomo tša keriti - 1 ));
  6.  
  7. // Dira dikholomo tše dingwe
  8. . dikholomo ( @kholomoSpan : 1 ) { .
  9. width : ( @Bophara bja Kholomo ya keriti * @Sephethephethe sa kholomo ) + ( @Bophara bja Kgolomo ya keriti * ( @Sebaka sa kholomo - 1 ));
  10. } .

Go kgoboketša ka mo gonyenyane

Ka morago ga go fetoša .lessdifaele ka go /lib/, o tla swanelwa ke go di kgoboketša gape e le gore o kgone go tsošološa difaele tša bootstrap-*.*.*.css le bootstrap-*.*.*.min.css. Ge e le gore o romela kgopelo ya go goga go GitHub, o swanetše go kgoboketša gape ka mehla.

Ditsela tša go kgoboketša

Mokgwa Megato
Node le makefile

Tsenya mokgoboketši wa mola wa taelo wa ka fase ka npm ka go sepetša taelo ye e latelago:

$ npm kenya lessc

Hang ha hlomamisa feela matha makeho tloha motso oa hao bootstrap directory le u kaofela behiloe.

Go tlaleletša, ge e ba o na le watchr yeo e hlomilwego, o ka kitima make watchgo ba le bootstrap yeo e agilwego lefsa ka go iketla nako le nako ge o rulaganya faele ka go bootstrap lib (se ga se nyakege, e fo ba mokgwa wa go ba bonolo).

Javascript

Download Less.js ya moragorago gomme o akaretše tsela ya go ya go yona (le Bootstrap) go head.

  1. <link rel = "letlakala la setaele / ka tlase" href = "/ tsela / go ya / bootstrap.less" >
  2. <script src = "/tsela/go/less.js" </script>

Go kgoboketša gape difaele tša .less, e no di boloka gomme o laetše letlakala la gago gape. Less.js e di kgoboketša gomme e di boloka polokelong ya lefelong leo.

Mola wa taelo

Ge e le gore o šetše o na le sedirišwa sa mola wa taelo wo monnyane seo se tsentšwego, e no sepetša taelo ye e latelago:

$ lessc ./lib / bootstrap.less > bootstrap.css

Kgonthiša gore o akaretša --compresska taelong yeo ge e ba o leka go boloka di-byte tše dingwe!

Less Mac tiriso ye

Sedirišwa sa Mac seo e sego sa semmušo se lebelela dipuku tša difaele tša .less gomme se kgoboketša khoutu go difaele tša lefelong leo ka morago ga go boloka mo gongwe le mo gongwe ga faele ya .less yeo e bogetšwego.

Ge o rata, o ka fetoša dikgetho ka go tirišo bakeng sa go fokotša ka go itiriša le gore ke tšhupetšo efe yeo difaele tše di kgobokeditšwego di feleletšago di le go yona.