bootstrap dark 5ダウンロード - bootstrap dark 5ソースコードダウンロード

bootstrap dark 5

ウェブサイトデータ

v1.1.3 Release

ダウンロード

ダークモードとブートストラップ5の補助ガイド5

V4ダークモードPOCの継続ですが、今回はv5

これは、ダークモードとブートストラップ4の作業の決定的なガイドのフォローアップであり、Bootstrap 5 （Github Repo。）に関係しています。

Bootstrap 4の同じ作業を受けている場合は、Vinorodrigues/Bootstrap-Dark Repoにアクセスしてください。

このプロジェクトのステータスに関する重要なメモ：
Bootstrap 5のコアリポジトリに戻った開発の取り組みは、 v5.3に達しました。これには「カラーモード」が含まれており、その中にダークモードの実装が含まれています。見る：
https://getbootstrap.com/docs/5.3/customize/color-modes/
したがって、これにより、このプロジェクトが冗長になり、廃止され、教育の利益のためにコードとリポジトリをここに残します。

について

最初にダークモードとブートストラップ4の決定的なガイドを読まなければ、このコードはほとんど意味がありません。

何が得られますか？

コードは、元の作業体の4つのメソッド（およびバリアント-6つのバリアント）をコンパイルしますが、ブートストラップ5のためにコンパイルされ、調達されました。これらは：

方法1

（オリジナルへのリンク）

bootstrap-night ：これは単に暗いブートストラップのテーマです。ただし、ブートストラップコアCSSで使用して、2ファイルダークモード機能を提供できます。

方法2

（オリジナルへのリンク）

bootstrap-nightfall ：これは、ブートストラップコアのすべてのコンポーネントの「色のみ」のCSSですが、暗く、アドオンとして使用することを目的としています。また、シンプルなメディアクエリを使用すると、自動ダークモードの切り替えを駆動できます。

方法3

（オリジナルへのリンク）

bootstrap-nightshade ：これはブートストラップコアの変更であり、すべてのコンポーネントに暗い色のCSSを追加しますが、 html.darkクラスのラッパーにネストされています。それだけでは、ダークモードの切り替えを提供することはできませんが、含まれているdarkmode.jsライブラリを追加すると、 「トグル」ボタンサポートが組み込まれたブートストラップのインタラクティブなダークモードスイッチングバリアントがあります。
bootstrap-blackbox ：このバリアントは本質的に「ナイトシェード」バリアントと同じですが、HTMLタグクラスを使用する代わりに、HTMLタグデータ属性を使用します。 data-bs-color-scheme 。同じdarkmode.jsライブラリがこれを駆動します。必要なのは、HTMLタグにデータ属性を追加することだけです。

方法4

（オリジナルへのリンク）

bootstrap-dark ：これは推奨される方法です。 OSまたはブラウザでのみトグルがあり、明るいテーマと暗いテーマの両方を備えた1つのCSSはprefers-color-scheme 。
bootstrap-unlit ：このバリアントは、「暗い」バリアントと本質的に同じですが、「ダーク」スキームはプライマリ/フォールバックとして、「明るい」は配色で選択されています。

始めましょう

1。 `bootstrap-night`	2。 `bootstrap-nightfall`	3。 `bootstrap-nightshade`	3b。 `bootstrap-blackbox`	4。Bootstrap `bootstrap-dark`	4b。 `bootstrap-unlit`
クイックスタートガイド	クイックスタートガイド	クイックスタートガイド	クイックスタートガイド	クイックスタートガイド	クイックスタートガイド
		`darkmode.js`リファレンス	`darkmode.js`リファレンス
例を参照してください		例を参照してください		例を参照してください

証明はプリンにあります

テストページのいくつかは、vinorodrigues.github.io/bootstrap-dark-5に設定されています

これを使用できますか？

はい。

ライセンスはMITです。すなわち、元の著者を称賛し、著作権をその場で残している限り、あなたがかっことして使用してください。

あなたがテーマビルダーである場合、または独自のプロジェクトでその原則を使用したい場合は、GITとノードをインストールする必要があります。

リポジトリをフォークまたはダウンロード： git clone https://github.com/vinorodrigues/bootstrap-dark-5.git
ノード依存関係のインストール： npm install （以下の注を参照）。
_variables.scssおよび_variables-alt.scss scssサブフォルダーに変更します。
npm run buildを実行して、テーマを構築します。
コンパイルされたコードは、 distフォルダーにあります。

ビルドシステムは、NPMスクリプトに基づいています。ほとんどのビルドツール（NPMモジュール）は、スクリプトがコマンドラインから実行可能であることを確認するために、「グローバル」としてインストールする必要があります。

npm i -g  autoprefixer  documentation browser-sync  clean-css-cli  cross-env  eslint  eslint-config-xo  eslint-plugin-import  eslint-plugin-unicorn  find-unused-sass-variables  imagemin-cli  nodemon  npm-run-all  postcss-cli  rtlcss  sass  stylelint  stylelint-config-twbs-bootstrap  svgo  terser typescript

注1：

このコードは、「ダークモード」機能を追加するブートストラップ5コアコードの再ハッシュであり、「概念実証」 （POC）として宣言されています。つまり、生産ソースとして意図されていないことを意味しますが、ダークモードがさまざまな方法で達成できることを証明するためのエクササイズです。つまり、教育的な作品です。それはまた、それが著者（ヴィノ・ロドリゲス）がそれをサポートすることを強いられていないことを意味します。

注2：

このプロジェクトは、ノードサスでコンパイルされません。特にここ（https://getBootstrap.com/docs/5.1/getting-started/build-tools/#sass）を参照してください。

彼らはこれを引用します（https://sass-lang.com/blog/libsass-is-deprecated）記事は、SASSキュレーターがlibsassをサポートしなくなると述べ、ノードサスが依存していると述べています。

npm

開発者は、 scssとdistフォルダーを独自のプロジェクトに含めることができます。

npm install bootstrap-dark-5

CDN

また、jsdelivr.comを使用してCDNを介してテーマをhotlinkすることもできます。

GitHubリリースからテーマCSSファイルにアクセスできます。

bootstrap-dark @mediaはperfers-color-scheme
- 生産 /統合バリアント：
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-dark.min.css
- 開発 /デバッグバリアント：
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-dark.css
- また、クイックスタートガイドをお読みください。
bootstrap-nightshade html.dark CSSクラス + JSライブラリバリアント
- 生産 /模倣バリアント：
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-nightshade.min.css
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/js/darkmode.min.js
- 開発 /デバッグバリアント：
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-nightshade.css
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/js/darkmode.js
- また、クイックスタートガイドとdarkmode.jsリファレンスをお読みください。
bootstrap-night - その暗いテーマのみのバリアント
- 生産 /統合バリアント：
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-night.min.css
- 開発 /デバッグバリアント：
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-night.css
- また、クイックスタートガイドをお読みください。
ソースなどはここにありますが、Githubを使用することをお勧めします。

さらに読む

ダークモードのために書きたいすべての開発者の読み取り：

...明らかに、元のコンテンツ：ダークモードとブートストラップ4の決定的なガイド4
Web.Dev、Thomas Steiner（@Tomayac）、2019年6月27日（2020年6月9日更新） 、「カラーシェメを好む：ハローダークネス、私の旧友」
Web.Dev、Thomas Steiner（@Tomayac）、2020年4月8日（2020年6月16日更新） 、「カラースキームCSSプロパティと対応するメタタグを使用したダークモードのデフォルトスタイリングの改善」
CSS-Tricks、Adhuham、9月9日、2020年「ウェブ上のダークモードの完全なガイド」
私の「..決定的なガイド..」の画像やその他の考慮事項についての私のビット。