快捷導(dǎo)航

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>
&nbsp;</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>
&nbsp;</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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

通過(guò)身份證號(hào)得到出生日期和性別的js代碼
主要是通過(guò)判斷指定位數(shù)的數(shù)字，來(lái)判斷并加以算法實(shí)現(xiàn)男女性別的判斷。
2009-11-11
關(guān)于uniApp editor微信滑動(dòng)問(wèn)題
這篇文章主要介紹了關(guān)于uniApp editor微信滑動(dòng)問(wèn)題,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-01-01
uniapp在開(kāi)發(fā)app時(shí)上傳文件時(shí)的問(wèn)題記錄
在開(kāi)發(fā)uniapp應(yīng)用時(shí),可能會(huì)遇到文件上傳功能在iOS和部分Android手機(jī)上不兼容的問(wèn)題,經(jīng)過(guò)對(duì)比分析,發(fā)現(xiàn)問(wèn)題可能出在文件的路徑上,通過(guò)使用uni.saveFile方法保存文件后,再上傳可以解決問(wèn)題,這篇文章詳細(xì)介紹了解決方案,并引導(dǎo)讀者參考更多相關(guān)內(nèi)容
2024-09-09
JS獲取當(dāng)前日期時(shí)間并定時(shí)刷新示例
這篇文章主要介紹了JS如何獲取當(dāng)前日期時(shí)間并執(zhí)行定時(shí)刷新，示例代碼如下，需要的朋友不要錯(cuò)過(guò)
2014-06-06
判斷js對(duì)象是否擁有某一個(gè)屬性的js代碼
js對(duì)象是否擁有某一個(gè)屬性的判斷方法有很多，下面為大家介紹個(gè)比較實(shí)用的技巧，希望對(duì)大家有所幫助
2013-08-08
PassWord輸入框代碼分享
這篇文章主要介紹了PassWord輸入框的代碼,代碼簡(jiǎn)單易懂，非常實(shí)用，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06
JavaScript實(shí)現(xiàn)動(dòng)態(tài)增刪表格的方法
本篇文章主要介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)增刪表格，可以實(shí)現(xiàn)表格增加和刪除數(shù)據(jù)的功能，非常具有實(shí)用價(jià)值，有興趣的可以了解一下
2017-03-03
js動(dòng)態(tài)調(diào)用css屬性的小規(guī)律及實(shí)例說(shuō)明
本篇文章主要介紹了js動(dòng)態(tài)調(diào)用css屬性的小規(guī)律及實(shí)例說(shuō)明。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12
使用javascript過(guò)濾html的字符串(注釋標(biāo)記法)
本篇文章是對(duì)使用javascript過(guò)濾html的字符串進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下
2013-07-07
倒記時(shí)60刷新網(wǎng)頁(yè)的js代碼
這篇文章主要介紹了倒記時(shí)60刷新網(wǎng)頁(yè)的js代碼,需要的朋友可以參考下
2014-02-02