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

2014年03月04日(火) 23時23分

便利な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を読み込むだけで大丈夫です。

これで、ブレークポイントとして.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-**