您好,登錄后才能下訂單哦!
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)bootstrap4中怎么設(shè)置下拉菜單,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
Bootarp 4 下拉菜單
下拉菜單是可切換的,是以列表格式顯示鏈接的上下文菜單。
<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>
代碼解讀
.dropdown
類用來(lái)指定一個(gè)下拉菜單。
我們可以使用一個(gè)按鈕或鏈接來(lái)打開下拉菜單, 按鈕或鏈接需要添加 .dropdown-toggle 和 data-toggle="dropdown
"
屬性。
<div> 元素上添加 .dropdown-menu
類來(lái)設(shè)置實(shí)際下拉菜單,然后在下拉菜單的選項(xiàng)中添加 .dropdown-item
類。
下拉菜單中的分割線
.dropdown-divider
類用于在下拉菜單中創(chuàng)建一個(gè)水平的分割線:
<div class="dropdown-divider"></div>
下拉菜單中的標(biāo)題
.dropdown-header
類用于在下拉菜單中添加標(biāo)題:
<div class="dropdown-header">Dropdown header 1</div>
下拉菜單中的可用項(xiàng)與禁用項(xiàng)
.active
類會(huì)讓下拉菜單的選項(xiàng)高亮顯示 (添加藍(lán)色背景)。
如果要禁用下拉菜單的選項(xiàng),可以使用.
disabled
類。
<a class="dropdown-item active" href="#">Active</a><a class="dropdown-item disabled" href="#">Disabled</a>
下拉菜單的定位
如果我們想讓下拉菜單右對(duì)齊,可以在元素上的 .dropdown-menu
類后添加.dropdown-menu-right
類。
<div class="dropdown-menu dropdown-menu-right">
指定向上彈出的下拉菜單
如果你希望下拉菜單向上彈出,可以將 <div> 元素的 class="dropdown"
替換為 "dropup"
:
<div class="dropup">
按鈕中設(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>
上述就是小編為大家分享的bootstrap4中怎么設(shè)置下拉菜單了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。