たちどころにわかる Bootstrap

投稿日 2015/03/02

[Home]  [Bootstrap 詳細編]

この記事の内容は、W3Schools の内容をベースにして一部変更したり内容を追加したりしています。


Bootstrap とは


Bootstrap を使う理由


ダウンロードとインストール

こちらからダウンロードできます。

Bootstrap Getting started

あるいは、link タグでリンクもできます。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">   </script>

Bootstrap 3 を利用するための要件

  1. Bootstrap 3 は HTML5 を使っています。HTML の最初に HTML5 doctype が必要です。
      <!DOCTYPE html>
  2. Bootstrap 3 はモバイル優先です。モバイル環境のための meta タグが必要です。
      <meta name="viewport" content="width=device-width, initial-scale=1">
  3. Bootstrap はコンテンツを載せるコンテナを必要とします。これは CSS のクラスで以下の2つのどちらかを使います。

基本的な Bootstrap ページ

※ Bootstrap は jQuery を使用しているので、jQuery も参照できるようにします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>Bootstrap の例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <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>
</head>
<body>
<div class="container">
  <h1>初めての Bootstrap ページ</h1>
  <p>いかがですか?</p>
</div>
</body>
</html>

 このサンプルを表示する。


テンプレートといくつかのサンプル

ここで使っているテンプレートの詳細は次のページを参照。Bootstrap : Basic template


基本的なテンプレート

下のソースは Bootstrap のサイトに出ていた基本的テンプレートを日本語に合わせたです。もし、テンプレートが必要ならこれを使うとよいかもしれません。

<!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 101 Template</title>
    <!-- Bootstrap : 下記のパスは要変更 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    
    <!-- HTML5 shim and Respond.js は IE8 サポートのためのものなので、サポートしないなら不要 -->
    <!-- 警告: Respond.js ファイルでページを見るときは動作しない。 -->
    <!--[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>Hello, world!</h1>
    
    <!-- jQuery (Bootstrap で使用している) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- すべてのコンパイル済みプラグイン (下記の js)、代わりに個別の js ファイルを書いてもよい。 -->
    <!-- 下記のパスは要変更 -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

画像のサンプル

<!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>img sample</title>
    <!-- Bootstrap : 下記のパスは要変更 -->
    <link href="/js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- HTML5 shim and Respond.js は IE8 サポートのためのものなので、サポートしないなら不要 -->
    <!-- 警告: Respond.js ファイルでページを見るときは動作しない。 -->
    <!--[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 style="margin-left:5%;margin-right:5%;">
    <h1 style="text-align:center;color:crimson;">画像のサンプル</h1>
    <p><a href="index.html">[もどる]</a></p>
    <!-- 角を丸める -->
    <img src="img/ogouchi.jpg" class="img-rounded" alt="Cinque Terre" />
    <!-- 円形にする -->
    <img src="img/ogouchi.jpg" class="img-circle" alt="Cinque Terre" />
    <br />
    <!-- 埋め込み -->
    <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="img/ukihashi.jpg"></iframe>
    </div>
    <!-- jQuery (Bootstrap で使用している) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- すべてのコンパイル済みプラグイン (下記の js)、代わりに個別の js ファイルを書いてもよい。 -->
    <!-- 下記のパスは要変更 -->
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <p> </p>
    <p> </p>
  </body>
</html>

 サンプルを表示


表のサンプル

<!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>表のサンプル</title>
    <!-- Bootstrap : 下記のパスは要変更 -->
    <link href="/js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- HTML5 shim and Respond.js は IE8 サポートのためのものなので、サポートしないなら不要 -->
    <!-- 警告: Respond.js ファイルでページを見るときは動作しない。 -->
    <!--[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 style="margin-left:5%;margin-right:5%;">
    <h1 style="text-align:center;color:crimson;">表のサンプル</h1>
    <p><a href="index.html">[もどる]</a></p>
    <table class="table table-striped" style="width:80%;margin-left:8%;">
     <caption style="text-align:center;">おしながき</caption>
     <thead>
       <tr>
         <th>そば・うどん</th>
         <th>金額</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>かけ</td>
         <td>250円</td>
       </tr>
       <tr>
         <td>たぬき</td>
         <td>300円</td>
       </tr>
       <tr>
         <td>きつね</td>
         <td>320円</td>
       </tr>
       <tr>
         <td>かき揚げ</td>
         <td>370円</td>
       </tr>
       <tr>
         <td>海老天</td>
         <td>420円</td>
       </tr>
     </tbody>
    </table>
    <!-- jQuery (Bootstrap で使用している) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- すべてのコンパイル済みプラグイン (下記の js)、代わりに個別の js ファイルを書いてもよい。 -->
    <!-- 下記のパスは要変更 -->
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <p> </p>
    <p> </p>
  </body>
</html>

 サンプルを表示


ボタンのサンプル

<!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>ボタンのサンプル</title>
    <!-- Bootstrap : 下記のパスは要変更 -->
    <link href="/js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- HTML5 shim and Respond.js は IE8 サポートのためのものなので、サポートしないなら不要 -->
    <!-- 警告: Respond.js ファイルでページを見るときは動作しない。 -->
    <!--[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 style="margin-left:5%;margin-right:5%;">
    <h1 style="text-align:center;color:crimson;">ボタンのサンプル</h1>
    <p><a href="index.html">[もどる]</a></p>
    <p> </p>
    <div style="text-align:center;">
    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-link">Link</button>
    </div>
    <!-- jQuery (Bootstrap で使用している) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- すべてのコンパイル済みプラグイン (下記の js)、代わりに個別の js ファイルを書いてもよい。 -->
    <!-- 下記のパスは要変更 -->
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <p> </p>
    <p> </p>
  </body>
</html>

 サンプルを表示


 [Bootstrap 詳細編]

 

 


 

 開設 2014年12月   著作権 2014-2015 bonk.red  連絡先: こちらからメッセージを送ってください。

 このページの先頭へ..