とほほの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)

64x64

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

詳細

クリアフィクス (clearfix)

Text ...

詳細

オーバーフロー (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