テーブル
デフォルトのテーブル（Overview）v5.2.0スタイル変更 カレンダーや日付選択ツールなどのサードパーティ製ウィジェットで <table> 要素が広く使用されているため、Bootstrapのテーブル（表）はオプトイン（同意方式）で設計。基本クラスの .table を任意の <table> に追加して、オプションの修飾子クラスやカスタムスタイルで拡張させる。すべてのテ...
デフォルトのテーブル（Overview）v5.2.0スタイル変更 カレンダーや日付選択ツールなどのサードパーティ製ウィジェットで <table> 要素が広く使用されているため、Bootstrapのテーブル（表）はオプトイン（同意方式）で設計。基本クラスの .table を任意の <table> に追加して、オプションの修飾子クラスやカスタムスタイルで拡張させる。すべてのテ...
図表の設定 任意のキャプションでイメージのようなコンテンツを表示する必要があるときは、いつでも <figure> の使用をご検討下さい。 .figure, .figure-img, .figure-caption を使用して、HTML5の <figure> 要素や <figcaption> 要素に基本的なスタイルを提供する。figure内のイメージには明示的な...
概要（Overview） Bootstrapをカスタマイズする方法は複数ある。最適な方法は、プロジェクト、構築ツールの複雑さ、使用しているBootstrapのバージョン、ブラウザのサポートなどによって異なる。 推奨される2つの方法は以下のとおり： ソースファイルの使用や拡張のため、パッケージマネージャー経由でBootstrapを使用できる。 Bootstrapのコンパイル済配布ファイルやj...
ソースSassファイルを利用して、変数、マップ、ミックスインなどを活用。 ファイル構造（File structure） できるだけBootstrapのコアファイルを変更しないで下さい。Sassの場合、独自のスタイルシートを作成してBootstrapをインポートして変更や拡張ができる。npmのようなパッケージマネージャーを使用しているなら、ファイル構造は次のようになる： your-project/...
組み込み済のカスタム変数ファイルでBootstrapをカスタマイズし、新しく $enable-* Sass変数でグローバルCSS設定を簡単に切り替える。変数の値を再定義し、必要に応じて npm run test で再コンパイルする。 これらの変数は、Bootstrapの scss/_variables.scss にある重要なグローバル・オプションを検出してカスタマイズできる。 ...
カラーパレット（Colors）v5.3.0新設 Bootstrapのカラーパレットは、v5.3.0でも拡張を続け、よりニュアンスのあるものになり、secondary（二次）と tertiary（三次）の文字色と背景色用の新しい変数とテーマカラー用の {color}-bg-subtle, {color}-border-subtle, {color}-text-emphasis を追加。これらの新し...
自分で試してみよう！BootstrapをStylelintで使うためのソースコードと動作デモ、カラーモードはtwbs/examplesリポジトリからダウンロードして下さい。またStackBlitzでサンプルを開くこともできる。 ダークモード（Dark mode） Bootstrapがカラーモードに対応し、まずはダークモードについて。v5.3.0では独自のカラーモードの切替を実装することがで...
基本のクラス（Base classes）v5.0.0-alpha1新設 Bootstrapのコンポーネントは、主に基本修飾子の命名法を使用して構築される。できるだけ多くの共有プロパティを .btn などの基本クラスにグループ化し、各バリエーションの個々のスタイルを .btn-primary や .btn-success などの修飾子クラスでグループ化する。 修飾子クラスを構築するために、Sass...
※参考 CSS カスタムプロパティ（変数）の使用（MDN日本語版） A Complete Guide to Custom Properties（CSS-TRICKS、英語） CSSで変数（カスタムプロパティ）を使ってみよう（Webクリエイターボックス） CSSの変数（カスタムプロパティ）の基礎知識、便利な使い方を詳しく解説（coliss） Bootstrapは、Sassを再コンパイル...
Sassのインポートに頼る（Lean Sass imports） アセットパイプラインでSassを使用する場合は、必要なコンポーネントのみを @import してBootstrapを最適化して下さい。最大の最適化は、bootstrap.scss のレイアウトとコンポーネントの項目から行われる可能性がある。 デフォルトの設定 scss/bootstrap.scss 内 import-stack の...