前回はBootstrapとはなにかについてご紹介いたしました。
今回は実際にBootstrapをインストールして動かしてみようと思います。
初めに公式サイトでダウンロードします。
ダウンロードしてきたものをXAMPPで確認しようと思います。
[htdocs］-にwebtestを作成し、格納しました。
bootstrap.jsを確認してみると、
[data-toggle]というのがいくつか記載されています。
どうやらこのタグを使用することでBootstrapにある機能が使えることが分かります。
ただ、どうやって使用するのか、data-toggleはどう設定したらよいかわかりません。
data-toggleで検索してみると非常によいサイトがありました。
参考サイト
試しにモーダルを使ってみようと思います。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
<div class="modal" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary">Save changes</a>
<a href="#" class="btn">Close</a>
</div>
</div>
</body>
</html>
簡単にモーダルが作成できました。
標準機能を使ってみただけなので次回はさらに標準機能を駆使して適当なページが作成したいと思います。
最後までご覧いただき、ありがとうございました。
<ボタン押下前>
<ボタン押下後>
弊社では全国各地の請負い（ご自宅）で作業協力頂ける、フリーランスエンジニアの方を常時探しております。
ご興味ある方は、お気軽にお問い合わせ下さい。