971 views
この記事は最終更新から 2627日 が経過しています。
Bootstrapの紹介は以下のwikiページを参照のこと。
https://ja.wikipedia.org/wiki/Bootstrap
(1) ダウンロード
以下のページからダウンロードします。(2016年11月時点の最新版は v3.3.7です。)
(2) 実装例1:Hello World
上記の公式ページに記載されている最小実装例はこちら。(少し間引き)
Sample#1
<!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"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap Sample</title> <!-- Bootstrap --> <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="../bootstrap/js/bootstrap.min.js"></script> </body> </html>
head中に以下の3行を記述する。
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">
head中でbootstrap.min.cssを参照する。
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
JQueryは必須!
JQueryの後にbootstrap.min.jsを読み込む。
※ページ読み込み速度を早くするため、最下部に書けとのこと。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="../bootstrap/js/bootstrap.min.js"></script>
(3) 実装例2:Menu表示
上記の公式ページに記載されているメニュー表示の実装例はこちら。(少し間引き)
Sample#2
<!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"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> <title>Starter Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet"> </head> <body style="padding:50px;"> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div class="container"> <div class="starter-template"> <h1>Sample2 : Menu sample</h1> <p class="lead">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> </div> </div><!-- /.container --> <!-- Bootstrap core JavaScript --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="../bootstrap/js/bootstrap.min.js"></script> </body> </html>