Bootstrap

77不吃香菜.

于 2023-10-22 20:02:10 发布

阅读量14

点赞数

文章标签： bootstrap 前端 javascript

本文链接：https://blog.csdn.net/luna_H/article/details/133977117

版权

dropup下拉箭头向上 dropdown下拉箭头向下

data-toggle="dropdown"下拉功能
dropdown-menu子选项

divider与hr标签一致分割线

dropdown-menu-right子选项靠右

dropdown-header设置子类菜单为标题

btn-group按钮组

btn-toolbar类似于row
btn-group-vertical按钮组的垂直排列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="../../bootstrap-3.3.7-dist/css/bootstrap.css"/>
		<title></title>
	</head>
	<body>
		<div class="visible-print-block h1">111111</div>
		<div class="hidden-print h1">2222222</div>
		<hr >
		<!-- dropup下拉箭头向上  dropdown下拉箭头向下 -->
		<!-- data-toggle="dropdown"下拉功能 
		dropdown-menu子选项-->
		<!-- divider与hr标签一致   分割线-->
		<!-- dropdown-menu-right子选项靠右 -->
		<!-- dropdown-header设置子类菜单为标题 -->
		<div class="dropdown">
		  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
		   data-toggle="dropdown">
		    Dropdown
		    <span class="caret"></span>
		  </button>
		  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
		    <li class="dropdown-header">Action</li>
		    <li><a href="#">Another action</a></li>
			<li><hr ></li>
		    <li class="disabled"><a href="#">Something else here</a></li>
		    <li role="separator" class="divider"></li>
		    <li><a href="#">Separated link</a></li>
		  </ul>
		</div>
		<hr >
		<!-- btn-group按钮组 -->
		<!-- btn-toolbar类似于row -->
		<div class="btn-toolbar">
			<div class="btn-group btn-group-lg" >
			  <button type="button" class="btn btn-default">Left</button>
			  <button type="button" class="btn btn-default">Middle</button>
			  <button type="button" class="btn btn-default">Right</button>
			</div>
			<div class="btn-group" >
			  <button type="button" class="btn btn-default">1</button>
			  <button type="button" class="btn btn-default">2</button>
			  <button type="button" class="btn btn-default">3</button>
			</div>
			<div class="btn-group btn-group-sm" >
			  <button type="button" class="btn btn-default">1</button>
			  <button type="button" class="btn btn-default">2</button>
			  <button type="button" class="btn btn-default">3</button>
			</div>
			<div class="btn-group btn-group-xs" >
			  <button type="button" class="btn btn-default">1</button>
			  <button type="button" class="btn btn-default">2</button>
			  <button type="button" class="btn btn-default">3</button>
			</div>
		</div>
		<hr >
		<!-- btn-group-vertical按钮组的垂直排列 -->
		<div class="btn-group">
		  <button type="button" class="btn btn-default">1</button>
		  <div class="btn-group dropup">
			  <button type="button" class="btn btn-default dropdown-toggle"
			  data-toggle="dropdown">
			  2
			  <span class="caret"></span>
			  </button>
			  <ul class="dropdown-menu">
			    <li><a href="#">111111</a></li>
			    <li><a href="#">222222</a></li>
			  </ul>
		  </div>
		  <div class="btn-group" >
		    <button type="button" class="btn btn-default dropdown-toggle"
			 data-toggle="dropdown">
		      Dropdown
		      <span class="caret"></span>
		    </button>
		    <ul class="dropdown-menu">
		      <li><a href="#">Dropdown link</a></li>
		      <li><a href="#">Dropdown link</a></li>
		    </ul>
		  </div>
		</div>
		
	</body>
	<script src="../../bootstrap-3.3.7-dist/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../bootstrap-3.3.7-dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
</html>

77不吃香菜.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Bootstrap

dropup下拉箭头向上 dropdown下拉箭头向下。data-toggle="dropdown"下拉功能。btn-group-vertical按钮组的垂直排列。dropdown-menu子选项。dropdown-menu-right子选项靠右。dropdown-header设置子类菜单为标题。divider与hr标签一致分割线。btn-toolbar类似于row。btn-group按钮组。
复制链接

扫一扫