Bootstrap luzatzea

Hedatu Bootstrap sartutako estilo eta osagaiak, baita aldagai eta mixin GUTXIAK aprobetxatzeko.

Buruak gora! Dokumentu hauek jada ofizialki onartzen ez den v2.3.2rako dira. Ikusi Bootstrap-en azken bertsioa!
CSS GUTXIAGO

Bootstrap LESS oinarrian egina dago, gure lagun onak, Alexis Sellier -ek, sortutako estilo-orri hizkuntza dinamikoa . Sistemetan oinarritutako CSS garatzea azkarrago, errazagoa eta dibertigarriagoa egiten du.

Zergatik GUTXIAGO?

Bootstrap-en sortzaileetako batek blog-argitalpen azkar bat idatzi zuen honi buruz , hemen laburbilduta:

  • Bootstrap-ek ~6 aldiz azkarrago konpilatzen du Less-ekin Sass-ekin alderatuta
  • Gutxiago JavaScript-en idazten da, eta errazagoa zaigu murgiltzea eta adabakia egitea Ruby-rekin Sass-ekin alderatuta.
  • Gutxiago gehiago da; CSS idazten ari garela sentitu nahi dugu eta Bootstrap guztientzako hurbiltzen ari garela.

Zer sartzen da?

CSS-ren luzapen gisa, LESS-ek aldagaiak, kode zati berrerabilgarrietarako nahasketak, matematika sinpleetarako eragiketak, habiak eta kolore funtzioak ere barne hartzen ditu.

Gehiago ikasi

Bisitatu webgune ofiziala http://lesscss.org/ helbidean informazio gehiago lortzeko.

Gure CSS Less-ekin idatzita dagoenez eta aldagaiak eta nahasketak erabiltzen dituenez, konpilatu behar da azken ekoizpena inplementatzeko. Hona hemen nola.

Oharra: GitHub-i tira-eskaera bat bidaltzen ari bazara CSS aldatuarekin, CSS-a berriro konpilatu behar duzu metodo hauetako edozeinen bidez.

Konpilatzeko tresnak

Komando-lerroa

Jarraitu GitHub-eko readme proiektuko argibideak komando-lerroaren bidez konpilatzeko.

JavaScript

Deskargatu azken Less.js eta sartu haren bidea (eta Bootstrap) <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>  
 

.less fitxategiak berriro konpilatzeko, gorde itzazu eta berriro kargatu orria. Less.js-ek konpilatu egiten ditu eta tokiko biltegian gordetzen ditu.

Mac aplikazio ez ofiziala

Mac aplikazio ez-ofizialak .less fitxategien direktorioak ikusten ditu eta kodea fitxategi lokaletan konpilatzen du ikusitako .less fitxategi bat gorde ondoren. Nahi baduzu, aplikazioan hobespenak alda ditzakezu txikitze automatikorako eta konpilatutako fitxategiak zein direktoriotan amaitzen diren.

Aplikazio gehiago

Kruska

Crunch Adobe Air-en eraikitako LESS editore eta konpilatzaile bikaina da.

CodeKit

Mac aplikazio ez-ofizialaren tipo berak sortua, CodeKit LESS, SASS, Stylus eta CoffeeScript konpilatzen dituen Mac aplikazioa da.

Sinplea

Mac, Linux eta Windows aplikazioa LESS fitxategiak arrastatu eta jaregiteko. Gainera, iturburu kodea GitHub-en dago .

Abiarazi azkar edozein web-proiektu CSS eta JS konpilatuak edo txikituak utziz. Geruza estilo pertsonalizatuak bereizita eguneratzeko eta mantentze-lanak errazteko.

Konfiguratu fitxategien egitura

Deskargatu konpilatutako azken Bootstrap eta sartu zure proiektuan. Adibidez, baliteke horrelako zerbait izatea:

  aplikazioa/
      diseinuak/
      txantiloiak/
  publiko/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      irudia/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Erabili hasierako txantiloia

Kopiatu oinarrizko HTML hau hasteko.

  1. <html>
  2. <burua>
  3. <title> Bootstrap 101 txantiloia </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "estilo-orria" >
  6. </burua>
  7. <gorputza>
  8. <h1> Kaixo, mundua! </h1>
  9. <!-- Bootstrap -->
  10. <script src = "public/js/bootstrap.min.js" ></script>
  11. </body>
  12. </html>

Kode pertsonalizatuan geruza

Lan egin zure CSS, JS eta beste pertsonalizatuetan behar den moduan Bootstrap zeurea egiteko, zure CSS eta JS fitxategi bereiziekin.

  1. <html>
  2. <burua>
  3. <title> Bootstrap 101 txantiloia </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "estilo-orria" >
  6. <!-- Proiektua -->
  7. <link href = "public/css/application.css" rel = "estilo-orria" >
  8. </burua>
  9. <gorputza>
  10. <h1> Kaixo, mundua! </h1>
  11. <!-- Bootstrap -->
  12. <script src = "public/js/bootstrap.min.js" ></script>
  13. <!-- Proiektua -->
  14. <script src = "public/js/application.js" ></script>
  15. </body>
  16. </html>