中文字幕一区二区人妻电影,亚洲av无码一区二区乱子伦as ,亚洲精品无码永久在线观看,亚洲成aⅴ人片久青草影院按摩,亚洲黑人巨大videos

上一篇：Bootstrap4 卡片 下一篇：Bootstrap4 折疊

Bootstrap4 下拉菜單

Bootstrap4 下拉菜單依賴于 popper.min.js。

下拉菜單是可切換的，是以列表格式顯示鏈接的上下文菜單。

實例

<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 類用來指定一個下拉菜單。

我們可以使用一個按鈕或鏈接來打開下拉菜單， 按鈕或鏈接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 屬性。

<div> 元素上添加 .dropdown-menu 類來設置實際下拉菜單，然后在下拉菜單的選項中添加 .dropdown-item 類。

我們也可以在 <a> 標簽中使用：

實例

<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)建一個水平的分割線：

實例

<div class="dropdown-divider"></div>

運行代碼 ?

下拉菜單中的標題

.dropdown-header 類用于在下拉菜單中添加標題：

實例

<div class="dropdown-header">Dropdown header 1</div>

運行代碼 ?

下拉菜單中的可用項與禁用項

.active 類會讓下拉菜單的選項高亮顯示 (添加藍色背景)。

如果要禁用下拉菜單的選項，可以使用.disabled 類。

實例

<a class="dropdown-item active" href="#">Active</a> <a class="dropdown-item disabled" href="#">Disabled</a>

運行代碼 ?

下拉菜單的定位

如果我們想讓下拉菜單右對齊，可以在元素上的 .dropdown-menu 類后添加 .dropdown-menu-right 類。

實例

<div class="dropdown-menu dropdown-menu-right">

運行代碼 ?

下拉菜單彈出方向設置

下拉菜單彈出方向默認為向下，當然我們也可以設置不同的方向。

指定向右彈出的下拉菜單

如果你希望下拉菜單向右彈出，可以在 div 元素上添加 "dropright" 類:

實例

<!-- Default dropright button --> <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"> <!-- Dropdown menu links --> </div> </div> <!-- Split dropright button --> <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"> <!-- Dropdown menu links --> </div> </div>

運行代碼 ?

指定向上彈出的上拉菜單

如果你希望上拉菜單向上彈出，可以在 div 元素上添加 "dropup" 類:

實例

<!-- Default dropup button --> <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"> <!-- Dropdown menu links --> </div> </div> <!-- Split dropup button --> <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"> <!-- Dropdown menu links --> </div> </div>

運行代碼 ?

指定向左邊彈出的下拉菜單

如果你希望下拉菜單向上彈出，可以在 div 元素上添加 "dropleft" 類:

實例

<!-- Default dropleft button --> <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"> <!-- Dropdown menu links --> </div> </div> <!-- Split dropleft button --> <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"> <!-- Dropdown menu links --> </div> </div> <button type="button" class="btn btn-secondary"> Split dropleft </button> </div>

運行代碼 ?

按鈕中設置下拉菜單

我們可以在按鈕中添加下拉菜單：

實例

<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 卡片 下一篇：Bootstrap4 折疊