web-dev-qa-db-fra.com

Bootstrap écrasante avec LESS

J'ai étudié pendant toute la journée, estimant qu'il serait utile de passer du temps à apprendre les meilleures pratiques de personnalisation Bootstrap .

Je peux voir qu’une page conviviale est disponible pour la personnalisation sélective d’éléments à partir de http://Twitter.github.io/bootstrap/customize.html mais je veux avoir plus de contrôle que cela sans toucher à original = bootstrap).

Pour commencer, je voulais essentiellement tester le remplacement de la grille de 12 à 16 colonnes. Pour ce faire, j'ai créé ma propre variable less file et ajouté @gridColumns: 16; uniquement dans ce fichier et importé cette coutume moins dans bootstrap.less comme suit.

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";
**@import "../custom-variables.less"; //Override variables**

Puis, en utilisant WinLess j'ai compilé le fichier bootstrap.less pour obtenir un nouveau bootstrap.css avec un appel d'importation de variable surchargé et lié le fichier css au fichier html, mais la grille ne sera pas modifiée à 16 colonnes.

Quelqu'un peut-il s'il vous plaît indiquer ce que je fais mal?

variablestwitter-bootstrapcustomizationless
70
Seong Lee

Je travaille sur un projet similaire dans lequel nous avons bootstrap dans un emplacement "tiers", puis ne remplaçons que mixins.less et variables.less. Le modèle que nous utilisons pour cela ajoute trois fichiers et ne touche pas bootstrap) (vous permettant de remplacer facilement les remplacements):

/style
|- bootstrap-master/
|    |- less/
|    |- js/
|   ...
|- shared/
    |- shared.less
    |- variables.less
    |- mixins.less

le fichier mixins

/*
 *    /style/shared/mixins.less
 */

@import "../bootstrap-master/less/mixins.less";
// override any mixins (or add any of your third party mixins here)

le fichier de variables, où vous pouvez remplacer les grilles

/*
 *    /style/shared/variables.less
 */

@import "../bootstrap-master/less/variables.less";

@gridColumns: 16; // let's pretend this is your site-specific override

Le fichier qui est réellement importé (ou transmis à un compilateur moins):

/*
 *    /style/shared/shared.less
 */

@import "variables.less";
@import "mixins.less";

@import "../bootstrap-master/less/grid.less";
//and any other bootstrap less files we need here

dans ma configuration, si je fais cela, je reçois un fichier css avec des valeurs bizarres .span15 (puisque je n'ai pas mis à jour @gridColumnWidth ou @gridGutterWidth mais les valeurs .row-fluid fonctionnent en fait exactement comme vous le souhaiteriez puisqu'elles sont calculées par division simple).

J'aime cette configuration parce que je peux cd en bootstrap-master et git pull et chercher de nouvelles mises à jour sans avoir à fusionner aucun de mes kludges spécifiques (cela me donne également une bonne idée de ce que j'ai réellement remplacé)

L'autre chose est qu'il est très clair que shared.less n'utilise que grid.less (plutôt que tout le bootstrap). C'est intentionnel, car dans la plupart des cas, vous n'avez pas besoin de tout le bootstrap, il suffit de quelques parties pour commencer. La plupart des fichiers bootstrap moins au moins sont Nice, en ce sens que leurs seules dépendances sont shared.less et mixins.less

si cela ne fonctionne toujours pas, alors peut-être que WinLess devient confus

43
Marcos

Remplacer les variables après importation de l'original bootstrap.less fonctionne très bien pour moi:

@import "less/bootstrap.less";

@body-bg:     red;
@text-color:  green;
@link-color:  blue;

La compilation des sorties de source LESS ci-dessus correctement personnalisées Bootstrap).

Informations pertinentes: http://lesscss.org/features/#variables-feature-lazy-loading

152
Adam

Un autre exemple qui peut aider quelqu'un:

@import 'bootstrap/bootstrap/variables';

// Prgress bar
@progress-bar-bg: #f5f5f5;
@progress-bar-default-color: @gray-base;

@import 'bootstrap/bootstrap';
1
adamj