Demo on Bootstrap

Bootstrapを使用したBootstrap臭のしないレスポンシブデザインのマークアップ方法

Container

.container

Text alignment

.text-left
.text-center
.text-right

List

  • Default lists
  • Chino
  • Cocoa
  • Rize
  • Chiya
  • Syaro
  • .list-unstyled
  • Chino
  • Cocoa
  • Rize
  • Chiya
  • Syaro
  • .list-inline
  • Chino
  • Cocoa
  • Rize
  • Chiya
  • Syaro

Horizontal description

.dl-horizontal
Chino
ラビットハウス
Cocoa
ラビットハウス
Rize
ラビットハウス
Chiya
甘兎庵
Syaro
フルール・ド・ラパン

Table

.table

Name Age Birthday Blood type CV
Cocoa 15 4/10 B 佐倉綾音
Chino 13 12/4 AB 水瀬いのり
Rize 16 2/14 A 種田梨沙
Chiya 15 9/19 O 佐藤聡美
Syara 15 7/15 A 内田真礼

.table .table-bordered

Name Age Birthday Blood type CV
Cocoa 15 4/10 B 佐倉綾音
Chino 13 12/4 AB 水瀬いのり
Rize 16 2/14 A 種田梨沙
Chiya 15 9/19 O 佐藤聡美
Syara 15 7/15 A 内田真礼

.table .table-bordered .table-striped

Name Age Birthday Blood type CV
Cocoa 15 4/10 B 佐倉綾音
Chino 13 12/4 AB 水瀬いのり
Rize 16 2/14 A 種田梨沙
Chiya 15 9/19 O 佐藤聡美
Syara 15 7/15 A 内田真礼

.table-responsive

Name Age Birthday Blood type CV
Cocoa 15 4/10 B 佐倉綾音
Chino 13 12/4 AB 水瀬いのり
Rize 16 2/14 A 種田梨沙
Chiya 15 9/19 O 佐藤聡美
Syara 15 7/15 A 内田真礼

Image

.img-rounded

.img-circle

.img-thumbnail

Responsive utilities

.hidden-md
(PC 1200px以下で非表示)
.visible-xs-block
(スマホで768px以下で表示)
.visible-sm-block
(タブレット 992px以下で表示)
.visible-md-block
(PC 1200px以下で表示)
.visible-lg-block
(PC 1200px以上で表示)

Grid System

３カラム

.col-xs-4
.col-xs-4
.col-xs-4

よくある２カラム

.col-xs-9
.col-xs-3

offsetを与えてセンタリングっぽく

.col-xs-10 .col-xs-offset-1

タブレットまでは３カラム、スマホでは２カラムと１カラム

.col-sm-4.col-xs-6
.col-sm-4.col-xs-6
.col-sm-4.col-xs-12