サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
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.
概要 プロジェクトの読み込み状態を表示するために使用することができます。 それらはHTMLとCSSだけで構築されているので、JavaScriptを必要としません。 可視性を切り替える場合は、いくつかのカスタムJavaScriptが必要になります。 外観、配置、サイズは、ユーティリティクラスを使用して簡単にカスタマイズすることができます。 アクセシビリティの観点から、role="status"と入れ子になった<span class="visually-hidden">Loading...</span>を含んでいます。
Starters Functional examples of using Bootstrap in common JS frameworks like Webpack, Parcel, Vite, and more you can edit in StackBlitz.
Bootstrapにはデフォルトでアイコンセットが含まれていませんが、Bootstrapアイコンという独自の包括的なアイコンライブラリがあります。あなたのプロジェクトでは、このアイコンセットや他のアイコンセットを自由にお使いください。Bootstrapアイコンと他の好ましいアイコンセットの詳細を以下に示します。 ほとんどのアイコンセットには複数のファイル形式が含まれていますが、私たちは、アクセシビリティの向上とベクターサポートのために、SVG実装を好みます。 Bootstrapアイコン Bootstrapアイコンは、@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 colspan="2">Larry the Bird</td> <td>@twitter</td>
世界で最も人気のあるフレームワーク 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.0 以前のアルファ版v5.3.0から移行する場合は、このセクションに加えて、その変更点を確認してください。 Helpers カラーリンクに再び!!importantが追加され、新しく追加されたリンクユーティリティとの相性が良くなりました。 Utilities 新しい.d-inline-griddisplayユーティリティが追加されました。 v5.3.0-alpha2 v5.3.0のアルファ版から移行される方は、以下の変更点をご確認ください。 CSS variables 重複したり、使用されていないルートCSS変数を削除しました。 Color modes ダークモードの色は、特定の色合いや色合い(例えば、$blue-300)ではなく、Sassのテーマの色(例えば、$primary)から派生するようになりました。したがって、基本テーマの色をカスタマイズする時、より自動化されたダークモ
基礎知識 Bootstrapのモーダルコンポーネントを使い始める前に、メニューオプションが変更されたので、以下を確認して下さい。 モーダルはHTML、CSS、JavaScriptで構築されます。モーダルはドキュメント内の他のすべてのものの上に配置され、<body>からスクロールを取り除き、モーダルのコンテンツがスクロールするようにします。 モーダルの「背景」をクリックすると、自動的にモーダルが閉じます。 Bootstrapは、一度に1つのモーダルウィンドウしかサポートしていません。ネスト(入れ子)になったモーダルはユーザーエクスペリエンスが低いと考えられるためサポートされていません。 モーダルはposition: fixedを使用します。可能な限り、他の要素との干渉を避けるために、モーダルHTMLをトップレベルの位置に配置してください。別の固定要素の中に.modalを入れ子にすると、問題が
基礎知識 ナビゲーションバーを始める前に知っておきたいことをご紹介します。 レスポンシブに折りたたむために.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の方向が1つであることが、より単純なメンタルモデルであるということです。 デバイスのサ
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
概要 カードは柔軟で拡張ができるコンテナです。headersやfootersのオプション、多様なコンテンツ、背景色、表示オプションが含まれています。 Bootstrap3のpanels、wells、thumbnailsはcardに置きかわります。これらのコンポーネントの機能はcardのクラスとして利用できます。 例 カードは少ないマークアップとスタイルで構築されていますが, 多くのカスタマイズが可能です。Flexboxで構築されているため、簡単に配置ができ、他のコンポーネントと組み合わせ可能です。 デフォルトではmarginの設定がないので, 必要に応じて余白調整ユーティリティを使用します。 以下は,幅が固定されたカードの例です。カードには固定幅がないので, 親要素の幅に広がります。これはサイズ調整オプションでカスタマイズ可能です。
基礎知識 collapse JavaScriptプラグインは、コンテンツの表示と非表示に使用されます。ボタンやアンカーは、トグルする特定の要素にマッピングされたトリガーとして使われます。要素を折りたたむとheightが現在の値から0にアニメーションします。CSSがアニメーションをどのように扱うかを考えると、.collapse要素に`paddingを使うことはできません。代わりに、このクラスを独立したラッピング要素として使用します。
<div class="container text-center"> <div class="row"> <div class="col"> Column </div> <div class="col"> Column </div> <div class="col"> Column </div> </div> </div> 上の例では、定義済みのグリッドクラスを使用して、すべてのデバイスとビューポートに等幅のカラムを3つ作成しています。これらのカラムは親の.containerを中心にしてページの中央に配置されます。 仕組み グリッドシステムを分解すると、以下のようになる: グリッドは6つのレスポンシブ・ブレークポイント をサポートしています。ブレークポイントはmin-widthのメディアクエリに基づいており、そのブレークポイントとその上のすべてのブレークポイントに影響を与えます (例えば
すぐに始める BootstrapのプロダクションレディなCSSとJavaScriptをCDN経由で取り込むことで、ビルドステップを必要とせず、すぐに始められます。Bootstrap CodePenのデモをご覧ください。 プロジェクトの最上位フォルダにindex.htmlファイルを新規作成します。 モバイルデバイスでの適切なレスポンシブ動作のために<meta name="viewport">タグも含めてください。 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> </head> <body> <h1>Hello, worl
BootstrapBootstrap v5.3 (switch to other versions) v5リリース 最新 (5.3.x) v5.0.2 過去のリリース v4.5 全バージョンを見る v5.3の新機能 カラーモード対応、カラーパレットの拡張などなど! Bootstrapで高速で レスポンシブなサイトを構築しよう パワフルで拡張性の高い、機能満載のフロントエンドツールキットです。Sassでビルドしてカスタマイズし、あらかじめ用意されたグリッドシステムとコンポーネントを利用し、強力なJavaScriptプラグインでプロジェクトに命を吹き込むことができます。
ドロップダウンプラグインで、リンクのリストなどを表示するためのコンテキストオーバーレイをトグルします。 Overview ドロップダウンは、トグル可能で、リンクのリストなどを表示するためのコンテキストオーバーレイです。これらは、含まれているBootstrapのドロップダウンJavaScriptプラグインでインタラクティブになります。これらは、ホバリングではなく、クリックで切り替えられます。参考 an intentional design decision. ドロップダウンはサードパーティのライブラリであるPopper.jsを使って構築されており、動的なポジショニングとビューポート検出を提供しています。必ずBootstrapのJavaScriptの前にpopper.min.jsをインクルードするか、Popper.jsを含むbootstrap.bundle.min.js / bootstrap
概要 ドロップダウンは、トグル可能で、リンクのリストなどを表示するためのコンテキストオーバーレイです。これらは、含まれているBootstrapのドロップダウンJavaScriptプラグインでインタラクティブになります。これらは、ホバリングではなく、クリックで切り替えられます。参考 an intentional design decision. ドロップダウンはサードパーティのライブラリであるPopper.jsを使って構築されており、動的なポジショニングとビューポート検出を提供しています。必ずBootstrapのJavaScriptの前にpopper.min.jsをインクルードするか、Popper.jsを含むbootstrap.bundle.min.js / bootstrap.bundle.jsを使用してください。Popper.jsは動的な配置は必要ないので、ナビゲーションバーのドロップダ
このページを最初にブックマークしてみませんか?
『Bootstrap · 世界で最も人気のあるフロントエンドのコンポーネントライブラリ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く