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

Ligne de commande

Suivez les instructions du fichier readme du projet sur GitHub pour compiler via la ligne de commande.

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 :

  application/
      mises en page/
      modèles/
  Publique/
      CSS/
          bootstrap.min.css
      js/
          bootstrap.min.js
      image/
          glyphicons-halfelins.png
          glyphicons-halfelins-white.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>