Bootstrap元件(2) 按鈕下拉列表

2021-10-02 03:06:49 字數 1842 閱讀 5725

如需向按鈕新增下拉列表,只需要簡單地在在乙個 .btn-group 中放置按鈕和下拉列表即可。您也可以使用來指示按鈕作為下拉列表。

示例:

="btn-group"

>

"button"

class

="btn btn-primary dropdown-toggle" data-toggle=

"dropdown"

>原始

="caret"

>

<

/span>

<

/button>

="dropdown-menu" role=

"menu"

>

"#">功能<

/a>

<

/li>

"#">另乙個功能<

/a>

<

/li>

"#">其他<

/a>

<

/li>

="divider"

>

<

/li>

"#">分離的鏈結<

分割的按鈕下拉列表

分割的按鈕下拉列表使用與下拉列表按鈕大致相同的樣式,但是對下拉列表新增了原始的功能。分割按鈕的左邊是原始的功能,右邊是顯示下拉列表的切換。

示例:="btn-group"

>

"button"

class

="btn btn-primary"

>原始<

/button>

"button"

class

="btn btn-primary dropdown-toggle"

data-toggle=

"dropdown"

>

="caret"

>

<

/span>

="sr-only"

>切換下拉列表<

/span>

<

/button>

="dropdown-menu" role=

"menu"

>

"#">功能<

/a>

<

/li>

"#">另乙個功能<

/a>

<

/li>

"#">其他<

/a>

<

/li>

="divider"

>

<

/li>

"#">分離的鏈結<

按鈕下拉列表的大小

您可以使用帶有各種大小按鈕的下拉列表:.btn-lg、.btn-sm 或 .btn-xs。

按鈕上拉選單

選單也可以往上拉伸的,只需要簡單地向父 .btn-group 容器新增 .dropup 即可。

關於Bootstrap按鈕元件消除黃框的方法

bootstrap的button邊框問題 最近 上學習bootstrap時,發現很多童鞋都會遇到很多坑,有些很容易掉進去就出不來了 bootstrap框架在國內相對來說還是非常熱的,畢竟上手快速,簡潔,在日常開發中可是能省不少事呢,但是吧,剛入bootstrap的童鞋,對bootstrap的樣式原始...

Bootstrap筆記 按鈕

確定要刪除嗎?修改內容 修改內容 修改內容 修改內容 btn 是按鈕樣式的基類,在新增其他樣式前,必須先新增btn btn primary btn default btn success btn warning btn danger active 啟用 設定按鈕大小 btn lg btn md bt...

bootstrap框架之按鈕

基礎用法 tyoe button class btn btn default button class btn group type button class btn btn default button div class btn group vertical type button class ...