Emmetショートハンド集
Emmet（旧：Zen Coding）は、HTMLとCSSのワークフローを大幅に改善する多くの一般的なテキストエディタ用のプラグインであり、多くのエディタに実装されている。BootstrapのHTMLコーディングをする際に便利なEmmetショートハンドを掲載。 ※参考 Emmetチートシート 「はじめて」でも簡単！Emmetの使い方とよく使うパターン集（HPcode） Emmetでマー...
Emmet（旧：Zen Coding）は、HTMLとCSSのワークフローを大幅に改善する多くの一般的なテキストエディタ用のプラグインであり、多くのエディタに実装されている。BootstrapのHTMLコーディングをする際に便利なEmmetショートハンドを掲載。 ※参考 Emmetチートシート 「はじめて」でも簡単！Emmetの使い方とよく使うパターン集（HPcode） Emmetでマー...
広告の配信について 当サイトは第三者配信の広告サービス「Google Adsense グーグルアドセンス」を利用しています。 広告配信事業者は、ユーザーの興味に応じた広告を表示するためにCookie（クッキー）を使用することがあります。 Cookie（クッキー）を無効にする設定およびGoogleアドセンスに関する詳細は「広告 – ポリシーと規約 – Google」をご覧下さい。 第三者がコンテン...
使い方（how it works） アコーディオンは内部で折り畳みを使用して折り畳める。 このコンポーネントのアニメーション効果は、prefers-reduced-motion メディアクエリに依存。詳細はアクセシビリティのモーションを小さくするに記載。 実例（Example）v5.3.0設定変更、v5.2.0デザイン変更 以下のアコーディオンをクリックして、アコーディオンのコンテンツを展...
アラートの設定（Examples）v5.2.0デザイン変更 アラートは任意の長さのテキストとオプションの閉じるボタンで利用できる。適切なスタイルを設定するには、必要な8つの色クラス（例：.alert-success）のいずれかを使用。インラインで閉じる場合、アラートJavaScriptプラグインを使用。 注意！v5.3.0でアラートのカラーバリエーションは、SassループでCSS変数を再定義...
バッジの設定（Examples）v5.2.0デザイン変更 バッジは、相対的なフォントサイズと em 単位を使用して、直接の親要素のサイズと一致するように調整される。v5以降、バッジはリンクのフォーカスとホバーのスタイルを廃止。 見出し（Headings） 見本 見出しの例 New 見出しの例 New 見出しの例 New 見出しの例 New 見出しの例 New 見出しの例 New Bootst...
実例（Example）v5.0.0-beta1スタイル変更 リンクリストアイテムを含む順序付きリストか順序なしリストを使用して、最小限のスタイルのパンくずリストを作成。ユーティリティを使用して、必要に応じてスタイルを追加。 見本 ホーム ホーム ライブラリ ホーム ライブラリ データ 設定例 親のみ<nav aria-labe...
基本クラス（Base class）v5.3.0新設 Bootstrapには、パディングやコンテンツの配置などの基本的なスタイルを設定する基本的な .btn クラスがある。デフォルトでは .btn コントロールは透明な罫線と背景色を持ち、明示的なフォーカススタイルとホバースタイルはない。 見本 基本クラス 設定例 <button type="button" class="btn">...
基本のボタングループ（Basic example） 1. 通常の設定 .btn-group で .btn を含む一連のボタンを囲む。 見本 行頭 中 行末 設定例 <div class="btn-group" role="group" aria-label="基本のボタングループ"> <button type="button" class="btn btn-pr...
概要（About） カードは、柔軟で拡張できるコンテンツコンテナであり、ヘッダーとフッターのオプション、多種多様なコンテンツ、文脈上的な背景色、強力な表示用のオプションが組み込まれている。Bootstrap3に精通している場合は、かつてのパネル（Panels）、囲み枠（Wells）、サムネイル（Thumbnails）が、カードに置き換えられる。これらのコンポーネントと同様の機能をカードの修飾子ク...
使い方（How it works） カルーセルは、一連のコンテンツを循環するためのスライドショーで、CSS 3D変換とJavaScriptのビットで構築されている。一連のイメージ、テキスト、カスタムマークアップで動作。また、前後のコントロールとインジケータのサポートも組み込まれている。 パフォーマンス上の理由から、カルーセルはカルーセル・コンストラクタ・メソッドを使用して手動で初期化する必...