Proširenje Bootstrapa

Proširite Bootstrap kako biste iskoristili prednosti uključenih stilova i komponenti, kao i LESS varijabli i mixina.

Glavu gore! Ovi dokumenti su za v2.3.2, koji više nije službeno podržan. Provjerite najnoviju verziju Bootstrapa!
MANJE CSS-a

Bootstrap je izrađen s LESS-om u svojoj jezgri, dinamičnim stilskim jezikom koji je stvorio naš dobar prijatelj, Alexis Sellier . Čini razvijanje CSS-a temeljenog na sustavima bržim, lakšim i zabavnijim.

Zašto MANJE?

Jedan od kreatora Bootstrapa napisao je brzi post na blogu o ovome , sažeto ovdje:

  • Bootstrap kompajlira brže ~6x brže uz Less u usporedbi sa Sassom
  • Manje je napisano u JavaScriptu, što nam olakšava zaranjanje i krpanje u usporedbi s Rubyjem sa Sassom.
  • Manje je više; želimo se osjećati kao da pišemo CSS i činimo Bootstrap dostupnim svima.

Što je uključeno?

Kao proširenje CSS-a, LESS uključuje varijable, mixins za ponovno upotrebljive isječke koda, operacije za jednostavnu matematiku, gniježđenje, pa čak i funkcije boja.

Saznajte više

Posjetite službenu web stranicu na http://lesscss.org/ kako biste saznali više.

Budući da je naš CSS napisan s Lessom i koristi varijable i mixins, potrebno ga je kompajlirati za konačnu produkcijsku implementaciju. Evo kako.

Napomena: ako GitHubu šaljete zahtjev za povlačenje s izmijenjenim CSS-om, morate ponovno kompajlirati CSS bilo kojom od ovih metoda.

Alati za sastavljanje

Naredbeni redak

Slijedite upute u readme-u projekta na GitHubu za kompajliranje putem naredbenog retka.

JavaScript

Preuzmite najnoviji Less.js i uključite put do njega (i Bootstrapa) u <head>.

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

Za ponovno kompajliranje .less datoteka, samo ih spremite i ponovno učitajte svoju stranicu. Less.js ih kompajlira i pohranjuje u lokalnu pohranu.

Neslužbena Mac aplikacija

Neslužbena Mac aplikacija prati direktorije .less datoteka i kompajlira kod u lokalne datoteke nakon svakog spremanja promatrane .less datoteke. Ako želite, možete promijeniti postavke u aplikaciji za automatsko smanjivanje i direktorij u kojem kompajlirane datoteke završavaju.

Više aplikacija

Škripanje

Crunch je izvrstan LESS uređivač i kompajler izgrađen na Adobe Airu.

CodeKit

Stvorio ga je isti čovjek kao i neslužbenu Mac aplikaciju, CodeKit je Mac aplikacija koja kompilira LESS, SASS, Stylus i CoffeeScript.

Jednostavno

Mac, Linux i Windows aplikacija za povlačenje i ispuštanje datoteka LESS. Osim toga, izvorni kod je na GitHubu .

Brzo pokrenite bilo koji web projekt ubacivanjem kompajliranog ili umanjenog CSS-a i JS-a. Zasebno nanesite prilagođene stilove za jednostavnu nadogradnju i održavanje.

Postavljanje strukture datoteke

Preuzmite najnoviji kompajlirani Bootstrap i postavite ga u svoj projekt. Na primjer, možda imate nešto poput ovoga:

  aplikacija/
      rasporedi/
      predlošci/
  javnost/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glifikoni-polovice.png
          glyphicons-halflings-white.png

Iskoristite početni predložak

Kopirajte sljedeći osnovni HTML da biste započeli.

  1. <html>
  2. <glava>
  3. <title> Predložak Bootstrap 101 </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. </head>
  7. <tijelo>
  8. <h1> Zdravo, svijete! </h1>
  9. <!-- Bootstrap -->
  10. <script src = "public/js/bootstrap.min.js" ></script>
  11. </body>
  12. </html>

Sloj na prilagođenom kodu

Radite na svom prilagođenom CSS-u, JS-u i više po potrebi kako biste Bootstrap učinili svojim vlastitim s vlastitim zasebnim CSS i JS datotekama.

  1. <html>
  2. <glava>
  3. <title> Predložak Bootstrap 101 </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. <!-- Projekt -->
  7. <link href = "public/css/application.css" rel = "stylesheet" >
  8. </head>
  9. <tijelo>
  10. <h1> Zdravo, svijete! </h1>
  11. <!-- Bootstrap -->
  12. <script src = "public/js/bootstrap.min.js" ></script>
  13. <!-- Projekt -->
  14. <script src = "public/js/application.js" ></script>
  15. </body>
  16. </html>