10
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Bootstrapとは

Last updated at Posted at 2015-06-15

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>
10
11
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?