はてなブックマーク

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には、アイコンを必要とするも

基礎知識 ナビゲーションバーを始める前に知っておきたいことをご紹介します。 レスポンシブに折りたたむために.navbarを.navbar-expand{-sm|md|-lg|-xl|-xxl}`でラッピングする必要があり、配色クラスも必要です。 ナビゲーションバーとコンテンツはデフォルトでは流動的です。コンテナを変更することで、横幅をさまざまな方法で制限することができます。 ナビゲーションバー内の間隔と配置を制御するには、spacingとflexを利用します。 デフォルトではレスポンシブになっていますが、簡単に変更することができます。レスポンシブな動作はCollapse JavaScriptプラグインに依存します。 <nav>要素を使用してアクセシビリティを確保するか、<div>のようなより汎用的な要素を使用する場合は、role="navigation"をすべてのナビゲーションバーに追加し

概要 カードは柔軟で拡張ができるコンテナです。headersやfootersのオプション、多様なコンテンツ、背景色、表示オプションが含まれています。 Bootstrap3のpanels、wells、thumbnailsはcardに置きかわります。これらのコンポーネントの機能はcardのクラスとして利用できます。 例 カードは少ないマークアップとスタイルで構築されていますが, 多くのカスタマイズが可能です。Flexboxで構築されているため、簡単に配置ができ、他のコンポーネントと組み合わせ可能です。 デフォルトではmarginの設定がないので, 必要に応じて余白調整ユーティリティを使用します。 以下は,幅が固定されたカードの例です。カードには固定幅がないので, 親要素の幅に広がります。これはサイズ調整オプションでカスタマイズ可能です。

基礎知識 collapse JavaScriptプラグインは、コンテンツの表示と非表示に使用されます。ボタンやアンカーは、トグルする特定の要素にマッピングされたトリガーとして使われます。要素を折りたたむとheightが現在の値から0にアニメーションします。CSSがアニメーションをどのように扱うかを考えると、.collapse要素に`paddingを使うことはできません。代わりに、このクラスを独立したラッピング要素として使用します。

概要 ドロップダウンは、トグル可能で、リンクのリストなどを表示するためのコンテキストオーバーレイです。これらは、含まれているBootstrapのドロップダウンJavaScriptプラグインでインタラクティブになります。これらは、ホバリングではなく、クリックで切り替えられます。参考 an intentional design decision. ドロップダウンはサードパーティのライブラリであるPopper.jsを使って構築されており、動的なポジショニングとビューポート検出を提供しています。必ずBootstrapのJavaScriptの前にpopper.min.jsをインクルードするか、Popper.jsを含むbootstrap.bundle.min.js / bootstrap.bundle.jsを使用してください。Popper.jsは動的な配置は必要ないので、ナビゲーションバーのドロップダ