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
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
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é
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
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!