Bootstrap組合上、下拉框簡(jiǎn)單實(shí)現(xiàn)代碼
更新時(shí)間：2017年03月06日 11:04:40 作者：deepquiet
這篇文章主要介紹了Bootstrap組合上、下拉框的簡(jiǎn)單實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Bootstrap組合上下拉框的具體代碼，供大家參考，具體內(nèi)容如下
<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE-edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Bootstrap 101 Template</title> <link rel="external nofollow" rel="stylesheet"> <link rel="external nofollow" rel="stylesheet"> </head> <body> <!-- 下拉式 --> <div class="btn-group"> <!-- 用于顯示文字 --> <button type="button" class="btn btn-default">select</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#" rel="external nofollow" rel="external nofollow" >Action</a></li> </div> <br/> <br/> <br/> <br/> <!-- 上拉式 --> <div class="btn-group dropup"> <button type="button" class="btn btn-default">select</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#" rel="external nofollow" rel="external nofollow" >Action</a></li> </div> <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/npm.js"></script> </body> </html> <!-- -->
結(jié)果：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- BootStrap中關(guān)于Select下拉框選擇觸發(fā)事件及擴(kuò)展
- Bootstrap select多選下拉框?qū)崿F(xiàn)代碼
- Bootstrap模塊dropdown實(shí)現(xiàn)下拉框響應(yīng)
- Bootstrap框架下下拉框select搜索功能
- bootstrap datetimepicker實(shí)現(xiàn)秒鐘選擇下拉框
- bootstrap suggest下拉框使用詳解
- Bootstrap select實(shí)現(xiàn)下拉框多選效果
- 基于BootStrap multiselect.js實(shí)現(xiàn)的下拉框聯(lián)動(dòng)效果
- 基于bootstrap實(shí)現(xiàn)多個(gè)下拉框同時(shí)搜索功能
- 基于Bootstrap下拉框插件bootstrap-select使用方法詳解
相關(guān)文章
使用js實(shí)現(xiàn)html標(biāo)簽、文本的隱藏、顯示、刪除及添加
在設(shè)計(jì)網(wǎng)頁(yè)時(shí),有時(shí)需要靜態(tài)或動(dòng)態(tài)地隱藏標(biāo)簽或顯示被隱藏的標(biāo)簽,那該怎么實(shí)現(xiàn)呢?這篇文章主要給大家介紹了關(guān)于使用js實(shí)現(xiàn)html標(biāo)簽、文本的隱藏、顯示、刪除及添加的相關(guān)資料,需要的朋友可以參考下2023-06-06
JavaScript實(shí)現(xiàn)星星等級(jí)評(píng)價(jià)功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)星星等級(jí)評(píng)價(jià)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
微信小程序?qū)崿F(xiàn)動(dòng)態(tài)改變view標(biāo)簽寬度和高度的方法【附demo源碼下載】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)動(dòng)態(tài)改變view標(biāo)簽寬度和高度的方法,涉及微信小程序事件響應(yīng)及使用setData針對(duì)data數(shù)據(jù)動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-12-12
JS學(xué)習(xí)筆記之?dāng)?shù)組去重實(shí)現(xiàn)方法小結(jié)
這篇文章主要介紹了JS學(xué)習(xí)筆記之?dāng)?shù)組去重實(shí)現(xiàn)方法,結(jié)合實(shí)例形式總結(jié)分析了javascript數(shù)組去重的5種常見實(shí)現(xiàn)方法及相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
webpack HappyPack實(shí)戰(zhàn)詳解
這篇文章主要介紹了webpack HappyPack實(shí)戰(zhàn)詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
本文章通過(guò)實(shí)例代碼給大家詳細(xì)介紹js中正則表達(dá)式的全局匹配模式 /g的用法，需要的朋友參考下2017-04-04
這篇文章主要介紹了自己實(shí)現(xiàn)ajax封裝示例,需要的朋友可以參考下2014-04-04
JavaScript獲取一個(gè)范圍內(nèi)日期的方法
這篇文章主要介紹了JavaScript獲取一個(gè)范圍內(nèi)日期的方法,涉及javascript操作日期的相關(guān)技巧,需要的朋友可以參考下2015-04-04
圍繞表單的可訪問(wèn)性與交互性上，各瀏覽器都下了很大工夫，比如fieldset與legend等用于增強(qiáng)區(qū)域感的元素，for，accessKey，defaultValue，maxlength，tabIndex等用于交互或提示的屬性。不過(guò)，今天只講tabIndex。2009-12-12
任意一個(gè)名稱都是有意義的，先從字面意思來(lái)理解。async 是“異步”的簡(jiǎn)寫，而 await 可以認(rèn)為是 async wait 的簡(jiǎn)寫。所以應(yīng)該很好理解 async 用于申明一個(gè) function 是異步的，而 await 用于等待一個(gè)異步方法執(zhí)行完成2022-12-12