Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum na eros.
Bootstrap ni zana kutoka Twitter iliyoundwa ili kuanzisha uundaji wa programu za wavuti na tovuti.
Inajumuisha CSS msingi na HTML kwa uchapaji, fomu, vitufe, majedwali, gridi, urambazaji, na zaidi.
Arifa ya Nerd: Bootstrap imeundwa kwa Chini na iliundwa kufanya kazi nje ya lango kwa kuzingatia vivinjari vya kisasa.
Kwa mwanzo wa haraka na rahisi zaidi, nakili kijisehemu hiki kwenye ukurasa wako wa tovuti.
Shabiki wa kutumia Chini? Hakuna shida, fanya tu repo na uongeze mistari hii:
Pakua, uma, vuta, masuala ya faili, na zaidi ukitumia repo rasmi la Bootstrap kwenye Github.
Hivi sasa v1.3.0
Wahandisi katika Twitter kihistoria wametumia karibu maktaba yoyote waliyokuwa wakiifahamu ili kukidhi mahitaji ya mbele. Bootstrap ilianza kama jibu kwa changamoto zilizowasilishwa. Kwa msaada wa watu wengi wa kushangaza, Bootstrap imekua sana.
Soma zaidi kwenye dev.twitter.com ›
Bootstrap inajaribiwa na kutumika katika vivinjari vikuu vya kisasa kama Chrome, Safari, Internet Explorer na Firefox.
Bootstrap huja kamili na CSS iliyokusanywa, isiyojumuishwa, na violezo vya mfano.
Mfumo wa gridi chaguo-msingi uliotolewa kama sehemu ya Bootstrap ni gridi ya safu wima 16 yenye upana wa 940px. Ni ladha ya mfumo maarufu wa gridi ya 960, lakini bila ukingo wa ziada kwenye pande za kushoto na kulia.
Kama inavyoonyeshwa hapa, mpangilio msingi unaweza kuundwa kwa "safu" mbili, kila moja ikijumuisha idadi ya safu wima 16 tulizofafanua kama sehemu ya mfumo wetu wa gridi ya taifa. Tazama mifano hapa chini kwa tofauti zaidi.
- <div class = "safu" >
- <div class = "span6" >
- ...
- </ div>
- <div class = "span10" >
- ...
- </ div>
- </ div>
Weka maudhui yako ikiwa ni lazima kwa kuunda .row
ndani ya safu wima iliyopo.
- <div class = "safu" >
- <div class = "span12" >
- Kiwango cha 1 cha safu wima
- <div class = "safu" >
- <div class = "span6" >
- Kiwango cha 2
- </ div>
- <div class = "span6" >
- Kiwango cha 2
- </ div>
- </ div>
- </ div>
- </ div>
Imejengwa ndani ya Bootstrap ni vigeu vichache vya kubinafsisha mfumo chaguomsingi wa gridi ya 940px. Ukiwa na ubinafsishaji kidogo, unaweza kurekebisha saizi ya safu wima, mifereji ya maji na chombo wanachoishi.
Vigezo vinavyohitajika kurekebisha mfumo wa gridi kwa sasa vyote viko katika variables.less
.
Inaweza kubadilika | Thamani chaguomsingi | Maelezo |
---|---|---|
@gridColumns |
16 | Idadi ya safu wima ndani ya gridi ya taifa |
@gridColumnWidth |
40px | Upana wa kila safu ndani ya gridi ya taifa |
@gridGutterWidth |
20px | Nafasi hasi kati ya kila safu |
@siteWidth |
Jumla iliyokokotwa ya safu wima zote na mifereji ya maji | Tunatumia mechi ya msingi kuhesabu idadi ya nguzo na mifereji ya maji na kuweka upana wa .fixed-container() mchanganyiko. |
Kurekebisha gridi ina maana ya kubadilisha @grid-*
vigezo vitatu na kurejesha faili za Chini.
Bootstrap huja ikiwa na vifaa vya kushughulikia mfumo wa gridi ya taifa na hadi safu wima 24; chaguo-msingi ni 16 tu. Hivi ndivyo vigeu vya gridi yako vinaweza kuonekana vimegeuzwa kukufaa kwa gridi ya safuwima 24.
- @gridSafu : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
Mara baada ya kujumuishwa, utawekwa!
Mpangilio chaguomsingi na rahisi wa upana wa 940px, unaozingatia katikati kwa takriban tovuti au ukurasa wowote uliotolewa na <div.container>
.
- <mwili>
- <div class = "chombo" >
- ...
- </ div>
- </ mwili>
Muundo mbadala, unaonyumbulika wa ukurasa wenye upana wa chini na wa juu na utepe wa upande wa kushoto. Inafaa kwa programu na hati.
- <mwili>
- <div class = "container-fluid" >
- <div class = "sidebar" >
- ...
- </ div>
- <div class = "content" >
- ...
- </ div>
- </ div>
- </ mwili>
Daraja la kawaida la uchapaji kwa ajili ya kuunda kurasa zako za tovuti.
Gridi nzima ya uchapaji inategemea vigezo viwili vya Chini katika faili zetu za vigezo.less: @basefont
na @baseline
. Ya kwanza ni saizi ya msingi ya fonti inayotumika kote na ya pili ni urefu wa mstari wa msingi.
Tunatumia vigezo hivyo, na baadhi ya hesabu, ili kuunda kando, paddings, na urefu wa mstari wa aina zetu zote na zaidi.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Kwa kutumia msisitizo, anwani na vifupisho
<strong>
<em>
<address>
<abbr>
Lebo za kusisitiza ( <strong>
na <em>
) zinapaswa kutumiwa kuonyesha umuhimu wa ziada au msisitizo wa neno au kifungu cha maneno kuhusiana na nakala yake inayoizunguka. Tumia <strong>
kwa umuhimu na <em>
kwa msisitizo wa mkazo.
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra augue.
Kumbuka: Bado ni sawa kutumia <b>
na <i>
tagi katika HTML5 na si lazima ziwekewe mtindo wa herufi nzito na italiki, mtawalia (ingawa ikiwa kuna kipengele cha kisemantiki zaidi, kitumie). <b>
inakusudiwa kuangazia maneno au vifungu vya maneno bila kuwasilisha umuhimu wa ziada, huku <i>
zaidi ikiwa ni ya sauti, maneno ya kiufundi, n.k.
Kipengele <address>
kinatumika kwa habari ya mawasiliano kwa babu yake wa karibu, au kazi nzima ya kazi. Hapa kuna mifano miwili ya jinsi inaweza kutumika:
Kumbuka: Kila mstari katika mstari <address>
lazima umalizike na uvunjaji mstari ( <br />
) au ufunikwe kwenye lebo ya kiwango cha kuzuia (km, <p>
) ili kupanga maudhui vizuri.
Kwa vifupisho na vifupisho, tumia <abbr>
lebo ( <acronym>
imeacha kutumika katika HTML5 ). Weka fomu ya mkato ndani ya lebo na weka kichwa cha jina kamili.
<blockquote>
<p>
<small>
Ili kujumuisha nukuu ya kuzuia, funika <blockquote>
na <p>
lebo <small>
. Tumia <small>
kipengele kutaja chanzo chako na utapata kistari —
kabla yake.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante venenatis dapibus posuere velit aliquet.
Julius Hibbert
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante venenatis dapibus posuere velit aliquet. </ p>
- <small> Dk. Julius Hibbert </small>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
Badilisha msimbo wako kwa mtindo na vitambulisho viwili rahisi. Kwa uzuri zaidi kupitia javascript, dondosha maktaba ya Google ya urembo na umewekwa.
Msimbo, vijisehemu vya au vijisehemu vilivyo ndani ya mstari, vinaweza kuonyeshwa kwa mtindo kwa kukunja lebo sahihi. Kwa vizuizi vya nambari inayozunguka mistari mingi, tumia <pre>
kipengee. Kwa msimbo wa ndani, tumia <code>
kipengele.
Kipengele | Matokeo |
---|---|
<code> |
Katika safu ya maandishi kama hii, msimbo wako uliofunikwa utaonekana kama <html> kipengele hiki. |
<pre> |
<div> <h1>Kichwa</h1> <p>Kitu hapa...</p> </ div> Kumbuka: Hakikisha umeweka msimbo ndani ya |
<pre class="prettyprint"> |
Kwa kutumia maktaba ya google-code-prettify, nambari zako za msimbo hupata mtindo tofauti wa kuona na uangaziaji wa sintaksia otomatiki. <div> <h1> Kichwa </h1> <p> Kitu hapa... </p> </div> Pakua google-code-prettify na utazame usomaji wa jinsi ya kutumia. |
<span class="label">
Eleza au uripoti kifungu chochote kwenye maandishi ya mwili wako.
Umewahi kuhitaji moja ya hizo mpya za kupendeza! au bendera muhimu wakati wa kuandika msimbo? Kweli, sasa unayo. Hii ndio iliyojumuishwa na chaguo-msingi:
Lebo | Matokeo |
---|---|
<span class="label">Default</span> |
Chaguomsingi |
<span class="label success">New</span> |
Mpya |
<span class="label warning">Warning</span> |
Onyo |
<span class="label important">Important</span> |
Muhimu |
<span class="label notice">Notice</span> |
Taarifa |
Onyesha vijipicha vya ukubwa tofauti kwenye kurasa zilizo na alama ya chini ya HTML na mitindo ndogo.
Vijipicha kwenye .media-grid
faili vinaweza kuwa vya ukubwa wowote, lakini hufanya kazi vyema zaidi vinapochorwa moja kwa moja kwenye mfumo wa gridi ya Bootstrap uliojengewa ndani. Upana wa picha kama 90, 210, na 330 huchanganyika na pikseli chache za pedi ili sawa na .span2
, .span4
, na .span6
saizi za safuwima.
Gridi za media ni rahisi kutumia na badala yake ni rahisi kwa upande wa alama. Vipimo vyao vinategemea tu saizi ya picha zilizojumuishwa.
- <ul class = "media-grid" >
- <li>
- <a href = "#" >
- <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- <li>
- <a href = "#" >
- <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- </ul>
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Meza ni nzuri - kwa vitu vingi. Jedwali kubwa, hata hivyo, zinahitaji upendo wa kuashiria ili ziwe na manufaa, scalable, na kusomeka (katika kiwango cha msimbo). Hapa kuna vidokezo vichache vya kusaidia.
Daima funga vichwa vya safu yako kwa <thead>
namna ambayo uongozi ni <thead>
> <tr>
> <th>
.
Sawa na vichwa vya safu wima, maudhui yote ya jedwali lako yanapaswa kufungwa a <tbody>
ili daraja lako liwe <tbody>
> <tr>
> <td>
.
Majedwali yote yatawekwa kiotomatiki kwa kutumia mipaka muhimu pekee ili kuhakikisha usomaji na kudumisha muundo. Hakuna haja ya kuongeza madarasa ya ziada au sifa.
# | Jina la kwanza | Jina la familia | Lugha |
---|---|---|---|
1 | Baadhi | Moja | Kiingereza |
2 | Joe | Sixpack | Kiingereza |
3 | Stu | Kinyesi | Kanuni |
- <meza>
- ...
- </ meza>
Kwa majedwali ambayo yanahitaji data zaidi katika nafasi zilizobanana zaidi, tumia ladha iliyofupishwa ambayo hukata pedi katikati. Inaweza pia kutumika kwa kushirikiana na mipaka na milia ya pundamilia, kama vile mitindo chaguo-msingi ya jedwali.
# | Jina la kwanza | Jina la familia | Lugha |
---|---|---|---|
1 | Baadhi | Moja | Kiingereza |
2 | Joe | Sixpack | Kiingereza |
3 | Stu | Kinyesi | Kanuni |
Fanya meza zako zionekane laini zaidi kwa kuzungusha pembe zao na kuongeza mipaka pande zote.
# | Jina la kwanza | Jina la familia | Lugha |
---|---|---|---|
1 | Baadhi | Moja | Kiingereza |
2 | Joe | Sixpack | Kiingereza |
3 | Stu | Kinyesi | Kanuni |
- <table class = "bordered-table" >
- ...
- </ meza>
Pata kupendeza kidogo na meza zako kwa kuongeza zebra-striping-ongeza tu .zebra-striped
darasa.
# | Jina la kwanza | Jina la familia | Lugha |
---|---|---|---|
1 | Baadhi | Moja | Kiingereza |
2 | Joe | Sixpack | Kiingereza |
3 | Stu | Kinyesi | Kanuni |
panga safu 4 | |||
weka safu wima 2 | weka safu wima 2 |
Kumbuka: Zebra-striping ni uboreshaji unaoendelea ambao haupatikani kwa vivinjari vya zamani kama vile IE8 na chini.
- <table class = "zebra-striped" >
- ...
- </ meza>
Kwa kuchukua mfano uliopita, tunaboresha manufaa ya jedwali zetu kwa kutoa utendakazi wa kupanga kupitia jQuery na programu-jalizi ya Tablesorter . Bofya kichwa cha safu wima yoyote ili kubadilisha aina.
# | Jina la kwanza | Jina la familia | Lugha |
---|---|---|---|
2 | Joe | Sixpack | Kiingereza |
3 | Stu | Kinyesi | Kanuni |
1 | Wako | Moja | Kiingereza |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( kazi () {
- $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "zebra-striped" >
- ...
- </ meza>
Fomu zote hupewa mitindo chaguo-msingi ili kuziwasilisha kwa njia inayoweza kusomeka na inayoweza kupanuka. Mitindo hutolewa kwa ingizo za maandishi, chagua orodha, sehemu za maandishi, vitufe vya redio na visanduku vya kuteua, na vitufe.
Ongeza .form-stacked
kwenye HTML ya fomu yako na utakuwa na lebo juu ya sehemu zao badala ya kushoto kwao. Hii inafanya kazi vizuri ikiwa fomu zako ni fupi au una safu wima mbili za pembejeo za fomu nzito zaidi.
Geuza kukufaa aina yoyote input
, select
, au textarea
upana kwa kuongeza madarasa machache tu kwenye lebo yako.
Kufikia v1.3.0, tumeongeza madarasa ya ukubwa kulingana na gridi ya vipengele vya fomu. Tafadhali tumia hizi kwenye madarasa yaliyopo .mini
, .small
, nk.
Kama mkusanyiko, vifungo hutumiwa kwa vitendo wakati viungo vinatumiwa kwa vitu. Kwa mfano, "Pakua" inaweza kuwa kitufe na "shughuli za hivi majuzi" inaweza kuwa kiungo.
Vifungo vyote chaguomsingi kwa mtindo wa kijivu hafifu, lakini idadi ya madarasa ya utendaji yanaweza kutumika kwa mitindo tofauti ya rangi. Madarasa haya ni pamoja na darasa la bluu .primary
, darasa la bluu-nyepesi .info
, darasa la kijani kibichi .success
, na darasa nyekundu .danger
.
Mitindo ya vifungo inaweza kutumika kwa kitu chochote .btn
kilichowekwa. Kwa kawaida utataka kutumia hizi kwa pekee <a>
, <button>
, na kuchagua <input>
vipengele. Hivi ndivyo inavyoonekana:
Ungependa vitufe vikubwa au vidogo? Kuwa na hayo!
Kwa vitufe ambavyo havitumiki au vimezimwa na programu kwa sababu moja au nyingine, tumia hali ya ulemavu. Hiyo ni .disabled
kwa viungo na :disabled
kwa <button>
vipengele.
.alert-message
Ujumbe wa mstari mmoja wa kuangazia kutofaulu, kutofaulu kunakowezekana, au kufaulu kwa kitendo. Hasa muhimu kwa fomu.
- <div class = "onyo la ujumbe wa tahadhari" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Guacamole takatifu! </strong> Bora jiangalie mwenyewe, huonekani kuwa mzuri sana. </ p>
- </ div>
.alert-message.block-message
Kwa ujumbe unaohitaji maelezo kidogo, tuna arifa za mtindo wa aya. Hizi ni bora kwa kuburudisha ujumbe mrefu wa makosa, kuonya mtumiaji juu ya kitendo kinachosubiri, au kuwasilisha tu habari kwa msisitizo zaidi kwenye ukurasa.
- <div class = "onyo la kuzuia-ujumbe wa tahadhari" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Guacamole takatifu! Hili ni onyo! </strong> Bora jiangalie mwenyewe, huonekani kuwa mzuri sana. Nulla vitae elit libero, pharetra augue. Karibu commodo cursus magna, vel scelerisque nisl consectetur et. </ p>
- <div class = "alert-actions" >
- <a class = "btn small" href = "#" > Chukua hatua hii </a> <a class = "btn small" href = "#" > Au fanya hivi </a>
- </ div>
- </ div>
Mipangilio—vidirisha au visanduku vyepesi—ni vyema kwa vitendo vya muktadha katika hali ambapo ni muhimu kwamba muktadha wa usuli udumishwe.
Mwili mmoja mzuri…
Twipsies ni muhimu sana kwa kumsaidia mtumiaji aliyechanganyikiwa na kuwaelekeza katika mwelekeo sahihi.
Inaaminika kuwa ipsum imetokea bila makosa ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptate explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dictaum quae fugit accusant accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dictaum quae fugit accusate accusative
Tumia popover kutoa maelezo ya maandishi kwa ukurasa bila kuathiri mpangilio.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum na eros.
Kuunganisha javascript na maktaba ya Bootstrap ni rahisi sana. Hapo chini tunapitia misingi na kukupa programu-jalizi nzuri ili uanze!
Sahihisha baadhi ya vipengele vya msingi vya Bootstrap ukitumia programu-jalizi mpya maalum zinazofanya kazi na jQuery na Ender . Tunakuhimiza kuzipanua na kuzirekebisha ili ziendane na mahitaji yako mahususi ya ukuzaji.
Faili | Maelezo |
---|---|
bootstrap-modal.js | Programu-jalizi yetu ya Modal ni mwonekano mwembamba sana kwenye programu jalizi ya modal ya JS! Tulichukua uangalifu maalum kujumuisha utendakazi wazi tu ambao tunahitaji kwenye twitter. |
bootstrap-alerts.js | Programu-jalizi ya tahadhari ni darasa dogo sana la kuongeza utendakazi wa karibu kwa arifa. |
bootstrap-dropdown.js | Programu-jalizi hii ni ya kuongeza mwingiliano wa kushuka kwenye upau wa juu wa bootstrap au urambazaji wa vichupo. |
bootstrap-scrollspy.js | Programu-jalizi ya ScrollSpy ni kwa ajili ya kuongeza usasishaji otomatiki nav kulingana na nafasi ya kusogeza kwenye upau wa juu wa bootstrap. |
bootstrap-buttons.js | Programu-jalizi ya ScrollSpy ni kwa ajili ya kuongeza usasishaji otomatiki nav kulingana na nafasi ya kusogeza kwenye upau wa juu wa bootstrap. |
bootstrap-tabs.js | Programu-jalizi hii inaongeza kichupo cha haraka, chenye nguvu na utendaji wa kidonge kwa kuendesha baiskeli kupitia maudhui ya ndani. |
bootstrap-twipsy.js | Kulingana na programu-jalizi bora ya jQuery.tipsy iliyoandikwa na Jason Frame; twipsy ni toleo lililosasishwa, ambalo halitegemei picha, hutumia CSS3 kwa uhuishaji, na sifa za data kwa uhifadhi wa mada ya ndani! |
bootstrap-popover.js | Programu-jalizi ya popover hutoa kiolesura rahisi cha kuongeza popover kwenye programu yako. Inapanua programu-jalizi ya boostrap-twipsy.js , kwa hivyo hakikisha kuwa umenyakua faili hiyo pia unapojumuisha popover kwenye mradi wako! |
Hapana! Bootstrap imeundwa kwanza kabisa kuwa maktaba ya CSS. Javascript hii hutoa safu ya msingi ya mwingiliano juu ya mitindo iliyojumuishwa.
Hata hivyo, kwa wale wanaohitaji javascript, tumetoa programu-jalizi hapo juu ili kukusaidia kuelewa jinsi ya kuunganisha Bootstrap na javascript na kukupa chaguo la haraka na jepesi kwa utendakazi msingi mara moja.
Kwa habari zaidi na kuona baadhi ya maonyesho ya moja kwa moja, tafadhali rejelea ukurasa wetu wa nyaraka wa programu-jalizi .
Bootstrap iliundwa kutoka Preboot , kifurushi cha chanzo huria cha michanganyiko na viambajengo vya kutumika pamoja na Less , kichakataji awali cha CSS kwa uundaji wa wavuti haraka na rahisi.
Angalia jinsi tulivyotumia Preboot katika Bootstrap na jinsi unavyoweza kuitumia ikiwa utachagua kuendesha Chini kwenye mradi wako unaofuata.
Tumia chaguo hili kutumia kikamilifu vigeu vya Bootstrap's Less, michanganyiko, na kuweka kiota katika CSS kupitia javascript kwenye kivinjari chako.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "yote" />
- <script src = "js/less-1.1.3.min.js" ></script>
Je! huhisi suluhisho la .js? Jaribu programu ya Less Mac au tumia Node.js kukusanya unapotuma msimbo wako.
Hapa kuna baadhi ya mambo muhimu ya kile kilichojumuishwa kwenye Twitter Bootstrap kama sehemu ya Bootstrap. Nenda kwenye tovuti ya Bootstrap au ukurasa wa mradi wa Github ili kupakua na kujifunza zaidi.
Vigezo katika Chini ni bora kwa kudumisha na kusasisha maumivu ya kichwa yako ya CSS bila malipo. Unapotaka kubadilisha thamani ya rangi au thamani inayotumika mara kwa mara, isasishe katika sehemu moja na umewekwa.
- // Viungo
- @linkColor : #8b59c2;
- @linkColorHover : giza ( @linkColor , 10 );
- // Grey
- @nyeusi : #000;
- @grayDark : wepesi ( @nyeusi , 25 %);
- @kijivu : wepesi ( @nyeusi , 50 %);
- @grayLight : nyepesi ( @nyeusi , 70 %);
- @grayLighter : nyepesi ( @black , 90 %);
- @mzungu : #fff;
- // Rangi za Lafudhi
- @bluu : #08b5fb;
- @kijani : #46a546;
- @nyekundu : #9d261d;
- @njano : #ffc40d;
- @chungwa : #f89406;
- @pink : #c3325f;
- @zambarau : #7a43b6;
- // Gridi ya msingi
- @font msingi : 13px ;
- @msingi : 18px ;
Chini pia hutoa mtindo mwingine wa kutoa maoni pamoja na /* ... */
sintaksia ya kawaida ya CSS.
- // Haya ni maoni
- /* Haya pia ni maoni */
Mchanganyiko kimsingi ni pamoja na au sehemu za CSS, hukuruhusu kuchanganya kizuizi cha msimbo kuwa moja. Ni nzuri kwa sifa zilizoangaziwa awali za muuzaji kama vile box-shadow
, gradients za kivinjari, safu za fonti na zaidi. Ifuatayo ni sampuli ya michanganyiko ambayo imejumuishwa na Bootstrap.
- #fonti {
- . shorthand ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- saizi ya fonti : @size ;
- font - uzito : @uzito ;
- urefu wa mstari : @lineHeight ;
- }
- . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- font - familia : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- saizi ya fonti : @size ;
- font - uzito : @uzito ;
- urefu wa mstari : @lineHeight ;
- }
- ...
- }
- #gradient {
- ...
- . wima ( @startColor : #555, @endColor: #333) {
- mandharinyuma - rangi : @endColor ;
- background - kurudia : kurudia - x ;
- mandharinyuma - picha : - khtml - gradient ( linear , kushoto juu , kushoto chini , kutoka ( @startColor ), hadi ( @endColor )); // Konqueror
- mandharinyuma - picha : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+
- mandharinyuma - picha : - ms - linear - gradient ( @startColor , @endColor ); // IE10
- mandharinyuma - picha : - webkit - gradient ( linear , kushoto juu , kushoto chini , rangi - kuacha ( 0 %, @startColor ), rangi - kuacha ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- mandharinyuma - picha : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- mandharinyuma - picha : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10
- mandharinyuma - picha : mstari - gradient ( @startColor , @endColor ); // Kiwango
- }
- ...
- }
Furahia na ufanye hesabu ili kuzalisha michanganyiko inayoweza kunyumbulika na yenye nguvu kama hii hapa chini.
- // Griditudi
- @gridSafu : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Tengeneza safu wima kadhaa
- . safu wima ( @columnSpan : 1 ) {
- upana : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
Baada ya kurekebisha .less
faili katika /lib/, utahitaji kuzikusanya tena ili kutengeneza upya bootstrap-*.*.*.css na bootstrap-*.*.*.min.css faili. Ikiwa unatuma ombi la kuvuta kwa GitHub, lazima ulipe tena.
Njia | Hatua |
---|---|
Nodi iliyo na makefile | Sakinisha mkusanyaji wa mstari wa amri kidogo na npm kwa kuendesha amri ifuatayo: $ npm sakinisha lessc Mara tu ikiwa imesakinishwa kimbia tu Kwa kuongeza, ikiwa umesakinisha watchr , unaweza kukimbia |
Javascript | Pakua Less.js za hivi punde na ujumuishe njia yake (na Bootstrap) kwenye
Ili kukusanya tena faili .less, zihifadhi tu na upakie upya ukurasa wako. Less.js inazikusanya na kuzihifadhi katika hifadhi ya ndani. |
Mstari wa amri | Ikiwa tayari unayo zana ndogo ya mstari wa amri iliyosanikishwa, endesha tu amri ifuatayo: $ lessc ./lib/bootstrap.less > bootstrap.css Hakikisha kujumuisha |
Programu ndogo ya Mac | Programu isiyo rasmi ya Mac hutazama saraka za faili .less na kukusanya msimbo kwa faili za ndani baada ya kila uhifadhi wa faili iliyotazamwa. Ukipenda, unaweza kugeuza mapendeleo katika programu kwa uboreshaji wa kiotomatiki na ni saraka gani ambayo faili zilizokusanywa huishia. |