作業が捗る!必殺Bootstrapクラス一覧!!
どうもです!銀太です!
趣味がプロバスケットボールリーグのNBA観戦なのですが、最近シリーズが開幕したので最高に気分が上がってます!
我等が男子バスケボール日本代表八村塁もNBAのリーグで奮闘してますので、
皆さん良ければ応援して下さい!
さて余談は置いといて前回Bootstrapに関する記事「Bootstrapを簡単に説明してみる!導入方法、使い方など!」を
書いたので今回はBootstarpの便利なクラスをご紹介してこうと思います!
text-align テキストの左・中央寄せ・右寄せ
<div class="container>
<h1 class="text-left">左寄せ</h1>
<h1 class="text-center">中央寄せ</h1>
<h1 class="text-right">右寄せ</h1>
</div>
上記のコードのようにクラスを指定してもらえれば下記の写真のようにcssの指定なくテキストが寄ってくれます!!
text-leftクラスで左寄せ、text-centerクラスで中央寄せ、text-rightクラスで右寄せになります!
コンテンツの中央寄せ
<div class="container">
<div class="mx-auto" style="width: 200px; backgroud-color: #eee;">
<h1>中央寄せ</h1>
</div>
</div>
上記のコードのように”mx-auto“クラスを指定してもらえれば下記の写真のようにcssの指定なくコンテンツが寄ってくれます!!
これでコンテンツを中央に寄せることが出来ます!!
width 横幅
<div class="container">
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
</div>
上記のコードのようにクラスを指定してもらえれば下記の写真のようにcssの指定なく横幅が指定出来ます!!
w-25でwidth25%、w-50でwidth50%、w-75でwidth75%、w-100でwidth100%の指定が出来ます!
height 高さ
<div class="container">
<div class="h-25 d-inline-block" style="width: 120px background-color: rgba(0,0,255,.1)">Height 25%</div>
<div class="h-50 d-inline-block" style="width: 120px background-color: rgba(0,0,255,.1)">Height 50%</div>
<div class="h-75 d-inline-block" style="width: 120px background-color: rgba(0,0,255,.1)">Height 75%</div>
<div class="h-100 d-inline-block" style="width: 120px background-color: rgba(0,0,255,.1)">Height 100%</div>
</div>
上記のコードのようにクラスを指定してもらえれば下記の写真のようにcssの指定なく縦幅が指定出来ます!!
h-25でheight25%、h-50でheight50%、h-75でheight75%、h-100でheight100%の指定が出来ます!
終わりに
今回はBootstrapのクラスを簡単に紹介させてもらいました!!
クラスを指定するだけなのでかなり簡単にcssの指定が出来るのでかなり作業が捗るかと思います!
他にも沢山Bootstrapのクラスがあるのでまた記事に出来ればと思っています!
それでは皆さん良い1日を!!