【Bootstrap】下拉選單Dropdown

阿新 • • 發佈：2019-01-20

下拉選單Dropdown不是表單中<select><option value=''></option></select>那種啊，而是導航條中常見的那種。

Bootstrap官方網站對下拉選單Dropdown的解釋很少，即使是他們的英文官方網站。

對於如何更改下拉選單的背景顏色、如果對下拉選單預設的黑色超級連結進行修改，如何把下拉選單更改成普通的超級連結而不是文字的樣式，官方網站是完全沒有具體的解釋。

而且，官方網站的超級連結程式碼雜糅著許多沒有用的引數。

筆者研究了很久，才找到更改下拉選單的方法。

以下是IE8對Bootstrap的下拉選單，以後各位使用Bootstrap記得千萬要用IE8去測試，谷歌等高階瀏覽器掩蓋了許多Bug。

提供如何更改下拉選單的背景顏色、如果對下拉選單預設的黑色超級連結進行修改，如何把下拉選單更改成普通的超級連結而不是文字的樣式的修改方法，

至於如何把下拉選單的框框改沒，筆者實在是無能為力的。

以上的下拉選單具體實現請看如下的程式碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link href="css/bootstrap.css" rel="stylesheet" media="screen">
		<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<title>下拉選單dropdown</title>
	</head>

	<body>
		<div class="btn-group">
        	<!--將btn-default改成btn-link可以讓其變為一個文字式的下拉選單-->
			<button type="button" class="btn btn-link dropdown-toggle"
				data-toggle="dropdown">
				下拉選單
                <!--這是下拉選單的旁邊的小三角形-->
				<span class="caret"></span>
			</button>
			<!--這裡在class中的dropdown-menu再加入label-warning等屬性可以改變下拉選單的背景色-->
			<ul class="dropdown-menu" role="menu">
				<li>
                <!--這裡的span中的class中的text-info是為了讓下拉選單裡面的連結的顏色從黑色變成更像超級連結的藍色-->
					<a href="#"><span class="text-info">專案一</span></a>
				</li>
				<li>
					<a href="#"><span class="text-info">專案二</span></a>
				</li>
			</ul>
		</div>
	</body>
</html>

沒有jquery支援下拉選單也是無法工作的。下拉選單本來就是一個javascript元件。

沒有bootstrap之前，寫一個下拉選單，要定義一個隱藏圖層，當滑鼠懸停或者點選相應的超級連結之後，此圖層顯示出來。當滑鼠懸停在此隱藏圖層，此隱藏圖層依舊顯示，當滑鼠離開此隱藏圖層，則此隱藏圖層繼續從顯示變成隱藏，很麻煩的。

【Bootstrap】下拉選單Dropdown

下拉選單Dropdown不是表單中<select><option value=''></option></select>那種啊，而是導航條中常見的那種。 Bootstrap官方網站對下拉選單Dropdown的解釋很少，即使是他

【Layui】下拉框正確樣式程式碼

author：咔咔 wechat：fangkangfk <div class="layui-form-item"> <label class="layui-form-label">型別</label>

bootstrap按鈕下拉選單（12）

如需向按鈕新增下拉選單，只需要簡單地在在一個 .btn-group 中放置按鈕和下拉選單即可。您也可以使用 <span class="caret"></span> 來指示按鈕作為下拉選單。 <div class="btn-group"> &l

使用bootstrap 的下拉選單實現select的下拉複選框多選

CSS程式碼:/*多選下拉框樣式（根據自己的樣式調整）*/ .dropdown_item{width: 100%} .dropdown_item>li:HOVER{background-color

bootstrap實現下拉選單需要的連結引入

我理解的bootstrap框架就是定義了一些常用HTML元素的樣式，把bootstrap包匯入到HTML後，不必自己定義樣式，可以直接引用定義好的樣式。我理解bootstrap框架就是定義了一些常用HTML元素的樣式，把bootstrap包匯入到HTML後，不必自

【Layui】下拉框寫法

author：咔咔 wechat：fangkangfk <div class="layui-form-item"> <label class="layui-form-label">型別</label> &

用bootstrap做下拉選單，並使用jQuery實現從伺服器載入下拉選單的item。

用bootstrap做下拉選單，並使用jQuery實現從伺服器非同步載入下拉選單的item。前臺程式碼： <div class="form-group">

bootstrap實現下拉框dropdown選中select option 美爆了

bootstrap 官網的例子有點坑，它只給你下拉，並且美化了，但你點選下拉卻不能選擇，這個坎就已經讓一大堆人不想用它下拉框了，但原生的下拉框在每個瀏覽器長的的不一樣，尤其是在ie太醜，好了廢話不多說直接上程式碼；<div id="addgroups" class="b

【Android】下拉列表、拖動條、星級評分條與標籤文字的觸控事件

下拉列表、拖動條與星級評分條都是Android中的一些基本元件。寫一個小小的程式，來說明其用法。如下圖：當下拉列表有值選定之後，則彈出相應的提示資訊，哪個值被選擇。星際評分條也一樣，獲取使用者選擇的星數。標籤文字被觸控則顯示其被觸控。滑動條，在拖動的時候，則在標

bootstrap 二級下拉選單

<!DOCTYPE html> <html> <head> <title>Bootstrap 例項 - 基本的按鈕下拉選單</title> <link href="http://libs.baid

深入理解BootStrap Item8 -- 下拉選單

1、下拉選單（基本用法）小夥伴們注意，在Bootstrap框架中的下拉選單元件是一個獨立的元件，根據不同的版本，它對應的檔案： ☑ LESS版本：對應的原始碼檔案為 dropdowns.less ☑ Sass版本：對應的原始碼檔案為 _dropdow

bootstrap多級下拉選單

<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Bootstrap 3 的多級下拉選單示例</

Bootstrap 元件-下拉選單

下拉選單選單div<div class="dropdown">下拉按鈕，id用來給下拉選單指向用的<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-togg

Bootstrap元件---下拉選單，多級選單 ,按鈕

下拉選單選單： ,dropdown（.dropup改變這個是上顯示） data-toggle="dropdown" (啟用文字處) .dropdown-menu .pull-left .pull-right 按鈕組：.btn

【解決方法】點選bootstrap上的下拉選單無反應

遇到問題是：點選bootstrap裡的下拉選單沒有反應正常情況是點選時應該是由以下變為這樣下拉選單會正常出來參照網上解決方法是：匯入的.js順序錯誤 1.匯入bootstrap的.css檔案 2.匯入jquery的.js檔案 3.匯入bootstrap

bootstrap入門【按鈕式下拉選單，輸入框組】

按鈕式下拉選單沒什麼好說的，就是以前學過的東西做了一個巢狀而已。注意dropup即可實現上拉輸入框組分前面加《span》，後面加和兩頭加三種，還可以新增按鈕，下拉選單，單選複選框哦~ <!DOCTYPE html> <html> <hea

【Bootstarp】詳解下拉選單元件

文章目錄下拉框下拉分隔線選單標題選單項狀態下拉框 1.引入js @*1、Jquery元件引用*@ <script src="~/Scripts/jquery-1.10.2.js"></s

【bootstrap】多選可搜尋下拉框

1.引入必要檔案 <script type="text/javascript" src="http://www.daimajiayuan.com/download/jquery/jquery-1.10.2.min.js"></script>

bootstrap的dropdown-menu(下拉選單)點選選項後不關閉的方法

下面的例子是bootstrap下拉選單的例子 1、html <div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dro

Bootstrap使用Tab和dropdown實現導航下拉選單效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Drop

【Bootstrap】下拉選單Dropdown

相關推薦