Bootstrapにブレイクポイントを追加

Bootstrap Ver 3.xに幅480pxのブレイクポイントを追加する


便利なBootstrapに関して、現状Ver 3.xでは、Responsiveレイアウトのグリッド定義が画面解像度(幅)によって4つデフォルトで定義されています。

Extra small devices Small devices Medium devices Large devices
Devices
想定端末
Phones
スマートフォン
Tablets
タブレット端末
Desktops
デスクトップ
Desktops
デスクトップ
Device Width
画面幅
768px未満 768px以上 992px未満 992px以上 1200px未満 1200px以上
Class prefix
クラス名ヘッダー
.col-xs-** .col-sm-** .col-md-** .col-lg-**

ただ、この現状だと幅が768ピクセル未満は全て同じと見なされるので、iPhoneの縦と横で同じレイアウトになってしまいます。

そのため現状だと、@media only screen and (min-device-width: 320px) and (orientation: portrait) { /* CSS Here */ }など、メディアクエリで対応するしかないのですが、もっと簡単にレイアウトできればということで調べたところ、もちろんBootstrap側でカスタマイズ出来るオンラインルーツが用意されていました。

Customize and downloadのページから自由なブレイクポイントでカスタムしたCSSが作れます。

でも、これをパッと見て理解できる人は多くはないハズ。ですよね。


ということで、簡単に実現する方法として、480pxでもう一つブレイクポイントを作ることができる差分CSSファイルを作成しました。

下記からダウンロードしたCSSファイルを通常のBootstrapのCSSの次にbootstrap-xss-X.X.X.cssを読み込むだけで大丈夫です。


<!-- 通常のBootstrap CSS -->
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<!-- このCSS -->
<link rel="stylesheet" type="text/css" href="../your-domain-path/bootstrap-xss-X.X.X.css">

これで、ブレークポイントとして.col-xxs-**.hidden-xxs.visible-xxsというクラスが使えるようになります。

Extra Extra small devices Extra small devices Small devices Medium devices Large devices
Devices
想定端末
Phones
小型スマートフォン(縦)
Phones
小型スマートフォン(横)
大型スマートフォン(縦)
Tablets
タブレット端末
Desktops
デスクトップ
Desktops
デスクトップ
Device Width
画面幅
480px未満 480px以上 768px未満 768px以上 992px未満 992px以上 1200px未満 1200px以上
Class prefix
クラス名ヘッダー
.col-xxs-** .col-xs-** .col-sm-** .col-md-** .col-lg-**

通常のGridレイアウトと同様にクラス付与により、480px未満480px以上 768px未満を分けることが出来るようになります。


<div class="row">
	<div class="col-xxs-12 col-xs-6">Grid 1</div>
	<div class="col-xxs-12 col-xs-6">Grid 2</div>
</div>

<!--
iPhone横 (端末幅が480から767pxの範囲)の場合、
 「col-xs-**」が適用され画面幅を2分割するグリッドが作成できます。

iPhone縦 (端末幅が480px未満)の場合、
 「col-xxs-**」が適用され画面幅一杯のグリッドが縦に2段作成できます。
-->
レイアウト例
pandscape
portrait
ダウンロード

戻る