bootstrap4

@media

@ (min-width: 576px) {		具体的にはcontainer のサイズを限定的にする　576px以上
@media (min-width: 768px) {
@media (min-width: 992px) {
@media (min-width: 1200px) {
@media (max-width: 575.98px) {		maxは576px以下に適用される（小数点.98）
@media (max-width: 767.98px) {
@media (max-width: 991.98px) {
@media (max-width: 1199.98px) {
@media (prefers-reduced-motion: reduce) {		ユーザがデバイス上でアニメーションを制御を設定している場合に反応する

div

class	container	container
class	container bg-light
class	container mb-5	mはマージン調整（mbは下、ボトム）
class	container my-5	mはマージン調整（myは上下）
class	container py-4	pはパディング
class	container text-center
class	container-fluid
class	container py-5 d-flex justify-content-center
class	row	罫線的なもの
class	row align-items-center
class	row align-items-end
class	row align-items-start
class	row justify-content-around
class	row justify-content-between
class	row justify-content-center
class	row justify-content-end
class	row justify-content-start
class	row no-gutters
class	col	縦線みたいなもの、１行を１２分割するで構成されている
class	col-2	2/12→1/6
class	col-4
class	col-6
class	col-8
class	col-6 col-md-4
class	col-4 col-sm-6
class	col-6 mb-5
class	col-8 col-sm-6
class	col-9
class	col-sm	col-smを使うと、768px以上の画面サイズに適用される
class	col-sm-2	smはタブレットを想定
class	col-sm-3	xsはスマホ
class	col-sm-4
class	col-sm-5 col-md-6
class	col-sm-5 offset-sm-2 col-md-6 offset-md-0
class	col-sm-6
class	col-sm-6 mb-4
class	col-sm-8
class	col-sm-9
class	col-sm-10
class	col align-self-center
class	col align-self-end
class	col align-self-start
class	col order-1
class	col order-12
class	col order-first
class	col-12 col-md-8
class	col-auto
class	collapse
class	collapse contents
class	collapse navbar-collapse
class	collapse show
class	col-md-2 ml-auto	col-smを使うと、992px以上の画面サイズに適用される
class	col-md-3 mb-3	mdはノートPCを想定
class	col-md-3 ml-auto
class	col-md-3 ml-md-auto
class	col-md-4
class	col-md-4 ml-auto
class	col-md-4 offset-md-4
class	col-md-6 mb-3
class	col-md-auto
class	col-lg-6	lgは大画面PC
class	box
class	card	表形式とカード形式が合体
class	card bg-light mb-3
class	card bg-secondary text-white text-center p-3
class	card border-primary mb-3
class	card card-body
class	card mb-3
class	card p-3
class	card p-3 text-right
class	card text-center
class	card text-right
class	card text-white bg-danger mb-3	テキスト文字色、背景色
class	card text-white bg-dark mb-3
class	card text-white bg-info mb-3
class	card text-white bg-primary mb-3
class	card text-white bg-secondary mb-3
class	card text-white bg-success mb-3
class	card text-white bg-warning mb-3
class	card w-75
class	card-body
class	card-columns
class	card-deck
class	card-footer
class	card-footer bg-transparent
class	card-group
class	card-header
class	card-header bg-transparent
class	card-header border-primary
class	card-img-overlay
class	clearfix
class	d-flex	cssのflexboxを使いfloatから解放される
class	d-flex align-content-around flex-wrap
class	d-flex align-content-between flex-wrap
class	d-flex align-content-center flex-wrap
class	d-flex align-content-end flex-wrap
class	d-flex align-content-start flex-wrap
class	d-flex align-content-stretch flex-wrap
class	d-flex align-items-baseline
class	d-flex align-items-center
class	d-flex align-items-end
class	d-flex align-items-start
class	d-flex align-items-stretch
class	d-flex flex-column
class	d-flex flex-column-reverse
class	d-flex flex-nowrap
class	d-flex flex-row
class	d-flex flex-row-reverse
class	d-flex flex-wrap
class	d-flex flex-wrap-reverse
class	d-flex justify-content-around
class	d-flex justify-content-between
class	d-flex justify-content-center
class	d-flex justify-content-end
class	d-flex justify-content-start
class	d-flex w-100 justify-content-between
class	d-inline-flex	d-inline-flex
class	d-inline bg-dark text-white
class	d-inline bg-primary text-white
class	d-lg-none bg-primary text-white
class	d-none d-lg-block bg-secondary text-white
class	d-none d-print-block
class	d-print-none
class	w-100 d-none d-md-block	wサイズ
class	w-25
class	w-50
class	w-50 mx-auto bg-danger
class	w-50 mx-auto bg-danger clearfix
class	w-75
class	w-100
class	h-100 d-inline-block	hサイズ
class	h-25 d-inline-block
class	h-50 d-inline-block
class	h-75 d-inline-block
class	align-self-baseline
class	align-self-center
class	align-self-end
class	align-self-start
class	align-self-stretch
class	accordion
class	bg-dark p-4	bg-
class	bg-dark text-white
class	bg-info text-center
class	bg-primary text-white
class	btn-group	btn-
class	btn-group btn-group-lg
class	btn-group btn-group-sm
class	btn-group dropleft
class	btn-group dropright
class	btn-group dropup
class	btn-group mr-2
class	btn-group-vertical
class	btn-toolbar
class	btn-toolbar mb-3
class	default-file mb-5
class	dropdown	dropdown
class	dropdown-divider
class	dropdown-menu
class	dropdown-menu dropdown-menu-right
class	dropdown-menu p-3 text-muted
class	custom-file
class	control-buttons my-3
class	custom-control custom-checkbox
class	custom-control custom-checkbox mb-3
class	custom-control custom-radio
class	embed-responsive embed-responsive-16by9
class	fixed-bottom py-3 px-3 bg-dark text-center
class	fixed-top py-3 px-3 bg-dark text-center
class	flex-fill
class	float-right bg-success
class	form-group
class	form-group col-md-2
class	form-group col-md-4
class	form-group col-md-6
class	form-group mb-5
class	form-group row
class	form-row
class	form-row align-items-center
class	form-check
class	form-check form-check-inline
class	form-check mb-2
class	form-check mb-2 mr-sm-2
class	input-group	input-group
class	input-group input-group-lg
class	input-group input-group-sm mb-3
class	input-group mb-2
class	input-group mb-2 mr-sm-2
class	input-group mb-3
class	input-group-append
class	input-group-prepend
class	input-group-text
class	invalid-feedback
class	invalid-tooltip
class	jumbotron	jumbotron
class	jumbotron jumbotron-fluid
class	list-group
class	media	media
class	media mt-3
class	media-body
class	media-body order-1
class	ml-auto p-2
class	carousel slide	carousel
class	carousel slide carousel-fade
class	carousel-caption
class	carousel-caption d-none d-md-block
class	carousel-inner
class	carousel-item
class	carousel-item active
class	modal	modal
class	modal fade
class	modal-body
class	modal-content
class	modal-dialog
class	modal-dialog modal-dialog-centered
class	modal-dialog modal-lg
class	modal-dialog modal-sm
class	modal-footer
class	modal-header
class	mr-auto
class	navbar-nav
class	order-1	カラムの入れ替え
class	order-2
class	order-3
class	p-2	パディング　!important
class	p-2 flex-grow-1
class	p-2 flex-shrink-1
class	p-2 w-100
class	progress	progress
class	progress mb-3
class	progress mb-5
class	progress-bar
class	progress-bar bg-danger
class	progress-bar bg-info
class	progress-bar bg-success
class	progress-bar bg-warning
class	progress-bar progress-bar-striped
class	progress-bar progress-bar-striped bg-danger
class	progress-bar progress-bar-striped bg-info
class	progress-bar progress-bar-striped bg-success
class	progress-bar progress-bar-striped bg-warning
class	progress-bar progress-bar-striped progress-bar-animated
class	progress-bar progress-bar-striped progress-bar-animated bg-danger
class	progress-bar progress-bar-striped progress-bar-animated bg-info
class	progress-bar progress-bar-striped progress-bar-animated bg-success
class	progress-bar w-100
class	progress-bar w-25
class	progress-bar w-50
class	scrollspy-example border px-1
class	shadow p-3 mb-5 bg-light rounded
class	shadow-lg p-3 mb-5 bg-light rounded
class	shadow-none p-3 mb-5 bg-light rounded
class	shadow-sm p-3 mb-5 bg-light rounded
class	sticky-top py-3 px-3 bg-dark text-center
class	table-responsive	table
class	table-responsive-lg mb-5
class	table-responsive-md mb-5
class	table-responsive-sm mb-5
class	table-responsive-xl mb-5
class	tab-content mt-3	tab
class	tab-pane fade
class	tab-pane fade show active
class	text-center
class	valid-feedback
class	valid-tooltip
class	alert alert-danger	alert
class	alert alert-dark
class	alert alert-info
class	alert alert-light
class	alert alert-primary
class	alert alert-secondary
class	alert alert-success
class	alert alert-warning
class	alert alert-warning alert-dismissible fade show
id	accordion	アコーディオン
id	carousel	カーセル
id	collapseOne
id	contact
id	exampleModal	モーダル
id	headingOne
id	home
id	list-example
id	myTabContent
id	nav
id	navbarNav
id	profile
id	sample
id	target_div
aria-hidden	TRUE
aria-label	文字列	読み上げ支援に利用、画面には表示されない
aria-labelledby	ラベル	複数のメニューが紐づけられている場合
aria-valuemax	数字	プログレスバーの進捗率
data-interval	1000	data
data-offset	0
data-parent	#accordion
data-parent	#sample
data-ride	carousel	carousel
data-spy	scroll	scroll
data-target	#list-example
data-toggle	buttons
role	alert	アラート
role	dialog	ダイヤログ
role	document
role	group
role	progressbar
role	separator
role	tabpanel
role	toolbar	ツールバー
tabindex	-1

nav

class	nav flex-column
class	nav nav-pills flex-column flex-sm-row
class	nav nav-pills nav-fill
class	nav nav-pills nav-justified
class	navbar navbar-dark bg-dark
class	navbar navbar-dark bg-dark fixed-top
class	navbar navbar-expand navbar-dark bg-dark
class	navbar navbar-expand-lg navbar-dark bg-dark
class	navbar navbar-expand-lg navbar-dark bg-primary
class	navbar navbar-expand-lg navbar-light
class	navbar sticky-top navbar-dark bg-dark
id	navbar
style	background-color: #e3f2fd;

section

class	mb-3
class	mb-5
class	w-50 m-auto
class	w-50 m-auto my-5

footer

class

blockquote-footer

h1 h2 h3 h4 h5 h6

class	h4 text-center mb-5	見出し、タイトル
class	h5
class	mb-2	mはマージン調整（マージンボトム）
class	mb-3
class	mb-4
class	mt-5	マージントップ
class	my-5 text-center
class	text-center
class	text-center mb-3
class	text-center mb-4
class	text-center mb-5
class	text-center my-3
class	text-center my-4
class	text-center my-5
class	text-monospace
id	info
class	demo
class	display-1
class	display-2
class	display-3
class	display-4
class	alert-heading
class	card-header
class	card-title
class	display-3
class	text-white
class	modal-title
class	dropdown-header

p

class	card-text	文字
class	font-italic
class	font-weight-bold
class	font-weight-light
class	font-weight-normal
class	h1	hの文字の大きさ
class	h1 my-5 text-center
class	h1 text-center mb-5 d-none
class	h2
class	h3
class	h4
class	h5
class	h6
class	lead
class	mb-0
class	mb-1
class	text-capitalize	text
class	text-center
class	text-center my-5
class	text-justify
class	text-right
class	text-left
class	text-lowercase
class	text-monospace
class	text-uppercase
class	text-truncate w-25

span

aria-hidden	TRUE	インラインとしてグループ化する、デザインするためのもの
class	badge badge-danger	バッチは未読数を出すためのアイコン的なもの
class	badge badge-dark	背景の色がいくつか用意されている
class	badge badge-info
class	badge badge-light
class	badge badge-primary
class	badge badge-primary badge-pill
class	badge badge-secondary
class	badge badge-success
class	badge badge-warning
class	badge badge-pill badge-danger
class	badge badge-pill badge-dark
class	badge badge-pill badge-info
class	badge badge-pill badge-light
class	badge badge-pill badge-primary
class	badge badge-pill badge-secondary
class	badge badge-pill badge-success
class	badge badge-pill badge-warning
class	bg-dark text-white	bg-はバックグランドの背景色
class	bg-primary text-white
class	border	枠線を付ける
class	border border-0	枠線を表示しない
class	border border-bottom-0
class	border border-left-0
class	border border-right-0
class	border border-danger	枠線に色を付ける
class	border border-dark
class	border border-info
class	border border-light
class	border border-primary
class	border border-secondary
class	border border-success
class	border border-top-0
class	border border-warning
class	border border-white
class	border-top	borderのカスタイマイズ
class	border-bottom
class	border-left
class	border-right
class	carousel-control-next-icon
class	carousel-control-prev-icon
class	d-block bg-dark text-white
class	d-block bg-primary text-white
class	dropdown-item-text
class	float-left	float
class	float-right
class	float-none
class	float-lg-right
class	float-md-right
class	float-sm-right
class	float-xl-right
class	navbar-brand
class	navbar-text ml-auto
class	navbar-toggler-icon
class	small
class	sr-only
class	text-muted
class	page-link
class	input-group-text
class	mark
class	rounded	角丸
class	rounded-0
class	rounded-circle
class	rounded-top
class	rounded-bottom
class	rounded-left
class	rounded-right
id	basic-addon1	aria-describedbyとセット、アドオン
id	circle
id	inputGroup-sizing-default
id	inputGroup-sizing-lg
id	inputGroup-sizing-sm

small

class	form-text text-muted	smallタグより、CSSでsmallと同じことをする
class	text-muted
id	emailHelp
id	passwordHelpBlock

blockquote

class	blockquote	引用
class	blockquote mb-0
class	blockquote mb-0 card-body
class	blockquote text-center
class	blockquote text-right

abbr

class	initialism	略語
title	HyperText Markup Language

a

class	alert-link
class	badge badge-success
class	bg-danger text-white d-block py-2	背景色付きでブロック型になる
class	bg-dark text-white d-block py-2
class	bg-info text-white d-block py-2
class	bg-light text-dark d-block py-2
class	bg-primary text-white d-block py-2
class	bg-secondary text-white d-block py-2
class	bg-success text-white d-block py-2
class	bg-transparent d-block py-2
class	bg-warning text-dark d-block py-2
class	bg-white text-dark d-block py-2
class	btn btn-primary	背景色付きでボタン型になる
class	btn btn-primary btn-lg
class	btn btn-primary btn-lg active
class	btn btn-primary btn-lg disabled
class	btn btn-primary toggle-btn
class	btn btn-secondary
class	btn btn-secondary dropdown-toggle
class	card-link
class	carousel-control-next
class	carousel-control-prev
class	dropdown-item
class	dropdown-item active
class	dropdown-item disabled
class	flex-sm-fill text-sm-center nav-link
class	flex-sm-fill text-sm-center nav-link active
class	flex-sm-fill text-sm-center nav-link disabled
class	list-group-item list-group-item-action
class	list-group-item list-group-item-action active	リスト型でアクティブ状態の色が変わる
class	list-group-item list-group-item-action disabled
class	list-group-item list-group-item-action flex-column align-items-start
class	list-group-item list-group-item-action flex-column align-items-start active
class	list-group-item list-group-item-action list-group-item-danger
class	list-group-item list-group-item-action list-group-item-danger active
class	list-group-item list-group-item-action list-group-item-dark
class	list-group-item list-group-item-action list-group-item-dark active
class	list-group-item list-group-item-action list-group-item-info
class	list-group-item list-group-item-action list-group-item-info active
class	list-group-item list-group-item-action list-group-item-light
class	list-group-item list-group-item-action list-group-item-light active
class	list-group-item list-group-item-action list-group-item-primary
class	list-group-item list-group-item-action list-group-item-primary active
class	list-group-item list-group-item-action list-group-item-secondary
class	list-group-item list-group-item-action list-group-item-secondary active
class	list-group-item list-group-item-action list-group-item-success
class	list-group-item list-group-item-action list-group-item-success active
class	list-group-item list-group-item-action list-group-item-warning
class	list-group-item list-group-item-action list-group-item-warning active
class	navbar-brand
class	nav-item nav-link
class	nav-item nav-link active
class	nav-item nav-link disabled
class	nav-link
class	nav-link active
class	nav-link disabled
class	nav-link dropdown-toggle
class	page-link
class	sr-only sr-only-focusable
class	text-black-50
class	text-body
class	text-danger
class	text-dark
class	text-info
class	text-light
class	text-light bg-dark
class	text-muted
class	text-primary
class	text-secondary
class	text-success
class	text-warning
class	text-white bg-dark
class	text-white-50 bg-dark
aria-controls	文字列	読み上げ支援に利用、画面には表示されない
aria-disabled	TRUE
aria-expanded	FALSE
aria-haspopup	TRUE
aria-label	次へ
aria-pressed	TRUE
aria-selected	FALSE
aria-selected	TRUE
data-slide	next
data-slide	prev
data-toggle	collapse
data-toggle	dropdown
data-toggle	tab
href	#carouselControls	ページ内リンク
id	contact-tab	idはjs等で利用する場合は多い
role	button
role	tab
tabindex	-1

img

alt	画像の名前
class	align-self-start mr-3
class	card-img
class	card-img-bottom
class	card-img-top
class	d-block w-100
class	d-inline-block align-top
class	figure-img img-fluid
class	float-left
class	float-right
class	img-fluid
class	img-thumbnail
class	mh-100
class	mw-100
class	mx-auto d-block
class	order-2 ml-3

figure figcaption

class	figure	図表の囲み
class	figure-caption	図表キャプション
class	figure-caption text-center
class	figure-caption text-left
class	figure-caption text-right

ul

class	list-group
class	list-group list-group-flush
class	list-inline
class	list-unstyled
class	nav	nav
class	nav flex-column
class	nav nav-pills
class	nav nav-pills card-header-pills
class	nav nav-pills nav-fill
class	nav nav-tabs
class	nav nav-tabs card-header-tabs
class	nav justify-content-center
class	nav justify-content-end
class	navbar-nav
class	navbar-nav mr-auto
class	navbar-nav mr-auto mt-2 mt-lg-0
class	pagination	pagination
class	pagination pagination-lg
class	pagination pagination-sm
class	pagination justify-content-center
class	pagination justify-content-end
id	myTab
role	tablist

ol

class	breadcrumb
class	carousel-indicators

dl

class

row

dt

class	col-sm-3
class	col-sm-3 text-truncate
class	col-sm-4

dd

class	col-sm-8
class	col-sm-9

table

class	table
class	table table-bordered
class	table table-bordered table-dark
class	table table-borderless
class	table table-dark
class	table table-hover
class	table table-hover table-dark
class	table table-sm
class	table table-sm table-dark
class	table table-striped
class	table table-striped table-dark
class	w-50 mx-auto

thead

class	thead-dark
class	thead-light

tr

class	table-active
class	table-danger
class	table-dark
class	table-info
class	table-light
class	table-primary
class	table-secondary
class	table-success
class	table-warning
class	bg-danger
class	bg-info
class	bg-primary
class	bg-warning

th

class	bg-primary
class	table-active
class	text-nowrap

td

class	bg-danger
class	bg-info
class	bg-success
class	bg-warning
class	table-danger
class	table-dark
class	table-info
class	table-light
class	table-primary
class	table-secondary
class	table-success
class	table-warning

form

class	form-inline
class	form-inline my-2 my-lg-0
class	needs-validation
class	px-4 py-3
novalidate

input

aria-label	検索	アクセシビリティ
aria-describedby	電話番号をハイフンなしで入力してください	フォーカスを当てると、aria=label後に「説明」を読み上げる
checked
class	form-control
class	form-control form-control-lg
class	form-control form-control-sm
class	form-control is-invalid
class	form-control is-valid
class	form-control mb-2
class	form-control mb-2 mr-sm-2
class	form-control mr-sm-2
class	form-control-file
class	form-control-plaintext
class	form-control-range
class	btn btn-primary	input type=button
class	btn btn-primary next-slide
class	btn btn-primary pause-slide
class	btn btn-primary prev-slide
class	btn btn-primary slide-first
class	btn btn-primary slide-second
class	btn btn-primary slide-third
class	btn btn-primary start-slide
class	custom-control-input
class	custom-control-input indeterminate-box
class	custom-file-input
class	custom-range
class	form-check-input
class	form-check-input position-static
disabled
id	basic-url	labelと連動させるためにはidを使う
lang	ja
max	5
min	0
name	blankRadio	名前
placeholder	email@example.com	入力例
readonly		リードオンリー
required
step	0.5
type	button	ボタン
type	checkbox	チェックボックス
type	email	メール
type	file	ファイル
type	password	パスワード
type	radio	ラジオボタン
type	range
type	reset
type	search	×でキーワードのクリアができる
type	submit
type	text
unchecked
value	email@example.com	入力された値、初期値
value	submit	inputでsubmitする場合

label

class	btn btn-secondary
class	btn btn-secondary active
class	col-sm-2 col-form-label
class	col-sm-3 col-form-label
class	col-sm-3 col-form-label col-form-label-lg
class	col-sm-3 col-form-label col-form-label-sm
class	custom-control-label
class	custom-file-label
class	form-check-label
class	input-group-text
class	sr-only
for	check	labelと連動さるためにはidを使う
for	radios2
for	radios3

textarea

aria-label	テキストエリア用
class	form-control
id	textarea1
rows	3

legend

class

col-form-label col-sm-2 pt-0

fieldset

class

form-group

select

class	custom-select
class	custom-select custom-select-lg
class	custom-select custom-select-sm
class	form-control
class	form-control form-control-lg
class	form-control form-control-sm
id	disabledSelect
id	select1
id	select2
id	select3
multiple
size	2

button

class	btn btn-danger
class	btn btn-dark
class	btn btn-info
class	btn btn-light
class	btn btn-success
class	btn btn-warning
class	btn btn-light mr-3
class	btn btn-light my-2 my-sm-0
class	btn btn-link
class	btn btn-link collapsed
class	btn btn-primary
class	btn btn-primary active
class	btn btn-primary btn-lg
class	btn btn-primary btn-lg btn-block
class	btn btn-primary btn-sm
class	btn btn-primary dropdown-toggle
class	btn btn-primary mb-2
class	btn btn-secondary
class	btn btn-secondary dropdown-toggle
class	btn btn-secondary dropdown-toggle dropdown-toggle-split
class	btn btn-outline-danger
class	btn btn-outline-dark
class	btn btn-outline-info
class	btn btn-outline-info my-2 my-sm-0
class	btn btn-outline-light
class	btn btn-outline-light my-2 my-sm-0
class	btn btn-outline-primary
class	btn btn-outline-primary my-2 my-sm-0
class	btn btn-outline-secondary
class	btn btn-outline-success
class	btn btn-outline-warning
class	btn btn-sm btn-light
class	btn btn-lg btn-primary
class	close
class	dropdown-item
class	list-group-item list-group-item-action
class	navbar-toggler
aria-controls	collapseContent02	idと連動（nav)
aria-expanded	FALSE
aria-expanded	TRUE
aria-haspopup	TRUE
aria-label	Close
aria-pressed	FALSE
aria-pressed	TRUE
autocomplete	off
data-offset	10
data-boundary	scrollParent
data-dismiss	alert
data-dismiss	modal
data-flip	TRUE
data-target	#collapseContent02	idと連携（collapse）
data-toggle	button
data-toggle	collapse
data-toggle	dropdown
data-toggle	modal
disabled
id	drop1	jsと連動
id	toggle-btn
type	button
type	submit

iframe

allowfullscreen
class	embed-responsive-item
src	url

aria-current	page
class	active
class	breadcrumb-item
class	breadcrumb-item active
class	list-group-item
class	list-group-item active
class	list-group-item d-flex justify-content-between align-items-center
class	list-group-item disabled
class	list-group-item list-group-item-danger
class	list-group-item list-group-item-dark
class	list-group-item list-group-item-info
class	list-group-item list-group-item-light
class	list-group-item list-group-item-primary
class	list-group-item list-group-item-secondary
class	list-group-item list-group-item-success
class	list-group-item list-group-item-warning
class	list-inline-item
class	media mb-4
class	nav-item
class	nav-item active
class	nav-item dropdown
class	page-item
class	page-item active
class	page-item disabled
data-slide-to	0
data-target	#carouselExample
data-target	#carouselIndicators
data-target	#carouselSample