web-dev-qa-db-fra.com

Comment créer de nouveaux points d'arrêt dans bootstrap 4 en utilisant CDN?

J'utilise BootstrapCDN. Autres styles écrits en sass et construits par gulp. J'ai besoin de créer mes propres breakpionts. Est-il possible de les fabriquer si j'utilise CDN? Je n'arrive pas à comprendre comment le faire. Je dois créer ces points d'arrêt:

--breakpoint-xxxs: 0;
--breakpoint-xxs: 320px;
--breakpoint-xs: 568px;
--breakpoint-sm: 667px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--breakpoint-xxl: 1440px;
--breakpoint-xxxl: 1600px;

Je veux obtenir quelque chose comme ça:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
	<div class="row">
		<div class="col col-xxxs-1 col-xxs-2 col-xs-3 col-sm-4 col-md-5 col-lg-6 col-xl-7 col-xxl-8 col-xxxl-9">
			<div style="height:100vh;background:purple">text</div>
		</div><!--col-->
	</div><!--.row-->
</div><!--.container-->

J'ai trouvé le manuel et j'essaye ceci:

$grid-breakpoints: (
  xxxs: 0,
  xxs: 320px,
  xs: 568px,
  sm: 667px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px,
  xxxl: 1600px
)  !default;

$container-max-widths: (
  xxxs: 0,
  xxs: 320px,
  xs: 568px,
  sm: 667px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px,
  xxxl: 1600px
) !default;

:root {
  --breakpoint-xxxs: 0;
  --breakpoint-xxs: 320px;
  --breakpoint-xs: 568px;
  --breakpoint-sm: 667px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1440px;
  --breakpoint-xxxl: 1600px;
}

Mais cela ne produit pas de résultats et génère un bug:

Imbrication illégale: rien ne peut être imbriqué sous une déclaration de variable.

Codepen mcve .

Qu'est-ce que je fais mal?
Merci d'avance pour votre aide.

UPD: si ce n'est pas possible ... Existe-t-il une alternative? Puis-je facilement modifier mon code pour simuler une grille d'amorçage avec mes points d'arrêt? 

UPD2: J'ai corrigé les bugs grâce à @ aer0 :

$grid-breakpoints: (xxxs: 0, xxs: 320px, xs: 568px, sm: 667px, md: 768px, lg: 992px, xl: 1200px, xxl: 1440px, xxxl: 1600px)!default

$container-max-widths: (xxxs: 0, xxs: 320px, xs: 568px, sm: 667px, md: 768px, lg: 992px, xl: 1200px, xxl: 1440px, xxxl: 1600px)!default

\:root
  --breakpoint-xxxs: 0
  --breakpoint-xxs: 320px
  --breakpoint-xs: 568px
  --breakpoint-sm: 667px
  --breakpoint-md: 768px
  --breakpoint-lg: 992px
  --breakpoint-xl: 1200px
  --breakpoint-xxl: 1440px
  --breakpoint-xxxl: 1600px

Mais cela ne résout pas mon problème.

twitter-bootstrapsassmedia-queriesfrontendbootstrap-4
7
kizoso

Je suis très surpris qu'il n'y ait pas de développeur capable de répondre à ma question! Même sur le githab personne n'osait y penser!

En fait, tout s'est avéré très simple!

Oui, en utilisant le CDN, nous obtenons le fichier css compilé. Les styles dans le bootstrap sont écrits en utilisant sass. De plus, les styles sont écrits en séparation et modulaires. Cela signifie donc que je n'ai pas besoin de charger l'intégralité du bootstrap sur mon serveur. Je souhaite fournir une version en cache du fichier CSS compilé de Bootstrap et je n’ai plus qu’à ajouter mes points d'arrêt. Heureusement, il existe un fichier d'amorçage spécifique qui est responsable de la grille. C'est bootstrap-grid.scss:

/*!
 * Bootstrap Grid v4.0.0 (https://getbootstrap.com)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@at-root {
  @-ms-viewport { width: device-width; } // stylelint-disable-line at-rule-no-vendor-prefix
}

html {
  box-sizing: border-box;
  -ms-overflow-style: scrollbar;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

@import "functions";
@import "variables";

@import "mixins/breakpoints";
@import "mixins/grid-framework";
@import "mixins/grid";

@import "grid";
@import "utilities/display";
@import "utilities/flex";

Maintenant, j'ai juste besoin d'ajouter séquentiellement le code des fichiers ci-dessus en ajoutant mes points d'arrêt. Ajouter du code non-grille n'est pas nécessaire. Par exemple, le code responsable de la couleur. Voici mon mve au codepen .

2
kizoso

Cela ne peut pas être fait entièrement à partir de CDN. Pour correctement personnaliser/remplacer à l'aide de SASS, vous devez @importer les fichiers Bootstrap scss nécessaires dans votre custom.scss. Pour remplacer les points d'arrêt de la grille, vous avez besoin au minimum de functions et variables. Puis définissez les variables selon vos besoins et, enfin, @import bootstrap. Remarquez comment par défaut! a été supprimé en tant que expliqué dans la documentation en tant que méthode de personnalisation correcte.

/* import what we need to override */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* set the overriding variables */
$grid-breakpoints: (
  xxxs: 0,
  xxs: 320px,
  xs: 568px,
  sm: 667px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px,
  xxxl: 1600px
);
$container-max-widths: (
  xxxs: 0,
  xxs: 320px,
  xs: 568px,
  sm: 667px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px,
  xxxl: 1600px
);

/* override the !default vars with the values we set above */
@import "bootstrap";

Avec cette méthode, nous avons ajouté les nouveaux points d'arrêt de la grille et nous nous sommes assurés que ces nouveaux points d'arrêt fonctionnent partout dans Bootstrap, y compris grid, utilitaires réactifs pour l'espacement, l'affichage, la flexbox, l'alignement et le positionnement., etc...

https://www.codeply.com/go/BIgmm1XGc2

Regarde aussi:
Comment étendre/modifier (personnaliser) Bootstrap 4 avec SASS
Twitter Bootstrap: ajouter des requêtes multimédia pour le point d'arrêt xxs

10
Zim

Selon Github, il semblerait que vous rencontriez un "bug" ici. Voir ici: https://github.com/sass/sass/issues/1166

Cela étant dit, vous devrez écrire votre définition de variable sur une seule ligne, comme cela.

$grid-breakpoints: (xxxs: 0, xxs: 320px, xs: 568px, sm: 667px, md: 768px, lg: 992px, xl: 1200px, xxl: 1440px, xxxl: 1600px) !default
1
Aer0