Bootstrap組合上、下拉框簡單實現(xiàn)代碼
更新時間:2017年03月06日 11:04:40 作者:deepquiet
這篇文章主要介紹了Bootstrap組合上、下拉框的簡單實現(xiàn)代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了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é)果:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- BootStrap中關(guān)于Select下拉框選擇觸發(fā)事件及擴展
- Bootstrap select多選下拉框?qū)崿F(xiàn)代碼
- Bootstrap模塊dropdown實現(xiàn)下拉框響應(yīng)
- Bootstrap框架下下拉框select搜索功能
- bootstrap datetimepicker實現(xiàn)秒鐘選擇下拉框
- bootstrap suggest下拉框使用詳解
- Bootstrap select實現(xiàn)下拉框多選效果
- 基于BootStrap multiselect.js實現(xiàn)的下拉框聯(lián)動效果
- 基于bootstrap實現(xiàn)多個下拉框同時搜索功能
- 基于Bootstrap下拉框插件bootstrap-select使用方法詳解
相關(guān)文章
JavaScript實現(xiàn)動態(tài)增刪表格的方法
本篇文章主要介紹了JavaScript實現(xiàn)動態(tài)增刪表格,可以實現(xiàn)表格增加和刪除數(shù)據(jù)的功能,非常具有實用價值,有興趣的可以了解一下2017-03-03js動態(tài)調(diào)用css屬性的小規(guī)律及實例說明
本篇文章主要介紹了js動態(tài)調(diào)用css屬性的小規(guī)律及實例說明。需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12使用javascript過濾html的字符串(注釋標(biāo)記法)
本篇文章是對使用javascript過濾html的字符串進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-07-07