Bootstrapとは
Twitter社が提供しているHTML5・CSS3・jQueryを使用したWebフロントエンドツール。
オープンソースとして公開されており、エンジニアやマークアップエンジニアでも、デザイナーに頼らずに簡単に見た目を変更できるパッケージである。
##Bootstrapの特徴
- 簡単かつ綺麗にWebサイトが作れる。
- レスポンシブデザインに対応。
- jQueryを使用した「カルーセル」や「モダール」、「タブ」、「ツールチップ」など様々な機能が盛り込まれている。
- テンプレートやUIパーツも豊富。
- 12カラムのグリッドシステム
#環境構築
##Bootstrapを使ってみよう
利用方法は2通りある。
- URLより直接引っ張ってくる。(CDN)
- ダウンロードしたフォルダからパスで引っ張ってくる。
CDNとは
世界中に張り巡らされたCDN配信プラットフォームを通して、ユーザに最も近いサーバから効率的にコンテンツを配信する仕組みのことである。 一般に、インターネット上にウェブサイトやサービスを公開する場合、その配信元となるウェブサーバ(以下、オリジン)をたて、そこへユーザを誘導する形で配信を行う。 しかし、突発的にアクセスが増えるとオリジンが突然ダウンしてしまうことや、海外からアクセスすると表示に時間がかかってしまうことがある。
Bootstrapのスニペット
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<!-- Bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>