Bootstrapその②
Bootstrapの部品
色々な部品が用意されていますがすべてを紹介しきれないのでここでは一部だけ
確認したい場合はURLを紹介した「Documentation」ページのサイドバーにある「component」メニューから紹介ページへ飛べますのでこちらで
buttonタグ、inputタグ、aタグにclass属性を付けることによって様々なボタンを利用することができます
基本となるのは「.btn」これを指定すると準備段階で読み込んだcssがタグをボタンとしてある程度装飾してくれます
|
1 |
<button class="btn">Button</button> |
背景色や文字色は自由につけてもいいですが、
「.btn」と合わせてclass属性をつけるとあらかじめ用意されているものを使うこともできます
|
1 2 3 4 5 6 7 8 9 10 |
<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button> |
上記のコードをプレビューすると以下のようになる
見た目が違うボタンも用意されています
「btn-○○」を「btn-outline-○○」とすることでアウトライン表示のボタンになります
|
1 2 3 4 5 6 7 8 |
<button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-light">Light</button> <button type="button" class="btn btn-outline-dark">Dark</button> |
上記のコードを表示すると以下のようになります
ボタンのサイズもある程度調整可能で、やっぱりclass属性を使って指定します
小さいものがいいなら「btn-sm」
大きくしたいなら「btn-lg」
画面いっぱいに広がるものがいいなら「btn-block」
とそれぞれ用意されています
|
1 2 3 |
<button class="btn btn-outline-primary btn-sm">小さい</button> <button class="btn btn-outline-primary btn-lg">大きい</button> <button class="btn btn-outline-primary btn-block">幅いっぱい</button> |
以下のように表示されます
※ｐタグで囲んで改行するようにしてスクショをとっています
table
表に関する設定も色々あります。これはかなり便利
ルールとして、tableタグに「table」というclass属性を付けます。
これだけである程度の装飾がされた状態の表が出力されます
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<div class="container-fluid"> <table class="table"> <tr> <th>#</th> <th>名前</th> <th>メールアドレス</th> <th>電話番号</th> </tr> <tr> <th scope="row">1</th> <td>田中 太郎</td> <td>tanakai@example.com</td> <td>09011112222</td> </tr> <tr> <th scope="row">2</th> <td>木村 次郎</td> <td>kimura@example.com</td> <td>09033334444</td> </tr> <tr> <th scope="row">3</th> <td>宇治田 花子</td> <td>ujita@example.com</td> <td>09055556666</td> </tr> </table> </div> |
上記コードを表示してみるとこのように表示されます
ボーダーを付けたい場合は「table-bordered」というclass属性を追加することで実現できます
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<div class="container-fluid"> <table class="table table-bordered"> <tr> <th>#</th> <th>名前</th> <th>メールアドレス</th> <th>電話番号</th> </tr> <tr> <th scope="row">1</th> <td>田中 太郎</td> <td>tanakai@example.com</td> <td>09011112222</td> </tr> <tr> <th scope="row">2</th> <td>木村 次郎</td> <td>kimura@example.com</td> <td>09033334444</td> </tr> <tr> <th scope="row">3</th> <td>宇治田 花子</td> <td>ujita@example.com</td> <td>09055556666</td> </tr> </table> </div> |
class属性を追加しただけで簡単にボーダーを追加できます
デフォルトで付いてくる簡単なボーダーをなくしたいときは、「table-borderless」をclass属性に追加します
一切のボーダーがなくなります
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<div class="container-fluid"> <table class="table table-borderless"> <tr> <th>#</th> <th>名前</th> <th>メールアドレス</th> <th>電話番号</th> </tr> <tr> <th scope="row">1</th> <td>田中 太郎</td> <td>tanakai@example.com</td> <td>09011112222</td> </tr> <tr> <th scope="row">2</th> <td>木村 次郎</td> <td>kimura@example.com</td> <td>09033334444</td> </tr> <tr> <th scope="row">3</th> <td>宇治田 花子</td> <td>ujita@example.com</td> <td>09055556666</td> </tr> </table> </div> |
上記コードを表示するとこのような形になります
セルの大きさを小さくすることは可能でclass属性に「table-sm」を追加すると実現できます
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<div class="container-fluid"> <table class="table table-bordered table-sm"> <tr> <th>#</th> <th>名前</th> <th>メールアドレス</th> <th>電話番号</th> </tr> <tr> <th scope="row">1</th> <td>田中 太郎</td> <td>tanakai@example.com</td> <td>09011112222</td> </tr> <tr> <th scope="row">2</th> <td>木村 次郎</td> <td>kimura@example.com</td> <td>09033334444</td> </tr> <tr> <th scope="row">3</th> <td>宇治田 花子</td> <td>ujita@example.com</td> <td>09055556666</td> </tr> </table> </div> |
分かりやすいようにボーダー付きのものに指定してみました
セル内部のpaddingがなくなるようです
色の指定も可能です
やっぱりclass属性を追加することで実現します
参考用のコードではtd要素に指定をしていますが、table要素、tr要素、th要素どこでも指定ができます。
指定する場所によって色が変わる場所を細かく指定できますのでお試しあれ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="container-fluid"> <table class="table table-bordered"> <tr> <td>指定なし</td> <td class="table-active">table-active</td> <td class="table-primary">table-primary</td> <td class="table-secondary">table-secondary</td> <td class="table-success">table-success</td> </tr> <tr> <td class="table-danger">table-danger</td> <td class="table-warning">table-warning</td> <td class="table-info">table-info</td> <td class="table-light">table-light</td> <td class="table-dark">table-dark</td> </tr> </table> </div> |
table要素付ければ全体が、tr要素付ければ行ごとに、th要素・td要素につければセルごとの指定ができますよ
どんな色になるかはコードと画像を確認してください
レスポンシブ対応も可能です
この時に限ってはtableタグにclass属性を付けるのではなく、table要素を囲むようにdiv要素を配置し、そのdiv要素に対してclass属性を付ける形で実現していきます
付けるclass属性は
- 「table-responsive」
- 「table-responsive-sm」
- 「table-responsive-md」
- 「table-responsive-lg」
- 「table-responsive-xl」
の5種類になります
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div class="container"> <div class="table-responsive-md"> <table class="table table-bordered"> <tr> <th>#</th> <th>名前</th> <th>メールアドレス</th> <th>電話番号</th> </tr> <tr> <th scope="row">1</th> <td>田中 太郎</td> <td>tanakai@example.com</td> <td>09011112222</td> </tr> <tr> <th scope="row">2</th> <td>木村 次郎</td> <td>kimura@example.com</td> <td>09033334444</td> </tr> <tr> <th scope="row">3</th> <td>宇治田 花子</td> <td>ujita@example.com</td> <td>09055556666</td> </tr> </table> </div> </div> |
sample
hoverしたときに色を変えられるようにするclass属性も用意されています
あまり必要性を感じないのですが紹介だけ
tableにclass属性「table-hover」を追加しましょうこれだけで大丈夫
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div class="container"> <div class="table-responsive-md"> <table class="table table-bordered table-hover"> <tr> <th>#</th> <th>名前</th> <th>メールアドレス</th> <th>電話番号</th> </tr> <tr> <th scope="row">1</th> <td>田中 太郎</td> <td>tanakai@example.com</td> <td>09011112222</td> </tr> <tr> <th scope="row">2</th> <td>木村 次郎</td> <td>kimura@example.com</td> <td>09033334444</td> </tr> <tr> <th scope="row">3</th> <td>宇治田 花子</td> <td>ujita@example.com</td> <td>09055556666</td> </tr> </table> </div> </div> |
sample
長くなりすぎたので続くかもしれない
