ドットインストールでBootstrap4の勉強を始めたので自分用のメモ書き。
まず公式サイトの雛形をコピペする
自分の使うcssなどはheadに適宜記載する。
index.html
##Starter 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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
各クラス
text-center
文字を中央揃えにする（text-alighn: center;的な）-
bg-(color),text-(color)
背景色,文字色(background-color)を指定- primary(青)
- secondary(灰色)
- success(緑色)
- danger(赤)
- warning(黄色（オレンジ？）)
- info(水色)
- light(白)
- dark(黒)
- muted(薄い灰色？)
- white(これも白)
-
要素の配置 text-(プロパティ)
- left
- right
- center
太字 font-weight-bold
細字 font-weight-normal(h2タグのようなもともと太字のものに対して)
見出し display-(1~4)
-
要素サイズ
- 幅 w-(25, 50, 75, 100(%))
- 高さ h-(25, 50, 75, 100(%))
-
padding,margin
※ 基本形(p|m)(方向)-(size(rem)) ！方向を指定しないと全方向
top=t, bottom-b, left-l, right-r
上下左右で指定 縦=y, 横=x
size: 0~5rem ※marginのみauto指定可能
- （例）pt-3, my-0, mx-auto
!!bootstrapでpadding,marginを指定すると!important設定になる
ボタン btn btn-(色) btn-(sm, lg)※buttonタグでなくてもOK
グリッドレイアウト
基本構造
rowの中のcol要素は12分割される。
何も指定しないと等分されるが、１２の割合を指定できる。
index.html
<div clas="container">
<div class="row">
<div class="col-4"></div>
<div class="col-６"></div>
<div class="col-２"></div>
</div>
<div class="row">
<div class="col-4"></div>
<div class="col-６"></div>
<div class="col-２"></div>
</div>
<div class="row">
<div class="col-4"></div>
<div class="col-6"></div>
<div class="col-6"></div>
</div>
</div>
12以上の値も指定できるが次の行に行ってしまう。
Bootstrapのブレークポイント
各画面サイズ幅に応じてクラスを指定できる。
- 576px以上 = sm
- 768px以上 = md
- 992px以上 = lg
- 1200px以上 = xl
ex.)col-md-2, col-lg-4
※特定の画面サイズで非表示にする場合はd-none(display: none;)を使う
ex)d-md-none
逆にデフォルト非表示だけど特定の画面サイズで表示したい場合。
d-(画面サイズ)-blockを使用
（d-none, d-(画面サイズ)-2などと併用が必要）