Bootstrapを使ってみる

2015.01.10

CSSのフレームワーク「Bootstrap」を少し試してみたのでメモ。

対応ブラウザ

Getting started · BootstrapのBrowser and device supportに記載されていますが、
IE7以下はサポート外になります。
IE8まで対応する場合、Respond.jsが必要になります。
　

ダウンロード

Bootstrapのサイトからダウンロードします。

try-use-bootstrap01

左の「Download Bootstrap」をクリックしてダウンロード。

try-use-bootstrap02

ダウンロード後、解凍すると以下のようなファイル群が入っています。

  • css

    • bootstrap.css
    • bootstrap.css.map
    • bootstrap.min.css
    • bootstrap-theme.css
    • bootstrap-theme.css.map
    • bootstrap-theme.min.css
  • fonts

    • glyphicons-halflings-regular.eot
    • glyphicons-halflings-regular.svg
    • glyphicons-halflings-regular.ttf
    • glyphicons-halflings-regular.woff
  • js

    • bootstrap.js
    • bootstrap.min.js
    • npm.js

fontsはアイコンフォントで使用するみたいです。
Components · BootstrapのGlyphiconsあたりに記載されています。
　

ファイルの読み込み

ファイルの読み込みや最初の準備は、Getting started · BootstrapやCSS · Bootstrapにあります。
とりあえず今回は、下記のようにしました。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

IE8への対応が不要の場合、8～11行目は不要です。
　

使い方

今回はContainers、Grid system、Buttonsの機能を試してみたいと思います。

Containers

サイト内のコンテンツを包むのに使用します。
BootstrapのGrid systemを使用するために必要みたいです。

.container 要素をセンタリング。左右に余白を作る。
.container-fluid 左右に余白を作らない。

HTML

<div class="container">
	<p>container</p>
</div>
<div class="container-fluid">
	<p>container-fluid</p>
</div>

Containersのデモページ
　

Grid system

Containersの幅を12列に分割して、レイアウトを作ることができます。
レスポンシブにも対応していて幅に応じてレイアウトの変更も可能です。

.row 列の水平方向のグループを作成。.rowの中に列の要素を配置します。
.col-xs-num 列を作成。numに1～12の数値を指定します。
.col-sm-num 列を作成。幅768px以上で使用。
numに1～12の数値を指定します。
.col-md-num 列を作成。幅992px以上で使用。
numに1～12の数値を指定します。
.col-lg-num 列を作成。幅1200px以上で使用。
numに1～12の数値を指定します。
col-size-offset-num 列要素の左側に余白を作ります。
sizeに使用する画面サイズ(lg,md,sm,xs)、
numに1～12の数値を指定します。

列に対してcol-XX-numを指定し、合計が12になるようにnumの部分に数値を設定します。

.col-xs-numのみ指定されている場合、全ての画面サイズでそのレイアウトが適用されます。
.col-md-numのみが指定されている場合、992px以上ではそのレイアウトが適用されますが、
992px未満では縦並びになります。

.col-xs-numと.col-md-numが指定されている場合、992px未満では.col-xs-numのレイアウトが、
992px以上では.col-md-numのレイアウトが適用されます。

HTML

<div class="container">
	<div class="row">
		<div class="col-xs-5 col-md-3">.col-xs-5<br />.col-md-3</div>
		<div class="col-xs-7 col-md-5">.col-xs-7<br />.col-md-5</div>
		<div class="col-xs-12 col-md-4">.col-xs-12<br />.col-md-4</div>
	</div>
</div>
<div class="container-fluid">
	<div class="row">
		<div class="col-xs-4">.col-xs-4</div>
		<div class="col-xs-6 col-xs-offset-2">.col-xs-6 col-xs-offset-2</div>
	</div>
</div>

Grid systemのデモページ
　

Buttons

aかbutton、inputタグに使用して、ボタンのスタイルを適用します。
ただ、Firefoxのバージョン30未満でinputタグにline-heightが適用できないバグがあるので、
公式ではbuttonタグを使用することを推奨しているみたいです。(バージョン30以上では解消されています)

.btn ボタンのスタイルを適用。
.btn-default ボタンのスタイルをdefaultに変更します。
.btn-primary ボタンのスタイルをprimaryに変更します。
.btn-success ボタンのスタイルをsuccessに変更します。
.btn-info ボタンのスタイルをinfoに変更します。
.btn-warning ボタンのスタイルをwarningに変更します。
.btn-danger ボタンのスタイルをdangerに変更します。
.btn-link ボタンのスタイルをlinkに変更します。

HTML

<div class="container">
	<a href="#" class="btn btn-default">aタグ</a>
	<button class="btn btn-default">buttonタグ</button>
	<input type="submit" value="inputタグ" class="btn btn-default">
</div>

<div class="container">
	<button class="btn btn-default">default</button>
	<button class="btn btn-primary">primary</button>
	<button class="btn btn-success">success</button>
	<button class="btn btn-info">info</button>
	<button class="btn btn-warning">warning</button>
	<button class="btn btn-danger">danger</button>
	<button class="btn btn-link">link</button>
</div>

Buttonsのデモページ
　

今回は以上で終わりですが、公式のドキュメントにはもっと色々あるみたいなので、
時間のある時に試してみたいと思います。

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2024年10月
日 月 火 水 木 金 土
 12345
6789101112
13141516171819
20212223242526
2728293031