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.
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.
Bakeng sa go thoma ka pela le bonolo, e no kopiša seripa se letlakaleng la gago la wepe.
Fan ya go diriša Less? Ga go na bothata, e no clone repo gomme o tlaleletše mela ye:
Download, foroko, hula, faele litaba, le ho feta le semmuso Bootstrap repo ka Github.
Ga bjale v1.3.0
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 ›
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.
Bootstrap e tla e feletše ka CSS e kgobokeditšwego, e sa kgoboketšwago, le dithempleite tša mohlala.
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.
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.
- <div sehlopha = "moleng" >
- <div sehlopha = "span6" >
- ...
- </div> e
- <div sehlopha = "span10" >
- ...
- </div> e
- </div> e
Bea diteng tša gago ge o swanetše ka go hlama ka .row
gare ga kholomo ye e lego gona.
- <div sehlopha = "moleng" >
- <div sehlopha = "span12" >
- Maemo a 1 a kholomo
- <div sehlopha = "moleng" >
- <div sehlopha = "span6" >
- Maemo a 2
- </div> e
- <div sehlopha = "span6" >
- Maemo a 2
- </div> e
- </div> e
- </div> e
- </div> e
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.
Diphetogo tše di nyakegago go fetoša tshepedišo ya keriti ga bjale ka moka di dula ka go preboot.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. |
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.
- @gridDikholomo : 24 ;
- @gridBophara bja Kholomo : 20px ;
- @gridBophara ba Sethiba : 20px ;
Ge e šetše e kgobokeditšwe gape, o tla bewa!
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>
.
- <mmele>
- <div sehlopha = "setshelo" >
- ...
- </div> e
- </mmele>
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.
- <mmele>
- <div sehlopha = "setshelo-seela" >
- <div sehlopha = "sidebar" >
- ...
- </div> e
- <div sehlopha = "diteng" >
- ...
- </div> e
- </div> e
- </mmele>
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 preboot.less: @basefont
le @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.
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.
Go šomiša kgatelelo, diaterese, & dikgutsufatšo
<strong>
<em>
<address>
<abbr>
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 .
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.
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:
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.
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.
<blockquote>
<p>
<small>
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 —
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
- <setsopolwa sa go thibela>
- <p> Lorem ipsum dolor dula amet, kgethehileng ya madipiscing elit. Palo e feletseng ya posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
- <ye nnyane> Ngaka Julius Hibbert </e nnyane>
- </blockquote> ya go tswalela
<ul>
<ul.unstyled>
<ol>
dl
<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.
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 class="prettyprint"> |
Using google-code-prettify bokgobapuku, o diboloko tsa khoutu fumana hanyenyane fapaneng pono setaele le jarolla ka ho iketsa syntax totobatsa. <div> <h1> Hlogo </h1> <p> Selo se sengwe thwi mo... </p> </div> Download google-code-prettify le sheba readme bakeng sa kamoo ho sebelisa. |
<span class="label">
Bitša tlhokomelo goba o folaga polelwana efe goba efe mo sengwalong sa gago sa mmele.
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 |
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.
Diswantšho tše nnyane ka go e .media-grid
ka 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 .span6
bja dikholomo.
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.
- <ul sehlopha = "media-grid" >
- <li>
- <a href = "#" >
- <img sehlopha = "seswantšho se senyenyane" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- <li>
- <a href = "#" >
- <img sehlopha = "seswantšho se senyenyane" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- </ul>
<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>
.
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 |
- <tafola>
- ...
- </tafola>
Hwetša go se nene go makatša ka ditafola tša gago ka go oketša zebra-striping—e no oketša .zebra-striped
klase.
# . | Leina | Sefane | Polelo |
---|---|---|---|
1. 1. | Dingwe | Tee | Seisimane |
2. | Joe o ile a | Sephuthelwana sa Sixpack | Seisimane |
3. | Stu | Dent | Khoutu ya |
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.
- < sehlopha sa tafole = "methalo ea pitsi" >
- ...
- </tafola>
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 |
- <script src = "js / jquery / jquery.mohlophisi wa tafola.min.js" ></script>
- <sengwalwa >
- $ ( mosebetsi () { .
- $ ( "tafola # hlophaMohlala wa Tafole" ). tablesorter ({ Lenaneo la go hlopha : [[ 1 , 0 ]] });
- });
- </script>
- < sehlopha sa tafole = "methalo ea pitsi" >
- ...
- </tafola>
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.
Oketša .form-stacked
go 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.
Tlwaetša foromo efe goba efe input
, select
, goba textarea
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.
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 .success
sehlopha se sehwibidu .danger
.
Button mekgwa ya tshebetso ka sebediswa ho leha e le efe le .btn
sebediswa. 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:
Fancy dikonope tše kgolo goba tše nnyane? Eba le go yona!
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 .disabled
sa dikgokagano le :disabled
sa <button>
dielemente.
.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.
- <div class = "temošo-molaetša temošo" >
- <a sehlopha = "tswalela" href = "#" > × </a>
- <p><strong> Guacamole e kgethwa! </strong> Best check yo self, ga o bonagale gabotse kudu. </p>
- </div> e
.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.
- <div class = "temošo-molaetša thibelo-molaetša temošo" >
- <a sehlopha = "tswalela" href = "#" > × </a>
- <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>
- <div sehlopha = "temošo-ditiro" >
- <a class = "btn small" href = "#" > Tšea kgato ye </a> <a class = "btn small" href = "#" > Goba dira se </a>
- </div> e
- </div> e
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.
Mmele o tee o mobotse...
Twipsies ke super molemo bakeng sa thusa mosebedisi ferekane le ho ba supa ka tsela e nepahetseng.
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.
Šomiša dipopo go fa tshedimošo ya sengwalwa sa ka fase go letlakala ntle le go ama peakanyo.
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 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!
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-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! |
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 ka 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 ya ka pela 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.
Š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.
- <link rel = "letlakala la setaele / ka tlase" href = "ka tlase / bootstrap.less" mecha ea litaba = "kaofela" />
- <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.
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 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.
- // Dikgokagano
- @KgokaganoMmala : #8b59c2;
- @KgokaganoMmalaHover : fifala ( @kgokaganyoMmala , 10 );
- // Diputswa
- @ e ntsho : # 000;
- @ bohloohoDark : bobebe ( @ botsho , 25 %);
- @ bohlooho : bobebe ( @ botsho , 50 %);
- @ bohloohoLight : bobebe ( @ botsho , 70 %);
- @ bohloohoLighter : bobebe ( @ botsho , 90 %);
- @ bošweu : #fff ;
- // Mebala ya Accent
- @ botalalerata : # 08b5fb;
- @ botala : # 46a546;
- @ khubelu : # 9d261d;
- @ mosehla : # ffc40d;
- @ mmala wa namune : # f89406;
- @ e pinki : # c3325f;
- @ bo pherese : # 7a43b6;
- // Keriti ya motheo
- @fonte ya motheo : 13px ;
- @motheo : 18px ;
Less e fana gape ka mokgwa o mongwe wa go swaya diphošo go tlaleletša go polelo ya go tlwaelega ya CSS /* ... */
.
- // Ye ke tshwaelo
- /* Ye le yona ke tshwaelo */
Mixins ge e le gabotse ke di akaretša goba dikarolo tša CSS, di go dumelela go kopanya boloko ya khoutu go ba e tee. They’re great for morekisi prefixed thepa joaloka box-shadow
, sefapano-browser gradients, fonte mekgobo, le ho feta. Ka tlase ke sampole ya di-mixin tšeo di akaretšwago le Bootstrap.
- # fonte { .
- . shorthand ( @boima : tloaelehileng , @boholo : 14px , @lineHeight : 20px ) {
- fonte - boholo : @boholo ;
- fonte - boima : @boima ;
- mola - bophagamo : @lineHeight ;
- } .
- . sans - serif ( @boima : tloaelehileng , @boholo : 14px , @lineHeight : 20px ) {
- fonte - lelapa : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- fonte - boholo : @boholo ;
- fonte - boima : @boima ;
- mola - bophagamo : @lineHeight ;
- } .
- ...
- } .
- # gradient { .
- ...
- . paatsepama ( @Mmala oa ho qala : #555, @Mmala oa bofelo: #333) {
- mmala wa bokamorago : @endColor ;
- bokamorago - boeletša : boeletša - x ;
- bokamorao - setšoantšo : - khtml - gradient ( linear , letšehali holimo , letšehali tlase , ho tloha ( @startColor ), ho ( @endColor )); // Monyakišiši
- bokamorao - setšoantšo : - moz - linear - gradient ( @ Qala Mmala , @ mafelelo Mmala ); // FF 3,6 +
- bokamorago - seswantšho : - ms - linear - gradient ( @ Mmala wa go thoma , @ Mmala wa mafelelo ); // IE10
- 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+
- bokamorago - seswantšho : - webkit - linear - gradient ( @ Mmala wa go thoma , @ Mmala wa mafelelo ); // Safari 5.1+, Krom 10+
- bokamorao - setšoantšo : - o - linear - gradient ( @ Qala Mmala , @ mafelelo Mmala ); // Opera 11.10
- bokamorao - setšoantšo : linear - gradient ( @ Qala Mmala , @ mafelelo Mmala ); // Maemo a
- } .
- ...
- } .
Fumana majabajaba le phetha ba bang ba dipalo ho hlahisa tenyetsehang le matla mixins joaloka e mong ka tlase.
- // Griditude ya go ba le selo
- @gridDikholomo : 16 ;
- @gridBophara bja Kholomo : 40px ;
- @gridBophara ba Sethiba : 20px ;
- @siteWidth : ( @Dikholomo tša keriti * @Bophara bja Kholomo ya keriti ) + ( @Bophara bja Keriti ya Gutter * ( @Dikholomo tša keriti - 1 ));
- // Dira dikholomo tše dingwe
- . dikholomo ( @kholomoSpan : 1 ) { .
- width : ( @Bophara bja Kholomo ya keriti * @Sephethephethe sa kholomo ) + ( @Bophara bja Kgolomo ya keriti * ( @Sebaka sa kholomo - 1 ));
- } .
Ka morago ga go fetoša .less
difaele 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.
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 Go tlaleletša, ge e ba o na le watchr yeo e hlomilwego, o ka kitima |
Javascript | Download Less.js ya moragorago gomme o akaretše tsela ya go ya go yona (le Bootstrap) go
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 |
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. |