App下載

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

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

在之前我們學(xué)過(guò)在HTML中怎么設(shè)置下拉框的方法，那么今天我們就來(lái)說(shuō)下:在"bootstrap下拉框樣式怎么設(shè)置？下拉框設(shè)置有哪些方法？"這個(gè)問(wèn)題吧！

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

<html>

	<head>

		<title>Bootstrap 實(shí)例</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="#">項(xiàng)目</a>

					<a class="dropdown-item" href="#">活動(dòng)</a>

					<a class="dropdown-item" href="#">其他活動(dòng)</a>

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

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

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

				</div>

			</div>

	</body>

</html>

向右彈出

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

總結(jié)：

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


Bootstrap

0 人點(diǎn)贊