3
Help us understand the problem. What are the problem?

posted at

updated at

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

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
3
Help us understand the problem. What are the problem?