How to use bootstrap components-Bootstrap Tutorial-php.cn

How to use bootstrap components

(*-*)浩

Release： 2019-07-19 11:54:14

Original

3740 people have browsed it

The bootstrap component is very simple to use. You only need to reference the corresponding class and set the corresponding HTML element to use it.

For example: font icon (recommended learning: Bootstrap video tutorial)

Bootstrap comes bundled with glyphs in more than 200 font formats.

To use font icons, simply use the following code. Please leave appropriate space between font icon and text.

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

Copy after login

For example: to use the drop-down menu, you only need to add the drop-down menu in class .dropdown.

The following example demonstrates a basic drop-down menu: js support is required.

<!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>

Copy after login

For more technical articles related to Bootstrap, please visit the Bootstrap Tutorial column to learn!

The above is the detailed content of How to use bootstrap components. For more information, please follow other related articles on the PHP Chinese website!