本記事の内容

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＝埋め合わせ

Bootstrap 基礎知識・基礎コード

本記事の内容

基礎コード

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

要素を両端に配置する

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

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

必須入力

基礎知識