Etiam porta sem maleuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, erosda westibulum.
“Bootstrap”, web sahypalarynyň we sahypalarynyň ösüşini başlamak üçin döredilen Twitter-den gurallar toplumy.
Onda typografiýa, formalar, düwmeler, tablisalar, gözenekler, nawigasiýa we başgalar üçin esasy CSS we HTML bar.
Nerd duýduryşy: “Bootstrap” “Less” bilen gurlup , häzirki zaman brauzerlerini göz öňünde tutup derwezeden işlemek üçin döredildi.
Iň çalt we aňsat başlangyç üçin bu parçany web sahypaňyza göçüriň.
Az ulanmagyň muşdagy? Mesele ýok, diňe repony klonlaň we şu setirleri goşuň:
Github-daky resmi Bootstrap repo bilen göçürip alyň, vilka, çekiň, faýl meselelerini we ş.m.
Häzirki wagtda v1.3.0
“Twitter” -iň inersenerleri öňden gelýän talaplary kanagatlandyrmak üçin tanyş kitaphanalaryny diýen ýaly ulandylar. “Bootstrap” hödürlän kynçylyklara jogap hökmünde başlady. Köp ajaýyp halkyň kömegi bilen Bootstrap ep-esli ösdi.
Dev.twitter.com sahypasynda has giňişleýin oka
Bootstrap, Chrome, Safari, Internet Explorer we Firefox ýaly häzirki zaman brauzerlerinde synagdan geçirilýär we goldanýar.
“Bootstrap” düzülen CSS, düzülmedik we mysal şablonlary bilen doly.
“Bootstrap” -yň bölegi hökmünde berlen deslapky gözenek ulgamy, 9 sütünli 16 sütünli gözenekdir. Bu meşhur 960 gözenek ulgamynyň tagamy, ýöne çep we sag taraplarda goşmaça margin / padding ýok.
Bu ýerde görkezilişi ýaly, iki sany "sütün" bilen esasy düzüliş döredilip bilner, olaryň her biri öz gözenek ulgamymyzyň bir bölegi hökmünde kesgitlän 16 sany sütünimiziň birnäçesini öz içine alýar. Has köp üýtgeşiklik üçin aşakdaky mysallara serediň.
- <div class = "row" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
.row
Bar bolan sütüniň içinde döredip, mazmunyňyza höwürtge beriň .
- <div class = "row" >
- <div class = "span12" >
- Sütüniň 1-nji derejesi
- <div class = "row" >
- <div class = "span6" >
- 2-nji dereje
- </div>
- <div class = "span6" >
- 2-nji dereje
- </div>
- </div>
- </div>
- </div>
“Bootstrap” -da gurlan, adaty 940px gözenek ulgamyny sazlamak üçin az sanly üýtgeýjiler bar. Biraz özleşdirmek bilen sütünleriň, çukurlaryň we ýaşaýan konteýnerleriň ululygyny üýtgedip bilersiňiz.
Tor ulgamyny üýtgetmek üçin zerur üýtgeýjiler häzirki wagtda ýaşaýar preboot.less
.
Üýtgeýji | Bellenen baha | Düşündiriş |
---|---|---|
@gridColumns |
16 | Toruň içindäki sütünleriň sany |
@gridColumnWidth |
40px | Toruň içindäki her sütüniň ini |
@gridGutterWidth |
20px | Her sütüniň arasyndaky otrisatel boşluk |
@siteWidth |
Columnhli sütünleriň we çukurlaryň hasaplanan jemi | Sütünleriň we çukurlaryň sanyny sanamak we garyndynyň giňligini kesgitlemek üçin käbir esasy gabat gelýäris .fixed-container() . |
Paneli üýtgetmek, üç @grid-*
üýtgeýjini üýtgetmek we Az faýllary täzeden düzmek diýmekdir.
“Bootstrap” 24 sütüne çenli gözenek ulgamyny dolandyrmak üçin enjamlaşdyrylan; Dymmaklyk bary-ýogy 16-dyr.
- @gridColumns : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
Täzeden düzülensoň, düzülersiňiz!
Diňe bir web sahypasy ýa-da sahypasy üçin deslapky we ýönekeý 940px giňlikdäki merkezleşdirilen düzüliş <div.container>
.
- <body>
- <div class = "konteýner" >
- ...
- </div>
- </body>
Minimal we iň giňligi we çep tarapy bolan alternatiw, çeýe suwuk sahypa gurluşy. Programmalar we resminamalar üçin ajaýyp.
- <body>
- <div class = "konteýner-suwuklyk" >
- <div class = "gapdal paneli" >
- ...
- </div>
- <div class = "mazmun" >
- ...
- </div>
- </div>
- </body>
Web sahypalaryňyzy düzmek üçin adaty tipografiki iýerarhiýa.
Tiphli tipografiki gözenek, preboot.less faýlymyzdaky iki sany az üýtgeýjä esaslanýar: @basefont
we @baseline
. Birinjisi, şriftiň ululygynda ulanylýar, ikinjisi esasy çyzyk beýikligi.
Şol üýtgeýjileri we käbir matematikany, ähli görnüşlerimiziň çäklerini, paddinglerini we çyzyk beýikliklerini döretmek üçin ulanýarys.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur gülkünç mus. Nullam id dolor id nibh ultricies ulag serişdesi.
Üns bermek, salgylar we gysgaltmalar ulanmak
<strong>
<em>
<address>
<abbr>
Sözüň ýa-da söz düzüminiň töweregindäki göçürmesine goşmaça ähmiýetini ýa-da ähmiýetini görkezmek üçin bellikler ( <strong>
we <em>
) ulanylmaly. <strong>
Möhümlik we stres ünsi <em>
üçin ulanyň .
Fusce dapibus , tellus ac cursus commodo , gynama mauris condimentum nibh , fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra augue.
Bellik: HTML5-de ulanmak <b>
we <i>
bellik etmek henizem dogry we olar degişlilikde goýy we çyzykly görnüşde ýazylmaly däl (has manyly element bar bolsa, ulanyň). <b>
goşmaça ses bermezden sözleri ýa-da sözlemleri tapawutlandyrmak üçin niýetlenendir, şol bir wagtyň özünde <i>
ses, tehniki adalgalar we ş.m.
Bu <address>
element iň ýakyn atasy ýa-da tutuş iş üçin aragatnaşyk maglumatlary üçin ulanylýar. Ulanylyşynyň iki mysaly:
Bellik: Mazmuny dogry düzmek üçin her setir <address>
çyzyk-arakesme ( <br />
) bilen gutarmaly ýa-da blok derejeli bellik bilen örtülmeli (meselem ).<p>
Gysgaltmalar we gysgaltmalar üçin <abbr>
belligi ulanyň ( HTML5<acronym>
-de köne ). Stenografiýa görnüşini belligiň içine goýuň we doly adyň adyny belläň.
<blockquote>
<p>
<small>
Bloknoty goşmak üçin, gaplaň <blockquote>
we <p>
bellikler <small>
. <small>
Çeşmäňizi görkezmek üçin elementi ulanyň we —
ondan öň em çyzgysyny alarsyňyz.
“Lorem ipsum dolor” amet, “consectetur adipiscing elit”. “Integer posuere” ante venenatis dapibus posuere velit aliketini ýok edýär.
Dr. Julius Hibbert
- <blockquote>
- <p> Lorem ipsum dolor amet, konsektetur adipiscing elit. Integer posuere ante venenatis dapibus posuere velit aliketini ýok edýär. </p>
- <small> Dr. Julius Hibbert </small>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
Koduňyzy iki sany ýönekeý bellik bilen stilde çalyň. Javascript arkaly has ajaýyp bolmak üçin Google-yň koduny owadan kitaphanasyna taşlaň we düzüldi.
Kod, blok bölekleri ýa-da diňe bölekler, dogry bellige dolanyp stil bilen görkezilip bilner. Birnäçe setiri öz içine alýan kod bloklary üçin <pre>
elementi ulanyň. Giriş kody üçin <code>
elementi ulanyň.
Element | Netije |
---|---|
<code> |
Şuňa meňzeş tekst setirinde, örtülen koduňyz bu >html< elemente meňzeýär. |
<pre> |
<div> <h1> sözbaşy </h1> <p> Şu ýerde bir zat ... </p> </div> Bellik: |
<pre class="prettyprint"> |
“Google-code-prettify” kitaphanasyny ulanyp, kod bloklary birneme üýtgeşik wizual stili we awtomatiki sintaksis aýratynlygyny alýarsyňyz. <div> <h1> sözbaşy </h1> <p> Şu ýerde bir zat ... </p> </div> Google-code-prettify-i göçürip alyň we nädip ulanmalydygyny okaň. |
<span class="label">
Bedeniňizdäki islendik sözleme üns beriň ýa-da belläň.
Hiç haçan şol ajaýyp Täze gerekdi! ýa-da kod ýazylanda möhüm baýdaklar? Bolýar, indi sizde bar. Ine, adaty tertipde nämeler bar:
Bellik | Netije |
---|---|
<span class="label">Default</span> |
Bellenen |
<span class="label success">New</span> |
Täze |
<span class="label warning">Warning</span> |
Duýduryş |
<span class="label important">Important</span> |
Möhüm |
<span class="label notice">Notice</span> |
Üns beriň |
Pes HTML aýak yzy we minimal stili bolan sahypalarda dürli ululykdaky kiçijik suratlary görkeziň.
Içindäki .media-grid
kiçijik suratlar islendik ululykda bolup biler, ýöne gönüden-göni gurlan Bootstrap grid ulgamyna karta edilende has gowy işleýär. 90, 210 we 330 ýaly şekil giňlikleri, we sütün ululyklaryna deň bolmak üçin birnäçe piksel padding .span2
bilen .span4
birleşýär .span6
.
Mediýa torlaryny ulanmak aňsat we bellik tarapynda has ýönekeý. Olaryň ölçegleri diňe goşulan suratlaryň ululygyna esaslanýar.
- <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>
Stollar gaty gowy - köp zat üçin. Ajaýyp tablisalar peýdaly, göwrümli we okalýan (kod derejesinde) bolmagy üçin birneme bellik söýgüsine mätäç. Ine kömek etmek üçin birnäçe maslahat.
Sütün sözbaşylaryňyzy elmydama <thead>
iýerarhiýa <thead>
>> bilen <tr>
örtüň <th>
.
Sütün sözbaşylaryna meňzeşlik bilen, stoluňyzyň ähli mazmuny <tbody>
iýerarhiýaňyz <tbody>
>> <tr>
bolmaly <td>
.
Tableshli tablisalar okalmagyny üpjün etmek we gurluşy saklamak üçin diňe zerur serhetler bilen awtomatiki usulda düzüler. Goşmaça synplary ýa-da häsiýetleri goşmagyň zerurlygy ýok.
# | Ady | Familiýasy | Dil |
---|---|---|---|
1 | Käbirleri | Biri | Iňlis |
2 | Joe | Alty gap | Iňlis |
3 | Stu | Diş | Kod |
- <tablisa>
- ...
- </table>
Zebra zolaklaryny goşup, stollaryňyz bilen azajyk gyzyklanyň - .zebra-striped
synpy goşuň.
# | Ady | Familiýasy | Dil |
---|---|---|---|
1 | Käbirleri | Biri | Iňlis |
2 | Joe | Alty gap | Iňlis |
3 | Stu | Diş | Kod |
Bellik: Zebra-zolak, IE8 we aşakdaky ýaly köne brauzerler üçin elýeterli däl ösüş.
- <table class = "zebra-zolakly" >
- ...
- </table>
Öňki mysaly alyp, jQuery we Tablesorter plugin arkaly tertipleşdirmek funksiýasyny üpjün edip, tablisalarymyzyň peýdalylygyny ýokarlandyrýarys . Görnüşini üýtgetmek üçin islendik sütüniň sözbaşysyna basyň.
# | Ady | Familiýasy | Dil |
---|---|---|---|
2 | Joe | Alty gap | Iňlis |
3 | Stu | Diş | Kod |
1 | Siziňki | Biri | Iňlis |
- <script src = "js / jquery / jquery.tablesorter.min.js" > </script>
- <script >
- $ ( funksiýa () {
- $ ( "tablisa # sortTableExample" ). tablisaçy ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "zebra-zolakly" >
- ...
- </table>
Formshli görnüşlere okalýan we ulaldylan görnüşde hödürlemek üçin deslapky stil berilýär. Stiller tekst girişleri, sanawlary, tekstleri, radio düwmelerini we bellik gutularyny we düwmelerini saýlamak üçin berilýär.
Formanyňyzyň HTML-sine goşuň .form-stacked
, çep tarapyna däl-de, meýdanlarynyň üstünde ýazgylar bolar. Formalaryňyz gysga bolsa ýa-da has agyr görnüşler üçin iki sany sütün bar bolsa, bu gaty gowy işleýär.
Markaňyza birnäçe synp goşup input
, islendik görnüşi select
ýa-da ini sazlaň.textarea
V1.3.0 ýagdaýyna, forma elementleri üçin gözenek esasly ölçeg synplaryny goşduk. Bulary bar bolan .mini
we .small
ş.m. sapaklarynda ulanyň.
Konwensiýa hökmünde düwmeler hereketler üçin ulanylýar, baglanyşyklar obýektler üçin ulanylýar. Mysal üçin, "Downloadüklemek" düwme, "soňky işjeňlik" baglanyşyk bolup biler.
Buthli düwmeler açyk çal reňkde bolýar, ýöne dürli reňk stilleri üçin birnäçe funksional synplar ulanylyp bilner. Bu sapaklara gök .primary
synp, açyk-gök .info
synp, ýaşyl .success
synp we gyzyl .danger
synp girýär.
Düwmeleriň görnüşleri ulanylýan islendik zada .btn
ulanylyp bilner. <a>
Adatça , bulary diňe ulanmak we elementleri <button>
saýlamak islärsiňiz . <input>
Görnüşi:
Uly ýa-da kiçi düwmeler barmy? Bol!
Işlemeýän ýa-da bir sebäp bilen programma tarapyndan ýapylmadyk düwmeler üçin, ýapyk ýagdaýy ulanyň. Bu .disabled
baglanyşyklar we elementler :disabled
üçin .<button>
.alert-message
Hereketiň şowsuzlygyny, bolup biläýjek şowsuzlygyny ýa-da üstünligini görkezmek üçin bir setirli habarlar. Esasanam formalar üçin peýdaly.
- <div class = "duýduryş-habar duýduryşy" >
- <a class = "close" href = "#"> × </a> _
- <p> <strong> Mukaddes guamamol! </strong> Iň gowusy özüňizi barlaň, gaty gowy görünmeýärsiňiz. </p>
- </div>
.alert-message.block-message
Biraz düşündiriş talap edýän habarlar üçin abzas stili duýduryşlary bar. Bular has uzyn säwlik habarlaryny köpeltmek, ulanyja garaşylýan hereket barada duýduryş bermek ýa-da sahypada has köp ünsi çekmek üçin maglumat hödürlemek üçin ajaýyp.
- <div class = "duýduryş-habar blok-habar duýduryşy" >
- <a class = "close" href = "#"> × </a> _
- <p> <strong> Mukaddes guamamol! Bu duýduryş! </strong> Iň gowusy özüňizi barlaň, gaty gowy görünmeýärsiňiz. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur we ş.m. </p>
- <div class = "duýduryş-hereketler" >
- <a class = "btn small" href = "#"> Bu çäräni görüň </a> <a class = "btn small" href = "#"> thisa - da muny ediň </a>
- </div>
- </div>
Modallar - gepleşikler ýa-da çyralar, fon kontekstiniň saklanmagy möhüm bolan ýagdaýlarda kontekstdäki hereketler üçin ajaýyp.
Bir gowy beden…
Twipsies, bulaşyk ulanyja kömek etmek we dogry ugra gönükdirmek üçin gaty peýdaly.
Lorem ipsum dolar sit amet illo ýalňyşlyk “Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo”, “voluptas quia odit fugit accusantium totam totam” arhitektura ekspluatasiýasy “fugit fugit”, “totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas ”
Sahypa düzülişine täsir etmezden, subtekstual maglumatlary bermek üçin açylanlary ulanyň.
Etiam porta sem maleuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, erosda westibulum.
Javascript-i Bootstrap kitaphanasy bilen birleşdirmek gaty aňsat. Aşakda esaslara geçýäris we işe başlamak üçin size ajaýyp pluginler hödürleýäris!
“Bootstrap” -yň esasy komponentlerini jQuery we Ender bilen işleýän täze ýörite plaginler bilen durmuşa geçiriň . Developmentörite ösüş zerurlyklaryňyza laýyklaşdyrmak we üýtgetmegi maslahat berýäris.
Faýl | Düşündiriş |
---|---|
bootstrap-modal.js | Modal pluginimiz , adaty modal js pluginini gaty ýuka ! Diňe twitterde talap edýän ýalaňaç funksiýamyzy goşmak üçin aýratyn alada etdik. |
bootstrap-alerts.js | Duýduryş plugin, duýduryşlara ýakyn işlemek üçin gaty kiçi synpdyr. |
bootstrap-dropdown.js | Bu plugin, bootstrap topbar ýa-da bellikli nawigasiýalara aşak düşýän täsirini goşmak üçin. |
bootstrap-scrollspy.js | “ScrollSpy” plugin, bootstrap topbarsyna aýlaw ýagdaýyna esaslanyp awtomatiki täzelenýän nav goşmak üçin. |
bootstrap-tabs.js | Bu plugin ýerli mazmunda tigir sürmek üçin çalt, dinamiki tab we tabletka funksiýasyny goşýar. |
bootstrap-twipsy.js | Jeýson Frame tarapyndan ýazylan ajaýyp jQuery.tipsy plugin esasynda; twipsy, şekillere bil baglamaýan, animasiýa üçin css3 we ýerli at saklamak üçin maglumat atributlaryny ulanýan täzelenen wersiýa! |
bootstrap-popover.js | Açylýan plugin, programmaňyza popovers goşmak üçin ýönekeý interfeýs hödürleýär. Boostrap-twipsy.js pluginini giňeldýär , şonuň üçin taslamaňyza popovers goşanyňyzda şol faýly hem ele alyň! |
! Ok! “Bootstrap” ilkinji nobatda CSS kitaphanasy bolmak üçin döredildi. Bu javascript, goşulan stilleriň üstünde esasy interaktiw gatlagy üpjün edýär.
Şeýle-de bolsa, “javascript” zerur bolanlar üçin “Bootstrap” -y javascript bilen nädip birikdirmelidigine düşünmek we derrew esasy işlemegi üçin çalt we ýeňil wariant bermek üçin ýokardaky pluginleri hödürledik.
Has giňişleýin maglumat we käbir janly görkezişleri görmek üçin plugin resminamalar sahypamyza serediň .
“Bootstrap” , has çalt we aňsat web ösüşi üçin CSS deslapky prosessor “ Less ” bilen bilelikde ulanyljak açyk çeşmeli garyndylar we üýtgeýänler bolan “Preboot” bilen guruldy.
“Bootstrap” -da “Preboot” -y nädip ulanandygymyzy we indiki taslamaňyzda “Az” işlemegi saýlasaňyz, ony nädip ulanyp boljakdygyny barlaň.
“Bootstrap” -yň az üýtgeýänlerini, garyndylaryny we brauzeriňizdäki javascript arkaly CSS-de höwürtgeleri doly ulanmak üçin bu opsiýany ulanyň.
- <link rel = "stylesheet / less" href = "az / bootstrap.less" media = "hemmesi" />
- <script src = "js / less-1.1.3.min.js" > </script>
.Js çözgüdini duýmaýarsyňyzmy? Kodyňyzy ýerleşdireniňizde düzmek üçin “Az Mac” programmasyny synap görüň ýa-da “Node.js” -i ulanyň .
“Bootstrap” -yň bir bölegi hökmünde “Twitter Bootstrap” -a girizilen zatlaryň esasy pursatlary. Has giňişleýin göçürip almak we öwrenmek üçin Bootstrap web sahypasyna ýa-da Github taslama sahypasyna giriň.
“Less” -däki üýtgeýjiler, CSS kelläňizi mugt saklamak we täzelemek üçin ajaýyp. Reňk bahasyny ýa-da ýygy-ýygydan ulanylýan bahany üýtgetmek isleseňiz, ony bir ýerde täzeläň we düzüldi.
- // Salgylar
- @linkColor : # 8b59c2;
- @linkColorHover : garaňky ( @linkColor , 10 );
- // Çal reňk
- @black : # 000;
- @grayDark : ýeňilleşdir ( @black , 25 %);
- @gray : ýeňilleşdir ( @black , 50 %);
- @grayLight : ýeňilleşdiriň ( @black , 70 %);
- @grayLighter : ýeňilleşdiriň ( @black , 90 %);
- @ ak : #fff ;
- // Accent reňkleri
- @blue : # 08b5fb;
- @green : # 46a546;
- @red : # 9d261d;
- @yellow : # ffc40d;
- @orange : # f89406;
- @pink : # c3325f;
- @purple : # 7a43b6;
- // Esasy gözenek
- @basefont : 13px ;
- @baseline : 18px ;
/* ... */
Az, CSS-iň adaty sintaksisine goşmaça teswir ýazmagyň başga bir görnüşini hödürleýär .
- // Bu teswir
- / * Bu hem teswir * /
Miksinler, esasan, CSS üçin bir bölegi öz içine alýar ýa-da bölekler bolup, kod koduny bir ýere jemlemäge mümkinçilik berýär. Satyjy prefiksirlenen häsiýetler box-shadow
, brauzer gradiýentleri, şrift ýazgylary we başgalar üçin ajaýyp. Aşakda “Bootstrap” -a goşulan garyndylaryň nusgasy.
- #font {
- . stenografiýa ( @ agram : adaty , @size : 14px , @lineHeight : 20px ) {
- şrift - ululygy : @size ;
- şrift - agram : @ agram ;
- setir - beýiklik : @lineHeight ;
- }
- . sans - serif ( @ agram : adaty , @size : 14px , @lineHeight : 20px ) {
- şrift - maşgala : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- şrift - ululygy : @size ;
- şrift - agram : @ agram ;
- setir - beýiklik : @lineHeight ;
- }
- ...
- }
- # gradient {
- ...
- . dik ( @startColor : # 555, @endColor: # 333) {
- fon - reňk : @endColor ;
- fon - gaýtalamak : gaýtalamak - x ;
- fon - surat : - khtml - gradient ( çyzykly , çep ýokarky , çep aşaky , ( @startColor ) -dan ( @endColor ) çenli ; // Konqueror
- fon - surat : - moz - çyzykly - gradient ( @startColor , @endColor ); // FF 3.6+
- fon - surat : - ms - çyzykly - gradient ( @startColor , @endColor ); // IE10
- fon - surat : - webkit - gradient ( çyzykly , çep ýokarky , çep aşaky , reňk - stop ( 0 %, @startColor ), reňk - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- fon - surat : - webkit - çyzykly - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- fon - surat : - o - çyzykly - gradient ( @startColor , @endColor ); // Opera 11.10
- fon - surat : çyzykly - gradient ( @startColor , @endColor ); // Standart
- }
- ...
- }
Aşakdaky ýaly çeýe we güýçli garyndylary döretmek üçin hyýaly boluň we matematika ýerine ýetiriň.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @SiteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Käbir sütün düzüň
- . sütünler ( @columnSpan : 1 ) {
- ini : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
Faýllary / lib / -de üýtgedeniňizden soň .less
, bootstrap - *. *. *. Css we bootstrap - *. *. *. Min.css faýllaryny täzeden döretmek üçin olary täzeden düzmeli bolarsyňyz. GitHub-a çekmek haýyşyny iberýän bolsaňyz, elmydama täzeden ýazmaly.
Usul | Dimler |
---|---|
Makfile bilen düwün | Aşakdaky buýrugy işledip, has az buýruk setirini npm bilen guruň: $ npm lessc guruň Gurlandan soň, bootstrap katalogyňyzyň kökünden işlediň Mundan başga-da, sagat gurnan bolsaňyz, |
Javascript | Iň soňky Less.js-i göçürip alyň we oňa barýan ýoly (we Bootstrap) goşuň
.Faýlsyz faýllary täzeden düzmek üçin olary ýatda saklaň we sahypaňyzy täzeden ýükläň. Less.js olary düzýär we ýerli ammarda saklaýar. |
Buýruk setiri | Eger sizde has az buýruk setiri guraly bar bolsa, aşakdaky buýrugy işlediň: $ lessc ./lib/bootstrap.less> bootstrap.css
|
Az Mac programmasy | Resmi däl Mac programmasy .less faýllaryň kataloglaryna tomaşa edýär we synlanan .less faýly ýatda saklandan soň kody ýerli faýllara düzýär. Isleseňiz, awtomatiki kiçeltmek üçin programmada ileri tutmalary üýtgedip bilersiňiz we düzülen faýllaryň haýsy bukjasy gutarýar. |