web-dev-qa-db-ja.com

CDNを使用してbootstrap 4に新しいブレークポイントを作成する方法は？

BootstrapCDNを使用します。 sassで記述され、gulpによって作成された他のスタイル。独自のブレークピオンを作成する必要があります。 CDNを使用すれば作成できますか？どうすればいいのかわかりません。これらのブレークポイントを作成する必要があります。

--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;

私はこのようなものを手に入れたいです：

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

私は マニュアル を見つけ、これを試しています：

$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;
}

ただし、結果は生成されず、バグが生成されます。

不正なネスト：変数宣言の下には何もネストできません。

Codepen mcve 。

私が間違っているのは何ですか？
ご協力ありがとうございます。

UPD：それが不可能な場合...代替手段はありますか？コードを簡単に編集して、bootstrapブレークポイントのあるグリッドをシミュレートできますか？

UPD2： @ aer のおかげでバグを修正しました：

$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

しかし、それは私の問題を解決しません。

twitter-bootstrapsassmedia-queriesfrontendbootstrap-4
14
kizoso

私の質問に答えることができる開発者がいなかったことに非常に驚いています！ githab でさえ、誰もそれについて考えることを敢えてしません！

実際、すべてが非常にシンプルであることが判明しました！

はい、CDNを使用して、コンパイルされたcssファイルを取得します。 bootstrapのスタイルはsassを使用して記述されます。さらに、スタイルは分離されモジュール化されて記述されます。したがって、bootstrapブートストラップのコンパイル済みCSSのキャッシュバージョンを配信し、ブレークポイントを追加するだけです。幸いなことに、グリッドを担当する特定のbootstrapファイルがあります。これは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";

ここで、上記のファイルからコードを順番に追加して、ブレークポイントを追加するだけです。不要な非グリッドコードを追加します。たとえば、色を担当するコード。 これはcodepenのmcveです 。

3
kizoso

CDNから完全に行うことはできません。 適切 SASSを使用してカスタマイズ/オーバーライドするには、custom.scssにある必要なBootstrap scssファイルを@importする必要があります。グリッドブレークポイントをオーバーライドするには、少なくともfunctionsとvariablesが必要です。次に、必要に応じて変数を設定し、最後に@importブートストラップを実行します。デフォルトに注意してください！正しいカスタマイズ方法として ドキュメントで説明 として削除されました。

/* 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";

このメソッドでは、新しいグリッドブレークポイントを追加し、これらの新しいブレークポイントが機能することを確認しましたすべての場所 Bootstrapでグリッド、スペーシング、ディスプレイ、フレックスボックス、アライメント、ポジショニングなどの応答性の高いユーティリティ...

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

以下も参照してください。
SASSを使用したBootstrap 4の拡張/変更（カスタマイズ）方法
Twitterブートストラップ：xxsブレークポイントのメディアクエリを追加

17
Zim

Githubによると、ここで「バグ」に遭遇しているようです。こちらをご覧ください： https://github.com/sass/sass/issues/1166

そうは言っても、変数定義はそのように1行で記述する必要があります。

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