Förlänger Bootstrap

Utöka Bootstrap för att dra nytta av inkluderade stilar och komponenter, såväl som MINDRE variabler och mixins.

MINDRE CSS

Bootstrap är gjord med LESS som kärna, ett dynamiskt stilmallsspråk skapat av vår gode vän, Alexis Sellier . Det gör att utveckla systembaserad CSS snabbare, enklare och roligare.

Varför MINDRE?

En av Bootstraps skapare skrev ett snabbt blogginlägg om detta , sammanfattat här:

  • Bootstrap kompilerar snabbare ~6x snabbare med Less jämfört med Sass
  • Mindre skrivs i JavaScript, vilket gör det lättare för oss att dyka in och lappa jämfört med Ruby med Sass.
  • Mindre är mer; vi vill känna att vi skriver CSS och gör Bootstrap tillgänglig för alla.

Vad ingår?

Som en förlängning av CSS innehåller LESS variabler, mixins för återanvändbara kodavsnitt, operationer för enkel matematik, kapsling och till och med färgfunktioner.

Läs mer

Besök den officiella webbplatsen på http://lesscss.org/ för att lära dig mer.

Eftersom vår CSS är skriven med Less och använder variabler och mixins, måste den kompileras för slutlig produktionsimplementering. Här är hur.

Obs: Om du skickar en pull-begäran till GitHub med modifierad CSS, måste du kompilera om CSS via någon av dessa metoder.

Verktyg för att kompilera

Kommandorad

Följ instruktionerna i projektet readme på GitHub för kompilering via kommandoraden.

JavaScript

Ladda ner den senaste Less.js och inkludera sökvägen till den (och Bootstrap) i <head>.

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

För att kompilera om .less-filerna, spara dem bara och ladda om din sida. Less.js kompilerar dem och lagrar dem i lokal lagring.

Inofficiell Mac-app

Den inofficiella Mac-appen tittar på kataloger med .less-filer och kompilerar koden till lokala filer efter varje lagring av en bevakad .less-fil. Om du vill kan du växla inställningar i appen för automatisk minifiering och i vilken katalog de kompilerade filerna hamnar.

Fler appar

Knastrande

Crunch är en snygg mindre redigerare och kompilator byggd på Adobe Air.

CodeKit

Skapat av samma kille som den inofficiella Mac-appen, CodeKit är en Mac-app som kompilerar LESS, SASS, Stylus och CoffeeScript.

Enkelt

Mac-, Linux- och Windows-app för dra och släpp-kompilering av MINDRE filer. Dessutom finns källkoden på GitHub .

Starta snabbt vilket webbprojekt som helst genom att släppa in den kompilerade eller minifierade CSS och JS. Lägg på anpassade stilar separat för enkla uppgraderingar och underhåll framåt.

Konfigurera filstruktur

Ladda ner den senaste kompilerade Bootstrap och placera i ditt projekt. Du kan till exempel ha något sånt här:

  app/
      layouter/
      mallar/
  offentlig/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Använd startmallen

Kopiera följande bas-HTML för att komma igång.

  1. <html>
  2. <huvud>
  3. <title> Bootstrap 101-mall </title>
  4. <!-- Bootstrap -->
  5. <länk href = "public/css/bootstrap.min.css" rel = "stilmall" >
  6. </head>
  7. <kropp>
  8. <h1> Hej världen! </h1>
  9. <!-- Bootstrap -->
  10. <script src = "public/js/bootstrap.min.js" ></script>
  11. </body>
  12. </html>

Lager på anpassad kod

Arbeta i din anpassade CSS, JS och mer efter behov för att göra Bootstrap till din egen med dina egna separata CSS- och JS-filer.

  1. <html>
  2. <huvud>
  3. <title> Bootstrap 101-mall </title>
  4. <!-- Bootstrap -->
  5. <länk href = "public/css/bootstrap.min.css" rel = "stilmall" >
  6. <!-- Projekt -->
  7. <länk href = "public/css/application.css" rel = "stilmall" >
  8. </head>
  9. <kropp>
  10. <h1> Hej världen! </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>