ホームページ > ウェブフロントエンド > ブートストラップのチュートリアル > ブートストラップでドロップダウン メニューを作成する方法

ブートストラップでドロップダウン メニューを作成する方法

爱喝马黛茶的安东尼
リリース: 2019-07-17 15:02:56
オリジナル
4668 人が閲覧しました

ブートストラップでドロップダウン メニューを作成する方法

まず、下図に示すように、Sublime Text で新しい HTML ページを作成します。エンコードには必ず utf-8 を選択してください。

ブートストラップでドロップダウン メニューを作成する方法

次に、以下に示すように、リンク タグを使用してブートストラップ スタイル ライブラリをインポートします。ドロップダウン メニューの効果にはスクリプトが必要なので、順序に注意して jquery スクリプトとブートストラップ スクリプトをインポートする必要があります。

ブートストラップでドロップダウン メニューを作成する方法

次に、ドロップダウン メニューが正式に導入され、Bootstrap で定義されたドロップダウン スタイルを直接呼び出すことができます。

ブートストラップでドロップダウン メニューを作成する方法

関連する推奨事項: 「

bootstrap 入門チュートリアル

ブートストラップでドロップダウン メニューを作成する方法

次に、次に示すように、ドロップダウン メニューにメニュー項目を追加します。下の図では、スタイルがドロップダウン メニューであることに注意してください。

最後にプログラムを実行すると、ページ上に以下に示すようなドロップダウン メニューが表示されます。

ブートストラップでドロップダウン メニューを作成する方法

さらに、ドロップダウン メニューのメニュー項目を分割線で区切る場合は、次の図に示すように、分割線スタイルを直接追加できます。 :

ブートストラップでドロップダウン メニューを作成する方法

以上がブートストラップでドロップダウン メニューを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート