※学習時のメモです。
Bootstrapとは
HTML、CSS、JavaScriptからなる巨大なライブラリ（コード集）
twitterのような見た目のサイトを作る為の部品が多い
Bootstrap4の利用には、jQueryとpopper.jsを利用する
* Bootstrapの読込み
CDNを使う：Bootstrapなどの公開ライブラリを自由に使えるよう、Web上に設置(ホスティング)してくれるサービス
Bootstrapの「Quick start」ならびに「Starter template」のサンプルコードをコピーして使う。ただし lang="en" を lang="ja" にする
〔Bootstrap Template〕
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS, then Font Awesome -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
</body>
</html>
* viewportの設定
スマホ対応の為に設定する
viewport：スマホ、PC画面の表示領域。head要素内のmetaタグで指定。
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
↑Bootstrapのテンプレに記載されたコードの意味👇
・表示領域の横幅をデバイスと同じ横幅にする
（width=device-width)
・表示倍率を1倍にする（initial-scale=1）
・iOSのSafariで表示倍率を自動的に縮小を無効化（shrink-to-fit=no）
●レスポンシブデザイン：多様な画面サイズに適応する様に配慮しながらページを作成する手法
基本はメディアクエリ：特定の表示環境に対してだけCSSを適用
※CSSの優先順位には影響しない為、上方に広い条件、下方に狭い条件を記述
表示内容が切り替わるサイズ幅👉ブレイクポイント
●グリッドシステム：横幅全体が12カラム(列)で構成、横幅に割り当てるカラム数を指定し、要素を配置していく
(使い方)
①グリッドを使う範囲を囲うブロック要素にcontainerクラスをつける。
②containerのブロック中にブロック要素のrowクラスを用意
③rowの中に要素を配置し、カラム数を設定
・カラム数の指定：col-[画面サイズ]-[カラム数]
<div class="container">
<div class="row">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
</div>
col-md-6 👉 ｳｲﾝﾄﾞｳ幅がmd(ﾀﾌﾞﾚｯﾄ=768px)以上の時に6ｶﾗﾑ分を使用、それ未満は通常のdivの挙動で横幅100％
col- ：～575px スマホ縦
col-sm- ：576～767px スマホ横
col-md-* ：768～991px タブレット
col-lg-* ：992～1199px デスクトップPC
※異なるサイズを同時に指定すると、サイズが大きいものが優先される。col-6 col-lg-4と指定→スマホとタブレットでは6カラム、デスクトップでは4カラム幅になる。
・隙間を空ける
offset-[画面サイズ]-[カラム数]
<div class="offset-md-2 col-md-5">offset-md-2 col-md-5</div>
●Bootstrap
HTMLの見た目をBootstrapのようにキレイにするには、基本的にclassを指定する
・<table>要素(表)にclass="table"をつけるだけで見栄えが良くなる
他にも…
table-striped:行ごとに背景色が交互に変わる
table-borderd:各セルに枠がつく
table-hover:マウスを乗せると行がハイライトされる
table-sm:余白を詰めてコンパクトに
∴class属性を複数指定も可
<table class="table table-striped…">
・< input>要素にform-controlクラスを付けるだけで、かっこよくなる。
また、各要素をブロックレベル要素で囲み、`form-groupクラス追加で、要素間に余白が入る形でフォーム部品が配置される。
<form>
<div class="form-group">
お名前
<input type="text" class="form-control">
</div>
</form>
・横に並べる：Bootstrapでは通常、フォームの各要素は横幅100%で表示され、縦に並ぶ。要素の左右にラベル（ 要素）を配置したい場合、グリッドのところで説明したrowやcol-*-*クラスを利用する
ラベルにはcol-form-labelクラスを追加
・アクセサリをつける
①アクセサリをつけたい部品の親要素にinput-groupクラスをつける
②アクセサリをつけたい要素自身にもクラスを付与
input-group-prependで左端(要素の前)、
input-group-appendで右端(要素の後ろ)にアクセサリ追加
アクセサリに表示したい文字列は要素で囲い、input-group-textクラスを追加
<form>
郵便番号
<div class="form-group input-group">
<!-- 左端につけるアクセサリ -->
<div class="input-group-prepend">
<span class="input-group-text">〒</span>
</div>
<input type="text" class="form-control" placeholder="000-0000">
</div>
</form>
・ボタン
(< a>< button>< input>)を、Bootstrap風の見た目のボタンに変更
btnおよびbtn-[色の種類]クラスを追加
<a href="#" class="btn btn-primary">aボタン</a>
<input type="submit" class="btn btn-primary" value="inputボタン">
<button class="btn btn-primary" type="submit">buttonボタン</button>
btn-blockクラス追加で、指定カラム数の幅に対して100％幅表示
<div class="row">
<div class="col-8">xxx</div>
<div class="col-4">
<button type="button" class="btn btn-primary btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-block">Block level button</button>
</div>
</div>
・ドロップダウンメニュー
親要素< div>にdropdown-menu、子要素< a>にdropdown-itemクラスを追加(ul、liは使わない)
<div class="dropdown">
<button type="button" class="btn btn-light dropdown-toggle"data-toggle="dropdown">
操作
</button>
<!-- 選択肢 -->
<div class="dropdown-menu">
<a class="dropdown-item" href="#">返信</a>
<a class="dropdown-item" href="#">転送</a>
<div class="dropdown-divider"></div> <!--区切り線？-->
<a class="dropdown-item" href="#">削除</a>
</div>
</div>
・タブを使ったナビゲーション
複数コンテンツを切替え表示したいときに使う。タブのナビゲーションを使う事で、今どのコンテンツが表示されているかが分かりやすい。
< ul>にnavとnav-tabsクラス、< li>にnav-itemクラス、< a>にnav-linkクラスを追加。「現在このコンテンツを表示しています」状態を表示するには、< a>にactiveクラス追加。
<ul class="nav nav-tabs">
<li class="nav-item"><a href="#" class="nav-link active">収入</a></li>
<li class="nav-item"><a href="#" class="nav-link">支出</a></li>
<li class="nav-item"><a href="#" class="nav-link">合計</a></li>
</ul>
・ナビゲーションバー
サイト上部につくメニュー。横幅で表示を切り替え。
①ベースのナビゲーションバーを作る
(1)< nav>要素にnavbarとnavbar-expandクラス追加
(2)バーの中に表示する内容の色決め。navbar-lightで背景色明るく、navbar-darkで暗め。
(3)背景色はbg-[色の種類]追加。今回はbtn-light
(4)左端に表示されるサイト名は< a>要素で囲みリンク設定。必ずnavbar-brandを追加する。
②メニュー項目を追加
(1)リスト< ul>を追加し、各メニュー項目はリストアイテム< li>にする。また、リンクとして設定。
(2)< ul>にnavbar-nav、< li>へnav-item、< a>にnav-linkクラス追加。
(3)どのコンテンツを表示しているかを分かりやすくするために、該当のメニュー項目にactiveクラスを追加。
③ドロップダウン型のメニュー項目追加
ドロップダウンを開くとサブメニューが表示されるよう設定
(1)追加するリストアイテムの< li>にdropdownクラスを追加
(2)追加したリストアイテムの< a>にdropdown-togleクラス追加
(3)サブメニューは追加したリストアイテムの下に、ドロップダウンメニューセクションで紹介したのと同じように< div>< a>追加
(4)ドロップダウン化した< a>にdata-toggle="dropdown"属性を追加
④スマホ画面幅の場合、メニューを折りたたむ
(1)< nav>につけていたnavbar-expandをnavbar-expand-[画面サイズ(lgやsm)]にする。※グリッド参照
画面サイズ未満の時、メニュー表示が変わる。
(2)3本線のボタンを用意。以下のような< button>要素を追加。
これをサイト名のリンク(< a href="#" class="navbar-brand">)直前に書くとボタンは左側、リンク直後に書くと右側に表示される。
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav-bar">
<span class="navbar-toggler-icon"></span>
</button>
(3)<ul class="navbar-nav">の要素を加工親要素< div>を記述。
その< div>にcollapseとnavbar-collapseクラスを追加し、id="nav-bar"というid属性を追加。
nav-barというIDは3本線の< button>でdata-target="#nav-bar"と設定したことによる。data-targetの設定内容を変更している場合、その内容と< div>のID属性が同じ名前になるようにする。
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<!-- ホームへ戻るリンク。ブランドロゴなどを置く。 -->
<a href="#" class="navbar-brand">P&K</a>
<!-- 横幅が狭いときに出るハンバーガーボタン -->
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav-bar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- メニュー項目 -->
<div class="collapse navbar-collapse" id="nav-bar">
<ul class="navbar-nav">
<li class="nav-item active"><a href="#" class="nav-link">子犬</a></li>
<li class="nav-item"><a href="#" class="nav-link">子猫</a></li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">会社情報</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">ビジョン</a>
<a class="dropdown-item" href="#">会社概要</a>
<a class="dropdown-item" href="#">地図</a>
<a class="dropdown-item" href="#">沿革</a>
</div>
</li>
<li class="nav-item"><a href="#" class="nav-link">お問い合わせ</a></li>
</ul>
</div>
</nav>
⑤バッジ（ラベル）
テキストなどに装飾したい場合、badgeと```badge-[色の種類]クラスを追加。
・ボタンの中で件数表示するバッジ
ボタンの表示内容に数値を追加し、新着通知の件数を表示するには、数値を< span>で囲み、badgeとbadge-pill,badge-[色の種類]の3つのクラスを追加。
<button class="btn btn-primary">
受信トレイ <span class="badge badge-pill badge-light">7</span>
</button>
⑥アラート：何らかのアクションを行ったときに結果を表示
alertとalert-[色の種類]クラスを追加
(ユーザー登録などに成功・失敗した結果など)
⑦カード
情報をグループ化したいときに、ブロック要素にcardクラスを追加するだけ。
cardクラスの要素の中に、タイトル用ブロック(card-headerクラスを付けた要素)と、本文用ブロック(card-bodyクラスを付けた要素)を中に入れる。
<div class="card">
<div class="card-header">
新着情報
</div>
<div class="card-body">
<a href="#">友達リクエストが1件あります</a><br />
<a href="#">メッセージが3件届いています</a><br />
<a href="#">今日開催のイベントがあります</a><br />
</div>
</div>
(参考)
ユーティリティクラス：margin,paddingなどのCSSを書かなくて済む。
・marginとpadding
用意された命令を使い、[余白の種類][余白の場所]-[余白の大きさ]の記述で使う。
たとえばmt-1 なら「ほんの少しの margin-top の余白」、pb-4 なら「割と広い padding-bottom の余白」となる
・border
ブロック要素に罫線を引くborderクラス、border-[罫線の場所]クラスがある。
・text-align(文字の寄せ)
text-[寄せる方向]
・Flexboxモデル
横並びにしたい複数要素を囲った親要素にd-flexとflex-lowクラスをつける。
要素を寄せる方向や各要素間の余白を、justify-contentクラスで決められる。
justify-content-start左寄せ(要素間余白なし)
justify-content-end右寄せ(要素間余白なし)
justify-content-center中央寄せ(要素間余白なし)
justify-content-between最初が左端、最後が右端、残りは均等余白で
justify-content-aroundすべて均等な余白で
⑦外部アイコン追加(Font Awesome)
・BootstrapのHTMLテンプレートの< body>の下方、< script>の要素が記述されている場所に、以下を入れる。
<script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
・Font Awsomeでアイコンを選び、詳細ページで記述方法が表示されるので、タグの文字列にカーソルを合わせコピー。
コピーした記述を使いたい場所にペースト。
↧