Bootstrap《基礎十四》 按鈕下拉列表

2021-09-22 20:27:19 字數 1564 閱讀 8513

原文:

bootstrap《基礎十四》 按鈕下拉列表

下面的例項演示了乙個基本的簡單的按鈕下拉列表:

data-toggle="dropdown">預設 

data-toggle="dropdown">原始

結果如下所示:

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

預設data-toggle="dropdown">

切換下拉列表

原始data-toggle="dropdown">

切換下拉列表

結果如下所示:

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

data-toggle="dropdown">預設 

data-toggle="dropdown">原始

data-toggle="dropdown">成功

結果如下所示:

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

data-toggle="dropdown">預設 

data-toggle="dropdown">原始

結果如下所示:

系列文章:

bootstrap 《基礎一》 css 概覽

bootstrap《基礎二》網路系統

bootstrap《基礎三》排版

bootstrap《基礎四》 **

bootstrap 《基礎五》**

bootstrap《基礎六》 表單

bootstrap 《基礎七》按鈕

bootstrap 《基礎八》

bootstrap《基礎九》輔助類

bootstrap《基礎十》 響應式實用工具

bootstrap《基礎十一》字型圖示(glyphicons)

bootstrap 《基礎十二》下拉列表(dropdowns)

bootstrap《基礎十三》 按鈕組

bootstrap《基礎十四》 按鈕下拉列表

bootstrap《基礎十五》 輸入框組

bootstrap《基礎十六》 導航元素

bootstrap《基礎十七》導航欄

bootstrap 《基礎十八》麵包屑導航(breadcrumbs)

bootstrap 《基礎十九》分頁

bootstrap《基礎二十》 標籤

bootstrap 《基礎二十一》徽章(badges)

bootstrap 《基礎二十二》超大螢幕(jumbotron)

bootstrap 《基礎二十三》頁面標題(page header)

bootstrap《基礎二十四》 縮圖

bootstrap 《基礎二十五》警告(alerts)

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 ...

Bootstrap模板分析 按鈕篇

我們先從最常見也最易學的按鈕開始,選用的是 docs examples theme 模板 主題模板 用瀏覽器開啟可見 其實這張圖已經告訴我們不同樣式的按鈕使用方法了,稍後就能看到。用dw開啟index.html,因為theme示例中包含了按鈕 縮圖 標籤 角標等等的樣式,所以 還是挺長的,為了專注學...