Weblasts

Bootstrapその②

Bootstrapの部品

色々な部品が用意されていますがすべてを紹介しきれないのでここでは一部だけ
確認したい場合はURLを紹介した「Documentation」ページのサイドバーにある「component」メニューから紹介ページへ飛べますのでこちらで

button

buttonタグ、inputタグ、aタグにclass属性を付けることによって様々なボタンを利用することができます
基本となるのは「.btn」これを指定すると準備段階で読み込んだcssがタグをボタンとしてある程度装飾してくれます

背景色や文字色は自由につけてもいいですが、
「.btn」と合わせてclass属性をつけるとあらかじめ用意されているものを使うこともできます

上記のコードをプレビューすると以下のようになる

見た目が違うボタンも用意されています
「btn-○○」を「btn-outline-○○」とすることでアウトライン表示のボタンになります

上記のコードを表示すると以下のようになります

ボタンのサイズもある程度調整可能で、やっぱりclass属性を使って指定します
小さいものがいいなら「btn-sm」
大きくしたいなら「btn-lg」
画面いっぱいに広がるものがいいなら「btn-block」
とそれぞれ用意されています

以下のように表示されます
※pタグで囲んで改行するようにしてスクショをとっています

table

表に関する設定も色々あります。これはかなり便利
ルールとして、tableタグに「table」というclass属性を付けます。
これだけである程度の装飾がされた状態の表が出力されます

上記コードを表示してみるとこのように表示されます

ボーダーを付けたい場合は「table-bordered」というclass属性を追加することで実現できます

class属性を追加しただけで簡単にボーダーを追加できます

デフォルトで付いてくる簡単なボーダーをなくしたいときは、「table-borderless」をclass属性に追加します
一切のボーダーがなくなります

上記コードを表示するとこのような形になります

セルの大きさを小さくすることは可能でclass属性に「table-sm」を追加すると実現できます

分かりやすいようにボーダー付きのものに指定してみました
セル内部のpaddingがなくなるようです

色の指定も可能です
やっぱりclass属性を追加することで実現します
参考用のコードではtd要素に指定をしていますが、table要素、tr要素、th要素どこでも指定ができます。
指定する場所によって色が変わる場所を細かく指定できますのでお試しあれ

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種類になります

sample

sample 9

場面幅に収まらない場合はスクロールバーが出てきます tableのセル内で改行をさせない「white-space: nowrap;」と合わせて使うと良いでしょう

hoverしたときに色を変えられるようにするclass属性も用意されています
あまり必要性を感じないのですが紹介だけ
tableにclass属性「table-hover」を追加しましょうこれだけで大丈夫

sample

sample 10

一応画像ではわかりにくいのでページを作ってあります

長くなりすぎたので続くかもしれない