Rumah > Artikel > hujung hadapan web > bootstrap组件怎么使用

bootstrap组件怎么使用

(*-*)浩asal: 2019-07-19 11:54:143738semak imbas

bootstrap组件使用非常简单，只需要引用相应的类、和设置相应HTML元素即可使用。

如：字体图标（推荐学习：Bootstrap视频教程）

Bootstrap 捆绑了 200 多种字体格式的字形。

如需使用字体图标，只需要简单地使用下面的代码即可。请在字体图标和文本之间保留适当的空间。

<span class="glyphicon glyphicon-search"></span>

如：使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。

下面的实例演示了基本的下拉菜单：需要js支持。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 下拉菜单（Dropdowns）</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="dropdown">
	<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
			data-toggle="dropdown">
		主题
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Java</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
		</li>
		<li role="presentation" class="divider"></li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
		</li>
	</ul>
</div>

</body>
</html>

更多Bootstrap相关技术文章，请访问Bootstrap教程栏目进行学习！

Atas ialah kandungan terperinci bootstrap组件怎么使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：bootstrap怎么设置面板大小Artikel seterusnya：为什么bootstrap图标无法显示

Artikel berkaitan

Lihat lagi