とほほのBootstrap 4入門

トップ > Bootstrap 4入門 > サマリ

Bootstrap 4

ナビゲーションバー (navbar)
コンテナ (container)
Container
パンくずリスト (breadcrumb)
グリッド (grid)
Grid #1
Grid #2
Grid #3
フレックス (flex)
Flex #1
Flex #2
Flex #3
ディスプレイ (display)
Inline-block
Inline-block
Inline-block
Block
Table column
Table column
Table column
Table column
Table column
Table column
ポジション (position)
Box A
Box B
Box C
サイジング (sizing)
25%
50%
75%
100%
スペーシング (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)
[ Visible ]
[]
テーブル (table)
NameRoleE-Mail
Yamada IchiroAdministratoryamada@example.com
Suzuki JiroMembersuzuki@example.com
Satoh SaburoGuestsatoh@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
Raunded
Circle
Pill
イメージ (image)
sample image sample image
フィギュア (figure)
1024x40 image
Sample of figure
エンベッド (embed)
シャドウ (shadow)
Shadow Large
Shadow Normal
Shadow Small
フォーム (form)
インプットグループ (input group)
プログレス (progress)
25%
リストグループ (list group)
バッジ (badge)
Badge
ボタン (button)
ドロップダウン (dropdown)
モーダル (modal)
ツールチップ (tooltip)
ポップオーバー (popover)
コラプス (collapse)
Hypertext Markup Language (HTML) is ...
トースト (toast)
イメージリプレースメント (image replacement)

Image replacement

スピナー (spinner)
Loading...
Loading...
ジャンボトロン (jumbotron)

Jumbotron

This is a sample of Jumbotron.


カルーセル (carousel)
カード (card)
Card header

Card text...

メディアオブジェクト (media object)
64x64
HTML 5.2
This specification defines the 5th major version, second minor revision of the core language of the World Wide Web: the Hypertext Markup...
フロート (float)
クリアフィクス (clearfix)
64x64

This specification defines the 5th major version, second minor revision of the core language of the World Wide Web: the Hypertext Markup...

オーバーフロー (overflow)
あああああああああああああああああああああああああああ あああああああああああああああああああああああああああ あああああああああああああああああああああああああああ あああああああああああああああああああああああああああ あああああああああああああああああああああああああああ あああああああああああああああああああああああああああ あああああああああああああああああああああああああああ
クローズアイコン (close icon)
スクロールスパイ (scrollspy)

Section #1

...

Section #2

...

Section #3

...

ナビ (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