ブートストラップ ボタンのドロップダウン メニューのサンプル チュートリアル

零下一度
リリース: 2017-07-17 14:30:56
オリジナル
2193 人が閲覧しました

この章では、Bootstrap クラスを使用してボタンにドロップダウン メニューを追加する方法を説明します。ボタンにドロップダウン メニューを追加するには、ボタンとドロップダウン メニューを .btn-group に配置するだけです。 を使用して、ボタンがドロップダウン メニューとして機能することを示すこともできます。

前の言葉

ボタン型のドロップダウンメニューは見た目だけで、効果は基本的にドロップダウンメニューと同じです。違いは、通常のドロップダウン メニューはブロック要素であるのに対し、ボタンのドロップダウン メニューはインライン ブロック要素であることです。この記事では、Bootstrap ボタンのドロップダウン メニューについて詳しく紹介します

概要

ボタンのドロップダウン メニューは、実際には通常のドロップダウン メニューです。唯一の違いは、外部コンテナー「div.dropdown」が置き換えられることです。 "div.btn-group" により、ブロックからインラインブロックに変更されました

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">按钮式下拉菜单 <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><div class="dropdown">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">普通下拉菜单 <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>
ログイン後にコピー


ポップアップ

たとえば、一部のメニューはページの下部にあり、このメニューにはたまたまドロップダウン メニューがあり、ユーザーがより多くの情報を取得できるようにするために、ドロップダウン メニューをポップアップ表示する必要がありました。 Bootstrap フレームワークでは、このエフェクトのために特別に「dropup」というクラス名が提案されています。このクラス名を「btn-group」に追加するだけです

[Triangle]

ボタンの下向き三角形をデフォルトで渡します。

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