Bootstrapにおけるborderの使い方とは？borderの色・追加・削除・丸み
- PM
- borderとは枠線のことを指します。実際のコードを見て理解を深めていきましょう。
目次
Bootstrapにおけるborderの使い方とは？
今回は、Bootstrapにおけるborderの使い方について説明します。borderとは枠線のことです。
枠線に色を付けたり、特定の部分だけ枠線を付けたり、特定の部分だけ枠線を消したりできます。また、枠線に丸みをつけることもできます。
Bootstrapにおけるborderの使い方に興味のある方はぜひご覧ください。
borderの色
Bootstrapでは、borderの色を変更できます。
border-primaryやborder-secondaryのように指定します。
|
1 2 3 4 5 6 7 8 9 |
<div class="container" style="background:#eeeeee;"><br> <div class="border border-primary" style="padding:5px;">border-primary</div><br> <div class="border border-secondary" style="padding:5px;">border-secondary</div><br> <div class="border border-danger" style="padding:5px;">border-danger</div><br> <div class="border border-warning" style="padding:5px;">border-warning</div><br> <div class="border border-info" style="padding:5px;">border-info</div><br> <div class="border border-light" style="padding:5px;">border-light</div><br> <div class="border border-dark" style="padding:5px;">border-dark</div><br> <div class="border border-white" style="padding:5px;">border-white</div> |
See the Pen
bootstrap_border1 by kskumd (@kskumd)
on CodePen.
このように、Bootstrapではborderの色を変更できます。
borderの追加
Bootstrapでは、特定部分にborderを追加できます。
|
1 2 3 4 5 6 7 |
<div class="border border-primary" style="padding:5px;">border</div><br> <div class="border-top border-primary" style="padding:5px;">border-top</div><br> <div class="border-right border-primary" style="padding:5px;">border-right</div><br> <div class="border-bottom border-primary" style="padding:5px;">border-bottom</div><br> <div class="border-left border-primary" style="padding:5px;">border-left</div><br> <div class="border-left border-right border-primary" style="padding:5px;">border-left & border-right</div><br> <div class="border-top border-bottom border-primary" style="padding:5px;">border-top & border-bottom</div><br> |
See the Pen
bootstrap_border2 by kskumd (@kskumd)
on CodePen.
このように、Bootstrapでは特定部分にborderを追加できます。
borderの削除
Bootstrapでは、特定部分からborderを削除できます。
|
1 2 3 4 5 |
<div class="border border-0 border-primary" style="padding:5px;">border-0</div><br> <div class="border border-top-0 border-primary" style="padding:5px;">border-top-0</div><br> <div class="border border-right-0 border-primary" style="padding:5px;">border-right-0</div><br> <div class="border border-bottom-0 border-primary" style="padding:5px;">border-bottom-0</div><br> <div class="border border-left-0 border-primary" style="padding:5px;">border-left-0</div><br> |
See the Pen
bootstrap_border3 by kskumd (@kskumd)
on CodePen.
このように、Bootstrapでは特定部分からborderを削除できます。
borderの丸み
Bootstrapでは、borderの丸みを指定できます。
|
1 2 3 4 5 6 7 8 |
<div class="border border-primary rounded" style="padding:5px;">rounded</div><br> <div class="border border-primary rounded-top" style="padding:5px;">rounded-top</div><br> <div class="border border-primary rounded-right" style="padding:5px;">rounded-right</div><br> <div class="border border-primary rounded-bottom" style="padding:5px;">rounded-bottom</div><br> <div class="border border-primary rounded-left" style="padding:5px;">rounded-left</div><br> <div class="border border-primary rounded-circle" style="padding:5px;">rounded-circle</div><br> <div class="border border-primary rounded-pill" style="padding:5px;">rounded-pill</div><br> <div class="border border-primary rounded-0" style="padding:5px;">rounded-0</div><br> |
See the Pen
bootstrap_border4 by kskumd (@kskumd)
on CodePen.
このように、Bootstrapではborderの丸みを指定できます。
- SE
- 色の他に枠線を尽かしたり削除したりできる機能なんですね。
- PM
- 枠線自体の形を変えることもできますので、ぜひマスターしてください。
まとめ
いかがでしたでしょうか。今回は、Bootstrapにおけるborderの使い方について説明しました。borderとは枠線のことです。
枠線に色を付けたり、特定の部分だけ枠線を付けたり、特定の部分だけ枠線を消したりできます。また、枠線に丸みをつけることもできます。
ぜひご自身でソースコードを書いて、理解を深めてください。
