Bootstrap3
日本語リファレンス

広告

入門  Getting started


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


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

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

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

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

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

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

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

bootstrap.min.cssbootstrap.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.min.cssbootstrap.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
  • Internet Explorer 7 以下には対応していない。
  • Internet Explorer 8 は、border-radius(角丸)など、一部対応していない。レスポンシブ対応させるためには、Respond.jsが必要である。
  • Internet Explorer 9 は、transitionplaceholderにだけ未対応。
  • 古いAndroid2系の搭載ブラウザでは一部機能しなかった。

広告