Proširivanje Bootstrapa

Proširite Bootstrap da biste iskoristili prednosti uključenih stilova i komponenti, kao i MANJE varijabli i miksa.

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

Bootstrap je napravljen sa LESS-om u svojoj srži, dinamičkim stilskim jezikom koji je kreirao naš dobar prijatelj, Alexis Sellier . To čini razvoj sistemskog CSS-a bržim, lakšim i zabavnijim.

Zašto MANJE?

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

  • Bootstrap se kompajlira brže ~6x brže sa manje u poređenju sa Sass-om
  • Manje je napisano u JavaScript-u, što nam olakšava da zaronimo i zakrpimo u poređenju sa Ruby-jem sa Sass-om.
  • Manje je više; želimo da se osećamo kao da pišemo CSS i činimo Bootstrap pristupačnim svima.

Šta je uključeno?

Kao proširenje CSS-a, LESS uključuje varijable, miksine za višekratnu upotrebu isječaka koda, operacije za jednostavnu matematiku, ugniježđenje, pa čak i funkcije boja.

Nauči više

Posjetite službenu web stranicu na http://lesscss.org/ da saznate više.

Pošto je naš CSS napisan sa Less i koristi varijable i miksine, potrebno ga je kompajlirati za konačnu implementaciju proizvodnje. Evo kako.

Napomena: Ako šaljete zahtjev za povlačenje na GitHub s modificiranim CSS-om, morate ponovo kompajlirati CSS putem bilo kojeg od ovih metoda.

Alati za kompajliranje

Komandna linija

Pratite uputstva u readme projekta na GitHubu za kompajliranje putem komandne linije.

JavaScript

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

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

Da ponovo kompajlirate .less fajlove, samo ih sačuvajte i ponovo učitajte svoju stranicu. Less.js ih kompajlira i pohranjuje u lokalnu pohranu.

Nezvanična Mac aplikacija

Neslužbena Mac aplikacija prati direktorije .less datoteka i kompajlira kod u lokalne datoteke nakon svakog spremanja gledanog .less datoteke. Ako želite, možete uključiti postavke u aplikaciji za automatsko minimiziranje i u kojem direktoriju završavaju kompajlirani fajlovi.

Više aplikacija

Krckanje

Crunch je sjajan LESS editor i kompajler izgrađen na Adobe Air-u.

CodeKit

Napravljen od strane istog tipa kao i nezvaničnu Mac aplikaciju, CodeKit je Mac aplikacija koja kompajlira LESS, SASS, Stylus i CoffeeScript.

Jednostavno

Mac, Linux i Windows aplikacija za drag and drop kompajliranje MANJE datoteka. Osim toga, izvorni kod je na GitHubu .

Brzo pokrenite bilo koji web projekat tako što ćete ubaciti prevedene ili minimizirane CSS i JS. Zasebno postavite prilagođene stilove za laku nadogradnju i održavanje.

Podešavanje strukture datoteke

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

  aplikacija/
      rasporedi/
      šabloni/
  javno/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Koristite početni šablon

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

  1. <html>
  2. <glava>
  3. <title> Bootstrap 101 predložak </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đeni kod

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

  1. <html>
  2. <glava>
  3. <title> Bootstrap 101 predložak </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. <!-- Projekat -->
  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. <!-- Projekat -->
  14. <script src = "public/js/application.js" ></script>
  15. </body>
  16. </html>