Bootstrap3
日本語リファレンス
広告
  1. Bootstrap3日本語リファレンス
  2. 入門

入門　　Getting started

Bootstrap3の使用に必要なファイルの入手や読み込みについて。

ダウンロード 基本テンプレート 「Bootstrap CDN」を使うテンプレート 対応しているブラウザとデバイス

ダウンロード

公式サイトのDownload Bootstrapより、Bootstrap3をダウンロード。

2015.1.7現在の最新版は、「v3.3.1」。

ダウンロードしたbootstrap-3.3.1-dist.zipを解凍すると、distフォルダが現れる。そのdistフォルダの中に、css、js、fontsの３つのフォルダがある。

下記のファイルを自分のサーバーにアップロードする。

  • cssフォルダ内のbootstrap.min.css
  • jsフォルダ内のbootstrap.min.js
  • fontsフォルダ内の全てのファイル。

尚、ダウンロードもアップロードもせず、 「Bootstrap CDN」を使う方法もある。

基本テンプレート

Bootstrapの使用に必要なファイルを読み込む基本テンプレート。

bootstrap.min.cssとbootstrap.min.jsのファイルは、アップロードした場所を指定する。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Bootstrapの基本テンプレート</title>
		<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>
		<h1>Bootstrapの基本テンプレート</h1>
		<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>
広告

「Bootstrap CDN」を使うテンプレート

bootstrap.min.cssとbootstrap.min.jsを、アップロードせずに、ネット上に用意されている「Bootstrap CDN」を使う方法もある。

bootstrap.min.cssの「Bootstrap CDN」

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css

bootstrap.min.jsの「Bootstrap CDN」

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Bootstrapの基本テンプレート</title>
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/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>
		<h1>Bootstrapの基本テンプレート</h1>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
	</body>
</html>

対応しているブラウザとデバイス

対応しているブラウザとデバイス（2015.1.7）
Chrome Firefox Internet Explorer Opera Safari
Android N/A N/A
iOS N/A
Mac OS X
Windows
2015.1.7 の公式サイトより。
  • Internet Explorer 7 以下には対応していない。
  • Internet Explorer 8 は、border-radius（角丸）など、一部対応していない。レスポンシブ対応させるためには、Respond.jsが必要である。
  • Internet Explorer 9 は、transitionとplaceholderにだけ未対応。
  • 古いAndroid2系の搭載ブラウザでは一部機能しなかった。
広告