BootstrapのBorderユーティリティを使用して境界線をカスタマイズするにはどうすればよいですか？-ブートストラップのチュートリアル-php.cn

BootstrapのBorderユーティリティを使用して境界線をカスタマイズするにはどうすればよいですか？

百草

リリース： 2025-03-12 14:02:13

オリジナル

352 人が閲覧しました

BootstrapのBorderユーティリティを使用して、境界線をカスタマイズする方法

Bootstrapは、HTML要素の境界を簡単にカスタマイズするための包括的なユーティリティクラスのセットを提供します。これらのクラスを使用すると、カスタムCSSを作成する必要なく、境界幅、スタイル、色、半径などの側面を制御できます。基本構造には、要素に1つ以上のクラスを追加することが含まれます。たとえば、段落に境界線を追加するには： <p class="border border-dark"></p> 。これにより、段落に暗い標準幅の境界が追加されます。 borderクラス自体はデフォルトのボーダーを追加し、 border-darkは色を指定します。 Bootstrapは、幅広い定義された色のオプション（例、 border-primary 、 border-secondary 、 border-success 、 border-danger 、 border-warning 、 border-info 、 border-light 、 border-dark 、 border-white ）を提供します。必要に応じて、ヘックスコードまたは有効なCSSカラー値を使用することもできますが、ブートストラップの組み込みオプションに固執する方が一般的に効率的です。さらに、これらのクラスをより複雑なカスタマイズのために組み合わせて、同じ要素に複数のクラスを追加できます。

Bootstrap Borderユーティリティを使用して丸い角を作成できますか？

はい、Bootstrapは丸い角を作成するためのユーティリティクラスを提供します。これのコアクラスはrounded帯びています。要素にrounded帯びていると、デフォルトのボーダーラジウスが適用され、わずかに丸い角が得られます。 Bootstrapは、さまざまなレベルの丸めのバリエーションも提供します。

rounded-top ：上部の角のみを丸くします。
rounded-bottom ：底部の角のみを丸くします。
rounded-left ：左の角のみを丸くします。
rounded-right ：右角のみを丸くします。
rounded-circle ：完全な円を作成します（幅と高さが等しい要素用）。
rounded-pill ： rounded角よりも丸い角でピルの形を作成します。

これらのクラスをBorderクラスと組み合わせて、包括的なスタイリングアプローチをとることができます。たとえば、 <button class="btn btn-primary rounded-pill">Button</button>丸い錠剤型のプライマリボタンを作成します。 border-radiusユーティリティクラスを使用してカスタム半径を指定することもできますが、これにはCSSのより深い理解が必要であり、事前に定義されたクラスを使用するほど簡単ではありません。

ブートストラップのユーティリティを使用して、さまざまなボーダースタイル（固体、破線、点線）を適用する方法

Bootstrapを使用すると、次のクラスを使用してボーダースタイルを変更できます。

border-solid ：これはデフォルトのスタイルであり、固体の境界線を生成します。通常、このクラスは他の国境クラスを使用する場合に暗示されるため、常に明示的に含める必要はありません。
border-dashed ：破線の境界線を作成します。
border-dotted ：点線の境界線を作成します。

これらのクラスは、基本的なborderクラスまたは色固有のクラスと組み合わせて使用されます。例： <div class="border border-danger border-dashed"></div>破線の赤い境界線を作成します。一度に1つのスタイルしか適用できないことを忘れないでください。複数のスタイルクラスを使用すると、最後のクラスのみが適用されます。

境界線の幅と色を制御するブートストラップクラスは何ですか？

ブートストラップは、クラスの組み合わせを使用して境界幅と色を制御します。正確なピクセル値を設定するための直接的な「境界線」クラスはありませんが、以下を使用できます。

border ：これは、デフォルトの境界幅を追加する基本クラスです。色とスタイルを定義するために、他のクラスと組み合わせてよく使用されます。
border-0 ：ボーダーを完全に削除します。
border-top 、 border-right 、 border-bottom 、 border-left ：これらのクラスを使用すると、要素の個々の側面に境界を追加または削除できます。また、これらをborder-top-0などの幅修飾子と組み合わせて、上部の境界線を除去することもできます。
カラークラス：前述のように、Bootstrapは、ボーダーカラーを制御するために、さまざまな色のクラス（例： border-primary border-secondaryなど）を提供します。 borderクラスまたはそのバリエーションの後に、目的のカラークラスを追加するだけです。