App下載

bootstrap下拉框樣式怎么設(shè)置?下拉框設(shè)置有哪些方法?

猿友 2021-06-11 15:17:53 瀏覽數(shù) (4084)
反饋

在之前我們學(xué)過在HTML中怎么設(shè)置下拉框的方法,那么今天我們就來說下:在"bootstrap下拉框樣式怎么設(shè)置?下拉框設(shè)置有哪些方法?"這個問題吧!

1.直接看代碼我們先來設(shè)置一個下拉框向右的樣式:

<html>

<head>

<title>Bootstrap 實例</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" >

<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h2>右拉菜單</h2>

<p>使用 .dropright 類用于設(shè)置下拉菜單向右彈出:</p><br>

<div class="btn-group dropright">

<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"

aria-haspopup="true" aria-expanded="false">

向右彈出

</button>

<div class="dropdown-menu">

<a class="dropdown-item" href="#">項目</a>

<a class="dropdown-item" href="#">活動</a>

<a class="dropdown-item" href="#">其他活動</a>

<a class="dropdown-item" href="#">物品分類</a>

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

<a class="dropdown-item" href="#">在線翻譯</a>

</div>

</div>

</body>

</html>

向右彈出

這樣我們就完成了右邊彈出的效果。我們通過在 ?div?元素上添加?dropright?類來實現(xiàn)向右彈出。如果要向左邊和上面的話我們只需要該為?dropleft?與?dropup?這兩個就可以了。修改?<div class="btn-group dropright">?這個里面的代碼即可!

總結(jié):

這就是今天分享的有關(guān)于怎么設(shè)置下拉框樣式的做法,當然除了上面提到的方法我們還可以在W3cschool中搜索學(xué)習(xí)更多有關(guān)于Bootstrap 的知識內(nèi)容和其他語言都可以在這個平臺中學(xué)習(xí)和進行項目實操!希望小編的分享對你有所幫助,當然如果你有更好的方法也可以和大家一起分享學(xué)習(xí)!


0 人點贊