Home > Article > Web Front-end > How to use bootstrap components

How to use bootstrap components

(*-*)浩Original: 2019-07-19 11:54:143726browse

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>

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to set the panel size in bootstrapNext article：How to set the panel size in bootstrap

See more

How to use bootstrap components

Related articles