サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
GWの過ごし方
getbootstrap.jp
This is a lead paragraph. It stands out from regular paragraphs. You can use the mark tag to highlight text. This line of text is meant to be treated as deleted text. This line of text is meant to be treated as no longer accurate. This line of text is meant to be treated as an addition to the document. This line of text will render as underlined. This line of text is meant to be treated as fine pr
About Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.
Bootstrapは、スタイルとコンポーネントにテーマを設定する広範なカラーシステムによってサポートされています。これにより、あらゆるプロジェクトのより包括的なカスタマイズと拡張が可能になります。 色 Added in v5.3.0 Bootstrapのカラーパレットは、v5.3.0で拡大し、より微妙になり続けています。secondaryおよびtertiaryテキストと背景色、さらにテーマカラーの{color}-bg-subtle、{color}-border-subtle、{color}-text-emphasisの新しい変数を追加しました。これらの新しい色は、SassおよびCSS変数を介して利用できます(ただし、カラーマップやユーティリティクラスではありません)。ライトモードとダークモードのような複数のカラーモードでカスタマイズしやすくするという明確な目標を持っています。これらの新しい
概要 Bootstrap の「スピナー」は、プロジェクトで読み込み状態を表示するために使用できます。HTML と CSS のみで構築されているため、作成に JavaScript は必要ありません。ただし、表示を切り替えるにはカスタム JavaScript が必要です。外観、配置、サイズは、便利なユーティリティクラスで簡単にカスタマイズできます。 アクセシビリティの目的で、ここの各ローダーには role="status" とネストされた <span class="visually-hidden">Loading...</span> が含まれています。
BootstrapBootstrap v5.3 (switch to other versions) v5 releases Latest (5.3.x) v5.0 過去のリリース v4.5 全バージョンを見る
Bootstrap にはデフォルトでアイコンセットが含まれていませんが、Bootstrap Icons という包括的なアイコンライブラリがあります。プロジェクトでこれらや他のアイコンセットを自由に使用してください。以下に Bootstrap Icons およびその他の推奨アイコンセットの詳細を記載しています。 ほとんどのアイコンセットには複数のファイル形式が含まれていますが、アクセシビリティの向上とベクターサポートのため、SVG 実装を好みます。 Bootstrap Icons Bootstrap Icons は、@mdo によって設計され、Bootstrap Team によって保守されている成長中の SVG アイコンライブラリです。このアイコンセットの始まりは、Bootstrap 独自のコンポーネント（フォーム、カルーセルなど）から来ています。Bootstrap はすぐに使えるアイコンの
<table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>John</td> <td>Doe</td> <td>@social</td> </tr> </t
世界で最も人気のあるフレームワーク Bootstrap で始めましょう。CDN とテンプレートを使ってモバイルファーストなサイトを構築できます。 はじめる あなたのプロジェクトに Bootstrap を素早く追加したいですか？無料のオープンソース CDN である jsDelivr をご利用ください。パッケージマネージャを使用していたり、ソースファイルをダウンロードする必要がありますか？ダウンロードページへをご覧ください。 CSS スタイルシート <link> をコピーして、他のスタイルシートの前にある <head> に貼り付けて、CSS を読み込みます。 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384
v5.3.6 依存関係 ドキュメントのビルドをHugoからAstroに移行しました v5.3.0 v5.3.0の以前のアルファリリースから移行する場合は、このセクションに加えてそれらの変更をレビューしてください。 ヘルパー カラーリンクに再び !important が追加され、新しく追加されたリンクユーティリティとより良く連携するようになりました。 ユーティリティ 新しい .d-inline-grid 表示ユーティリティを追加しました。 v5.3.0-alpha2 v5.3.0の以前のアルファリリースから移行する場合は、以下にリストされている変更をレビューしてください。 CSS変数 重複および未使用のルートCSS変数をいくつか削除しました。 カラーモード ダークモードの色は、色固有のティントやシェード（例: $blue-300）ではなく、Sassのテーマカラー（例: $primary）から
仕組み Bootstrap の modal コンポーネントを使い始める前に、メニューオプションが最近変更されたため、以下をお読みください。 Modal は HTML、CSS、JavaScript で構築されています。ドキュメント内の他のすべての要素の上に配置され、<body> からスクロールを削除して、代わりに modal コンテンツがスクロールするようにします。 Modal の「backdrop」をクリックすると、自動的に modal が閉じます。 Bootstrap は一度に1つの modal ウィンドウのみをサポートします。ネストされた modal は、ユーザーエクスペリエンスが悪いと考えているため、サポートしていません。 Modal は position: fixed を使用しており、レンダリングについて少し特殊な場合があります。可能な限り、他の要素からの干渉を避けるために、mod
基礎知識 ナビゲーションバーを始める前に知っておきたいことをご紹介します。 レスポンシブに折りたたむために.navbarを.navbar-expand{-sm|md|-lg|-xl|-xxl}`でラッピングする必要があり、配色クラスも必要です。 ナビゲーションバーとコンテンツはデフォルトでは流動的です。コンテナを変更することで、横幅をさまざまな方法で制限することができます。 ナビゲーションバー内の間隔と配置を制御するには、spacingとflexを利用します。 デフォルトではレスポンシブになっていますが、簡単に変更することができます。レスポンシブな動作はCollapse JavaScriptプラグインに依存します。 <nav>要素を使用してアクセシビリティを確保するか、<div>のようなより汎用的な要素を使用する場合は、role="navigation"をすべてのナビゲーションバーに追加し
アプローチ RebootはNormalizeの上に構築され、要素セレクターのみを使用して、やや独自性のあるスタイルで多くのHTML要素を提供します。追加のスタイリングはクラスでのみ行われます。たとえば、よりシンプルなベースラインのために一部の<table>スタイルをリブートし、後で.table、.table-borderedなどを提供します。 Rebootでオーバーライドするものを選択するためのガイドラインと理由は次のとおりです: スケーラブルなコンポーネント間隔のために、emではなくremを使用するようにブラウザのデフォルト値の一部を更新します。 margin-topを避けます。垂直マージンは崩壊し、予期しない結果をもたらす可能性があります。さらに重要なことに、単一方向のmarginはよりシンプルなメンタルモデルです。 デバイスサイズ全体でのスケーリングを容易にするために、ブロック要素は
Forms 多様なフォームを作成するために, コントロールスタイル, レイアウトオプション, カスタムコンポーネントについてガイドラインと例を示します。 Overview フォームコントロールは our Rebooted form styles で展開します。これらのクラスを使用してカスタマイズされた表示をオプトインし, ブラウザとデバイス間でより一貫性のあるレンダリングを実現します。 入力項目に type 属性を使用してください。(emailや数値情報など) フォームスタイルのクラスやレイアウトのドキュメントをお読みください。 <form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="e
サンプル フレームワークの部品の使用例や, コンポーネントのカスタマイズ例などの幅広いサンプルを使って, すぐにプロジェクトを始められます。 ソースコードをダウンロード Custom components Bootstrap を始めるのに役立つ, 使い方のベストプラクティスを示した最新のコンポーネントおよびテンプレートです。
Bootstrap テーマ Sass 変数を使って, 簡単なテーマやコンポーネントの変更して Bootstrap をカスタマイズします。 イントロダクション Bootstrap 3 では, LESS, カスタム CSS および dist ファイルに含まれていたテーマ用スタイルシートの変数を上書きすることによってテーマを設定していました。Bootstrap 4 は Bootstrap 3 とは少し異なるアプローチで使い慣れた方法を提供します。 Bootstrap 4 は Sass 変数, Sass マップおよびカスタム CSS によってテーマを設定します。テーマ専用のスタイルシートはありません。代わりに, 組み込みのテーマでグラデーションやシャドウを追加することができます。 Sass Sass のソースファイルで, 変数, マップ, ミックスインなどを活用してください。 ファイル構造 Boo
概要 cardは、柔軟で拡張可能なコンテンツコンテナです。ヘッダーとフッターのオプション、さまざまなコンテンツ、コンテキストに応じた背景色、強力な表示オプションが含まれています。Bootstrap 3に慣れている場合、cardは古いpanel、well、thumbnailに代わるものです。これらのコンポーネントと同様の機能は、cardのモディファイアクラスとして利用できます。 例 cardは、可能な限り少ないマークアップとスタイルで構築されていますが、それでも多くの制御とカスタマイズを提供できます。flexboxで構築されているため、簡単に配置でき、他のBootstrapコンポーネントとうまく組み合わせることができます。デフォルトでは margin がないため、必要に応じてspacing utilitiesを使用してください。 以下は、混合コンテンツと固定幅を持つ基本的なcardの例です。
動作の仕組み collapse JavaScriptプラグインは、コンテンツの表示と非表示に使用されます。ボタンまたはアンカーがトリガーとして使用され、切り替える特定の要素にマップされます。要素を折りたたむと、height が現在の値から 0 にアニメーション化されます。CSSがアニメーションを処理する方法を考慮すると、.collapse 要素に padding を使用することはできません。代わりに、このクラスを独立したラッパー要素として使用してください。
上記の例では、事前定義されたgrid classesを使用して、すべてのデバイスとビューポートで3つの等幅columnsを作成しています。これらのcolumnsは、親の.containerを使用してページの中央に配置されます。 仕組み gridシステムがどのように組み合わされるかを分解すると、次のようになります： Gridは6つのレスポンシブbreakpointsをサポートしています。 Breakpointsはmin-width media queriesに基づいているため、そのbreakpointとそれより上のすべてに影響します（例：.col-sm-4はsm、md、lg、xl、xxlに適用されます）。これは、各breakpointごとにcontainerとcolumnのサイズと動作を制御できることを意味します。 Containersはコンテンツを中央に配置し、水平方向にパディングします。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-64UC4BEhTGwk3eGpak4nO2jqtl7liTS+juXkSJ2gPAQPmlClQO7s5UgCeR6US48g" crossorigin="anonymous"> </head> <body> <h1>Hello, w
BootstrapBootstrap v5.3 (switch to other versions) v5 releases Latest (5.3.x) v5.0 過去のリリース v4.5 全バージョンを見る Bootstrap 3 & 4のセキュリティアップデートを入手 Bootstrapで高速でレスポンシブなサイトを構築 強力で拡張可能、機能満載のフロントエンドツールキット。Sassで構築とカスタマイズを行い、事前構築されたグリッドシステムとコンポーネントを活用し、強力なJavaScriptプラグインでプロジェクトに命を吹き込みます。
概要 Dropdowns は、リンクなどのリストを表示するための切り替え可能なコンテキストオーバーレイです。これらは、含まれている Bootstrap dropdown JavaScript プラグインによってインタラクティブになります。ホバーではなくクリックによって切り替えられます。これは意図的な設計上の決定です。 Dropdowns は、動的な配置とビューポート検出を提供するサードパーティライブラリ Popper の上に構築されています。Bootstrap の JavaScript の前に popper.min.js を含めるか、Popper を含む bootstrap.bundle.min.js / bootstrap.bundle.js を使用してください。ただし、動的な配置が不要なため、Popper は navbar 内のドロップダウンの配置には使用されません。 アクセシビリティ
ドロップダウンプラグインで、リンクのリストなどを表示するためのコンテキストオーバーレイをトグルします。 Overview ドロップダウンは、トグル可能で、リンクのリストなどを表示するためのコンテキストオーバーレイです。これらは、含まれているBootstrapのドロップダウンJavaScriptプラグインでインタラクティブになります。これらは、ホバリングではなく、クリックで切り替えられます。参考 an intentional design decision. ドロップダウンはサードパーティのライブラリであるPopper.jsを使って構築されており、動的なポジショニングとビューポート検出を提供しています。必ずBootstrapのJavaScriptの前にpopper.min.jsをインクルードするか、Popper.jsを含むbootstrap.bundle.min.js / bootstrap
このページを最初にブックマークしてみませんか？
『Bootstrap · 世界で最も人気のあるフロントエンドのコンポーネントライブラリ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
