とほほのBootstrap 4入門
トップ >
Bootstrap 4入門
目次
ナビゲーションバー (navbar)
→ 詳細
コンテナ (container)
→ 詳細
パンくずリスト (breadcrumb)
→ 詳細
グリッド (grid)
→ 詳細
フレックス (flex)
→ 詳細
ディスプレイ (display)
Inline-block
Inline-block
Inline-block
Block
Table column
Table column
Table column
Table column
Table column
Table column
→ 詳細
ポジション (position)
→ 詳細
サイジング (sizing)
→ 詳細
スペーシング (spacing)
paddingpaddingpadding...
margin margin margin margin margin margin ...
→ 詳細
テキスト (text)
The World Wide Web (abbreviated WWW or the Web) is an information space where documents and other web resources are identified by ...
The World Wide Web (abbreviated WWW or the Web) is an information space where documents and other web resources are identified by ...
Left text
Center text
Right text
Normal /
Bold /
Light /
Monospace /
Italic /
Uppercase /
Lowercase
→ 詳細
縦方向アライン (vertical align)
baseline |
top |
middle |
bottom |
text-top |
text-bottom |
→ 詳細
タイポグラフィ (typegraphy)
H1 Title
H2 Title
H3 Title
H4 Title
H5 Title
H6 Title
Mark /
Del /
Ins /
Underline /
Small /
Strong /
Em /
Abbr
This text is truncated.
→ 詳細
コード (code)
printf(format, arg1, arg2, ...)
main() {
printf("Hello world!\n");
}
Ctrl + C
→ 詳細
ビジビリティ (visibility)
→ 詳細
テーブル (table)
Name | Role | E-Mail |
Yamada Ichiro | Administrator | yamada@example.com |
Suzuki Jiro | Member | suzuki@example.com |
Satoh Saburo | Guest | satoh@example.com |
→ 詳細
ページネーション (pagination)
→ 詳細
アラート (alert)
Primary Alert |
Secondary Alert |
Success Alert |
Danger Alert |
Warning Alert |
Info Alert |
Dark Alert |
Light Alert |
→ 詳細
カラー (color)
Primary
Secondary
Success
Danger
Warning
Info
Dark
Body
Muted
Black-50
White-50
Light
White
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-dark
.bg-light
.bg-white
.bg-transparent
→ 詳細
ボーダー (border)
Border
Primary
Secondary
Sccess
Danger
Waring
Info
Dark
Light
White
→ 詳細
イメージ (image)
→ 詳細
フィギュア (figure)
→ 詳細
エンベッド (embed)
→ 詳細
シャドウ (shadow)
→ 詳細
フォーム (form)
→ 詳細
インプットグループ (input group)
→ 詳細
プログレス (progress)
→ 詳細
リストグループ (list group)
→ 詳細
バッジ (badge)
Badge
→ 詳細
ボタン (button)
→ 詳細
ドロップダウン (dropdown)
→ 詳細
モーダル (modal)
→ 詳細
ツールチップ (tooltip)
→ 詳細
ポップオーバー (popover)
→ 詳細
コラプス (collapse)
Hypertext Markup Language (HTML) is ...
→ 詳細
トースト (toast)
→ 詳細
イメージリプレースメント (image replacement)
Image replacement
→ 詳細
スピナー (spinner)
→ 詳細
ジャンボトロン (jumbotron)
Jumbotron
This is a sample of Jumbotron.
→ 詳細
カルーセル (carousel)
→ 詳細
カード (card)
→ 詳細
メディアオブジェクト (media object)
→ 詳細
フロート (float)
64x64
This specification defines the 5th major version,
second minor revision of the core language of the
World Wide Web: the Hypertext Markup...
→ 詳細
クリアフィクス (clearfix)
→ 詳細
オーバーフロー (overflow)
あああああああああああああああああああああああああああ
あああああああああああああああああああああああああああ
あああああああああああああああああああああああああああ
あああああああああああああああああああああああああああ
あああああああああああああああああああああああああああ
あああああああああああああああああああああああああああ
あああああああああああああああああああああああああああ
→ 詳細
クローズアイコン (close icon)
→ 詳細
スクロールスパイ (scrollspy)
→ 詳細
ナビ (nav)
Content #1...
Content #2...
Content #3...
→ 詳細
スクリーンリーダー (screenreader)
Following text will be read by screen reader.
This text will be read by screen reader only.
→ 詳細
Copyright (C) 2015-2019 杜甫々
初版:2015年9月6日 最終更新:2019年1月13日
http://www.tohoho-web.com/bootstrap/index.html