建站
咨詢
售后
建站咨詢
新聞中心
Bootstrap4 下拉菜單
Bootstrap4 下拉菜單依賴于 popper.min.js。
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、臨洮網(wǎng)絡(luò)推廣、成都小程序開(kāi)發(fā)、臨洮網(wǎng)絡(luò)營(yíng)銷、臨洮企業(yè)策劃、臨洮品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供臨洮建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com
下拉菜單是可切換的，是以列表格式顯示鏈接的上下文菜單。
實(shí)例
<
div
class
=
"
dropdown
"
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary dropdown-toggle
"
data-toggle
=
"
dropdown
"
>
Dropdown button
button
>
<
div
class
=
"
dropdown-menu
"
>
<
a
class
=
"
dropdown-item
"
href
=
"
#
"
>
Link 1
a
>
<
a
class
=
"
dropdown-item
"
href
=
"
#
"
>
Link 2
a
>
<
a
class
=
"
dropdown-item
"
href
=
"
#
"
>
Link 3
a
>
div
>
div
>
嘗試一下 ?
實(shí)例解析
.dropdown 類用來(lái)指定一個(gè)下拉菜單。
我們可以使用一個(gè)按鈕或鏈接來(lái)打開(kāi)下拉菜單， 按鈕或鏈接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 屬性。
我們也可以在 標(biāo)簽中使用：
實(shí)例
<
div
class
=
"
dropdown
"
>
<
a
class
=
"
btn btn-secondary dropdown-toggle
"
href
=
"
#
"
role
=
"
button
"
id
=
"
dropdownMenuLink
"
data-toggle
=
"
dropdown
"
aria-haspopup
=
"
true
"
aria-expanded
=
"
false
"
>
Dropdown link
a
>
<
div
class
=
"
dropdown-menu
"
aria-labelledby
=
"
dropdownMenuLink
"
>
<
a
class
=
"
dropdown-item
"
href
=
"
#
"
>
Action
a
>
<
a
class
=
"
dropdown-item
"
href
=
"
#
"
>
Another action
a
>
<
a
class
=
"
dropdown-item
"
href
=
"
#
"
>
Something else here
a
>
div
>
div
>
嘗試一下 ?
下拉菜單中的分割線
.dropdown-divider 類用于在下拉菜單中創(chuàng)建一個(gè)水平的分割線：
實(shí)例
<
div
class
=
"
dropdown-divider
"
>
div
>
嘗試一下 ?
下拉菜單中的標(biāo)題
.dropdown-header 類用于在下拉菜單中添加標(biāo)題：
實(shí)例
<
div
class
=
"
dropdown-header
"
>
Dropdown header 1
div
>
嘗試一下 ?
下拉菜單中的可用項(xiàng)與禁用項(xiàng)
.active 類會(huì)讓下拉菜單的選項(xiàng)高亮顯示 (添加藍(lán)色背景)。
如果要禁用下拉菜單的選項(xiàng)，可以使用.disabled 類。
實(shí)例
<
a
class
=
"
dropdown-item active
"
href
=
"
#
"
>
Active
a
>
<
a
class
=
"
dropdown-item disabled
"
href
=
"
#
"
>
Disabled
a
>
嘗試一下 ?
下拉菜單的定位
如果我們想讓下拉菜單右對(duì)齊，可以在元素上的 .dropdown-menu 類后添加 .dropdown-menu-right 類。
實(shí)例
<
div
class
=
"
dropdown-menu dropdown-menu-right
"
>
嘗試一下 ?
下拉菜單彈出方向設(shè)置
下拉菜單彈出方向默認(rèn)為向下，當(dāng)然我們也可以設(shè)置不同的方向。
指定向右彈出的下拉菜單
如果你希望下拉菜單向右彈出，可以在 div 元素上添加 "dropright" 類:
實(shí)例
<
div
class
=
"
btn-group dropright
"
>
<
button
type
=
"
button
"
class
=
"
btn btn-secondary dropdown-toggle
"
data-toggle
=
"
dropdown
"
aria-haspopup
=
"
true
"
aria-expanded
=
"
false
"
>
Dropright
button
>
<
div
class
=
"
dropdown-menu
"
>
div
>
div
>
<
div
class
=
"
btn-group dropright
"
>
<
button
type
=
"
button
"
class
=
"
btn btn-secondary
"
>
Split dropright
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-secondary dropdown-toggle dropdown-toggle-split
"
data-toggle
=
"
dropdown
"
aria-haspopup
=
"
true
"
aria-expanded
=
"
false
"
>
<
span
class
=
"
sr-only
"
>
Toggle Dropright
span
>
button
>
<
div
class
=
"
dropdown-menu
"
>
div
>
div
>
嘗試一下 ?
指定向上彈出的上拉菜單
如果你希望上拉菜單向上彈出，可以在 div 元素上添加 "dropup" 類:
實(shí)例
<
div
class
=
"
btn-group dropup
"
>
<
button
type
=
"
button
"
class
=
"
btn btn-secondary dropdown-toggle
"
data-toggle
=
"
dropdown
"
aria-haspopup
=
"
true
"
aria-expanded
=
"
false
"
>
Dropup
button
>
<
div
class
=
"
dropdown-menu
"
>
div
>
div
>
<
div
class
=
"
btn-group dropup
"
>
<
button
type
=
"
button
"
class
=
"
btn btn-secondary
"
>
Split dropup
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-secondary dropdown-toggle dropdown-toggle-split
"
data-toggle
=
"
dropdown
"
aria-haspopup
=
"
true
"
aria-expanded
=
"
false
"
>
<
span
class
=
"
sr-only
"
>
Toggle Dropdown
span
>
button
>
<
div
class
=
"
dropdown-menu
"
>
div
>
div
>
嘗試一下 ?
指定向左邊彈出的下拉菜單
如果你希望下拉菜單向上彈出，可以在 div 元素上添加 "dropleft" 類:
實(shí)例
<
div
class
=
"
btn-group dropleft
"
>
<
button
type
=
"
button
"
class
=
"
btn btn-secondary dropdown-toggle
"
data-toggle
=
"
dropdown
"
aria-haspopup
=
"
true
"
aria-expanded
=
"
false
"
>
Dropleft
button
>
<
div
class
=
"
dropdown-menu
"
>
div
>
div
>
<
div
class
=
"
btn-group
"
>
<
div
class
=
"
btn-group dropleft
"
role
=
"
group
"
>
<
button
type
=
"
button
"
class
=
"
btn btn-secondary dropdown-toggle dropdown-toggle-split
"
data-toggle
=
"
dropdown
"
aria-haspopup
=
"
true
"
aria-expanded
=
"
false
"
>
<
span
class
=
"
sr-only
"
>
Toggle Dropleft
span
>
button
>
<
div
class
=
"
dropdown-menu
"
>
div
>
div
>
<
button
type
=
"
button
"
class
=
"
btn btn-secondary
"
>
Split dropleft
button
>
div
>
嘗試一下 ?
下拉菜單設(shè)置文本
.dropdown-item-text 類可以設(shè)置下拉菜單中的文本項(xiàng)：
實(shí)例
<
div
class
=
"
dropdown-menu
"
>
<
a
class
=
"
dropdown-item
"
href
=
"
#
"
>
鏈接 1
a
>
<
a
class
=
"
dropdown-item
"
href
=
"
#
"
>
鏈接 2
a
>
<
a
class
=
"
dropdown-item-text
"
href
=
"
#
"
>
文本鏈接
a
>
<
span
class
=
"
dropdown-item-text
"
>
僅僅是文本
span
>
div
>
嘗試一下 ?
按鈕中設(shè)置下拉菜單
我們可以在按鈕中添加下拉菜單：
實(shí)例
<
div
class
=
"
btn-group
"
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary
"
>
Sony
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary dropdown-toggle dropdown-toggle-split
"
data-toggle
=
"
dropdown
"
>
<
span
class
=
"
caret
"
>
span
>
button
>
<
div
class
=
"
dropdown-menu
"
>
<
a
class
=
"
dropdown-item
"
href
=
"
#
"
>
Tablet
a
>
<
a
class
=
"
dropdown-item
"
href
=
"
#
"
>
Smartphone
a
>
div
>
div
>
嘗試一下 ?
垂直按鈕組帶下拉菜單：
實(shí)例
<
div
class
=
"
btn-group-vertical
"
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary
"
>
Apple
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary
"
>
Samsung
button
>
<
div
class
=
"
btn-group
"
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary dropdown-toggle
"
data-toggle
=
"
dropdown
"
>
Sony
button
>
<
div
class
=
"
dropdown-menu
"
>
<
a
class
=
"
dropdown-item
"
href
=
"
#
"
>
Tablet
a
>
<
a
class
=
"
dropdown-item
"
href
=
"
#
"
>
Smartphone
a
>
div
>
div
>
div
>
嘗試一下 ?
標(biāo)題名稱：創(chuàng)新互聯(lián)Bootstrap4教程：Bootstrap4下拉菜單
當(dāng)前URL：http://m.5511xx.com/article/djjscpo.html
