Amorcer

Étendre le bootstrap

Étendez Bootstrap pour tirer parti des styles et composants inclus, ainsi que des variables LESS et des mixins.

Construit avec MOINS

MOINS DE CSS

Bootstrap est fait avec LESS en son cœur, un langage de feuille de style dynamique créé par notre bon ami, Alexis Sellier . Il rend le développement de CSS basé sur les systèmes plus rapide, plus facile et plus amusant.

Pourquoi MOINS ?

L'un des créateurs de Bootstrap a écrit un article de blog rapide à ce sujet , résumé ici :

  • Bootstrap compile plus rapidement ~ 6 fois plus vite avec moins par rapport à Sass
  • Moins est écrit en JavaScript, ce qui nous permet de plonger et de corriger plus facilement que Ruby avec Sass.
  • Moins est plus; nous voulons avoir l'impression d'écrire du CSS et de rendre Bootstrap accessible à tous.

Ce qui est inclu?

En tant qu'extension de CSS, LESS inclut des variables, des mixins pour des extraits de code réutilisables, des opérations pour des fonctions mathématiques simples, d'imbrication et même de couleur.

Apprendre encore plus

Visitez le site Web officiel à http://lesscss.org/ pour en savoir plus.

Compiler Bootstrap avec moins

Étant donné que notre CSS est écrit avec Less et utilise des variables et des mixins, il doit être compilé pour la mise en œuvre finale de la production. Voici comment.

Remarque : Si vous soumettez une demande d'extraction à GitHub avec un CSS modifié, vous devez recompiler le CSS via l'une de ces méthodes.

Outils pour compiler

Nœud avec makefile

Installez le compilateur de ligne de commande LESS, JSHint, Recess et uglify-js globalement avec npm en exécutant la commande suivante :

$ npm install -g less jshint évidement uglify-js

Une fois installé, exécutez- le à makepartir de la racine de votre répertoire d'amorçage et vous êtes prêt.

De plus, si vous avez installé watchr , vous pouvez exécuter make watchpour que bootstrap soit automatiquement reconstruit chaque fois que vous modifiez un fichier dans la bibliothèque bootstrap (ce n'est pas obligatoire, juste une méthode pratique).

Ligne de commande

Installez l'outil de ligne de commande LESS via Node et exécutez la commande suivante :

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

Assurez-vous d'inclure --compressdans cette commande si vous essayez d'économiser des octets !

Javascript

Téléchargez le dernier Less.js et incluez son chemin (et Bootstrap) dans le fichier <head>.

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

Pour recompiler les fichiers .less, il suffit de les enregistrer et de recharger votre page. Less.js les compile et les stocke dans le stockage local.

Application Mac non officielle

L'application Mac non officielle surveille les répertoires de fichiers .less et compile le code dans des fichiers locaux après chaque sauvegarde d'un fichier .less surveillé. Si vous le souhaitez, vous pouvez basculer les préférences dans l'application pour la minification automatique et le répertoire dans lequel les fichiers compilés se retrouvent.

Plus d'applications

Croquer

Crunch est un superbe éditeur et compilateur LESS construit sur Adobe Air.

Code Kit

Créé par le même gars que l'application Mac non officielle, CodeKit est une application Mac qui compile LESS, SASS, Stylus et CoffeeScript.

Simplicité

Application Mac, Linux et Windows pour la compilation par glisser-déposer de fichiers LESS. De plus, le code source est sur GitHub .

Utiliser comme éléments statiques

Démarrez rapidement n'importe quel projet Web en déposant les CSS et JS compilés ou minifiés. Superposez les styles personnalisés séparément pour des mises à niveau et une maintenance faciles à l'avenir.

Structure du fichier de configuration

Téléchargez le dernier Bootstrap compilé et placez-le dans votre projet. Par exemple, vous pourriez avoir quelque chose comme ceci :

  app / ├── layouts / └── templates / public / ├── css / │ ├── bootstrap . min . css
   ├── js / │ ├── bootstrap . min . js
   └── img / ├── glyphicons - halfelins . png
       └── glyphicons - halfelins - blanc . png

Utiliser le modèle de démarrage

Copiez le code HTML de base suivant pour commencer.

  1. <html>
  2.   <tête>
  3.     <title> Modèle Bootstrap 101 </title>
  4.     <!-- Amorçage -->
  5.     <link href = "public/css/bootstrap.min.css" rel = "feuille de style" >  
  6.   </tête>
  7.   <corps>
  8.     <h1> Bonjour, monde ! </h1>
  9.     <!-- Amorçage -->
  10.     <script src = "public/js/bootstrap.min.js" ></script> 
  11.   </body>
  12. </html>

Couche sur le code personnalisé

Travaillez dans votre CSS personnalisé, JS et plus si nécessaire pour personnaliser Bootstrap avec vos propres fichiers CSS et JS séparés.

  1. <html>
  2.   <tête>
  3.     <title> Modèle Bootstrap 101 </title>
  4.     <!-- Amorçage -->
  5.     <link href = "public/css/bootstrap.min.css" rel = "feuille de style" >  
  6.     <!-- Projet -->
  7.     <link href = "public/css/application.css" rel = "feuille de style" >  
  8.   </tête>
  9.   <corps>
  10.     <h1> Bonjour, monde ! </h1>
  11.     <!-- Amorçage -->
  12.     <script src = "public/js/bootstrap.min.js" ></script> 
  13.     <!-- Projet -->
  14.     <script src = "public/js/application.js" ></script> 
  15.   </body>
  16. </html>