Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum ndi eros.
Bootstrap ndi chida chochokera ku Twitter chomwe chidapangidwa kuti chiziyambitsa chitukuko cha mawebusayiti ndi masamba.
Zimaphatikizapo CSS yoyambira ndi HTML ya kalembedwe, mafomu, mabatani, matebulo, ma gridi, kuyenda, ndi zina.
Chidziwitso cha Nerd: Bootstrap idamangidwa ndi Zochepa ndipo idapangidwa kuti izituluka pachipata ndikuganizira asakatuli amakono.
Kuti muyambire mwachangu komanso mophweka, ingotengerani mawuwa patsamba lanu.
Wokonda kugwiritsa ntchito Zochepa? Palibe vuto, ingoyerekezani repo ndikuwonjezera mizere iyi:
Tsitsani, foloko, kukoka, mafayilo, ndi zina zambiri ndi Bootstrap repo yovomerezeka pa Github.
Panopa v1.3.0
Akatswiri pa Twitter akhala akugwiritsa ntchito pafupifupi laibulale iliyonse yomwe amawadziwa kuti akwaniritse zofunikira zakutsogolo. Bootstrap idayamba ngati yankho ku zovuta zomwe zidabwera. Mothandizidwa ndi anthu ambiri odabwitsa, Bootstrap yakula kwambiri.
Werengani zambiri pa dev.twitter.com ›
Bootstrap imayesedwa ndikuthandizidwa mu msakatuli wamkulu wamakono monga Chrome, Safari, Internet Explorer, ndi Firefox.
Bootstrap imabwera yokwanira ndi CSS yophatikizidwa, yosaphatikizidwa, ndi ma templates.
Makina osasinthika a gridi omwe amaperekedwa ngati gawo la Bootstrap ndi grid ya 940px wide 16-column grid. Ndikokoma kwa makina odziwika bwino a gridi ya 960, koma opanda malire / padding kumanzere ndi kumanja.
Monga tawonera apa, mawonekedwe oyambira atha kupangidwa ndi "mizere" iwiri, iliyonse ikatenga magawo 16 oyambira omwe tafotokoza ngati gawo la gridi yathu. Onani zitsanzo pansipa kuti mumve zambiri.
- <div class = "mzere" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
Nenani zomwe muli nazo ngati mukuyenera kupanga zomwe zili .row
mkati mwazambiri zomwe zilipo.
- <div class = "mzere" >
- <div class = "span12" >
- Gawo 1 la gawo
- <div class = "mzere" >
- <div class = "span6" >
- Gawo 2
- </div>
- <div class = "span6" >
- Gawo 2
- </div>
- </div>
- </div>
- </div>
Omangidwa mu Bootstrap ndi mitundu ingapo yosinthira makonda a 940px grid system. Ndi makonda pang'ono, mutha kusintha kukula kwa zipilala, ma gutters awo, ndi chidebe chomwe amakhalamo.
Zosintha zomwe zimafunikira kusintha ma gridi pakali pano zonse zili mu variables.less
.
Zosintha | Mtengo wofikira | Kufotokozera |
---|---|---|
@gridColumns |
16 | Chiwerengero cha mizati mkati mwa gululi |
@gridColumnWidth |
40px pa | M'lifupi ndime iliyonse mkati mwa gululi |
@gridGutterWidth |
20px pa | Mipata yolakwika pakati pa ndime iliyonse |
@siteWidth |
Kuwerengera kuchuluka kwa zipilala zonse ndi ma gutters | Timagwiritsa ntchito machesi oyambira kuwerengera kuchuluka kwa mizati ndi ngalande ndikuyika m'lifupi mwake .fixed-container() mixin. |
Kusintha gridi kumatanthauza kusintha mitundu itatu @grid-*
ndikubwezeretsanso mafayilo Ochepa.
Bootstrap imakhala ndi zida zogwiritsira ntchito gridi yokhala ndi mpaka 24; kusakhulupirika ndi 16 basi. Umu ndi momwe ma gridi anu osinthika angawonekere makonda kukhala 24-column grid.
- @gridColumns : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
Mukakonzedwanso, mudzakhazikitsidwa!
Zosasintha komanso zosavuta 940px-wide, masanjidwe apakati pafupifupi patsamba lililonse kapena tsamba loperekedwa ndi <div.container>
.
- <thupi>
- <div class = "chotengera" >
- ...
- </div>
- </ thupi>
Njira ina, mawonekedwe amasamba osinthika amadzimadzi okhala ndi min- ndi max-widths ndi kabar lakumanzere. Zabwino kwa mapulogalamu ndi zolemba.
- <thupi>
- <div class = "container-fluid" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "content" >
- ...
- </div>
- </div>
- </ thupi>
Mndandanda wokhazikika wa typographic pakukonza masamba anu.
Gulu lonse la typographic grid limachokera pamitundu iwiri Yocheperako mufayilo yathu yosinthika.less: @basefont
ndi @baseline
. Choyamba ndi kukula kwa font komwe kumagwiritsidwa ntchito ponsepo ndipo chachiwiri ndi kutalika kwa mzere woyambira.
Timagwiritsa ntchito masinthidwe amenewo, ndi masamu ena, kupanga m'mphepete, ma padding, ndi kutalika kwa mzere wamitundu yathu yonse ndi zina zambiri.
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.
Pogwiritsa ntchito kutsindika, maadiresi, ndi mawu achidule
<strong>
<em>
<address>
<abbr>
Ma tag otsindika ( <strong>
ndi <em>
) ayenera kugwiritsidwa ntchito kusonyeza kufunikira kowonjezera kapena kutsindika kwa liwu kapena chiganizo chogwirizana ndi mawu ozungulira. Gwiritsani <strong>
ntchito kufunikira komanso <em>
kutsindika kupsinjika .
Fusce dapibus , tellus ac cursus commodo , tor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra augue.
Zindikirani: Zili bwino kugwiritsa ntchito <b>
ndi <i>
ma tag mu HTML5 ndipo sayenera kulembedwa molimba mtima komanso mopendekera, motsatana (ngakhale ngati pali chinthu chowonjezera, chigwiritseni ntchito). <b>
cholinga chake ndi kuwunikira mawu kapena ziganizo popanda kupereka zofunikira zowonjezera, pomwe <i>
nthawi zambiri zimakhala za mawu, mawu aukadaulo, ndi zina zambiri.
Chigawocho <address>
chimagwiritsidwa ntchito pazolumikizana ndi makolo ake apafupi, kapena gulu lonse lantchito. Nazi zitsanzo ziwiri za momwe angagwiritsire ntchito:
Zindikirani: Mzere uliwonse mumzere <address>
uyenera kutha ndi kuthyola mzere ( <br />
) kapena kukulungidwa ndi tag ya block-level (mwachitsanzo, <p>
) kuti mukonzekere bwino zomwe zili.
Pachidule ndi ma acronyms, gwiritsani ntchito <abbr>
tag ( <acronym>
yatsitsidwa mu HTML5 ). Ikani mawonekedwe achidule mkati mwa tag ndikuyika mutu wa dzina lathunthu.
<blockquote>
<p>
<small>
Kuti muphatikizepo blockquote, <blockquote>
zungulirani <p>
ndi ma tag <small>
. Gwiritsani ntchito <small>
chinthucho kuti mutchule gwero lanu ndipo mupeza dash —
isanachitike.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante venenatis dapibus posuere velit aliquet.
Dr. Julius Hibbert
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante venenatis dapibus posuere velit aliquet. </p>
- <kamng'ono> Dr. Julius Hibbert </small>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
Pimp code yanu mumayendedwe ndi ma tag awiri osavuta. Kuti musangalale kwambiri kudzera mu javascript, tsitsani laibulale yokongola ya Google ndipo mwakonzeka.
Khodi, midadada kapena mawu ochepa chabe pamzere, amatha kuwonetsedwa ndi masitayilo pongokulunga pa tag yoyenera. Pama block a code okhala ndi mizere ingapo, gwiritsani ntchito <pre>
chinthucho. Kuti mugwiritse ntchito inline code, gwiritsani ntchito <code>
chinthucho.
Chinthu | Zotsatira |
---|---|
<code> |
Pamzere wamalemba ngati chonchi, code yanu yokulungidwa idzawoneka ngati chinthu ichi <html> . |
<pre> |
<div> <h1>Mutu</h1> <p>Chinachake pomwepa...</p> </div> Zindikirani: Onetsetsani kuti mwasunga ma code mkati mwa |
<pre class="prettyprint"> |
Pogwiritsa ntchito laibulale ya google-code-prettify, ma code anu amapeza mawonekedwe osiyana pang'ono ndi kuwunikira kwa mawu okha. <div> <h1> Mutu </h1> <p> Chinachake pomwepa... </p> </div> Tsitsani google-code-prettify ndikuwona zowerengera momwe mungagwiritsire ntchito. |
<span class="label">
Yang'anani kapena kuyika chizindikiro pa mawu aliwonse pamutu wanu.
Ndidasowapo chimodzi mwazosangalatsa Zatsopano! kapena mbendera zofunika polemba ma code? Chabwino, tsopano muli nawo. Nazi zomwe zikuphatikizidwa ndi kusakhazikika:
Label | Zotsatira |
---|---|
<span class="label">Default</span> |
Zosasintha |
<span class="label success">New</span> |
Chatsopano |
<span class="label warning">Warning</span> |
Chenjezo |
<span class="label important">Important</span> |
Zofunika |
<span class="label notice">Notice</span> |
Zindikirani |
Onetsani tizithunzi tosiyanasiyana pamasamba okhala ndi HTML yotsika komanso masitayelo ochepa.
Tizithunzi tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono tating'ono ta .media-grid
Bootstrap. M'lifupi mwazithunzi ngati 90, 210, ndi 330 kuphatikiza ndi ma pixel angapo a padding kuti afanane ndi .span2
, .span4
, ndi .span6
makulidwe a magawo.
Ma gridi ochezera ndi osavuta kugwiritsa ntchito komanso osavuta kumbali yamakapu. Miyeso yawo imatengera kukula kwa zithunzi zomwe zikuphatikizidwa.
- <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>
Matebulo ndi abwino - pazinthu zambiri. Magome abwino, komabe, amafunikira chikondi chocheperako kuti chikhale chothandiza, chokhazikika, komanso chowerengeka (pamlingo wamakhodi). Nawa malangizo angapo othandiza.
Mangirirani mitu yanu nthawi <thead>
zonse kuti utsogoleri ndi <thead>
> <tr>
> <th>
.
Mofanana ndi mitu yazagawo, zonse zomwe zili patebulo lanu ziyenera kukulungidwa <tbody>
kuti utsogoleri wanu ukhale <tbody>
> <tr>
> <td>
.
Matebulo onse azisinthidwa okha ndi malire ofunikira kuti awonetsetse kuti awerengeka komanso kukonza bwino. Palibe chifukwa chowonjezera makalasi owonjezera kapena mawonekedwe.
# | Dzina loyamba | Dzina lomaliza | Chiyankhulo |
---|---|---|---|
1 | Ena | Mmodzi | Chingerezi |
2 | Joe | Sixpack | Chingerezi |
3 | Stu | Dent | Kodi |
- <tebulo>
- ...
- </table>
Pamagome omwe amafunikira zambiri m'malo ocheperako, gwiritsani ntchito kukoma kofupikitsa komwe kumadula pakati. Itha kugwiritsidwanso ntchito molumikizana ndi malire ndi mikwingwirima, monga masitayilo a tebulo.
# | Dzina loyamba | Dzina lomaliza | Chiyankhulo |
---|---|---|---|
1 | Ena | Mmodzi | Chingerezi |
2 | Joe | Sixpack | Chingerezi |
3 | Stu | Dent | Kodi |
Pangani matebulo anu kuti aziwoneka ocheperako pozungulira ngodya zawo ndikuwonjezera malire mbali zonse.
# | Dzina loyamba | Dzina lomaliza | Chiyankhulo |
---|---|---|---|
1 | Ena | Mmodzi | Chingerezi |
2 | Joe | Sixpack | Chingerezi |
3 | Stu | Dent | Kodi |
- <table kalasi = "tebulo-m'malire" >
- ...
- </table>
Pezani zokometsera pang'ono ndi matebulo anu powonjezera mbidzi - ingowonjezerani .zebra-striped
kalasi.
# | Dzina loyamba | Dzina lomaliza | Chiyankhulo |
---|---|---|---|
1 | Ena | Mmodzi | Chingerezi |
2 | Joe | Sixpack | Chingerezi |
3 | Stu | Dent | Kodi |
pangani mizati 4 | |||
tambani 2 mizati | tambani 2 mizati |
Zindikirani: Zebra-striping ndi njira yopititsira patsogolo yosapezeka kwa asakatuli akale monga IE8 ndi pansipa.
- <table class = "zebra-milozo" >
- ...
- </table>
Kutengera chitsanzo cham'mbuyomu, timawongolera magwiridwe antchito a matebulo athu popereka magwiridwe antchito kudzera pa jQuery ndi pulogalamu yowonjezera ya Tablesorter . Dinani mutu wagawo lililonse kuti musinthe mtundu.
# | Dzina loyamba | Dzina lomaliza | Chiyankhulo |
---|---|---|---|
2 | Joe | Sixpack | Chingerezi |
3 | Stu | Dent | Kodi |
1 | Anu | Mmodzi | Chingerezi |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( ntchito () {
- $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "zebra-milozo" >
- ...
- </table>
Mafomu onse amapatsidwa masitayelo osasinthika kuti awawonetse m'njira yowerengeka komanso yowonjezereka. Masitayilo amaperekedwa pazolowetsa mawu, sankhani ndandanda, zolemba, mabatani a wailesi ndi mabokosi otsimikizira, ndi mabatani.
Onjezani .form-stacked
ku HTML ya fomu yanu ndipo mudzakhala ndi zilembo pamwamba pamasamba awo m'malo mwa kumanzere kwawo. Izi zimagwira ntchito bwino ngati mafomu anu ali aafupi kapena muli ndi magawo awiri olowera mafomu olemera.
Sinthani mwamakonda anu mawonekedwe aliwonse input
, select
kapena textarea
m'lifupi mwa kuwonjezera makalasi owerengeka pazolemba zanu.
Pofika pa v1.3.0, tawonjeza makalasi otengera ma gridi pazinthu zamawonekedwe. Chonde gwiritsani ntchito izi pamakalasi omwe alipo .mini
, .small
ndi zina.
Monga msonkhano, mabatani amagwiritsidwa ntchito pochita zinthu pomwe maulalo amagwiritsidwa ntchito pazinthu. Mwachitsanzo, "Kutsitsa" kungakhale batani ndipo "zochitika zaposachedwa" zitha kukhala ulalo.
Mabatani onse amasinthidwa kukhala mtundu wotuwa wopepuka, koma magulu angapo ogwira ntchito atha kugwiritsidwa ntchito pamitundu yosiyanasiyana. Maphunzirowa akuphatikizapo kalasi ya buluu .primary
, kalasi ya buluu yowala, .info
kalasi yobiriwira .success
, ndi kalasi yofiira .danger
.
Mabatani a mabatani amatha kugwiritsidwa ntchito pa chilichonse chomwe .btn
chikugwiritsidwa ntchito. Nthawi zambiri mudzafuna kugwiritsa ntchito izi pazokha <a>
, <button>
, ndikusankha <input>
zinthu. Umu ndi momwe zimawonekera:
Mukufuna mabatani akulu kapena ang'onoang'ono? Khalani nazo!
Kwa mabatani omwe sakugwira ntchito kapena oyimitsidwa ndi pulogalamuyi pazifukwa zina, gwiritsani ntchito malo olumala. Ndiwo .disabled
maulalo ndi :disabled
zinthu <button>
.
.alert-message
Mauthenga a mzere umodzi wowunikira kulephera, kulephera kotheka, kapena kupambana kwa chinthu. Zothandiza makamaka mafomu.
- <div class = "chenjezo lauthenga" >
- <a class = "close" href = "#"> × </a> _
- <p><strong> Guacamole yoyera! </strong> Chabwino fufuzani inu nokha, simukuwoneka bwino kwambiri. </p>
- </div>
.alert-message.block-message
Pamauthenga omwe amafunikira kufotokozera pang'ono, tili ndi zidziwitso za mawonekedwe a ndime. Izi ndi zabwino potulutsa mauthenga olakwika ataliatali, kuchenjeza wogwiritsa ntchito zomwe akuyembekezera, kapena kungopereka chidziwitso kuti mutsindike kwambiri patsamba.
- <div class = "chenjezo la uthenga wochenjeza" >
- <a class = "close" href = "#"> × </a> _
- <p><strong> Guacamole yoyera! Ili ndi chenjezo! </strong> Chabwino fufuzani inu nokha, simukuwoneka bwino kwambiri. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
- <div class = "alert-actions" >
- <a class = "btn small" href = "#"> Chitani izi </a> <a class = "btn small" href = "#" > Kapena chitani izi </a>
- </div>
- </div>
Ma modals—ma dialogs kapena lightboxes—ndiabwino pa zochitika zapanthawi yomwe kuli kofunika kuti nkhani yakumbuyo isungidwe.
Thupi limodzi labwino…
Ma Twipsies ndi othandiza kwambiri pothandizira wogwiritsa ntchito wosokonezeka ndikuwalozera njira yoyenera.
Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut voluptate explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dictaumtam fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dictaumtamtam fugit quant fugit fugit .
Gwiritsani ntchito popovers kuti mupereke zambiri pamasamba osakhudza masanjidwe.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum ndi eros.
Kuphatikiza javascript ndi laibulale ya Bootstrap ndikosavuta. Pansipa tikupitilira zoyambira ndikukupatsirani mapulagini odabwitsa kuti muyambe!
Bweretsani zina mwazinthu zazikulu za Bootstrap ndi mapulagini atsopano omwe amagwira ntchito ndi jQuery ndi Ender . Tikukulimbikitsani kuti muwonjezere ndikusintha kuti zigwirizane ndi zosowa zanu zachitukuko.
Fayilo | Kufotokozera |
---|---|
bootstrap-modal.js | Pulogalamu yathu ya Modal ndi njira yochepetsetsa kwambiri pa pulogalamu yachikhalidwe ya modal js! Tidasamala kwambiri kuti tiphatikizepo ntchito zomwe timafunikira pa twitter. |
bootstrap-alerts.js | Pulagi yochenjeza ndi gulu laling'ono kwambiri lowonjezera magwiridwe antchito ku zidziwitso. |
bootstrap-dropdown.js | Pulagi iyi ndiyowonjezera kuyanjana kotsitsa ku bootstrap topbar kapena ma navigations olembedwa. |
bootstrap-scrollspy.js | Pulagi ya ScrollSpy ndiyowonjezera kusinthika kwa auto kutengera malo oyenda pa bootstrap topbar. |
bootstrap-buttons.js | Pulagi ya ScrollSpy ndiyowonjezera kusinthika kwa auto kutengera malo oyenda pa bootstrap topbar. |
bootstrap-tabs.js | Pulagi iyi imawonjezera tabu yachangu, yosinthika komanso magwiridwe antchito apiritsi poyendetsa njinga kudzera m'malo am'deralo. |
bootstrap-twipsy.js | Kutengera pulogalamu yowonjezera ya jQuery.tipsy yolembedwa ndi Jason Frame; twipsy ndi mtundu wosinthidwa, womwe sudalira zithunzi, umagwiritsa ntchito css3 pa makanema ojambula pamanja, ndi mawonekedwe a data posungira mutu wamba! |
bootstrap-popover.js | Pulagi ya popover imapereka mawonekedwe osavuta owonjezera ma popover ku pulogalamu yanu. Imakulitsa pulogalamu yowonjezera ya boostrap-twipsy.js , choncho onetsetsani kuti mwatenganso fayiloyo mukaphatikiza ma popover mu projekiti yanu! |
Ayi! Bootstrap idapangidwa poyamba kuti ikhale laibulale ya CSS. Javascript iyi imapereka gawo loyambira lolumikizana pamwamba pa masitaelo omwe akuphatikizidwa.
Komabe, kwa iwo omwe amafunikira javascript, tapereka mapulagini pamwambapa kuti akuthandizeni kumvetsetsa momwe mungaphatikizire Bootstrap ndi javascript ndikukupatsani njira yachangu, yopepuka pamachitidwe oyambira nthawi yomweyo.
Kuti mumve zambiri komanso kuti muwone ma demo amoyo, chonde onani tsamba lathu lolemba zolemba .
Bootstrap inamangidwa kuchokera ku Preboot , paketi yotseguka ya zosakaniza ndi zosinthika kuti zigwiritsidwe ntchito pamodzi ndi Zochepa , CSS preprocessor ya chitukuko cha intaneti chofulumira komanso chosavuta.
Onani momwe tidagwiritsira ntchito Preboot mu Bootstrap ndi momwe mungagwiritsire ntchito ngati mutasankha kuyendetsa Zochepa pa polojekiti yanu yotsatira.
Gwiritsani ntchito njirayi kuti mugwiritse ntchito mokwanira za Bootstrap's Less variables, mixin, ndi nesting mu CSS kudzera pa javascript mu msakatuli wanu.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "onse" />
- <script src = "js/less-1.1.3.min.js" > </script>
Simukumva yankho la .js? Yesani pulogalamu ya Less Mac kapena gwiritsani ntchito Node.js kuti muphatikize mukatumiza khodi yanu.
Nawa zina mwazabwino kwambiri zomwe zikuphatikizidwa mu Twitter Bootstrap ngati gawo la Bootstrap. Pitani patsamba la Bootstrap kapena tsamba la polojekiti ya Github kuti mutsitse ndikuphunzira zambiri.
Zosintha mu Pang'ono ndizabwino posungira ndikusintha mutu wanu wa CSS kwaulere. Mukafuna kusintha mtundu kapena mtengo womwe umagwiritsidwa ntchito pafupipafupi, sinthani pamalo amodzi ndipo mwakhazikitsidwa.
- // Zogwirizana
- @linkColor : #8b59c2;
- @linkColorHover : mdima ( @linkColor , 10 );
- // Magulu
- @wakuda : #000;
- @grayDark : chepetsa ( @black , 25 %);
- @imvi : chepetsa ( @black , 50 %);
- @grayLight : chepetsa ( @black , 70 %);
- @grayLighter : chepetsa ( @black , 90 %);
- @woyera : #fff;
- // Mitundu ya Mawu
- @buluu : #08b5fb;
- @wobiriwira : #46a546;
- @chofiira : #9d261d;
- @chikasu : #ffc40d;
- @lalanje : #f89406;
- @pinki : #c3325f;
- @wofiirira : #7a43b6;
- // Gulu loyambira
- @basefont : 13px ;
- @chiyambi : 18px ;
Pang'ono amaperekanso njira ina yoperekera ndemanga kuwonjezera pa /* ... */
mawu abwinobwino a CSS.
- // Awa ndi ndemanga
- /* Ilinso ndi ndemanga */
Mixins amaphatikizanso kapena magawo a CSS, kukulolani kuti muphatikize ma code kukhala amodzi. Ndiabwino kwa ogulitsa omwe ali ndi prefixed monga box-shadow
, ma gradients abrowser, masanjidwe amtundu, ndi zina zambiri. Pansipa pali zitsanzo za zosakaniza zomwe zikuphatikizidwa ndi Bootstrap.
- #mtundu {
- . shorthand ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- kukula kwa font : @size ;
- font - kulemera : @weight ;
- mzere - kutalika : @lineHeight ;
- }
- . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- font - family : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- kukula kwa font : @size ;
- font - kulemera : @weight ;
- mzere - kutalika : @lineHeight ;
- }
- ...
- }
- #gradient {
- ...
- . ofukula ( @startColor : #555, @endColor: #333) {
- maziko - mtundu : @endColor ;
- maziko - kubwereza : kubwereza - x ;
- maziko - chithunzi : - khtml - gradient ( mzere , kumanzere pamwamba , kumanzere kumanzere , kuchokera ( @startColor ), kupita ku ( @endColor )); // Konqueror
- maziko - chithunzi : - moz - mzere - gradient ( @startColor , @endColor ); // FF 3.6+
- maziko - chithunzi : - ms - mzere - gradient ( @startColor , @endColor ); // IE10
- maziko - chithunzi : - webkit - gradient ( mzere , kumanzere pamwamba , kumanzere kumanzere , mtundu - imani ( 0 %, @startColor ), mtundu - imani ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- maziko - chithunzi : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- maziko - chithunzi : - o - mzere - gradient ( @startColor , @endColor ); // Opera 11.10
- maziko - chithunzi : mzere - gradient ( @startColor , @endColor ); // Muyezo
- }
- ...
- }
Sangalalani ndikuchita masamu kuti mupange zosakaniza zosinthika komanso zamphamvu ngati zomwe zili pansipa.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Pangani mizati
- . mizati ( @columnSpan : 1 ) {
- m'lifupi : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
Pambuyo pakusintha .less
mafayilo mu /lib/, mudzafunikanso kuwaphatikizanso kuti mukonzenso bootstrap-*.*.*.css ndi bootstrap-*.*.*.min.css owona. Ngati mukutumiza pempho la kukoka ku GitHub, muyenera kubweza nthawi zonse.
Njira | Masitepe |
---|---|
Node yokhala ndi makefile | Ikani chojambulira cha mzere wocheperako ndi npm poyendetsa lamulo ili: $ npm kukhazikitsa lessc Mukangoyika, ingothamanga Kuphatikiza apo, ngati mwayika watchr , mutha kuthamanga |
Javascript | Tsitsani zaposachedwa za Les.js ndikuphatikiza njira yopitako (ndi Bootstrap) mu fayilo ya
Kuti mukonzenso mafayilo a .less, ingowasunga ndikutsitsanso tsamba lanu. Less.js amazipanga ndikuzisunga m'malo osungira kwanuko. |
Mzere wolamula | Ngati muli ndi chida chocheperako choyikapo, ingoyendetsani lamulo ili: $ lessc ./lib/bootstrap.less > bootstrap.css Onetsetsani kuti muphatikizepo |
Pang'ono Mac app | Pulogalamu yosavomerezeka ya Mac imayang'ana maulozera a mafayilo .less ndikuphatikiza ma code kumafayilo am'deralo pambuyo pa kusungidwa kulikonse kwa fayilo yowonera .less. Ngati mukufuna, mutha kusintha zokonda mu pulogalamuyo kuti muzingodzipangira zokha komanso kuti mafayilo omwe aphatikizidwa amatheramo. |