Laajenna · Bootstrap Suomen kielellä

Bootstrapin ytimessä on LESS, dynaaminen tyylitaulukkokieli, jonka on luonut hyvä ystävämme Alexis Sellier . Se tekee järjestelmäpohjaisen CSS:n kehittämisestä nopeampaa, helpompaa ja hauskempaa.

Miksi VÄHEMMÄN?

Yksi Bootstrapin tekijöistä kirjoitti tästä nopean blogikirjoituksen , jonka yhteenveto on täällä:

Bootstrap kääntää nopeammin ~ 6x nopeammin Lessillä verrattuna Sassiin
Vähemmän on kirjoitettu JavaScriptillä, mikä helpottaa sukeltamista ja korjaamista verrattuna Ruby with Sassiin.
Vähemmän on enemmän; haluamme tuntea kirjoittavamme CSS:n ja tekemällä Bootstrapista kaikkien ulottuville.

Mitä sisältyy?

CSS:n laajennuksena LESS sisältää muuttujia, uudelleenkäytettävien koodinpätkien sekoituksia, yksinkertaista matematiikkaa, sisäkkäistoimintoja ja jopa värifunktioita.

Lue lisää

Vieraile virallisella verkkosivustolla osoitteessa http://lesscss.org/ saadaksesi lisätietoja.

Koska CSS on kirjoitettu Lessillä ja käyttää muuttujia ja mixinejä, se on käännettävä lopullista tuotantokäyttöä varten. Toimi näin.

Huomautus: Jos lähetät vetopyynnön GitHubille muokatun CSS:n kanssa, sinun on käännettävä CSS uudelleen jollakin näistä tavoista.

Työkaluja kokoamiseen

Komentorivi

Noudata GitHubin projektin readme- ohjeita kääntääksesi komentorivin kautta.

JavaScript

Lataa uusin Less.js ja lisää sen polku (ja Bootstrap) tiedostoon <head>.

<link rel = "tyylitaulukko/vähemmän" href = "/polku/bootstrap.less" > <script src = "/polku/vähemmän.js:iin" ></script>

Voit kääntää .less-tiedostot uudelleen tallentamalla ne ja lataamalla sivusi uudelleen. Less.js kokoaa ne ja tallentaa ne paikalliseen tallennustilaan.

Epävirallinen Mac-sovellus

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.

Lisää sovelluksia

Crunch

Crunch on upean näköinen LESS-editori ja kääntäjä, joka on rakennettu Adobe Airiin.

CodeKit

Saman kaverin luoma kuin epävirallinen Mac-sovellus, CodeKit on Mac-sovellus, joka kokoaa LESS-, SASS-, Stylus- ja CoffeeScript-tiedostoja.

Yksinkertaista

Mac-, Linux- ja Windows-sovellus VÄHEMMÄN tiedostojen kääntämiseen vetämällä ja pudottamalla. Lisäksi lähdekoodi on GitHubissa .

Aloita nopeasti mikä tahansa verkkoprojekti pudottamalla käännetty tai minimoitu CSS ja JS. Kerrostele mukautettuja tyylejä erikseen helpottaaksesi päivitystä ja ylläpitoa eteenpäin.

Asennustiedostorakenne

Lataa uusin käännetty Bootstrap ja aseta se projektiisi. Sinulla voi olla esimerkiksi jotain tämän kaltaista:

  sovellus/
      asettelut/
      mallit/
  julkinen/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Käytä aloitusmallia

Aloita kopioimalla seuraava perus-HTML-koodi.

<html>
  <pää>
    <title> Bootstrap 101 -malli </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "tyylitaulukko" >  
  </head>
  <body>
    <h1> Hei maailma! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </body>
</html>

Kerros mukautetun koodin päälle

Työskentele mukautetun CSS:n, JS:n ja muiden kanssa tarpeen mukaan tehdäksesi Bootstrapista omasi omilla erillisillä CSS- ja JS-tiedostoillasi.

<html>
  <pää>
    <title> Bootstrap 101 -malli </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "tyylitaulukko" >  
    <!-- Projekti -->
    <link href = "public/css/application.css" rel = "tyylitaulukko" >  
  </head>
  <body>
    <h1> Hei maailma! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- Projekti -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

Bootstrapin laajentaminen

Rakennettu vähemmällä