Bootstrap初期学習メモ

##グリッド
#####横幅を12分割として簡単に要素の幅を指定できる
col-[画面サイズ]-[カラム数]

	col-xs-数	col-sm-数	col-md-数	col-lg-数
ウィンドウ幅	〜767px	〜991px	〜1199px	1200px〜

#####要素同士の隙間を開ける場合
col-[画面サイズ]-offset-[カラム数]

記入例

<div class="row">
  <div class="col-sm-5">col-sm-5</div>
  <div class="col-sm-offset-2 col-sm-5">col-sm-5</div>
</div>

#####メディアクエリ
メディアクエリを使うと特定の表示環境に対してだけCSSを適用。
下記の記述でウィンドウを大きくしたり小さくしたりするだけで背景の色が変わる。

記入例

body { background-color: #000; }
/* ウインドウ幅500px以上の時に適用されるスタイル */
@media (min-width: 500px) { body { background-color: #f00; } }
/* ウインドウ幅750px以上の時に適用されるスタイル */
@media (min-width: 750px) { body { background-color: #0f0; } }
/* ウインドウ幅1000px以上の時に適用されるスタイル */
@media (min-width: 1000px) { body { background-color: #00f; } }

#####レスポンシブデザイン
多様な画面サイズに適応するよう配慮しながらページを制作する手法
基本的にモバイル向けのレイアウト優先で制作する

##Bootstrapの書き方
#####テーブル
<table> + class="table"

<table　class="table"></table> を記述

記入例

<table class="table">
  <tr>
    <th class="text-center">A</th>
    <th class="text-center">B</th>
    <th class="text-center">C</th>
  </tr>
  <tr>
    <td class="text-center">A-1</td>
    <td class="text-center">B-1</td>
    <td class="text-center">C-1</td>
  </tr>
  <tr>
    <td class="text-center">A-2</td>
    <td class="text-center">B-2</td>
    <td class="text-center">C-2</td>
  </tr>
  <tr>
    <td class="text-center">A-3</td>
    <td class="text-center">B-3</td>
    <td class="text-center">C-3</td>
  </tr>
</table>

【表示】

・テーブルの見た目変更

<table　class="table ※"></table>　※部分に記入

クラス	効果
table-striped	行ごとに背景色が交互に変わる
table-bordered	各セルに枠が付く
table-hover	マウスを乗せると行がハイライトされる
table-condensed	余白を詰めてコンパクトに

#####かっこいいフォーム
<input> + form-control

<input type="text" class="form-control"> を記述

記入例

<form>
  氏名<input type="text" class="form-control">
</form>

【表示】

・複数の要素をグリット用のクラスで配置を整えるには（グリットについては上記参照）

<form> + form-horizontal

<form class="form-horizontal"></form> で囲う

#####アクセサリをつける方法

親要素<div class="input-group"></div>で囲って<span class="input-group-addon"></span>を使う

記入例

<form>
  郵便番号
  <div class="input-group">
    <span class="input-group-addon">〒</span>
    <input type="text" class="form-control" placeholder="000-0000">
  </div>
</form>

【表示】

#####Bootstrap風の見た目のボタン
<button class="btn btn-default" type="submit"></button> を記述

記入例

<button class="btn btn-default" type="submit">buttonボタン</button>

【表示】

・<button class="btn ※" type="submit"></button> ※に別の記述を入れるとボタンの見た目変更可能

btn btn-default　（白）, btn btn-primary （青）, btn btn-success （緑）, btn btn-info （水色）, btn btn-warning （橙）, btn btn-danger （赤）

#####アイコンを使う

classを指定する　例　<span class="※"></span>
※にリンク先のアイコンしたにある名前をコピペでOK
https://getbootstrap.com/docs/3.3/components/#glyphicons

記入例

<button type="button" class="btn btn-default">
  <span class="glyphicon glyphicon-off"></span>
  起動
</button>

【表示】

#####ドロップダウン

記入例

<div class="dropdown">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    select<span class="caret"></span>
  </button>

  <ul class="dropdown-menu">
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">C</a></li>
  </ul>
</div>

【表示】

#####タブ

記入例

<ul class="nav nav-tabs">
  <li class="active"><a href="#">A</a></li>
  <li><a href="#">B</a></li>
  <li><a href="#">C</a></li>
</ul>

【表示】

#####ナビゲーションバー
サイトの上部につくメニュー。長いのでカリキュラム参照

#####ラベル
テキストの装飾

記入例

<span class="label label-default">A</span>
<span class="label label-primary">B</span>
<span class="label label-success">C</span>
<span class="label label-info">D</span>
<span class="label label-warning">E</span>
<span class="label label-danger">F</span>

【表示】

#####バッジ

新着通知の件数などを表示

記入例

<button class="btn btn-success" type="button">
  新着情報 <span class="badge">2</span>
</button>

【表示】

#####アラート

記入例

<div class="alert alert-success" role="alert">新着情報があります</div>

【表示】

#####パネル
情報のグループ化

記入例

<div class="panel panel-info">
  <div class="panel-heading">
    <h3 class="panel-title">新着情報</h3>
  </div>
  <div class="panel-body">
    <ul class="list-unstyled">
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
    </ul>
  </div>
</div>

【表示】

##他
#####スクロールスパイ

コンテンツのスクロールに合わせてナビゲーションメニューのハイライトを変更してくれる機能
長いのでカリキュラム参照

#####画像を簡単にフィットするように加工可能

##機能一覧
https://getbootstrap.com/docs/3.3/components/

Bootstrapはカスタマイズも可能
https://getbootstrap.com/docs/3.4/customize/