bootstrap组件怎么使用

互联网 19-7-19

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教程栏目进行学习！

以上就是bootstrap组件怎么使用的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： bootstrap