Bootstrap コンポーネントのドロップダウンメニュー_JavaScript スキルを学ぶ-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Bootstrap コンポーネントのドロップダウンメニュー_JavaScript スキルを学ぶ

May 16, 2016 pm 03:48 PM

ドロップダウンメニュー

Bootstrap は、Twitter エンジニアによって立ち上げられた、HTML、CSS、JAVASCRIPT をベースとしたシンプルで柔軟な人気のフロントエンドフレームワークであり、ライブラリにはさまざまな関数が定義されている CSS と JS ライブラリとして想像できます。 . コンポーネントの表示効果とアニメーション。

.dropdown - 親要素をドロップダウンメニューコンポーネントとして設定し、サブメニューを下方向にポップアップします。 .dropup—親要素をドロップダウンメニューコンポーネントとして設定し、サブメニューをポップアップします。 .dropdown-toggle—ボタンをドロップダウンメニューのトグルボタンとして設定します
.dropdown-menu—ul 要素をドロップダウンメニューとして設定します。 .dropdown-menu-right - メニューを右に揃えます
.pull-right - メニューコンポーネントの親要素を右に揃えます。 .dropdown-header - メニュー項目にタイトルを追加します。
.divider—メニュー項目に分割線を追加します。
.disabled—対応するメニュー項目を無効にします。

実装コードは次のとおりです:

実現効果:

&lt;!DOCTYPE html&gt; 
&lt;html lang="en"&gt; 
&lt;head&gt; 
 &lt;meta charset="UTF-8"&gt; 
 &lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt; 
 &lt;title&gt;CSS全局样式_下拉菜单&lt;/title&gt; 
 &lt;link rel="stylesheet" href="bootstrap.min.css" type="text/css"&gt; 
 &lt;script src="jquery-1.11.1.min.js"&gt;&lt;/script&gt; 
 &lt;script src="bootstrap.min.js"&gt;&lt;/script&gt; 
&lt;/head&gt; 
&lt;body&gt; 
&lt;div class="container"&gt; 
 &lt;div class="dropdown pull-right"&gt; 
 &lt;button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"&gt; 
 下拉菜单 
 &lt;span class="caret"&gt;&lt;/span&gt; 
 &lt;/button&gt; 
 &lt;ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1"&gt; 
 &lt;li role="presentation" class="dropdown-header"&gt;中超Big4&lt;/li&gt; 
 &lt;li&gt;&lt;a href="#" role="menuitem"&gt;上海上港&lt;/a&gt;&lt;/li&gt; 
 &lt;li&gt;&lt;a href="#" role="menuitem"&gt;广州恒大&lt;/a&gt;&lt;/li&gt; 
 &lt;li&gt;&lt;a href="#" role="menuitem"&gt;山东鲁能&lt;/a&gt;&lt;/li&gt; 
 &lt;li class="disabled"&gt;&lt;a href="#" role="menuitem"&gt;北京国安&lt;/a&gt;&lt;/li&gt; 
 &lt;li role="presentation" class="divider"&gt;&lt;/li&gt; 
 &lt;li role="presentation" class="dropdown-header"&gt;中超5-8&lt;/li&gt; 
 &lt;li&gt;&lt;a href="#" role="menuitem"&gt;上海申花&lt;/a&gt;&lt;/li&gt; 
 &lt;li&gt;&lt;a href="#" role="menuitem"&gt;江苏舜天&lt;/a&gt;&lt;/li&gt; 
 &lt;li&gt;&lt;a href="#" role="menuitem"&gt;长春亚泰&lt;/a&gt;&lt;/li&gt; 
 &lt;li&gt;&lt;a href="#" role="menuitem"&gt;河南建业&lt;/a&gt;&lt;/li&gt; 
 &lt;/ul&gt; 
 &lt;/div&gt; 
&lt;/div&gt; 
 
&lt;/body&gt; 
&lt;/html&gt;

ログイン後にコピー

上記がこの記事の全内容です。Bootstrap コンポーネントを使用してドロップダウンメニューを作成する際の参考になれば幸いです。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。