Bootstrap學習筆記 下拉列表

一、基本用法

class="

dropdown
">
class="
btn btn-default dropdown-toggle
" type="
button
" id="
dropdownmenu1
" data-toggle="
dropdown
">下拉列表
class="
caret
">

1.1 使用方法：

1、使用乙個名為「dropdown

」的容器包裹了整個下拉列表元素，示例中為:

dropdown">

2、使用了乙個按鈕做為父選單，並且定義類名「dropdown-toggle

」和自定義「data-toggle

」屬性，且值必須和最外容器類名一致，此示例為:

data-toggle="dropdown"

3、下拉列表項使用乙個ul

列表，並且定義乙個類名為「dropdown-menu

」，此示例為:

效果如下：

三、下拉列表的選單標題

dropdown-header">第二部分選單頭部

class="

dropdown
">
class="
btn btn-default dropdown-toggle
" type="
button
" id="
dropdownmenu1
" data-toggle="
dropdown
">下拉列表
四、下拉列表的對齊方式
bootstrap框架中下拉列表預設是左對齊，如果你想讓下拉列表相對于父容器右對齊時，可以在「dropdown-menu」上新增乙個「pull-right」或者「dropdown-menu-right」類名，如下所示：
使用pull-right類使下拉列表與父容器右邊對齊

class="
dropdown
">
class="
btn btn-default dropdown-toggle
" type="
button
" id="
dropdownmenu1
" data-toggle="
dropdown
">下拉列表
class="
caret
">
使用dropdown-menu-right類使下拉列表與父容器右邊對齊
class="
dropdown
">
class="
btn btn-default dropdown-toggle
" type="
button
" id="
dropdownmenu1
" data-toggle="
dropdown
">下拉列表
五、下拉列表的狀態
當前狀態（.active）和禁用狀態（.disabled）
class="

dropdown
">
class="
btn btn-default dropdown-toggle
" type="
button
" id="
dropdownmenu1
" data-toggle="
dropdown
">下拉列表
CSS學習筆記 下拉列表
prcorangetitle charset utf 8 dropdown dropdown content dropdown hover dropdown content style head 滑鼠移動後出現下拉列表h2 將滑鼠移動到指定元素上就能看到下拉列表。p class dropdown 滑...
學習筆記 下拉框動態級聯
html js 學院名稱 課程名稱 function loadinstitution editable false,不可編輯狀態 cache false,panelheight 150 valuefield id textfield institutionname onhidepanel funct...
學習筆記 下拉框實現左右聯動
先看一下效果圖 然後是 w3c dtd xhtml 1.0 transitional en select1 test this.value style width 100px 0 請選擇 a1 逗比 a2 大逗比 a3 小逗比 a4 逗比逗比 select select2 style width 1...