Brei uit · Twitter Bootstrap in Afrikaans

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

Node met makefile

Installeer die MINDER opdragreëlsamesteller, JSHint, Recess en uglify-js wêreldwyd met npm deur die volgende opdrag uit te voer:

$ npm installeer -g minder jshint reses uglify-js

Sodra dit geïnstalleer is, hardloop net makevanaf die wortel van jou bootstrap-gids en jy is gereed.

Daarbenewens, as jy watchr geïnstalleer het, kan jy hardloop make watchom bootstrap outomaties te laat herbou elke keer as jy 'n lêer in die bootstrap lib wysig (dit is nie nodig nie, net 'n geriefsmetode).

Bevelreël

Installeer die MINDER opdragreëlinstrument via Node en voer die volgende opdrag uit:

$ lessc ./less/bootstrap.less > bootstrap.css

Maak seker --compressdat jy daardie opdrag insluit as jy 'n paar grepe probeer stoor!

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 / │ ├── selflaaiband . min . css
   ├── js / │ ├── selflaaiband . min . js
   └── img / ├── glyphicons - halflings . png
       └── glifikone - halflings - wit . png

Gebruik beginsjabloon

Kopieer die volgende basiese HTML om te begin.

<html>
  <kop>
    <title> Bootstrap 101-sjabloon </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </head>
  <liggaam>
    <h1> Hallo, wêreld! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </body>
</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.

<html>
  <kop>
    <title> Bootstrap 101-sjabloon </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- Projek -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </head>
  <liggaam>
    <h1> Hallo, wêreld! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- Projek -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

Verleng Bootstrap

Gebou met MINDER