Forlenger Bootstrap

Utvid Bootstrap for å dra nytte av inkluderte stiler og komponenter, samt MINDRE variabler og mixins.

Vær oppmerksom! Disse dokumentene er for v2.3.2, som ikke lenger støttes offisielt. Sjekk ut den nyeste versjonen av Bootstrap!
MINDRE CSS

Bootstrap er laget med LESS i kjernen, et dynamisk stilarkspråk skapt av vår gode venn, Alexis Sellier . Det gjør utvikling av systembasert CSS raskere, enklere og morsommere.

Hvorfor MINDRE?

En av Bootstraps skapere skrev et raskt blogginnlegg om dette , oppsummert her:

  • Bootstrap kompilerer raskere ~6x raskere med Less sammenlignet med Sass
  • Mindre er skrevet i JavaScript, noe som gjør det lettere for oss å dykke inn og lappe sammenlignet med Ruby med Sass.
  • Mindre er mer; vi vil føle at vi skriver CSS og gjør Bootstrap tilgjengelig for alle.

Hva er inkludert?

Som en utvidelse av CSS inkluderer LESS variabler, mixins for gjenbrukbare kodebiter, operasjoner for enkel matematikk, nesting og til og med fargefunksjoner.

Lære mer

Besøk det offisielle nettstedet på http://lesscss.org/ for å lære mer.

Siden vår CSS er skrevet med Less og bruker variabler og mixins, må den kompileres for endelig produksjonsimplementering. Dette er hvordan.

Merk: Hvis du sender inn en pull-forespørsel til GitHub med modifisert CSS, du rekompilere CSS via en av disse metodene.

Verktøy for kompilering

Kommandolinje

Følg instruksjonene i prosjektet readme på GitHub for kompilering via kommandolinje.

JavaScript

Last ned den nyeste Less.js og ta med banen til den (og Bootstrap) i <head>.

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

For å rekompilere .less-filene, lagrer du dem og laster inn siden på nytt. Less.js kompilerer dem og lagrer dem i lokal lagring.

Uoffisiell Mac-app

Den uoffisielle Mac-appen ser på kataloger med .less-filer og kompilerer koden til lokale filer etter hver lagring av en overvåket .less-fil. Hvis du vil, kan du bytte innstillinger i appen for automatisk minifisering og hvilken katalog de kompilerte filene havner i.

Flere apper

Crunch

Crunch er en flott mindre editor og kompilator bygget på Adobe Air.

CodeKit

Laget av samme fyr som den uoffisielle Mac-appen, CodeKit er en Mac-app som kompilerer LESS, SASS, Stylus og CoffeeScript.

Enkelt

Mac-, Linux- og Windows-app for dra og slipp kompilering av MINDRE filer. I tillegg er kildekoden på GitHub .

Start ethvert nettprosjekt raskt ved å slippe inn den kompilerte eller minifiserte CSS og JS. Legg på tilpassede stiler separat for enkle oppgraderinger og vedlikehold fremover.

Oppsett filstruktur

Last ned den siste kompilerte Bootstrap og plasser i prosjektet ditt. Du kan for eksempel ha noe slikt:

  app/
      oppsett/
      maler/
  offentlig/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Bruk startmal

Kopier følgende grunnleggende HTML for å komme i gang.

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

Lag på egendefinert kode

Arbeid i din egendefinerte CSS, JS og mer etter behov for å gjøre Bootstrap til din egen med dine egne separate CSS- og JS-filer.

  1. <html>
  2. <hode>
  3. <title> Bootstrap 101-mal </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stilark" >
  6. <!-- Prosjekt -->
  7. <link href = "public/css/application.css" rel = "stilark" >
  8. </head>
  9. <body>
  10. <h1> Hei, verden! </h1>
  11. <!-- Bootstrap -->
  12. <script src = "public/js/bootstrap.min.js" ></script>
  13. <!-- Prosjekt -->
  14. <script src = "public/js/application.js" ></script>
  15. </body>
  16. </html>