Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum ja eros.
Bootstrap on Twitteri tööriistakomplekt, mis on loodud veebirakenduste ja saitide arendamise käivitamiseks.
See sisaldab põhi-CSS-i ja HTML-i tüpograafia, vormide, nuppude, tabelite, võrgustike, navigeerimise ja muu jaoks.
Nohikute hoiatus: Bootstrap on loodud vähemaga ja see on loodud töötama väljaspool väravat kaasaegseid brausereid silmas pidades.
Kiireimaks ja lihtsamaks alustamiseks kopeerige see väljavõte oma veebilehele.
Kas olete vähem kasutamise fänn? Pole probleemi, lihtsalt kloonige repo ja lisage järgmised read:
Githubi ametliku Bootstrapi repo abil laadige alla, harutage, tõmmake, esitage probleeme ja tehke palju muud.
Praegu v1.3.0
Twitteri insenerid on kasutajaliidese nõuete täitmiseks ajalooliselt kasutanud peaaegu kõiki tuttavaid raamatukogusid. Bootstrap sai alguse vastusest tekkinud väljakutsetele. Paljude ägedate inimeste abiga on Bootstrap märkimisväärselt kasvanud.
Lisateavet leiate saidilt dev.twitter.com ›
Bootstrapi testitakse ja toetatakse suuremates kaasaegsetes brauserites, nagu Chrome, Safari, Internet Explorer ja Firefox.
Bootstrap on koos kompileeritud CSS-i, kompileerimata ja näidismallidega.
Bootstrapi osana pakutav vaikevõrgusüsteem on 940 piksli laiune 16 veeruga ruudustik. See on populaarse 960 ruudustiku süsteemi maitse, kuid ilma täiendava veeriseta/polsterduseta vasakul ja paremal küljel.
Nagu siin näidatud, saab põhipaigutuse luua kahe "veeruga", millest igaüks hõlmab mitut 16 põhiveeru, mille määratlesime oma ruudustikusüsteemi osana. Rohkemate variatsioonide nägemiseks vaadake allolevaid näiteid.
- <div class = "rida" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
Vajadusel pesastage oma sisu, luues .row
olemasolevasse veergu.
- <div class = "rida" >
- <div class = "span12" >
- Veeru 1. tase
- <div class = "rida" >
- <div class = "span6" >
- 2. tase
- </div>
- <div class = "span6" >
- 2. tase
- </div>
- </div>
- </div>
- </div>
Bootstrapis on sisseehitatud käputäis muutujaid 940 piksli vaikevõrgusüsteemi kohandamiseks. Veidi kohandades saate muuta veergude, nende vihmaveerennide ja konteineri suurust, milles need asuvad.
Võrgusüsteemi muutmiseks vajalikud muutujad asuvad praegu kõik variables.less
.
Muutuv | Vaikeväärtus | Kirjeldus |
---|---|---|
@gridColumns |
16 | Veergude arv ruudustikus |
@gridColumnWidth |
40 pikslit | Iga veeru laius ruudustikus |
@gridGutterWidth |
20 pikslit | Negatiivne ruum iga veeru vahel |
@siteWidth |
Kõigi sammaste ja vihmaveerennide arvutatud summa | Kasutame veergude ja vihmaveerennide arvu loendamiseks ja .fixed-container() mikseri laiuse määramiseks mõnda põhilist vastet. |
Ruudustiku muutmine tähendab kolme @grid-*
muutuja muutmist ja failide Less uuesti kompileerimist.
Bootstrap on varustatud kuni 24 veeruga võrgusüsteemi haldamiseks; vaikeväärtus on vaid 16. Nii näeksid teie ruudustiku muutujad välja kohandatud 24-veerulisele ruudustikule.
- @gridColumns : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
Kui olete uuesti kompileeritud, olete valmis!
Vaikimisi lihtne ja lihtne 940 piksli laiune tsentreeritud paigutus peaaegu iga veebisaidi või lehe jaoks, mille pakub üks <div.container>
.
- <keha>
- <div class = "konteiner" >
- ...
- </div>
- </body>
Alternatiivne paindlik lehe struktuur minimaalse ja maksimaalse laiusega ning vasakpoolse külgribaga. Suurepärane rakenduste ja dokumentide jaoks.
- <keha>
- <div class = "container-fluid" >
- <div class = "külgriba" >
- ...
- </div>
- <div class = "sisu" >
- ...
- </div>
- </div>
- </body>
Standardne tüpograafiline hierarhia teie veebilehtede struktureerimiseks.
Kogu tüpograafiline ruudustik põhineb failis variables.less kahel Less muutujal: @basefont
ja @baseline
. Esimene on läbivalt kasutatav põhifondi suurus ja teine on baasjoone kõrgus.
Kasutame neid muutujaid ja mõningast matemaatikat kõigi meie tüüpide veeriste, polsterduste ja joonte kõrguste loomiseks ja palju muud.
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.
Rõhu, aadresside ja lühendite kasutamine
<strong>
<em>
<address>
<abbr>
Rõhumärke ( <strong>
ja <em>
) tuleks kasutada, et näidata sõna või fraasi täiendavat tähtsust või rõhuasetust ümbritseva koopia suhtes. Kasutage <strong>
tähtsuse ja <em>
stressi rõhutamiseks .
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.
Märkus . HTML5 -s on siiski lubatud kasutada <b>
ja <i>
silte ning need ei pea olema vastavalt paksus ja kaldkirjas (kuigi kui on semantilisem element, kasutage seda). <b>
on mõeldud sõnade või fraaside esiletõstmiseks ilma täiendavat tähtsust andmata, samas kui <i>
see on enamasti mõeldud hääle, tehniliste terminite jms jaoks.
Elementi <address>
kasutatakse selle lähima esivanema või kogu töö kontaktteabe saamiseks. Siin on kaks näidet selle kasutamise kohta:
Märkus . Sisu õigeks struktureerimiseks peab iga rida <address>
lõppema reavahetusega ( <br />
) või olema ümbritsetud plokitasemel märgendiga (nt ).<p>
Lühendite ja akronüümide jaoks kasutage <abbr>
märgendit ( <acronym>
on HTML5- s aegunud ). Pange stenogrammi vorm sildi sisse ja määrake täielikule nimele pealkiri.
<blockquote>
<p>
<small>
Tsitaadi lisamiseks mähkige <blockquote>
ümber <p>
ja <small>
sildid. Kasutage <small>
elementi allika viitamiseks ja selle ette kuvatakse kriips —
.
Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat a ante venenatis dapibus posuere velit aliquet.
Dr Julius Hibbert
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
- <small> Dr Julius Hibbert </small>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
Viimistlege oma koodi stiilselt kahe lihtsa sildi abil. JavaScripti abil veelgi vingemaks muutmiseks sisestage Google'i koodi kaunistamise teeki ja oletegi valmis.
Koodi, plokke või lihtsalt tekstisiseseid juppe saab kuvada stiilselt, lihtsalt mähkides õigesse sildi. Mitut rida hõlmavate koodiplokkide puhul kasutage <pre>
elementi. Tekstisisese koodi jaoks kasutage <code>
elementi.
Element | Tulemus |
---|---|
<code> |
Sellises tekstireas näeb teie mähitud kood välja nagu see <html> element. |
<pre> |
<div> <h1>Pealkiri</h1> <p>Midagi siin...</p> </div> Märkus. Hoidke koodi |
<pre class="prettyprint"> |
Google-code-prettify teeki kasutades saavad teie koodiplokid veidi erineva visuaalse stiili ja automaatse süntaksi esiletõstmise. <div> <h1> Pealkiri </h1> <p> Midagi siin... </p> </div> Laadige alla google-code-prettify ja vaadake lugemist, kuidas seda kasutada. |
<span class="label">
Pöörake tähelepanu või märgistage mis tahes fraas oma kehatekstis.
Oled kunagi vajanud üht sellist uhket uut! või Tähtsad lipud koodi kirjutamisel? Noh, nüüd on need teil olemas. Vaikimisi on kaasatud järgmine:
Silt | Tulemus |
---|---|
<span class="label">Default</span> |
Vaikimisi |
<span class="label success">New</span> |
Uus |
<span class="label warning">Warning</span> |
Hoiatus |
<span class="label important">Important</span> |
Tähtis |
<span class="label notice">Notice</span> |
Märkus |
Kuvage väikese HTML-i jalajälje ja minimaalse stiiliga lehtedel erineva suurusega pisipilte.
Pisipildid .media-grid
võivad olla mis tahes suurusega, kuid need töötavad kõige paremini, kui need on vastendatud otse sisseehitatud Bootstrapi ruudustikusüsteemiga. Pildi laiused, nagu 90, 210 ja 330, kombineeritakse mõne piksli täidisega, et võrdsustada .span2
, .span4
, ja .span6
veeru suurust.
Meediumiruudud on hõlpsasti kasutatavad ja märgistuse poolel üsna lihtsad. Nende mõõtmed põhinevad ainult kaasasolevate piltide suurusel.
- <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>
Tabelid on suurepärased - paljude asjade jaoks. Suurepärased tabelid vajavad aga veidi märgistusarmastust, et olla kasulikud, skaleeritavad ja loetavad (koodi tasemel). Siin on mõned näpunäited, mis aitavad.
Mähkige veerupäised alati <thead>
nii, et hierarhia oleks <thead>
> <tr>
> <th>
.
Sarnaselt veerupäistele tuleks kogu tabeli põhisisu mähitud a-sse, <tbody>
nii et teie hierarhia oleks <tbody>
> <tr>
> <td>
.
Kõik tabelid kujundatakse automaatselt ainult oluliste ääristega, et tagada loetavus ja säilitada struktuur. Täiendavaid klasse ega atribuute pole vaja lisada.
# | Eesnimi | Perekonnanimi | Keel |
---|---|---|---|
1 | Mõned | Üks | Inglise |
2 | Joe | Kuuspakk | Inglise |
3 | Stu | Mõlk | Kood |
- <tabel>
- ...
- </table>
Tabelite puhul, mis nõuavad kitsamates kohtades rohkem andmeid, kasutage tihendatud maitset, mis lõikab polstri pooleks. Seda saab kasutada ka koos ääriste ja sebratriipudega, nagu tabeli vaikestiile.
# | Eesnimi | Perekonnanimi | Keel |
---|---|---|---|
1 | Mõned | Üks | Inglise |
2 | Joe | Kuuspakk | Inglise |
3 | Stu | Mõlk | Kood |
Muutke oma lauad veidi elegantsemaks, ümardades nende nurki ja lisades igale poole ääriseid.
# | Eesnimi | Perekonnanimi | Keel |
---|---|---|---|
1 | Mõned | Üks | Inglise |
2 | Joe | Kuuspakk | Inglise |
3 | Stu | Mõlk | Kood |
- < tabeliklass = "ääristatud tabel" >
- ...
- </table>
Lisage sebraribad, lisades oma laudadele pisut elegantsi – lisage lihtsalt .zebra-striped
klass.
# | Eesnimi | Perekonnanimi | Keel |
---|---|---|---|
1 | Mõned | Üks | Inglise |
2 | Joe | Kuuspakk | Inglise |
3 | Stu | Mõlk | Kood |
ulatub 4 veergu | |||
ulatub 2 veergu | ulatub 2 veergu |
Märkus. Sebra-triibutamine on progresseeruv täiustus, mis pole saadaval vanematele brauseritele, nagu IE8 ja vanemad.
- < tabeliklass = "sebratriibuline" >
- ...
- </table>
Eelneva näite puhul parandame oma tabelite kasulikkust, pakkudes sortimisfunktsiooni jQuery ja Tablesorteri pistikprogrammi kaudu. Sordi muutmiseks klõpsake mis tahes veeru päist.
# | Eesnimi | Perekonnanimi | Keel |
---|---|---|---|
2 | Joe | Kuuspakk | Inglise |
3 | Stu | Mõlk | Kood |
1 | Sinu | Üks | Inglise |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( funktsioon () {
- $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- < tabeliklass = "sebratriibuline" >
- ...
- </table>
Kõigile vormidele antakse vaikestiilid, et neid loetaval ja skaleeritaval viisil esitada. Tekstisisestuse, valikuloendite, tekstialade, raadionuppude ja märkeruutude ning nuppude stiilid on saadaval.
Lisage .form-stacked
oma vormi HTML-i ja teil on sildid nende väljade kohal, mitte vasakul. See toimib suurepäraselt, kui teie vormid on lühikesed või kui teil on raskemate vormide jaoks kaks sisendi veergu.
Kohandage mis tahes vormi input
, select
või textarea
laiust, lisades märgistusele vaid mõned klassid.
Alates versioonist 1.3.0 oleme lisanud vormielementide ruudustikupõhised suuruseklassid. Kasutage neid olemasolevate .mini
, .small
jne klasside asemel.
Tavapäraselt kasutatakse nuppe toimingute jaoks, linke aga objektide jaoks. Näiteks "Laadi alla" võib olla nupp ja "hiljutine tegevus" võib olla link.
Kõik nupud on vaikimisi helehalli stiiliga, kuid erinevate värvistiilide jaoks saab rakendada mitmeid funktsionaalseid klasse. Nende klasside hulka kuuluvad sinine .primary
klass, helesinine .info
klass, roheline .success
klass ja punane .danger
klass.
Nupu stiile saab rakendusega kõigele .btn
rakendada. Tavaliselt soovite neid rakendada ainult <a>
, <button>
ja valitud <input>
elementidele. See näeb välja järgmiselt:
Kas soovite suuremaid või väiksemaid nuppe? Tehke seda!
Nuppude puhul, mis ei ole aktiivsed või mille rakendus ühel või teisel põhjusel keelab, kasutage keelatud olekut. Seda .disabled
linkide ja elementide :disabled
jaoks .<button>
.alert-message
Üherealised sõnumid toimingu ebaõnnestumise, võimaliku ebaõnnestumise või õnnestumise esiletõstmiseks. Eriti kasulik vormide jaoks.
- <div class = "alert-message warning" >
- <a class = "sulge" href = "#" > × </a>
- <p><strong> Püha guacamole! </strong> Kontrollige ennast, te ei näe liiga hea välja. </p>
- </div>
.alert-message.block-message
Pisut selgitust vajavate sõnumite jaoks on meil lõigu stiili hoiatused. Need sobivad suurepäraselt pikemate veateadete esilekutsumiseks, kasutaja hoiatamiseks ootel oleva toimingu eest või lihtsalt teabe esitamiseks, et lehel rohkem rõhku panna.
- <div class = "alert-message block-message warning" >
- <a class = "sulge" href = "#" > × </a>
- <p><strong> Püha guacamole! See on hoiatus! </strong> Kontrollige ennast, te ei näe liiga hea välja. 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 = "#" > Tehke see toiming </a> <a class = "btn small" href = "#" > Või tehke seda </a>
- </div>
- </div>
Modaalid – dialoogid või valguskastid – sobivad suurepäraselt kontekstuaalsete toimingute jaoks olukordades, kus on oluline säilitada taustakontekst.
Üks korralik keha…
Twipsid on väga kasulikud segaduses kasutaja abistamiseks ja õiges suunas suunamiseks.
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 unde sunt sed voluptatem quauttsuptas accuttitasuptas quautta
Kasutage hüpikaknaid, et anda lehele subtekstilist teavet ilma paigutust mõjutamata.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum ja eros.
JavaScripti integreerimine Bootstrapi teegiga on ülilihtne. Allpool käsitleme põhitõdesid ja pakume teile alustamiseks suurepäraseid pistikprogramme!
Äratage mõned Bootstrapi põhikomponendid ellu uute kohandatud pistikprogrammidega, mis töötavad koos jQuery ja Enderiga . Soovitame teil neid laiendada ja muuta, et need vastaksid teie konkreetsetele arendusvajadustele.
Fail | Kirjeldus |
---|---|
bootstrap-modal.js | Meie Modal plugin on traditsioonilise modaalse js-i pistikprogrammi üliõhuke võte ! Pöörasime erilist hoolt selle eest, et kaasataks ainult need funktsioonid, mida Twitteris vajame. |
bootstrap-alerts.js | Hoiatuste pistikprogramm on väga väike klass hoiatustele tiheda funktsionaalsuse lisamiseks. |
bootstrap-dropdown.js | See pistikprogramm on mõeldud ripploendi interaktsiooni lisamiseks alglaadimisribale või vahekaartidega navigeerimisvõimalustele. |
bootstrap-scrollspy.js | ScrollSpy pistikprogramm on mõeldud kerimispositsioonil põhineva automaatse värskendamise navigatsiooni lisamiseks alglaadimisriba ülaribale. |
bootstrap-buttons.js | ScrollSpy pistikprogramm on mõeldud kerimispositsioonil põhineva automaatse värskendamise navigatsiooni lisamiseks alglaadimisriba ülaribale. |
bootstrap-tabs.js | See pistikprogramm lisab kiire, dünaamilise vahekaardi ja pillifunktsiooni kohaliku sisu vahel liikumiseks. |
bootstrap-twipsy.js | Põhineb suurepärasel jQuery.tipsy pistikprogrammil, mille on kirjutanud Jason Frame; twipsy on uuendatud versioon, mis ei tugine piltidele, kasutab animatsioonide jaoks css3 ja kohaliku pealkirja salvestamiseks andmeatribuute! |
bootstrap-popover.js | Popover-plugin pakub lihtsat liidest hüpikaknate lisamiseks teie rakendusele. See laiendab boostrap-twipsy.js pistikprogrammi, seega haarake kindlasti ka see fail, kui kaasate oma projekti hüpikaknaid! |
Ei! Bootstrap on mõeldud eelkõige CSS-i teegiks. See javascript pakub kaasatud stiilide peale põhilist interaktiivset kihti.
Neile, kes aga JavaScripti vajavad, oleme pakkunud ülalolevad pistikprogrammid, mis aitavad teil mõista, kuidas Bootstrap javascriptiga integreerida, ja pakkuda teile kohe kiiret ja kerget valikut põhifunktsioonide jaoks.
Lisateabe saamiseks ja mõne reaalajas demo vaatamiseks vaadake meie pistikprogrammi dokumentatsiooni lehte .
Bootstrap loodi Prebootist , mis on avatud lähtekoodiga segude ja muutujate pakett, mida kasutatakse koos Lessiga , CSS-i eelprotsessoriga, mis võimaldab veebiarendust kiiremaks ja lihtsamaks muuta.
Vaadake, kuidas me Bootstrapis Prebooti kasutasime ja kuidas saate seda kasutada, kui otsustate järgmises projektis Less'i käivitada.
Kasutage seda suvandit, et kasutada täielikult ära Bootstrapi vähem muutujaid, segusid ja pesastamist CSS-is brauseris JavaScripti kaudu.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />
- <script src = "js/less-1.1.3.min.js" ></script>
Kas te ei tunne .js-lahendust? Proovige rakendust Less Mac või kasutage koodi juurutamisel kompileerimiseks Node.js -i.
Siin on mõned Twitteri Bootstrapi osana Bootstrapis sisalduva esiletõstmised. Allalaadimiseks ja lisateabe saamiseks minge Bootstrapi veebisaidile või Githubi projekti lehele.
Muutujad in Less sobivad suurepäraselt teie CSS-i peavaludeta hooldamiseks ja värskendamiseks. Kui soovite muuta värviväärtust või sageli kasutatavat väärtust, värskendage seda ühes kohas ja oletegi valmis.
- // Lingid
- @linkColor : #8b59c2;
- @linkColorHover : tumedamaks ( @linkColor , 10 );
- // Hallid
- @must : #000;
- @grayDark : heledamaks ( @must , 25 %);
- @hall : heledamaks ( @must , 50 %);
- @grayLight : heledamaks ( @must , 70 %);
- @grayLighter : heledamaks ( @must , 90 %);
- @valge : #fff;
- // Aktsentvärvid
- @sinine : #08b5fb;
- @roheline : #46a546;
- @punane : #9d261d;
- @kollane : #ffc40d;
- @oranž : #f89406 ;
- @roosa : #c3325f;
- @lilla : #7a43b6;
- // Lähteruudustik
- @basefont : 13px ;
- @baseline : 18px ;
Less pakub lisaks CSS-i tavalisele /* ... */
süntaksile ka teist kommenteerimisstiili.
- // See on kommentaar
- /* See on ka kommentaar */
Mixinid on CSS-i jaoks põhiliselt sisaldavad või osalised, mis võimaldavad teil koodiploki üheks ühendada. Need sobivad suurepäraselt müüja eesliitega atribuutide jaoks, nagu box-shadow
, brauseriülesed gradiendid, fondivirnad ja palju muud. Allpool on näide Bootstrapiga kaasas olevatest miksinidest.
- #font {
- . stenogramm ( @weight : tavaline , @size : 14px , @lineHeight : 20px ) {
- fondi suurus : @size ; _
- font - kaal : @weight ;
- line - height : @lineHeight ;
- }
- . sans - serif ( @weight : normaalne , @size : 14px , @lineHeight : 20px ) {
- fondiperekond : " Helvetica Neue" , Helvetica , Arial , sans - serif ;
- fondi suurus : @size ; _
- font - kaal : @weight ;
- line - height : @lineHeight ;
- }
- ...
- }
- #gradient {
- ...
- . vertikaalne ( @startColor : #555, @endColor: #333) {
- taustavärv : @endColor ; _ _
- taust - kordamine : kordus - x ;
- taust - pilt : - khtml - gradient ( lineaarne , vasak ülemine , vasak alumine , alates ( @startColor ), kuni ( @endColor )); // Konqueror
- background - image : - moz - linear - gradient ( @startColor , @endColor ); // FF 3,6+
- taust - pilt : - ms - lineaarne - gradient ( @startColor , @endColor ); // IE10
- background - image : - webkit - gradient ( lineaarne , vasak ülemine , vasak alumine , värv - stop ( 0 % , @startColor ), värv - stop ( 100 % , @endColor )); // Safari 4+, Chrome 2+
- background - image : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- taust - pilt : - o - lineaarne - gradient ( @startColor , @endColor ); // Ooper 11.10
- taust - pilt : lineaarne - gradient ( @startColor , @endColor ); // Standard
- }
- ...
- }
Olge väljamõeldud ja tehke matemaatikat, et luua paindlikke ja võimsaid mikse, nagu allpool näidatud.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Tee mõned veerud
- . veerud ( @columnSpan : 1 ) {
- laius : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
Pärast failide muutmist .less
kaustas /lib/ peate need uuesti kompileerima, et taastada failid bootstrap-*.*.*.css ja bootstrap-*.*.*.min.css. Kui saadate GitHubile tõmbamistaotluse, peate alati uuesti kompileerima.
meetod | Sammud |
---|---|
Makefile'iga sõlm | Installige vähem käsurea kompilaator koos npm-iga, käivitades järgmise käsu: $ npm install lessc Pärast installimist käivitage Lisaks, kui teil on installitud watchr , võite käivitada |
Javascript | Laadige alla uusim Less.js ja lisage selle (ja Bootstrapi) tee
Failide .less uuesti kompileerimiseks lihtsalt salvestage need ja laadige oma leht uuesti. Less.js kompileerib need ja salvestab kohalikku salvestusruumi. |
Käsurida | Kui teil on juba installitud vähem käsurea tööriist, käivitage lihtsalt järgmine käsk: $ lessc ./lib/bootstrap.less > bootstrap.css Lisage kindlasti |
Vähem Maci rakendus | Mitteametlik Maci rakendus jälgib .less failide katalooge ja kompileerib koodi kohalikeks failideks pärast vaadatud .less faili iga salvestamist. Soovi korral saate rakenduses automaatse minimeerimise eelistusi ja seda, millisesse kataloogi kompileeritud failid jõuavad. |