Bootstrap 基礎知識・基礎コード

本記事の内容

Bootstapについて最低限の理解を得るために必要な知識、および簡単なコード例を記載します

なお、各リンクは以下の公式ドキュメント該当箇所につなげているので、ぜひそちらも参考にしてください

基礎コード

両端に余白を作り要素を中央にまとめる

<div class = "container">

要素を両端に配置する

<div class="row">
 <div class="col-sm-6">
  ~~~
 </div>
 <div class="col-sm-6 text-right">
  ~~~~
 </div>
</div>

• class属性が付与できるものであればなんでもいい（formタグとか）
• class="row"の中にclass="col~~"を記述することは絶対条件

グリッドを用いた中央寄せ

<div class="col-sm-8 offset-sm-2">

• まずoffsetで2column埋めて、その後8column分の要素を配置する
• 残りの2columnは自動で埋め合わせてくれるので2+8+2=12で要素が中央配置になる

ドロップダウンリスト

　　　　　　<div class="form-group">
            <label for="job">ご職業</label>
            <select id="job" name="job" class="form-control">
              <option value="">選択してください</option>
              <option value="会社員">会社員</option>
              <option value="学生">学生</option>
              <option value="その他">その他</option>
            </select>
           </div>

＊リンク先はver5.0で記述に変更がある。以下はver4.5

• inputではなく <select id="" name="" class=""　...>
• 項目の追加は　<option value="">〇〇</option>
• valueはバックとの兼ね合い
• ポイントは最初のoptionを「選択してください」にしてvalueを空にしているところ
• 「その他」も必ず入れること

チェックボックス

<div class="form-check">
  <input type="checkbox" name="q1" id="q1_1" value="CityPop" class="form-check-input">
  <label for="q1_1">CityPop</label>
</div>

• これで一項目
• 項目を増やす場合はlabelをコピペしていく
• 注意するのは、項目ごとにidとvalueを変えること
• inputにid,classをつけて該当項目にlabelを付与すると、文字列にもタッチ判定ができてアクセシビリティが高くなる（チェックボックスに限らず）
• 複数選択に強い！

ラジオボタン

<div class="form-check">
  <input type="radio" name="q2" id="q2_1" value="1" class="form-check-input">
  <label for="q2_1">理解できなかった</label>
</div>

• チェックボックスと大体同じ
• 違うのはinputのtypeとvalue
  -　単一選択に強い！（ラジオは停止ボタンを押すと、自動的に再生ボタンの選択が解除されるから、ラジオボタンって名前になってる）

縦並び・横並び (コード例は横並び)

<label class="d-block">〇〇</label>
 <div class="form-check from-check-inline">
 　△△
 </div>

• 縦並びはstacked(=block) (ボタン系)
• 横並びはinline（ラベルとか）
• どちらもclassで指定する（d-block,inline）
• どの要素もデフォルトでどっちか決まっている。
• ラベルの下のボタンをinline要素にしたいとき、そのままボタンをinlineにしてしまうと、ラベルとくっついてしまう。
  • したがって、ラベルをブロック要素にしてからボタンをinlineにする

テキストエリア

<div class="form-group">
   <label for="message">その他ご意見があればご自由にご記入ください</label>
   <textarea name="message" id="message" cols="30" rows="10" class="form-control"></textarea>
</div>

• 高さも幅も、form-controlをクラス指定すれば自動でやってくれる

• rows=高さ

• cols＝横幅

• しかしcolsはBootstrapの機能,form-controlでrowsもcolsも自動設定してくれるので正直なくても大丈夫

ボタン

<button type="submit" class="btn btn-primary">送信する</button>

• btnだけだと白色でわかりづらい
• btn-primaryはボタンの役割を指定している
• btn-primaryで役割指定するのが大切
• 色はカスタマイズで変えれるから

バッジ

<label for="name">お名前 <span class="badge badge-danger">必須</span></label>

• Badgeクラスで対応
• HTMLでやってたspanタグによる必須アピールみたいなもの
• 役割指定もボタンと同じ

必須入力

<input required>

• inout内にrequired属性を付与するだけ
• バッジと組み合わせるとGood

基礎知識

normalize.css標準装備

• したがって、sanitize.cssは不要

Container

• この指定したクラスが持つ要素は、全てconteiner が適用され、ブレイクポイントごとで自動にレイアウトを整えてくれる。
  • conteiner-sm,-me のように指定することで、ブレイクポイントを調整できる
• container の中身の一部分だけを例外適用することはできない
  • header,footerと中身のコンテンツで幅が違うことはよく目にすると思う。そういう時のために container は分けて使用するのが一般的

グリッドシステム

• 1行の中で、要素をどこにどのくらいの幅で配置したいのかを決めれる（要素の長さを短くしたり、両端配置ができる）
• そもそもブートストラップは、1行を12個のカラムに分割してある。
• col = column , sm = small(containerと同じ認識)
• col-sm-6やcol-lg-9は併存できる＝複数のクラス指定可能
• 標準で左寄せなので、Text-Alignmentを使う

オフセット

• カラムの個数を調整して、要素を中央配置にしたい時に有効
• offset＝埋め合わせ