Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum ja eros.
Bootstrap on Twitterin työkalupakki, joka on suunniteltu käynnistämään verkkosovellusten ja -sivustojen kehitys.
Se sisältää perus-CSS:n ja HTML:n typografiaa, lomakkeita, painikkeita, taulukoita, ruudukoita, navigointia ja muuta varten.
Nörttivaroitus: Bootstrap on rakennettu vähemmällä, ja se on suunniteltu toimimaan ulos portista moderneja selaimia ajatellen.
Aloita nopein ja helpoin kopioimalla tämä katkelma verkkosivullesi.
Oletko vähemmän käyttänyt? Ei hätää, vain kloonaa repo ja lisää nämä rivit:
Lataa, haarukka, vedä, tee ongelmia ja paljon muuta Githubin virallisen Bootstrap-repon avulla.
Tällä hetkellä v1.3.0
Twitterin insinöörit ovat historiallisesti käyttäneet lähes kaikkia tuntemiaan kirjastoja käyttöliittymävaatimusten täyttämiseen. Bootstrap alkoi vastauksena haasteisiin. Bootstrap on kasvanut merkittävästi monien mahtavien ihmisten avulla.
Lue lisää osoitteessa dev.twitter.com ›
Bootstrap on testattu ja tuettu suurimmissa nykyaikaisissa selaimissa, kuten Chrome, Safari, Internet Explorer ja Firefox.
Bootstrap sisältää käännetyt CSS-, kääntämättömät ja esimerkkimallit.
Bootstrapin osana toimitettu oletusruudukkojärjestelmä on 940 pikseliä leveä 16 sarakkeen ruudukko. Se on suositun 960 ruudukkojärjestelmän maku, mutta ilman ylimääräistä marginaalia/pehmustetta vasemmalla ja oikealla puolella.
Kuten tässä näkyy, perusasettelu voidaan luoda kahdella "sarakkeella", joista kukin kattaa useita 16 perussaraketta, jotka määritimme osaksi ruudukkojärjestelmäämme. Katso alla olevista esimerkeistä lisää muunnelmia.
- <div class = "rivi" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
Sisällytä sisältösi tarvittaessa luomalla .row
olemassa olevaan sarakkeeseen.
- <div class = "rivi" >
- <div class = "span12" >
- Sarakkeen taso 1
- <div class = "rivi" >
- <div class = "span6" >
- Taso 2
- </div>
- <div class = "span6" >
- Taso 2
- </div>
- </div>
- </div>
- </div>
Bootstrapiin on sisäänrakennettu kourallinen muuttujia oletusarvoisen 940 pikselin ruudukkojärjestelmän mukauttamiseen. Pienellä mukauttamisella voit muokata pylväiden kokoa, niiden kouruja ja säiliötä, jossa ne sijaitsevat.
Verkkojärjestelmän muokkaamiseen tarvittavat muuttujat sijaitsevat tällä hetkellä kaikki preboot.less
.
Muuttuva | Oletusarvo | Kuvaus |
---|---|---|
@gridColumns |
16 | Ruudukon sarakkeiden määrä |
@gridColumnWidth |
40 pikseliä | Kunkin sarakkeen leveys ruudukon sisällä |
@gridGutterWidth |
20px | Negatiivinen tila kunkin sarakkeen välillä |
@siteWidth |
Kaikkien pylväiden ja kourujen laskettu summa | Laskemme pylväiden ja kourujen lukumäärän ja asetamme .fixed-container() mixinin leveyden perusvastineella. |
Ruudukon muokkaaminen tarkoittaa kolmen @grid-*
muuttujan muuttamista ja Less-tiedostojen kääntämistä uudelleen.
Bootstrap on varustettu käsittelemään verkkojärjestelmää, jossa on jopa 24 saraketta; oletusarvo on vain 16. Tältä ruudukkomuuttujasi näyttäisivät räätälöitynä 24 sarakkeen ruudukoksi.
- @gridColumns : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
Kun olet käännetty uudelleen, olet valmis!
Oletus- ja yksinkertainen 940 pikseliä leveä, keskitetty asettelu melkein mille tahansa verkkosivustolle tai sivulle, jonka tarjoaa yhden <div.container>
.
- <body>
- <div class = "säilö" >
- ...
- </div>
- </body>
Vaihtoehtoinen joustava sivurakenne, jossa on minimi- ja maksimileveydet sekä vasen sivupalkki. Erinomainen sovelluksille ja asiakirjoille.
- <body>
- <div class = "container-fluid" >
- <div class = "sivupalkki" >
- ...
- </div>
- <div class = "sisältö" >
- ...
- </div>
- </div>
- </body>
Normaali typografinen hierarkia verkkosivujesi jäsentämiseen.
Koko typografinen ruudukko perustuu kahteen Less-muuttujaan preboot.less-tiedostossamme: @basefont
ja @baseline
. Ensimmäinen on kauttaaltaan käytetty perusfontin koko ja toinen on perusviivan korkeus.
Käytämme näitä muuttujia ja hieman matematiikkaa kaikkien tyyppiemme marginaalien, täytteiden ja rivinkorkeuksien luomiseen ja paljon muuta.
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.
Painopisteiden, osoitteiden ja lyhenteiden käyttäminen
<strong>
<em>
<address>
<abbr>
Korostustunnisteita ( <strong>
ja <em>
) tulee käyttää ilmaisemaan sanan tai lauseen ylimääräistä tärkeyttä tai painotusta ympäröivään kopioon verrattuna. Käytä <strong>
tärkeyden ja <em>
stressin korostamiseen .
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.
Huomaa: HTML5:ssä voi silti käyttää -tunnisteita, <b>
eikä <i>
niiden tarvitse olla lihavoituja ja kursivoituja (jos on kuitenkin semanttisempi elementti, käytä sitä). <b>
on tarkoitettu korostamaan sanoja tai lauseita antamatta lisätärkeyttä, kun taas <i>
se on enimmäkseen puheille, teknisille termeille jne.
Elementtiä <address>
käytetään lähimmän esi-isänsä tai koko työn yhteystiedoissa. Tässä on kaksi esimerkkiä sen käytöstä:
Huomautus: Jokaisen rivin <address>
täytyy päättyä rivinvaihtoon ( <br />
) tai olla kääritty lohkotason tunnisteeseen (esim. <p>
), jotta sisältö rakentuu oikein.
Käytä lyhenteitä ja lyhenteitä varten <abbr>
tagia ( <acronym>
on vanhentunut HTML5 :ssä ). Laita lyhenne lomake tagin sisään ja aseta otsikko koko nimelle.
<blockquote>
<p>
<small>
Jos haluat sisällyttää lohkolainauksen, kääri <blockquote>
ympärille <p>
ja <small>
merkitse tunnisteet. Käytä <small>
elementtiä lähteen mainitsemiseen, niin saat em-viivan —
ennen sitä.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Kokonaisluku posuere erat a ante venenatis dapibus posuere velit aliquet.
Tohtori Julius Hibbert
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Kokonaisluku posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
- <small> Tri Julius Hibbert </small>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
Tee koodisi tyylikkäästi kahdella yksinkertaisella tunnisteella. Jos haluat vieläkin enemmän javascriptin avulla, pudota Googlen koodi Prettify -kirjastoon ja olet valmis.
Koodi, lohkot tai vain katkelmat tekstiin, voidaan näyttää tyylillä vain käärimällä oikea tagi. Käytä elementtiä koodilohkoille, jotka kattavat useita rivejä <pre>
. Käytä sisäistä koodia varten <code>
elementtiä.
Elementti | Tulos |
---|---|
<code> |
Tällaisella tekstirivillä rivitetty koodi näyttää tältä >html< elementiltä. |
<pre> |
<div> <h1>Otsikko</h1> <p>Jotain täällä...</p> </div> Huomautus: Varmista, että koodi on |
<pre class="prettyprint"> |
Käyttämällä google-code-prettify-kirjastoa, koodilohkot saavat hieman erilaisen visuaalisen tyylin ja automaattisen syntaksin korostuksen. <div> <h1> Otsikko </h1> <p> Jotain tässä... </p> </div> Lataa google-code-prettify ja katso käyttöohjeet readme-tiedostosta. |
<span class="label">
Kiinnitä huomio tai merkitse mikä tahansa lause tekstissäsi.
Oletko koskaan tarvinnut yhtä näistä hienoista uudesta! tai tärkeät liput koodia kirjoitettaessa? No, nyt sinulla on ne. Tässä on oletuksena mukana:
Label | Tulos |
---|---|
<span class="label">Default</span> |
Oletus |
<span class="label success">New</span> |
Uusi |
<span class="label warning">Warning</span> |
Varoitus |
<span class="label important">Important</span> |
Tärkeä |
<span class="label notice">Notice</span> |
Ilmoitus |
Näytä erikokoisia pikkukuvia sivuilla, joilla on pieni HTML-jalanjälki ja minimaaliset tyylit.
Pikkukuvat .media-grid
voivat olla minkä kokoisia tahansa, mutta ne toimivat parhaiten, kun ne on yhdistetty suoraan sisäänrakennettuun Bootstrap-verkkojärjestelmään. Kuvaleveydet, kuten 90, 210 ja 330, yhdistettynä muutaman pikselin täytökseen vastaamaan .span2
, .span4
, ja .span6
sarakkeiden kokoa.
Mediaruudukot ovat helppokäyttöisiä ja melko yksinkertaisia merkintäpuolella. Niiden mitat perustuvat puhtaasti mukana olevien kuvien kokoon.
- <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>
Pöydät ovat mahtavia - moniin asioihin. Hienot taulukot tarvitsevat kuitenkin hieman merkintöjä ollakseen hyödyllisiä, skaalautuvia ja luettavia (kooditasolla). Tässä on muutamia vinkkejä avuksi.
Kääri aina sarakeotsikot siten <thead>
, että hierarkia on <thead>
> <tr>
> <th>
.
Kuten sarakeotsikoissa, kaikki taulukon leipäsisältö tulee kääriä a-merkkiin, <tbody>
jotta hierarkiasi on <tbody>
> <tr>
> <td>
.
Kaikki taulukot muotoillaan automaattisesti vain tärkeillä reunuksilla luettavuuden ja rakenteen säilyttämiseksi. Ei tarvitse lisätä ylimääräisiä luokkia tai attribuutteja.
# | Etunimi | Sukunimi | Kieli |
---|---|---|---|
1 | Jonkin verran | Yksi | Englanti |
2 | Joe | Sixpäkki | Englanti |
3 | Stu | Dent | Koodi |
- <taulukko>
- ...
- </table>
Nauti pöydistäsi lisäämällä seepraraitoja – lisää vain .zebra-striped
luokka.
# | Etunimi | Sukunimi | Kieli |
---|---|---|---|
1 | Jonkin verran | Yksi | Englanti |
2 | Joe | Sixpäkki | Englanti |
3 | Stu | Dent | Koodi |
Huomautus: Zebra-striping on progressiivinen parannus, joka ei ole saatavilla vanhemmille selaimille, kuten IE8 tai vanhemmille.
- <taulukkoluokka = "seepraraidallinen " >
- ...
- </table>
Edellisessä esimerkissä parannamme taulukoidemme hyödyllisyyttä tarjoamalla lajittelutoimintoja jQueryn ja Tablesorter- laajennuksen kautta. Muuta lajittelua napsauttamalla minkä tahansa sarakkeen otsikkoa.
# | Etunimi | Sukunimi | Kieli |
---|---|---|---|
2 | Joe | Sixpäkki | Englanti |
3 | Stu | Dent | Koodi |
1 | Sinun | Yksi | Englanti |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( funktio () {
- $ ( "taulukko#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <taulukkoluokka = "seepraraidallinen " >
- ...
- </table>
Kaikille lomakkeille annetaan oletustyylit, jotta ne voidaan esittää luettavalla ja skaalautuvalla tavalla. Tyylit tarjotaan tekstinsyöttöä, valintaluetteloita, tekstialueita, valintanappeja ja valintaruutuja ja painikkeita varten.
Lisää .form-stacked
lomakkeesi HTML-koodiin, niin sinulla on tunnisteet niiden kenttien päällä eikä niiden vasemmalla puolella. Tämä toimii hyvin, jos lomakkeesi ovat lyhyitä tai sinulla on kaksi saraketta raskaampia lomakkeita varten.
Mukauta mitä tahansa muotoa input
, select
tai textarea
leveyttä lisäämällä vain muutama luokka merkintään.
V1.3.0:sta lähtien olemme lisänneet lomakeelementtien ruudukkopohjaiset kokoluokat. Käytä näitä olemassa olevien .mini
, .small
jne luokkien päälle.
Perinteisesti painikkeita käytetään toimiin, kun taas linkkejä käytetään objekteihin. Esimerkiksi "Lataa" voi olla painike ja "äskettäinen toiminta" voi olla linkki.
Kaikki painikkeet ovat oletuksena vaaleanharmaita, mutta eri värityyleille voidaan soveltaa useita toimintaluokkia. Näihin luokkiin kuuluvat sininen .primary
luokka, vaaleansininen .info
luokka, vihreä .success
luokka ja punainen .danger
luokka.
Painiketyylejä voidaan soveltaa mihin tahansa .btn
sovelluksella. Yleensä haluat käyttää näitä vain <a>
, <button>
, ja valittuihin <input>
elementteihin. Tältä se näyttää:
Haluatko suurempia tai pienempiä painikkeita? Ole siinä!
Käytä painikkeita, jotka eivät ole aktiivisia tai jotka sovellus on jostain syystä poistanut käytöstä, käytöstä poistettua tilaa. Tämä .disabled
koskee linkkejä ja :disabled
elementtejä <button>
.
.alert-message
Yksiriviset viestit, jotka osoittavat toiminnon epäonnistumisen, mahdollisen epäonnistumisen tai onnistumisen. Erityisen hyödyllinen lomakkeille.
- <div class = "hälytysviestin varoitus" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Pyhä guacamole! </strong> Tarkista itsesi, et näytä liian hyvältä. </p>
- </div>
.alert-message.block-message
Viesteille, jotka vaativat hieman selitystä, meillä on kappaletyylivaroitukset. Nämä ovat täydellisiä pidempien virheilmoitusten ilmaamiseen, käyttäjän varoittamiseen odottavasta toiminnasta tai vain tietojen esittämiseen sivun korostamiseksi.
- <div class = "alert-message block-message Warning" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Pyhä guacamole! Tämä on varoitus! </strong> Tarkista itsesi, et näytä liian hyvältä. 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 = "#" > Tee tämä </a> <a class = "btn small" href = "#" > Tai tee tämä </a>
- </div>
- </div>
Modaalit – valintaikkunat tai valolaatikot – sopivat erinomaisesti kontekstuaalisiin toimiin tilanteissa, joissa on tärkeää säilyttää taustakonteksti.
Yksi hieno kroppa…
Twipsit ovat erittäin hyödyllisiä hämmentyneen käyttäjän auttamiseksi ja oikeaan suuntaan.
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 quauttitamm volquauttitasm up quauttatas
Käytä ponnahdusikkunoita sivun tekstisisällön tarjoamiseen vaikuttamatta asetteluun.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum ja eros.
JavaScriptin integrointi Bootstrap-kirjastoon on erittäin helppoa. Alla käymme läpi perusasiat ja tarjoamme sinulle mahtavia laajennuksia, joiden avulla pääset alkuun!
Herätä jotkut Bootstrapin pääkomponenteista henkiin uusilla mukautetuilla laajennuksilla, jotka toimivat jQueryn ja Enderin kanssa . Kehotamme sinua laajentamaan ja muokkaamaan niitä vastaamaan erityisiä kehitystarpeitasi.
Tiedosto | Kuvaus |
---|---|
bootstrap-modal.js | Modal-laajennusmme on erittäin ohut perinteinen modaalinen js-laajennus! Kiinnitimme erityistä huomiota siihen, että sisälsimme vain ne paljaat toiminnot, joita tarvitsemme Twitterissä. |
bootstrap-alerts.js | Alert-laajennus on erittäin pieni luokka, joka lisää läheisiä toimintoja hälytyksiin. |
bootstrap-dropdown.js | Tämä laajennus on tarkoitettu pudotusvalikon vuorovaikutuksen lisäämiseen bootstrapin yläpalkkiin tai välilehtien navigointiin. |
bootstrap-scrollspy.js | ScrollSpy-laajennus on tarkoitettu automaattisesti päivittyvän navigoinnin lisäämiseen bootstrapin yläpalkkiin vierityksen sijainnin perusteella. |
bootstrap-tabs.js | Tämä laajennus lisää nopean, dynaamisen välilehden ja pilleritoiminnon paikallisen sisällön selaamiseen. |
bootstrap-twipsy.js | Perustuu erinomaiseen jQuery.tipsy-laajennukseen, jonka on kirjoittanut Jason Frame; twipsy on päivitetty versio, joka ei ole riippuvainen kuvista, käyttää css3:a animaatioihin ja data-attribuutteja paikalliseen otsikon tallentamiseen! |
bootstrap-popover.js | Popover-laajennus tarjoaa yksinkertaisen käyttöliittymän ponnahdusikkunoiden lisäämiseen sovellukseesi. Se laajentaa boostrap-twipsy.js- laajennusta, joten muista napata myös tämä tiedosto, kun sisällytät ponnahdusikkunat projektiisi! |
Ei! Bootstrap on suunniteltu ennen kaikkea CSS-kirjastoksi. Tämä javascript tarjoaa interaktiivisen peruskerroksen mukana olevien tyylien päälle.
Kuitenkin niille, jotka tarvitsevat javascriptiä, olemme tarjonneet yllä olevat laajennukset, jotka auttavat sinua ymmärtämään, kuinka Bootstrap integroidaan javascriptiin, ja antaa sinulle nopean ja kevyen vaihtoehdon perustoimintoihin heti.
Lisätietoja ja nähdäksesi joitain live-demoja, katso laajennuksen dokumentaatiosivumme .
Bootstrap rakennettiin Prebootilla , avoimen lähdekoodin sekoittimien ja muuttujien paketilla, jota käytetään yhdessä Lessin kanssa , CSS-esiprosessori nopeuttaa ja helpottaa verkkokehitystä.
Katso, kuinka käytimme Prebootia Bootstrapissa ja kuinka voit hyödyntää sitä, jos päätät käyttää Less-ohjelmaa seuraavassa projektissasi.
Käytä tätä vaihtoehtoa hyödyntääksesi täysin Bootstrapin Less-muuttujia, sekoituksia ja sisäkkäisyyttä CSS:ssä selaimesi JavaScriptin kautta.
- <link rel = "tyylitaulukko/vähemmän" href = "vähemmän/bootstrap.less" media = "kaikki" />
- <script src = "js/less-1.1.3.min.js" ></script>
Etkö tunne .js-ratkaisua? Kokeile Less Mac -sovellusta tai käytä Node.js :ää kääntämiseen, kun otat koodin käyttöön.
Tässä on joitain kohokohtia siitä, mitä Twitter Bootstrap sisältää osana Bootstrapia. Siirry Bootstrap-verkkosivustolle tai Github-projektisivulle ladataksesi ja saadaksesi lisätietoja.
Muuttujat in Less ovat täydellisiä ylläpitämään ja päivittämään CSS-päänsärkyäsi. Kun haluat muuttaa väriarvoa tai usein käytettyä arvoa, päivitä se yhdessä paikassa ja olet valmis.
- // Linkkejä
- @linkColor : #8b59c2;
- @linkColorHover : tummenna ( @linkColor , 10 );
- // Harmaat
- @musta : #000;
- @greyDark : vaalentaa ( @musta , 25 %);
- @harmaa : vaalentaa ( @musta , 50 %);
- @greyLight : vaalentaa ( @musta , 70 %);
- @greyLighter : vaalentaa ( @musta , 90 %);
- @valkoinen : #fff;
- // Korostusvärit
- @sininen : #08b5fb;
- @vihreä : #46a546 ;
- @punainen : #9d261d;
- @keltainen : #ffc40d;
- @oranssi : #f89406;
- @vaaleanpunainen : #c3325f;
- @violetti : #7a43b6;
- // Perustason ruudukko
- @basefont : 13px ;
- @perusviiva : 18px ;
Less tarjoaa myös toisen kommentointityylin CSS:n normaalin /* ... */
syntaksin lisäksi.
- // Tämä on kommentti
- /* Tämä on myös kommentti */
Mixiinit ovat pohjimmiltaan CSS:n sisältämiä tai osittaisia, joten voit yhdistää koodilohkon yhdeksi. Ne sopivat erinomaisesti toimittajan etuliitteillä box-shadow
varustettuihin ominaisuuksiin, kuten , selaimen välisiin liukuväreihin, kirjasinpinoihin ja muihin. Alla on esimerkki Bootstrapin mukana tulevista mixineistä.
- #font {
- . pikakirjoitus ( @paino : normaali , @koko : 14px , @linjankorkeus : 20px ) {
- font - size : @size ;
- font - weight : @weight ;
- rivi - korkeus : @lineHeight ;
- }
- . sans - serif ( @weight : normaali , @size : 14px , @lineHeight : 20px ) {
- kirjasinperhe : " Helvetica Neue" , Helvetica , Arial , sans - serif ;
- font - size : @size ;
- font - weight : @weight ;
- rivi - korkeus : @lineHeight ;
- }
- ...
- }
- #gradient {
- ...
- . pystysuora ( @startColor : #555, @endColor: #333) {
- taustaväri : @endColor ; _ _
- tausta - toisto : toista - x ;
- background - image : - khtml - gradientti ( lineaarinen , vasen ylhäällä , vasen alaosa , alkaen ( @startColor ), to ( @endColor )); // Konqueror
- background - image : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+
- background - image : - ms - linear - gradient ( @startColor , @endColor ); // IE10
- background - image : - webkit - gradient ( lineaarinen , vasen ylhäällä , vasen alaosa , väri - stop ( 0 % , @startColor ), väri - stop ( 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 ); // Ooppera 11.10
- background - image : linear - gradient ( @startColor , @endColor ); // Standardi
- }
- ...
- }
Ihastu ja suorita matematiikkaa luodaksesi joustavia ja tehokkaita sekoituksia, kuten alla.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Tee joitain sarakkeita
- . sarakkeet ( @columnSpan : 1 ) {
- leveys : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
Kun olet muokannut .less
tiedostoja /lib/:ssä, sinun on käännettävä ne uudelleen, jotta voit luoda uudelleen bootstrap-*.*.*.css- ja bootstrap-*.*.*.min.css-tiedostot. Jos lähetät vetopyynnön GitHubille, sinun on aina käännettävä uudelleen.
Menetelmä | Askeleet |
---|---|
Solmu, jossa on makefile | Asenna vähemmän komentorivin kääntäjä npm:llä suorittamalla seuraava komento: $ npm install lessc Kun olet asentanut, suorita Lisäksi, jos sinulla on watchr asennettuna, voit suorittaa |
Javascript | Lataa uusin Less.js ja lisää sen polku (ja Bootstrap) tiedostoon
Voit kääntää .less-tiedostot uudelleen tallentamalla ne ja lataamalla sivusi uudelleen. Less.js kokoaa ne ja tallentaa ne paikalliseen tallennustilaan. |
Komentorivi | Jos sinulla on jo vähemmän komentorivityökalu asennettuna, suorita seuraava komento: $ lessc ./lib/bootstrap.less > bootstrap.css Muista sisällyttää |
Vähemmän Mac-sovellusta | Epävirallinen Mac-sovellus tarkkailee .less-tiedostojen hakemistoja ja kokoaa koodin paikallisiksi tiedostoiksi jokaisen katsotun .less-tiedoston tallennuksen jälkeen. Voit halutessasi vaihtaa sovelluksessa automaattisen pienennyksen asetuksia ja valita, mihin hakemistoon käännetyt tiedostot päätyvät. |