html: dropdownの設置方法

よろしくお願いいたします。

現在、ドロップダウンリストを制作しておりますが、
上手く行きませんので、アドバイスをお願いいたします。

htmlには次のように表示しています。これは、
http://getbootstrap.com/components/#btn-dropdowns
から参照しただけです。

<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>

これをhtmlに書いただけではバーが表示されませんでした。
jsなどが関連しているのでしょうか? 仮に、jsが関連していても、
その指示をどこに記載すれば良いのかもわかりません。

以上、ご回答をいただけると幸いです。

行動規範の内容に同意します

回答2件

そちらのページを確認すると、配布されている「bootstrap」の中のjsで実現しているようです。
まず、トップページ(http://getbootstrap.com/)からdownloadのページ(http://getbootstrap.com/getting-started/#download)に移動し、「Download Bootstrap」をクリックして、ダウンロードしてください
ダウンロードしたファイル(今ダウンロードするとbootstrap-3.3.5-dist.zip)を、ドロップダウンリストを記載するHTMLファイルに解凍してください
例えばc:\html\dropdown.hmlで作成される場合、c:\hthml内には以下のファイル構造となります。
c:\html
├─dropdown.html
├── css
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

この状態で、以下のように、「dropdown.html」に記載すると表示されます

<!DOCTYPE html> <html lang="en"> <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">

</head> <body>  <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

</body> </html>

ほかにもいろいろな機能があるようです、興味があれば調べてみてください

投稿2015/10/24 21:23

hide0527

総合スコア144

YousukeTanaka

2015/10/25 06:42

ご回答ありがとうございます。無事、解決いたしました。ご丁寧な説明でしたので、わかりやすく、復習するよい機会をいただきました。感謝しております。

行動規範の内容に同意します

ベストアンサー

bootstrap の使い方は以下を参照するとよいです。
http://vdeep.net/first-bootstrap

これに従って作成した html が↓です。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
8    <title>Bootstrap 101 Template</title>
9
10    <!-- Bootstrap -->
11    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
12
13    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
14    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
15        <!--[if lt IE 9]>
16    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
17    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
18    <![endif]-->
19  </head>
20  <body>
21    <!-- Single button -->
22    <div class="btn-group">
23      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
24	Action <span class="caret"></span>
25      </button>
26      <ul class="dropdown-menu">
27	<li><a href="#">Action</a></li>
28	<li><a href="#">Another action</a></li>
29	<li><a href="#">Something else here</a></li>
30	<li role="separator" class="divider"></li>
31	<li><a href="#">Separated link</a></li>
32      </ul>
33    </div>
34
35    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
36    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
37    <!-- Include all compiled plugins (below), or include individual files as needed -->
38    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
39  </body>
40</html>