Quelle est la relation entre le bootstrap et less ?

Dans bootstrap, de nombreux composants de style threadé sont fournis. Ces styles sont écrits par less. Vous n'avez pas besoin d'en savoir moins pour utiliser bootstrap. Less comprend un ensemble de syntaxe personnalisée et un analyseur pour générer les fichiers CSS correspondants.

L'environnement d'exploitation de ce tutoriel : système Windows 10, bootstrap version 3.3.7, ordinateur DELL G3

Quelle est la relation entre bootstrap et moins

Dans bootstrap, de nombreux composants de style thread sont fournis, et ces styles sont écrits par less , vous n'avez pas besoin d'en savoir moins pour utiliser bootstrap.

architecture du projet bootstrap

implémenter le système de mise en page et le contenu

1) Conception du système de grille Contenu supplémentaire : tri des colonnes col-md-push-4

2) Contenu complet des cellules

personnalisation du style

• less

• Modifier le code source du bootstrap

less

css est un langage de balisage avec une syntaxe simple et une faible difficulté d'apprentissage. Cependant, CSS nécessite l'écriture d'une grande quantité de code apparemment illogique, ce qui est peu pratique à maintenir et à développer. n'est pas propice à la réutilisation, et l'une des principales raisons de ces difficultés est que CSS est un langage non procédural et n'a pas de concepts tels que variables, fonctions et SCOPE (portée).

LESS comprend un ensemble de grammaires personnalisées et un analyseur. Les utilisateurs définissent leurs propres règles de style basées sur ces grammaires. Ces règles seront éventuellement compilées par l'analyseur pour générer les fichiers CSS correspondants.

   LESS ne supprime pas les fonctionnalités d'origine du CSS et n'est pas non plus utilisé pour remplacer le CSS. Au lieu de cela, il ajoute des fonctionnalités de langage procédural au CSS basées sur la syntaxe CSS existante. Less est basé sur la syntaxe CSS et introduit des fonctions telles que des variables, Mixin (mélange), des opérations et des fonctions, ce qui simplifie grandement l'écriture de CSS et réduit le coût de maintenance de CSS

Less peut être exécuté dans Node ou sur un appareil de navigation. fin.

Méthode 1 - Exécutez le programme de conversion less sur le client

  Introduisez xx.less dans le HTML, puis introduisez less.js, qui est un compilateur less qui peut s'exécuter dans le navigateur client - l'efficacité est faible. Non recommandé

.

Méthode 2 - Exécuter le programme de conversion less sur le serveur - Recommandé

  1) Téléchargez et installez un interpréteur js côté serveur - nodejs

  2) Téléchargez le programme de conversion de fichiers less lessc --js script

  3) Exécutez le convertisseur lessc sur l'interpréteur js côté serveur pour convertir le fichier .less que vous avez écrit en fichier CSS

a) Vous pouvez utiliser le programme de conversion dans la ligne de commande

    node.exe lessc my.less my.css

b) Utilisez le programme de conversion dans hbuilder

4) Dans le fichier html, référencez le fichier CSS compilé

2. Moins d'apprentissage de la syntaxe

less prend entièrement en charge la syntaxe CSS

lss prend en charge les commentaires sur une seule ligne et les commentaires sur plusieurs lignes, mais seuls les commentaires sur plusieurs lignes seront convertis en fichiers CSS.

less prend en charge les variables

  @Nom de la variable : valeur

  Utilisation : sélecteur {style : @nom de la variable}

less prend en charge le mélange de styles - référencement d'un autre style dans un style

 .class1(){...}
 .class2{
     ...
     .class1
     ...
 }

mélange avec des paramètres

 .class()(@参数1，@参数2，。。。){....}
 .class2 {
     ...
     .class(参数1，参数2);
     ...
 }

Règles imbriquées

 .class1{
    ...
   .class2 {}
 }

Résultats de conversion

 .class1{  }
 .class1 .class2{ }

less peut effectuer des opérations arithmétiques sur des variables et des constantes

less fournit des dizaines de fonctions d'application pour les styles

éclaircir (couleur, valeur de luminosité) : éclaircir la couleur spécifiée Pourcentage spécifié

assombrir (couleur, valeur de luminosité) : assombrit la couleur spécifiée du pourcentage spécifié

valeur du journal floor (nombre) arrondie à l'inférieur

valeur du journal ceil (nombre) arrondie à l'entier supérieur

importation de page

Essayez d'éviter d'utiliser la directive @import dans le fichier CSS - cela augmenter le nombre de requêtes HTTP

  Afin de diviser un fichier de style en plusieurs petits fichiers de style, qui peuvent être écrits par plusieurs personnes en même temps, vous pouvez utiliser @import-less dans less Importer d'autres fichiers less, et un grand le fichier de style CSS complet sera épissé lors de la conversion, il est donc recommandé d'importer d'autres fichiers moins dans less

<code> @import "xx.less"</code>

**moins de structure de fichiers dans les grands projets**

Variable.less - placez toutes les variables

     mixin.less – Placer tous les mixins

    reset.less –   Placer des éléments HTML pour réinitialiser le style

      navbar.less   – Lié à la barre de navigation

    footer.less   –   Styles liés au pied de page

  js moins —— Beaucoup moins de fichiers

3

Supprimez les styles inutiles, tels que les publicités carrousel/boîtes modales

  Dans le fichier bootstra.less, commentez Just @import si nécessaire

Personnalisez le style par défaut du bootstrap. composants requis, tels que la modification de la couleur d'arrière-plan par défaut de la barre de navigation

  Modifiez simplement les variables dans le fichier variables.less

Créez un nouveau style basé sur le style par défaut fourni par bootstrap. Par exemple, personnalisez le style du séparateur dans. liste déroulante - personnalisation approfondie des composants

   Modifier le fichier less correspondant à un certain composant

Recommandations associées : Tutoriel bootstrap

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!