Udvidelse af Bootstrap

Udvid Bootstrap for at drage fordel af inkluderede stilarter og komponenter samt MINDRE variabler og mixins.

MINDRE CSS

Bootstrap er lavet med LESS i sin kerne, et dynamisk stylesheet-sprog skabt af vores gode ven, Alexis Sellier . Det gør udvikling af systembaseret CSS hurtigere, nemmere og sjovere.

Hvorfor MINDRE?

En af Bootstraps skabere skrev et hurtigt blogindlæg om dette , opsummeret her:

  • Bootstrap kompilerer hurtigere ~6x hurtigere med Less sammenlignet med Sass
  • Mindre er skrevet i JavaScript, hvilket gør det nemmere for os at dykke ned og lappe sammenlignet med Ruby med Sass.
  • Mindre er mere; vi vil føle, at vi skriver CSS og gør Bootstrap tilgængelig for alle.

Hvad er inkluderet?

Som en udvidelse af CSS inkluderer LESS variabler, mixins til genanvendelige kodestykker, operationer til simpel matematik, indlejring og endda farvefunktioner.

Lær mere

Besøg den officielle hjemmeside på http://lesscss.org/ for at lære mere.

Da vores CSS er skrevet med Less og bruger variabler og mixins, skal den kompileres til den endelige produktionsimplementering. Sådan gør du.

Bemærk: Hvis du sender en pull-anmodning til GitHub med modificeret CSS, skal du genkompilere CSS'en via en af ​​disse metoder.

Værktøjer til kompilering

Kommandolinje

Følg instruktionerne i projektet readme på GitHub til kompilering via kommandolinjen.

JavaScript

Download den seneste Less.js og inkluder stien til den (og Bootstrap) i <head>.

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

For at genkompilere .less-filerne skal du bare gemme dem og genindlæse din side. Less.js kompilerer dem og gemmer dem i lokalt lager.

Uofficiel Mac-app

Den uofficielle Mac-app overvåger mapper med .less-filer og kompilerer koden til lokale filer efter hver lagring af en overvåget .less-fil. Hvis du vil, kan du skifte præferencer i appen for automatisk minificering, og hvilken mappe de kompilerede filer ender i.

Flere apps

Crunch

Crunch er en flot MINDRE editor og compiler bygget på Adobe Air.

CodeKit

Oprettet af den samme fyr som den uofficielle Mac-app, CodeKit er en Mac-app, der kompilerer LESS, SASS, Stylus og CoffeeScript.

Simpelt

Mac, Linux og Windows app til træk og slip kompilering af MINDRE filer. Derudover er kildekoden på GitHub .

Start hurtigt ethvert webprojekt ved at droppe den kompilerede eller minificerede CSS og JS. Læg lag på brugerdefinerede stilarter separat for nemme opgraderinger og vedligeholdelse fremover.

Opsætning af filstruktur

Download den seneste kompilerede Bootstrap og placer den i dit projekt. For eksempel kan du have noget som dette:

  app/
      layouts/
      skabeloner/
  offentlig/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Brug starter skabelon

Kopier følgende basis-HTML for at komme i gang.

  1. <html>
  2. <hoved>
  3. <title> Bootstrap 101 skabelon </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. </head>
  7. <body>
  8. <h1> Hej verden! </h1>
  9. <!-- Bootstrap -->
  10. <script src = "public/js/bootstrap.min.js" ></script>
  11. </body>
  12. </html>

Lag på brugerdefineret kode

Arbejd i din tilpassede CSS, JS og mere efter behov for at gøre Bootstrap til din egen med dine egne separate CSS- og JS-filer.

  1. <html>
  2. <hoved>
  3. <title> Bootstrap 101 skabelon </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. <body>
  10. <h1> Hej verden! </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>