Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum ir eros.
„Bootstrap“ yra „Twitter“ įrankių rinkinys, skirtas žiniatinklio programų ir svetainių kūrimui pradėti.
Tai apima pagrindinį CSS ir HTML tipografiją, formas, mygtukus, lenteles, tinklelius, naršymą ir kt.
Įspėjimas apie niekšą : „Bootstrap“ sukurta naudojant „Less “ ir buvo sukurta taip, kad būtų galima dirbti naudojant šiuolaikines naršykles.
Jei norite greičiau ir lengviau pradėti, tiesiog nukopijuokite šį fragmentą į savo tinklalapį.
Mėgstate naudoti mažiau? Jokių problemų, tiesiog klonuokite repo ir pridėkite šias eilutes:
Atsisiųskite, ištraukite šakutę, įrašykite problemas ir dar daugiau naudodami oficialų „Bootstrap“ atpirkimą „Github“.
Šiuo metu v1.3.0
„Twitter“ inžinieriai istoriškai naudojo beveik bet kurią jiems žinomą biblioteką, kad atitiktų sąsajos reikalavimus. „Bootstrap“ prasidėjo kaip atsakas į iškilusius iššūkius. Daugelio nuostabių žmonių pagalba „Bootstrap“ gerokai išaugo.
Skaitykite daugiau dev.twitter.com ›
„Bootstrap“ yra išbandytas ir palaikomas pagrindinėse šiuolaikinėse naršyklėse, pvz., „Chrome“, „Safari“, „Internet Explorer“ ir „Firefox“.
„Bootstrap“ pateikiamas su sudarytais CSS, nesukompiliuotais ir pavyzdiniais šablonais.
Numatytoji tinklelio sistema, pateikiama kaip Bootstrap dalis, yra 940 pikselių pločio 16 stulpelių tinklelis. Tai populiarios 960 tinklelio sistemos skonis, bet be papildomos paraštės / užpildymo kairėje ir dešinėje pusėse.
Kaip parodyta čia, pagrindinį išdėstymą galima sukurti su dviem „stulpeliais“, kurių kiekvienas apima 16 pagrindinių stulpelių, kuriuos apibrėžėme kaip tinklelio sistemos dalį. Daugiau variantų rasite toliau pateiktuose pavyzdžiuose.
- <div class = "row" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
Jei reikia, įdėkite turinį sukurdami .row
esamame stulpelyje.
- <div class = "row" >
- <div class = "span12" >
- 1 stulpelio lygis
- <div class = "row" >
- <div class = "span6" >
- 2 lygis
- </div>
- <div class = "span6" >
- 2 lygis
- </div>
- </div>
- </div>
- </div>
„Bootstrap“ yra keletas kintamųjų, skirtų tinkinti numatytąją 940 pikselių tinklelio sistemą. Šiek tiek pritaikydami galite keisti stulpelių, jų latakų ir konteinerio, kuriame jie yra, dydį.
Šiuo metu visi kintamieji, reikalingi tinklelio sistemai modifikuoti, yra preboot.less
.
Kintamasis | Numatytoji reikšmė | apibūdinimas |
---|---|---|
@gridColumns |
16 | Stulpelių skaičius tinklelyje |
@gridColumnWidth |
40 piks | Kiekvieno stulpelio plotis tinklelyje |
@gridGutterWidth |
20 piks | Neigiamas tarpas tarp kiekvieno stulpelio |
@siteWidth |
Apskaičiuota visų kolonų ir latakų suma | Naudojame keletą pagrindinių atitikmenų, kad suskaičiuotume kolonų ir latakų skaičių ir nustatytume maišytuvo plotį .fixed-container() . |
Keičiant tinklelį, reikia pakeisti tris @grid-*
kintamuosius ir perkompiliuoti mažiau failų.
„Bootstrap“ yra pritaikyta valdyti tinklelio sistemą su iki 24 stulpelių; numatytasis yra tik 16. Štai kaip jūsų tinklelio kintamieji atrodytų pritaikyti 24 stulpelių tinkleliui.
- @gridColumns : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
Kai sukompiliuosite iš naujo, būsite pasiruošę!
Numatytasis ir paprastas 940 pikselių pločio, centre išdėstytas išdėstymas beveik bet kuriai svetainei ar puslapiui, kurį teikia vienas <div.container>
.
- <kūnas>
- <div class = "konteineris" >
- ...
- </div>
- </body>
Alternatyvi, lanksti sklandi puslapio struktūra su minimaliu ir maksimaliu pločiu bei kairiąja šonine juosta. Puikiai tinka programoms ir dokumentams.
- <kūnas>
- <div class = "container-fluid" >
- <div class = "šoninė juosta" >
- ...
- </div>
- <div class = "turinys" >
- ...
- </div>
- </div>
- </body>
Standartinė tipografinė hierarchija tinklalapiams struktūrizuoti.
Visas tipografinis tinklelis yra pagrįstas dviem Less kintamaisiais mūsų preboot.less faile: @basefont
ir @baseline
. Pirmasis yra pagrindinis šrifto dydis, naudojamas visame pasaulyje, o antrasis yra pagrindinės linijos aukštis.
Naudojame tuos kintamuosius ir šiek tiek matematikos, kad sukurtume visų tipų paraštes, užpildus ir linijų aukštį ir dar daugiau.
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.
Pabrėžimų, adresų ir santrumpos naudojimas
<strong>
<em>
<address>
<abbr>
Kirčiavimo žymos ( <strong>
ir <em>
) turėtų būti naudojamos norint nurodyti papildomą žodžio ar frazės svarbą ar kirčiavimą, palyginti su jį supančia kopija. Naudokite <strong>
svarbos ir <em>
streso pabrėžimui .
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, a pharetra augue.
Pastaba: HTML5 vis tiek galima naudoti <b>
ir <i>
žymas, jos nebūtinai turi būti atitinkamai paryškintos ir kursyvu (nors jei yra semantiškesnis elementas, naudokite jį). <b>
skirtas paryškinti žodžius ar frazes, nesuteikiant papildomos svarbos, o <i>
dažniausiai skirtas balsui, techniniams terminams ir pan.
Elementas <address>
naudojamas artimiausio protėvio kontaktinei informacijai arba visam darbui. Štai du pavyzdžiai, kaip jį galima naudoti:
Pastaba: kiekviena eilutė <address>
turi baigtis eilutės lūžiu ( <br />
) arba įterpta į bloko lygio žymą (pvz., <p>
), kad būtų tinkamai struktūrizuotas turinys.
Sutrumpinimams ir akronimams naudokite <abbr>
žymą ( HTML5<acronym>
nebenaudojama ). Įdėkite trumpąją formą į žymą ir nustatykite viso pavadinimo pavadinimą.
<blockquote>
<p>
<small>
Norėdami įtraukti bloko citatą, apvyniokite ir <blockquote>
pažymėkite . Naudodami elementą nurodykite šaltinį ir prieš jį gausite brūkšnelį .<p>
<small>
<small>
—
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Daktaras Julius Hibbertas
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
- <small> Daktaras Julius Hibbertas </small>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
Paruoškite kodą stilingai naudodami dvi paprastas žymas. Jei norite, kad javascript būtų dar nuostabesnis, įmeskite „Google“ kodo gražinimo biblioteką ir viskas.
Kodas, blokai ar tiesiog fragmentai gali būti rodomi stilingai, tiesiog įvyniojus į tinkamą žymą. Jei kodo blokai apima kelias eilutes, naudokite <pre>
elementą. Eilutiniam kodui naudokite <code>
elementą.
Elementas | Rezultatas |
---|---|
<code> |
Tokioje teksto eilutėje jūsų suvyniotas kodas atrodys kaip šis >html< elementas. |
<pre> |
<div> <h1>Antraštė</h1> <p>Kažkas čia...</p> </div> Pastaba: kodą būtinai palikite |
<pre class="prettyprint"> |
Naudojant google-code-prettify biblioteką, jūsų kodo blokai įgauna šiek tiek kitokį vizualinį stilių ir automatinį sintaksės paryškinimą. <div> <h1> Antraštė </h1> <p> Kažkas čia... </p> </div> Atsisiųskite „google-code-prettify“ ir peržiūrėkite „readme“, kaip naudoti. |
<span class="label">
Atkreipkite dėmesį į bet kurią teksto frazę arba pažymėkite ją.
Kada nors reikėjo vieno iš tų išgalvotų Naujų! arba Svarbios vėliavėlės rašant kodą? Na, dabar jūs juos turite. Štai kas įtraukta pagal numatytuosius nustatymus:
Etiketė | Rezultatas |
---|---|
<span class="label">Default</span> |
Numatytas |
<span class="label success">New</span> |
Nauja |
<span class="label warning">Warning</span> |
Įspėjimas |
<span class="label important">Important</span> |
Svarbu |
<span class="label notice">Notice</span> |
Pastebėti |
Rodyti įvairaus dydžio miniatiūras puslapiuose su mažu HTML pėdsaku ir minimaliais stiliais.
Miniatiūros .media-grid
gali būti bet kokio dydžio, tačiau jos geriausiai veikia, kai susiejamos tiesiogiai su integruota Bootstrap tinklelio sistema. Vaizdo plotis, pvz., 90, 210 ir 330, derinamas su keliais pikseliais užpildymo, kad būtų lygūs .span2
, .span4
, ir .span6
stulpelių dydžiams.
Medijos tinklelius lengva naudoti ir gana paprasta žymėjimo pusėje. Jų matmenys priklauso tik nuo įtrauktų vaizdų dydžio.
- <ul class = "medijos tinklelis" >
- <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>
Stalai puikiai tinka daugeliui dalykų. Tačiau puikioms lentelėms reikia šiek tiek žymėjimo, kad jos būtų naudingos, keičiamos ir skaitomos (kodo lygiu). Štai keletas patarimų, kurie padės.
Visada apvyniokite stulpelių antraštes <thead>
taip, kad hierarchija būtų <thead>
> <tr>
> <th>
.
Panašiai kaip ir stulpelių antraštės, visas lentelės turinys turėtų būti suvyniotas į a <tbody>
, kad jūsų hierarchija būtų <tbody>
> <tr>
> <td>
.
Visos lentelės bus automatiškai suformuotos tik su esminėmis kraštinėmis, kad būtų užtikrintas skaitomumas ir išlaikyta struktūra. Nereikia pridėti papildomų klasių ar atributų.
# | Pirmas vardas | Pavardė | Kalba |
---|---|---|---|
1 | Kai kurie | Vienas | Anglų |
2 | Džo | Presas | Anglų |
3 | Stu | Įdubimas | Kodas |
- <lentelė>
- ...
- </table>
Pamėginkite savo stalus pridėję zebrų juosteles – tiesiog pridėkite .zebra-striped
klasę.
# | Pirmas vardas | Pavardė | Kalba |
---|---|---|---|
1 | Kai kurie | Vienas | Anglų |
2 | Džo | Presas | Anglų |
3 | Stu | Įdubimas | Kodas |
Pastaba: „Zebra-Striping“ yra laipsniškas patobulinimas, neprieinamas senesnėms naršyklėms, pvz., IE8 ir senesnėms naršyklėms.
- <lentelės klasė = "zebras dryžuotas" >
- ...
- </table>
Atsižvelgiant į ankstesnį pavyzdį, pageriname savo lentelių naudingumą, suteikdami rūšiavimo funkciją per „ jQuery “ ir „ Tablesorter “ papildinį. Spustelėkite bet kurio stulpelio antraštę, kad pakeistumėte rūšiavimą.
# | Pirmas vardas | Pavardė | Kalba |
---|---|---|---|
2 | Džo | Presas | Anglų |
3 | Stu | Įdubimas | Kodas |
1 | Tavo | Vienas | Anglų |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( funkcija () {
- $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <lentelės klasė = "zebras dryžuotas" >
- ...
- </table>
Visoms formoms suteikiami numatytieji stiliai, kad jos būtų skaitomos ir keičiamos. Pateikiami teksto įvesties, pasirinkimo sąrašų, teksto sričių, radijo mygtukų ir žymimųjų laukelių bei mygtukų stiliai.
Pridėkite .form-stacked
prie formos HTML ir etiketes turėsite jų laukų viršuje, o ne kairėje. Tai puikiai tinka, jei formos yra trumpos arba turite du sunkesnių formų įvesties stulpelius.
Tinkinkite bet kokią formą input
, select
, arba textarea
plotį, pridėdami tik keletą klasių prie žymėjimo.
Nuo 1.3.0 versijos pridėjome tinklelio formos elementų dydžio klases. Naudokite šias klases per esamas .mini
, .small
ir kt.
Paprastai mygtukai naudojami veiksmams, o nuorodos – objektams. Pavyzdžiui, „Atsisiųsti“ gali būti mygtukas, o „naujausia veikla“ gali būti nuoroda.
Pagal numatytuosius nustatymus visi mygtukai yra šviesiai pilkos spalvos, tačiau skirtingiems spalvų stiliams galima pritaikyti keletą funkcinių klasių. Šios klasės apima mėlyną .primary
, šviesiai mėlyną .info
, žalią .success
ir raudoną .danger
klasę.
Mygtukų stiliai gali būti taikomi bet kam su .btn
taikoma. Paprastai juos norėsite taikyti tik <a>
, <button>
ir pasirinktiems <input>
elementams. Štai kaip tai atrodo:
Mėgstate didesnius ar mažesnius mygtukus? Turėk tai!
Mygtukams, kurie nėra aktyvūs arba kuriuos programa dėl vienos ar kitos priežasties išjungia, naudokite išjungtą būseną. Tai .disabled
skirta nuorodoms ir :disabled
elementams <button>
.
.alert-message
Vienos eilutės pranešimai, skirti pabrėžti veiksmo nesėkmę, galimą nesėkmę ar sėkmę. Ypač naudinga formoms.
- <div class = "alert-message įspėjimas" >
- <a class = "uždaryti" href = "#" > × </a>
- <p><strong> Šventoji gvakamolė! </strong> Geriausia pasitikrinti, ar neatrodote per gerai. </p>
- </div>
.alert-message.block-message
Pranešimams, kuriuos reikia šiek tiek paaiškinti, turime pastraipos stiliaus įspėjimus. Jie puikiai tinka ilgesniems klaidų pranešimams paskelbti, vartotojui įspėti apie laukiantį veiksmą arba tiesiog pateikti informaciją, kad būtų daugiau dėmesio skiriama puslapyje.
- <div class = "alert-message block-message įspėjimas" >
- <a class = "uždaryti" href = "#" > × </a>
- <p><strong> Šventoji gvakamolė! Tai įspėjimas! </strong> Geriausia pasitikrinti, ar neatrodote per gerai. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
- <div class = "alert-actions" >
- <a class = "btn small" href = "#" > Atlikite šį veiksmą </a> <a class = "btn small" href = "#" > Arba atlikite tai </a>
- </div>
- </div>
Modalai – dialogo langai arba šviesdėžės – puikiai tinka kontekstiniams veiksmams tais atvejais, kai svarbu išlaikyti foninį kontekstą.
Vienas puikus kūnas…
Twipsis yra labai naudingi, kad padėtų sutrikusiam vartotojui ir nukreiptų juos tinkama kryptimi.
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 enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque vertetemque unde sunt sed voluptatem quauttatas accttasusantup quautta
Naudokite iššokančius langus, kad pateiktumėte puslapio potekstinę informaciją nepaveikdami išdėstymo.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum ir eros.
Integruoti javascript su Bootstrap biblioteka yra labai paprasta. Toliau apžvelgsime pagrindus ir pateiksime jums keletą nuostabių papildinių, kad galėtumėte pradėti!
Atgaivinkite kai kuriuos pagrindinius „Bootstrap“ komponentus naudodami naujus pasirinktinius papildinius, kurie veikia su „ jQuery “ ir „ Ender “ . Raginame juos išplėsti ir modifikuoti, kad atitiktų jūsų konkrečius plėtros poreikius.
Failas | apibūdinimas |
---|---|
bootstrap-modal.js | Mūsų „Modal“ įskiepis yra itin plonas tradicinio „Modal js“ papildinio! Mes ypač stengėmės įtraukti tik tas funkcijas, kurių mums reikia „Twitter“. |
bootstrap-alerts.js | Įspėjimų papildinys yra labai maža klasė, skirta perspėjimams papildyti artimą funkcionalumą. |
bootstrap-dropdown.js | Šis įskiepis skirtas išskleidžiamojo meniu sąveikai pridėti prie įkrovos viršutinės juostos arba skirtukų naršymo. |
bootstrap-scrollspy.js | „ScrollSpy“ papildinys skirtas automatiškai atnaujinamą navigaciją, pagrįstą slinkties padėtimi, pridėti prie įkrovos viršutinės juostos. |
bootstrap-tabs.js | Šis papildinys prideda greitą, dinamišką skirtukų ir tablečių funkciją, kad galėtumėte peržiūrėti vietinį turinį. |
bootstrap-twipsy.js | Remiantis puikiu jQuery.tipsy papildiniu, kurį parašė Jason Frame; twipsy yra atnaujinta versija, kuri nesiremia vaizdais, naudoja css3 animacijai ir duomenų atributus vietiniam pavadinimo saugojimui! |
bootstrap-popover.js | Iššokančių langų papildinys suteikia paprastą sąsają, leidžiančią pridėti iššokančiųjų langų prie programos. Tai išplečia įskiepį boostrap-twipsy.js , todėl būtinai paimkite ir tą failą, kai įtraukite iššokančius elementus į savo projektą! |
Ne! „Bootstrap“ visų pirma sukurta kaip CSS biblioteka. Šis javascript suteikia pagrindinį interaktyvų sluoksnį, esantį ant įtrauktų stilių.
Tačiau tiems, kuriems reikia „Javascript“, pateikėme anksčiau pateiktus papildinius, kurie padės suprasti, kaip integruoti „Bootstrap“ su „Javascript“ ir iš karto suteikti greitą, lengvą pagrindinių funkcijų parinktį.
Norėdami gauti daugiau informacijos ir pamatyti kai kurias tiesiogines demonstracines versijas, žr. mūsų papildinio dokumentacijos puslapį .
„Bootstrap“ buvo sukurta naudojant „ Preboot “ – atvirojo kodo mišinių ir kintamųjų paketą, skirtą naudoti kartu su „ Less “ – išankstiniu CSS procesoriumi, kad žiniatinklio kūrimas būtų greitesnis ir lengvesnis.
Sužinokite, kaip „Bootstrap“ naudojome „Preboot“ ir kaip galite juo pasinaudoti, jei kitame projekte pasirinktumėte paleisti „Less“.
Naudokite šią parinktį, kad visiškai išnaudotumėte „Bootstrap's Less“ kintamuosius, mišinius ir įdėjimą į CSS naudodami „Javascript“ savo naršyklėje.
- <link rel = "stylesheet/less" href = "mažiau/bootstrap.less" media = "visi" />
- <script src = "js/less-1.1.3.min.js" ></script>
Nejaučiate .js sprendimo? Išbandykite „Less Mac“ programą arba naudokite „Node.js “ kompiliavimui, kai įdiegiate kodą.
Štai keletas svarbiausių dalykų, įtrauktų į „Twitter Bootstrap“, kaip „Bootstrap“ dalį. Eikite į „Bootstrap“ svetainę arba „Github“ projekto puslapį, kad atsisiųstumėte ir sužinotumėte daugiau.
Kintamieji Less puikiai tinka palaikyti ir atnaujinti jūsų CSS be galvos skausmo. Jei norite pakeisti spalvos reikšmę arba dažnai naudojamą reikšmę, atnaujinkite ją vienoje vietoje ir viskas.
- // Nuorodos
- @linkColor : #8b59c2;
- @linkColorHover : tamsinti ( @linkColor , 10 );
- // Pilkos
- @juodas : #000;
- @grayDark : šviesinti ( @juoda , 25 %);
- @pilka : pašviesinti ( @juoda , 50 %);
- @grayLight : pašviesinti ( @juoda , 70 %);
- @grayLighter : pašviesinti ( @juoda , 90 %);
- @balta : #fff;
- // Akcentinės spalvos
- @mėlyna : #08b5fb ;
- @žalia : #46a546 ;
- @raudona : #9d261d;
- @geltona : #ffc40d;
- @oranžinė : #f89406 ;
- @rožinė : #c3325f ;
- @violetinė : #7a43b6 ;
- // Pagrindinės linijos tinklelis
- @basefont : 13px ;
- @baseline : 18px ;
/* ... */
Be įprastos CSS sintaksės , Less taip pat suteikia dar vieną komentavimo stilių .
- // Tai komentaras
- /* Tai taip pat komentaras */
Mišiniai iš esmės yra CSS apimantys arba daliniai elementai, leidžiantys sujungti kodo bloką į vieną. Jie puikiai tinka pardavėjo ypatybėms, pvz box-shadow
., , kelių naršyklių gradientams, šriftų krūvoms ir kt. Žemiau pateikiamas su Bootstrap įtrauktų mišinių pavyzdys.
- #font {
- . trumpinys ( @svoris : normalus , @dydis : 14 pikselių , @linijos aukštis : 20 pikselių ) {
- šrifto dydis : @size ; _
- šriftas - svoris : @weight ;
- eilutės aukštis : @lineHeight ; _
- }
- . sans - serif ( @svoris : normalus , @size : 14px , @lineHeight : 20px ) {
- šriftų šeima : " Helvetica Neue" , Helvetica , Arial , sans - serif ;
- šrifto dydis : @size ; _
- šriftas - svoris : @weight ;
- eilutės aukštis : @lineHeight ; _
- }
- ...
- }
- #gradientas {
- ...
- . vertikali ( @startColor : #555, @endColor: #333) {
- fono spalva : @endColor ; _
- fonas - pakartokite : pakartokite - x ;
- fonas - vaizdas : - khtml - gradientas ( linijinis , kairėje viršuje , kairėje apačioje , nuo ( @startColor ), iki ( @endColor )); // Konqueror
- fonas - vaizdas : - moz - linijinis - gradientas ( @startColor , @endColor ); // FF 3.6+
- fonas - vaizdas : - ms - linijinis - gradientas ( @startColor , @endColor ); // IE10
- background - image : - webkit - gradientas ( linijinis , kairėje viršuje , kairėje apačioje , spalva - sustabdymas ( 0 % , @startColor ), spalva - sustabdymas ( 100 % , @endColor )); // Safari 4+, Chrome 2+
- background - image : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- background - image : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10
- fonas - vaizdas : linijinis - gradientas ( @startColor , @endColor ); // Standartas
- }
- ...
- }
Įsivaizduokite ir atlikite šiek tiek matematikos, kad sukurtumėte lanksčius ir galingus mišinius, tokius kaip toliau pateiktas.
- // Tinklelis
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Padarykite keletą stulpelių
- . stulpeliai ( @columnSpan : 1 ) {
- plotis : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
Pakeitę .less
failus /lib/, turėsite juos iš naujo sukompiliuoti, kad iš naujo sukurtumėte bootstrap-*.*.*.css ir bootstrap-*.*.*.min.css failus. Jei pateikiate ištraukimo užklausą „GitHub“, visada turite iš naujo kompiliuoti.
Metodas | Žingsniai |
---|---|
Mazgas su makefile | Įdiekite mažiau komandų eilutės kompiliatorių naudodami npm vykdydami šią komandą: $ npm įdiegti lessc Įdiegę tiesiog paleiskite Be to, jei turite įdiegtą stebėjimo programą, galite paleisti |
Javascript | Atsisiųskite naujausią Less.js ir įtraukite kelią į jį (ir „Bootstrap“) į
Norėdami iš naujo sukompiliuoti .less failus, tiesiog išsaugokite juos ir įkelkite puslapį iš naujo. Less.js juos sukompiliuoja ir išsaugo vietinėje saugykloje. |
Komandinė eilutė | Jei jau įdiegėte mažiau komandų eilutės įrankį, tiesiog paleiskite šią komandą: $ lessc ./lib/bootstrap.less > bootstrap.css Būtinai įtraukite |
Mažiau „Mac“ programa | Neoficiali „Mac“ programa stebi .less failų katalogus ir sukompiliuoja kodą į vietinius failus po kiekvieno žiūrimo .less failo išsaugojimo. Jei norite, programoje galite perjungti nuostatas, skirtas automatiniam sumažinimui ir į kurį katalogą pateks sukurti failai. |