Verleng Bootstrap

Brei Bootstrap uit om voordeel te trek uit ingesluit style en komponente, sowel as MINDER veranderlikes en mixins.

Let op! Hierdie dokumente is vir v2.3.2, wat nie meer amptelik ondersteun word nie. Kyk na die nuutste weergawe van Bootstrap!
MINDER CSS

Bootstrap is gemaak met MINDER in sy kern, 'n dinamiese stylbladtaal wat deur ons goeie vriend, Alexis Sellier , geskep is . Dit maak die ontwikkeling van stelselgebaseerde CSS vinniger, makliker en lekkerder.

Hoekom MINDER?

Een van Bootstrap se skeppers het 'n vinnige blogplasing hieroor geskryf , hier opgesom:

  • Bootstrap stel vinniger ~6x vinniger saam met Minder in vergelyking met Sass
  • Minder word in JavaScript geskryf, wat dit vir ons makliker maak om in te duik en te pleister in vergelyking met Ruby met Sass.
  • Minder is meer; ons wil voel asof ons CSS skryf en Bootstrap toeganklik maak vir almal.

Wat is ingesluit?

As 'n uitbreiding van CSS, bevat MINDER veranderlikes, mengsels vir herbruikbare kodefragmente, bewerkings vir eenvoudige wiskunde, nes en selfs kleurfunksies.

Leer meer

Besoek die amptelike webwerf by http://lesscss.org/ om meer te wete te kom.

Aangesien ons CSS met Less geskryf is en veranderlikes en mixins gebruik, moet dit saamgestel word vir finale produksie-implementering. Hier is hoe.

Let wel: As jy 'n trekversoek aan GitHub met gewysigde CSS indien, moet jy die CSS hersaamstel via enige van hierdie metodes.

Gereedskap vir samestelling

Bevelreël

Volg die instruksies in die projek readme op GitHub vir samestelling via opdragreël.

JavaScript

Laai die nuutste Less.js af en sluit die pad daarheen (en Bootstrap) in die <head>.

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

Om die .less lêers te hersaamstel, stoor hulle net en herlaai jou bladsy. Less.js stel dit saam en stoor dit in plaaslike berging.

Nie-amptelike Mac-toepassing

Die nie-amptelike Mac-toepassing kyk na gidse van .less-lêers en stel die kode saam na plaaslike lêers na elke stoor van 'n gekykte .less-lêer. As jy wil, kan jy voorkeure in die toepassing wissel vir outomatiese verkleining en in watter gids die saamgestelde lêers beland.

Meer apps

Crunch

Crunch is 'n wonderlike MINDER redigeerder en samesteller wat op Adobe Air gebou is.

CodeKit

Geskep deur dieselfde ou as die nie-amptelike Mac-toepassing, CodeKit is 'n Mac-toepassing wat LESS, SASS, Stylus en CoffeeScript saamstel.

Eenvoudig

Mac-, Linux- en Windows-toepassing vir sleep-en-los-samestelling van MINDER lêers. Boonop is die bronkode op GitHub .

Begin vinnig enige webprojek deur die saamgestelde of verkleinde CSS en JS in te gooi. Lae op pasgemaakte style afsonderlik vir maklike opgraderings en instandhouding vorentoe.

Stel lêerstruktuur op

Laai die nuutste saamgestelde Bootstrap af en plaas dit in jou projek. Byvoorbeeld, jy kan iets soos hierdie hê:

  toepassing/
      uitlegte/
      sjablone/
  publiek/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Gebruik beginsjabloon

Kopieer die volgende basiese HTML om te begin.

  1. <html>
  2. <kop>
  3. <title> Bootstrap 101-sjabloon </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. </head>
  7. <liggaam>
  8. <h1> Hallo, wêreld! </h1>
  9. <!-- Bootstrap -->
  10. <script src = "public/js/bootstrap.min.js" ></script>
  11. </body>
  12. </html>

Laag op pasgemaakte kode

Werk in jou pasgemaakte CSS, JS en meer soos nodig om Bootstrap jou eie te maak met jou eie afsonderlike CSS- en JS-lêers.

  1. <html>
  2. <kop>
  3. <title> Bootstrap 101-sjabloon </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. <!-- Projek -->
  7. <link href = "public/css/application.css" rel = "stylesheet" >
  8. </head>
  9. <liggaam>
  10. <h1> Hallo, wêreld! </h1>
  11. <!-- Bootstrap -->
  12. <script src = "public/js/bootstrap.min.js" ></script>
  13. <!-- Projek -->
  14. <script src = "public/js/application.js" ></script>
  15. </body>
  16. </html>