<bootstrap>ボタンにまつわるエトセトラ

(特に何書くか決めてないけど書きたいからってのりで書き始めた)
(深夜テンションなので変なところがあってもお許しを)

bootstrapを使うときの備忘録(ちょいちょいこういうエントリが続く気がします)

bootstrapでのボタン

なんでこれ書いてるか

• bootstrapを使うことがあるから
  • bootstrap4系の日本語のリファレンス少ないから

//リファレンスと言えるほどの内容はないです

buttonでできるデザイン

about

bootstrapでボタンを整形するときはbuttonタグのclassにbtn,btn-$Button_typeをつけるとできます。
ホバーするとグレーになります。
$Button_typeの名称と背景色は以下の表の通りです。

$Button_type	色
primary	青
secondary	グレー
success	緑
danger	赤
Warning	黄
info	水(黒目)
Dark	黒
link	白

サンプルコード

<button class="btn btn-primary">button sample</button>

実際の画像

このあとのサンプルですべてのボタンの色を順に使っていきます。

aタグ inputタグでの利用

aタグやinputタグでも同じようなボタンを作れます

<a href="#" class="btn btn-secondary">a tag sample</a>
<input type="button" class="btn btn-success" value="input tag sample">

outlineの表示

枠線の色を変更して表示することも可能
classをbtn-outline-$Button_typeでアウトラインの表示になります。

<button class="btn btn-outline-danger">button sample</button>

サイズの変更

classにbtn-lgと書くと大型化、btn-smとかくと小型化が可能

<button class="btn btn-warning btn-lg">button sample</button>
<button class="btn btn-info">button sample</button>
<button class="btn btn-dark btn-sm">button sample</button>

classにbtn-blockをつけるとその要素内で最大の横幅を使ってbuttonを作れます。

<!--画面を2分割したときのそれぞれのフルの横幅にbuttonを生成-->
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <button class="btn btn-link btn-block">block sample</button>
    </div>
    <div class="col-md-6">
       <button class="btn btn-primary btn-block">block sample</button>
     </div>
   </div>
</div>

ボタンの有効、無効化

ボタンを有効化するときはclassにactive, aria-pressed="true" を記載する必要があります。デフォルトでactiveなのでどうしても明示する必要があるときでもなければ使うことはないと思います。そのかわり、無効化は使うことがある気がします。

<!--有効化-->
<button class="btn btn-secondary active" aria-pressed="true">active sample</button>
<!--無効化-->
<button class="btn btn-secondary" disabled>disable sample</button>

同じボタンのタイプ(secondary)を使っていますが2つめのボタンが無効化されて色が変わっています。

ボタンのグループ化

radioボタンとかの複数から選ぶやつをボタンの見た目にすることも可能です。
そのときは複数のボタンを一つの塊にして表示することが可能です。

<div class="btn-group btn-group-toggle" data-toggle="button">
  <label class="btn btn-success active">
    <input type="radio" name="option" id="op1" autocomplete="off" ckecked>option1
  </label>
  <label class="btn btn-success">
    <input type="radio" name="option" id="op2" autocomplete="off">option2
  </label>
  <label class="btn btn-success">
    <input type="radio" name="option" id="op3" autocomplete="off">option3
  </label>
</div>

参考資料
getbootstrap.com