とほほのBootstrap 4入門

あ～お

か～こ

カード (card)
カラー (color)
カルーセル (carousel)
クリアフィックス (clearfix)
グリッド (grid)
クローズアイコン (close icon)
コンテナ (container)

さ～そ

た～と

な～の

ナビ (nav)
ナビゲーションバー (navbar)

は～ほ

バッジ (badge)
パンくずリスト (breadcrumb)
フォーム (form)
ブレークポイント (introduction)
フレックス (flex)
フロート (float)
プログレス (progress)
ページネーション (pagination)
ボーダー (border)
ポジション (position)
ボタン (button)
ポップオーバー (popover)

ま～も

メディアオブジェクト (media object)
モーダル (modal)

や～よ

ら～ろ

リストグループ (list group)
レスポンシブデザイン (introduction)

わ～ん

A

<abbr> (typography)
.accordion (collapse)
.active (breadcrumb)
.active (button)
.active (dropdown)
.active (carousel)
.active (list group)
.active (navbar)
.active (pagination)
.alert (alert)
.alert-{ primary | secondary | success | danger | warning | info | light | dark } (alert)
.alert-dismissible (alert)
.alert-heading (alert)
.alert-link (alert)
.align-{ baseline | top | middle | bottom | text-bottom | text-top } (virtical align)
.align-content-{ start | center | end | between | around | stretch } (flex)
.align-content-{breakpoint}-{ start | center | end | between | around | stretch } (flex)
.align-items-{ start | center | end } (grid)
.align-items-{ start | center | end | baseline | stretch } (flex)
.align-items-{breakpoint}-{ start | center | end | baseline | stretch } (flex)
.align-self-{ start | center | end } (grid)
.align-self-{ start | center | end | baseline | stretch } (flex)
.align-self-{breakpoint}-{ start | center | end | baseline | stretch } (flex)
aria-controls="..." (collapse)
aria-expanded="..." (collapse)
aria-haspopup="..." (dropdown)
aria-label="..." (button group)
aria-label="..." (button toolbar)
aria-pressed="true | false" (button)
autocomplete="off" (button)

B

.badge (badge)
.badge-{ primary | secondary | success | danger | warning | info | light | dark } (badge)
.badge-pill (badge)
.bg-{ primary | secondary | success | danger | warning | info | light | dark | white | transparent } (table)
.bg-{ primary | secondary | success | danger | warning | info | light | dark | white | transparent } (color)
.blockquote (typography)
.blockquote-footer (typography)
Bootstrap (introduction)
.border (border)
.border-0 (border)
.border-{ top | right | bottom | left } (border)
.border-{ top | right | bottom | left }-0 (border)
.border-{ primary | secondary | success | danger | warning | info | light | dark | white } (border)
.breadcrumb (breadcrumb)
.breadcrumb-item (breadcrumb)
breakpoint (introduction)
.btn (button)
.btn-{ primary | secondary | success | danger | warning | info | light | dark | link } (button)
.btn-{ xs | sm | lg } (button)
.btn-{ sm | lg } (dropdown)
.btn-block (button)
.btn-default (button)
.btn-group (button)
.btn-group-{ sm | lg } (button)
.btn-group-toggle (checkbox)
.btn-group-toggle (radio button)
.btn-group-vertical (button)
.btn-outline-{ primary | secondary | success | danger | warning | info | light | dark } (button)
.btn-toolbar (button)

C

D

.d-{ none | inline | inline-block | block } (display)
.d-{breakpoint}-{ none | inline | inline-block | block } (display)
.d-{ table | table-row | table-cell | flex | inline-flex } (display)
.d-{breakpoint}-{ table | table-row | table-cell | flex | inline-flex } (display)
.d-flex (flex)
.d-{breakpoint}-flex (flex)
.d-inline-flex (flex)
.d-{breakpoint}-inline-flex (flex)
.d-print-{ none | inline | inline-block | block } (display)
.d-{breakpoint}-print-{ none | inline | inline-block | block } (display)
.d-print-{ table | table-row | table-cell | flex | inline-flex } (display)
.d-{breakpoint}-print-{ table | table-row | table-cell | flex | inline-flex } (display)
data-animation="..." (toast)
data-autohide="..." (toast)
data-backdrop="..." (modal)
data-boundary="..." (dropdown)
data-delay="..." (toast)
data-display="..." (dropdown)
data-flip="..." (dropdown)
data-focus="..." (modal)
data-interval="..." (carousel)
data-keyboard="..." (carousel)
data-keyboard="..." (modal)
data-offset="x,y" (dropdown)
data-offset="..." (scrollspy)
data-pause="..." (carousel)
data-placement="..." (popover)
data-placement="..." (tooltip)
data-reference="..." (dropdown)
data-ride="carousel" (carousel)
data-show="..." (modal)
data-spy="scroll" (scrollspy)
data-target="..." (collapse)
data-target="..." (modal)
data-target="..." (navbar)
data-target="..." (scrollspy)
data-toggle="collapse" (collapse)
data-toggle="button" (button)
data-toggle="buttons" (checkbox)
data-toggle="buttons" (radio button)
data-toggle="dropdown" (dropdown)
data-toggle="modal" (modal)
data-toggle="tab" (nav)
data-toggle="collapse" (navbar)
data-toggle="popover" (popover)
data-toggle="tooltip" (tooltip)
data-touch="..." (carousel)
data-wrap="..." (carousel)
<del> (typography)
disabled (button)
disabled (dropdown)
disabled (form)
.disabled (list group)
.disabled (pagination)
.disabled (navbar)
.display-{n} (navbar)
.dropdown (dropdown)
.dropdown-divider (dropdown)
.dropdown-header (dropdown)
.dropdown-item (dropdown)
.dropdown-item-text (dropdown)
.dropdown-menu (dropdown)
.dropdown-menu-{ left | right } (dropdown)
.dropdown-menu-{breakpoint}-{ left | right } (dropdown)
.dropdown-toggle (dropdown)
.dropdown-toggle-split (dropdown)
.dropleft (dropdown)
.dropright (dropdown)
.dropup (dropdown)

E

F

.fade (list group)
<figcaption> (figure)
<figure> (figure)
.figure (figure)
.figure-caption (figure)
.figure-img (figure)
.fixed-bottom (navbar)
.fixed-top (navbar)
.flex-column (flex)
.flex-{breakpoint}-column (flex)
.flex-column-reserve (flex)
.flex-{breakpoint}-column-reverse (flex)
.flex-fill (flex)
.flex-{breakpoint}-fill (flex)
.flex-grow-{ 0 | 1 } (flex)
.flex-{breakpoint}-grow-{ 0 | 1 } (flex)
.flex-nowrap (flex)
.flex-{breakpoint}-nowrap (flex)
.flex-row (flex)
.flex-{breakpoint}-row (flex)
.flex-row-reserve (flex)
.flex-{breakpoint}-row-reverse (flex)
.flex-shrink-{ 0 | 1 } (flex)
.flex-{breakpoint}-shrink-{ 0 | 1 } (flex)
.flex-wrap (flex)
.flex-{breakpoint}-wrap (flex)
.flex-wrap-reserve (flex)
.flex-{breakpoint}-wrap-reserve (flex)
.float-{ left | right | none } (float)
.float-{breakpoint}-{ left | right | none } (float)
.font-italic (text)
.font-weight-{ bold | bolder | normal | light | lighter } (text)
<footer> (typography)
.form-check (form)
.form-check-inline (form)
.form-check-input (form)
.form-check-label (form)
.form-control (form)
.form-control-{ sm | lg } (form)
.form-control-file (form)
.form-control-plaintext (form)
.form-control-range (form)
.form-group (form)
.form-inline (form)
.form-inline (navbar)
.form-row (form)
.form-text (form)

G

H

.h-{ 25 | 50 | 75 | 100 | auto } (sizing)
<h1>～<h6> (typography)
.h1～.h6 (typography)
.help-block (form)

I

<img> (image)
.img-fluid (image)
.img-thumbnail (image)
.initialism (typography)
.input-group (input group)
.input-group-{ sm | lg } (input group)
.input-group-append (input group)
.input-group-prepend (input group)
.input-group-text (input group)
<ins> typography)
:invalid (form)
.invalid-feedback (form)
.invalid-tooltip (form)
.invisible (visibility)
.is-valid (form)
.is-invalid (form)

J

.jumbotron (jumbotron)
.jumbotron-fluid (jumbotron)
.justify-content-{ start | center | end | around | between } (grid)
.justify-content-{ start | center | end } (nav)
.justify-content-{ start | center | end | between | aroune } (flex)
.justify-content-{breakpoint}-{ start | center | end | between | aroune } (flex)
.justify-content-{ start | center | end } (pagination)

K

<kbd> (code)

L

.lead (typography)
.list-group (list group)
.list-group-flush (list group)
.list-group-item (list group)
.list-group-item-{ primary | secondary | success | danger | warning | info | light | dark } (list group)
.list-inline (typography)
.list-inline-item (typography)
.list-unstyled (typography)
lg (breakpoint)

M

.m-{size} (spacing)
.m-{breakpoint}-{size} (spacing)
.m{ t | r | b | l | x | y }-{size} (spacing)
.m{ t | r | b | l | x | y }-{breakpoint}-{size} (spacing)
.mark (typography)
<mark> (typography)
md (breakpoint)
.media (media object)
.media-body (media object)
.mh-100 (sizing)
.min-vh-100 (sizing)
.min-vw-100 (sizing)
.ml-auto (grid)
.ml-{breakpoint}-auto (grid)
.modal (modal)
.modal-{ sm | lg | xl } (modal)
.modal-body (modal)
.modal-content (modal)
.modal-dialog (modal)
.modal-dialog-centered (modal)
.modal-footer (modal)
.modal-header (modal)
.modal-title (modal)
.mr-auto (grid)
.mr-{breakpoint}-auto (grid)
.mw-100 (sizing)

N

.nav (nav)
.nav-fill (nav)
.nav-item (nav)
.nav-item (navbar)
.nav-justified (nav)
.nav-link (nav)
.nav-link (navbar)
.nav-pills (nav)
.nav-tabs (nav)
.navbar (navbar)
.navbar-{ dark | light } (navbar)
.navbar-brand (navbar)
.navbar-collapse (navbar)
.navbar-expand (navbar)
.navbar-expand-{breakpoint} (navbar)
.navbar-nav (navbar)
.navbar-text (navbar)
.navbar-toggler (navbar)
.navbar-toggler-icon (navbar)
.no-gutters (grid)
novalidate (form)

O

.offset-{n} (grid)
.offset-{breakpoint}-{n} (grid)
.order-{n} (flex)
.order-{breakpoint}-{n} (flex)
.order-{n} (grid)
.order-{breakpoint}-{n} (grid)
.order-{ first | last } (flex)
.order-{breakpoint}-{ first | last } (flex)
.order-{ first | last } (grid)
.order-{breakpoint}-{ first | last } (grid)
.overflow-{ auto | hidden } (overflow)

P

<p> (typography)
.p-{size} (spacing)
.p-{breakpoint}-{size} (spacing)
.p{ t | r | b | l | x | y }-{size} (spacing)
.p{ t | r | b | l | x | y }-{breakpoint}-{size} (spacing)
.page-item (pagination)
.page-link (pagination)
.pagination (pagination)
.pagination-{ sm | lg } (pagination)
.popover (popover)
.popover-body (popover)
.popover-header (popover)
.position-{ static | relative | absolute | fixed | sticky } (position)
.position-static (form)
<pre> (code)
.pre-scrollable (code)
.progress (progress)
.progress-bar (progress)
.progress-bar-animated (progress)
.progress-bar-striped (progress)

Q

R

readonly (form)
Reboot (introduction)
require (form)
role="button" (button)
role="group" (button)
role="toolbar" (button)
.rounded (border)
.rounded-{ top | right | bottom | left | circle | pill | 0 } (border)
.row (grid)

S

<s> (typography)
<samp> (typography)
scrollspy() (scrollspy)
.shadow (shadow)
.shadow-{ none | sm | lg } (shadow)
.slide (carousel)
sm (breakpoint)
.small (typography)
<small> (typography)
.spinner-border (spinner)
.spinner-border-sm (spinner)
.spinner-grow (spinner)
.spinner-grow-sm (spinner)
.sr-only (screenreader)
.sr-only-focusable (screenreader)
.sticky-top (position)

T

.tab-content (nav)
.tab-content (list group)
.tab-pane (nav)
.tab-pane (list group)
<table> (table)
.table (table)
.table-{ active | primary | secondary | success | danger | waring | info | light | dark } (table)
.table-bordered (table)
.table-borderless (table)
.table-condensed (table)
.table-hover (table)
.table-responsive (table)
.table-responsive-{breakpoint} (table)
.table-sm (table)
.table-striped (table)
.text-{ left | center | right } (typography)
.text-{ left | center | right } (text)
.text-{breakpoint}-{ left | center | right } (text)
.text-{ primary | secondary | success | dange | warning | info | light | dark } (color)
.text-{ body | muted | white | bkack-50 | white-50 } (color)
.text-{ lowercase | uppercase | capitalize } (text)
.text-decoration-none (text)
.text-hide (image replacement)
.text-justify (typography)
.text-justify (text)
.text-monospace (text)
.text-muted (typography)
.text-muted (typography)
.text-nowrap (typography)
.text-nowrap (text)
.text-reset (text)
.text-truncate (text)
.text-wrap (text)
.thead-dark (table)
.thead-light (table)
title="..." (tooltip)
.toast (toast)
toast() (toast)
.toast-body (toast)
.toast-header (toast)

U

<u> (typography)

V

:valid (form)
.valid-feedback (form)
.valid-tooltip (form)
<var> (code)
.vh-100 (sizing)
.visible (visibility)
.vw-100 (sizing)

W

.w-{ 25 | 50 | 75 | 100 | auto } (sizing)
.was-validated (form)

X

xl (breakpoint)
xs (breakpoint)

Y

Z

Copyright (C) 2015-2019 杜甫々

初版:2015年9月6日最終更新:2019年1月6日

https://www.tohoho-web.com/bootstrap/index2.html