Verlengen · Bootstrap in het Nederlands

Bootstrap is gemaakt met LESS als kern, een dynamische stylesheettaal gemaakt door onze goede vriend, Alexis Sellier . Het maakt het ontwikkelen van op systemen gebaseerde CSS sneller, gemakkelijker en leuker.

Waarom MINDER?

Een van de makers van Bootstrap schreef hierover een korte blogpost , hier samengevat:

Bootstrap compileert sneller ~6x sneller met Less vergeleken met Sass
Er is minder geschreven in JavaScript, waardoor het voor ons gemakkelijker is om erin te duiken en te patchen in vergelijking met Ruby met Sass.
Minder is meer; we willen het gevoel hebben dat we CSS schrijven en Bootstrap voor iedereen toegankelijk maken.

Wat is inbegrepen?

Als uitbreiding van CSS bevat LESS variabelen, mixins voor herbruikbare codefragmenten, bewerkingen voor eenvoudige wiskunde, nesten en zelfs kleurfuncties.

Leer meer

Bezoek de officiële website op http://lesscss.org/ voor meer informatie.

Omdat onze CSS is geschreven met Less en variabelen en mixins gebruikt, moet deze worden gecompileerd voor de uiteindelijke productie-implementatie. Hier is hoe.

Opmerking: als u een pull-verzoek indient bij GitHub met aangepaste CSS, moet u de CSS opnieuw compileren via een van deze methoden.

Hulpmiddelen voor het compileren

Opdrachtregel

Volg de instructies in de project-leesmij op GitHub voor het compileren via de opdrachtregel.

JavaScript

Download de nieuwste Less.js en voeg het pad ernaar toe (en Bootstrap) in het <head>.

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

Om de .less-bestanden opnieuw te compileren, hoeft u ze alleen maar op te slaan en uw pagina opnieuw te laden. Less.js compileert ze en slaat ze op in lokale opslag.

Onofficiële Mac-app

De onofficiële Mac-app bekijkt mappen met .less-bestanden en compileert de code naar lokale bestanden na elke opslag van een bekeken .less-bestand. Als je wilt, kun je in de app de voorkeuren omschakelen voor automatische verkleining en in welke map de gecompileerde bestanden terechtkomen.

Meer apps

crunch

Crunch is een geweldig uitziende LESS-editor en compiler die is gebouwd op Adobe Air.

CodeKit

CodeKit, gemaakt door dezelfde man als de onofficiële Mac-app, is een Mac-app die LESS, SASS, Stylus en CoffeeScript compileert.

eenvoud

Mac-, Linux- en Windows-app voor het slepen en neerzetten van MINDER-bestanden. Bovendien staat de broncode op GitHub .

Start snel een webproject door de gecompileerde of verkleinde CSS en JS in te voeren. Laag op aangepaste stijlen afzonderlijk voor gemakkelijke upgrades en onderhoud in de toekomst.

Bestandsstructuur instellen

Download de nieuwste gecompileerde Bootstrap en plaats deze in uw project. Je hebt bijvoorbeeld zoiets als dit:

  app/
      indelingen/
      Sjablonen/
  openbaar/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Startsjabloon gebruiken

Kopieer de volgende basis-HTML om aan de slag te gaan.

<html>
  <head>
    <title> Bootstrap 101-sjabloon </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </head>
  <lichaam>
    <h1> Hallo, wereld! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </body>
</html>

Laag op aangepaste code

Werk waar nodig in uw aangepaste CSS, JS en meer om Bootstrap uw eigen te maken met uw eigen afzonderlijke CSS- en JS-bestanden.

<html>
  <head>
    <title> Bootstrap 101-sjabloon </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- Project -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </head>
  <lichaam>
    <h1> Hallo, wereld! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- Project -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

Bootstrap verlengen

Gebouwd met MINDER