Bootstrap（三）

最新推荐文章于 2021-04-03 09:42:11 发布

anran_1211

最新推荐文章于 2021-04-03 09:42:11 发布

阅读量186

点赞数

分类专栏： Bootstrap 文章标签： bootstrap 响应式

本文链接：https://blog.csdn.net/anran_1211/article/details/75143031

版权

Bootstrap 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

按钮：btn-default（默认）

btn-link（链接）

大小：btn-lg/sm/xs

状态：active（已经选择中的状态）/disable（禁用状态）

种类：a / input / button

例如：<a href="#" class="btn btn-primary">按钮</a>

块级：btn-block

按钮组（组合方式）：btn-group / btn-group-justified（按钮组的端点对其）/ btn-group-vertical（把按钮组从横向转为纵向）

<div class="btn-group">        //把三个按钮变成了一个整体
	<input type="button" value=" 按钮1" class="btn btn-primary">
	<input type="button" value=" 按钮2" class="btn btn-primary">
	<input type="button" value=" 按钮3" class="btn btn-primary">
</div>

使用btn-group-justified注意（a标签可以正常使用，input和button需要注意）：

                       <div class="btn-group btn-group-justified">
				<a href="#" class="btn btn-primary">按钮1</a>
				<a href="#" class="btn btn-primary">按钮2</a>
				<a href="#" class="btn btn-primary">按钮3</a>
			</div><br></br>
			<div class="btn-group btn-group-justified">  
			//input和button要想使用btn-group-justified，必须给每个input或者button加一层容器，并且这层容器的class="btn-group";
				<div class="btn-group">
					<input type="button" value=" 按钮1" class="btn btn-primary">
				</div>
				<div class="btn-group">
					<input type="button" value=" 按钮2" class="btn btn-primary">
				</div>
				<div class="btn-group">
					<input type="button" value=" 按钮3" class="btn btn-primary">
				</div>
			</div>

btn-group-vertical：不需要和btn-group组合使用，自己单独使用就可以了（可以控制按钮的大小 btn-group-lg/sm/xs），a，input，button用法和a相同，不需要加容器，直接用

                        <div class="btn-group-vertical btn-group-lg">
				<a href="#" class="btn btn-primary">按钮1</a>
				<a href="#" class="btn btn-primary">按钮2</a>
				<a href="#" class="btn btn-primary">按钮3</a>
			</div>

如果只是按钮，a，input，button三种都没事问题，如果按钮中需要和图标组合使用，则用到最多的是a，button。input中不能添加图标。

<a href="#" class="btn btn-primary">按钮 <span class="caret"></span></a>
<button class="btn btn-primary">按钮 <span class="caret"></span></button>

按钮和图标分开的组合使用：（a和button用法相同，input仍不能满足需求）

<div class="btn-group">
	<a href="#" class="btn btn-primary">按钮</a>
	<a href="#" class="btn btn-primary"><span class="caret"></span></a>
</div>

向下的箭头，让他们变成向上，需要在父级中加上class="dropup"（dropdown）

<div class="btn-group dropup">
	<a href="#" class="btn btn-primary">按钮</a>
	<a href="#" class="btn btn-primary"><span class="caret"></span></a>
</div>

下拉菜单

属性：data-*（用来操作js，实现交互，js的触发器，与js有关 data-toggle="dropdown"） aria-* role

aria-expanded="false" 默认状态下下拉菜单是收起来的，true是代表下拉菜单是展开的

                <div class="dropdown">
		  	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
		    	Dropdown
		    	<span class="caret"></span>
		 	 </button>
		  	<ul class="dropdown-menu">
			    <li><a href="#">Action</a></li>
			    <li><a href="#">Another action</a></li>
			    <li><a href="#">Something else here</a></li>
			    <li role="separator" class="divider"></li>
			    <li><a href="#">Separated link</a></li>
		  	</ul>
		</div>

dropdown-menu-right/left 让下拉的菜单靠右或者靠左

                     <div class="row">
			<div class="col-lg-4">
				<div class="dropdown open">
				  	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
				    	Dropdown
				    	<span class="caret"></span>
				 	 </button>
				  	<ul class="dropdown-menu">
					    <li><a href="#">Action</a></li>
					    <li><a href="#">Another action</a></li>
					    <li><a href="#">Something else here</a></li>
					    <li role="separator" class="divider"></li>
					    <li><a href="#">Separated link</a></li>
				  	</ul>
				</div>
			</div>
			<div class="col-lg-4">
				<div class="dropdown open pull-right">
				  	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
				    	Dropdown
				    	<span class="caret"></span>
				 	 </button>
				  	<ul class="dropdown-menu">
					    <li><a href="#">Action</a></li>
					    <li><a href="#">Another action</a></li>
					    <li><a href="#">Something else here</a></li>
					    <li role="separator" class="divider"></li>
					    <li><a href="#">Separated link</a></li>
				  	</ul>
				</div>
			</div>
			<div class="col-lg-4">
				<div class="dropdown open">
				  	<button class="btn btn-default btn-block dropdown-toggle" type="button" data-toggle="dropdown">
				    	Dropdown
				    	<span class="caret"></span>
				 	 </button>
				  	<ul class="dropdown-menu dropdown-menu-right">
					    <li><a href="#">Action</a></li>
					    <li><a href="#">Another action</a></li>
					    <li><a href="#">Something else here</a></li>
					    <li role="separator" class="divider"></li>
					    <li><a href="#">Separated link</a></li>
				  	</ul>
				</div>
			</div>
		</div>

下拉菜单（open 一开始的时候下拉菜单是展开的，dropdown-header ：菜单中头部分，划分两个部分的分割线为 class="divider"）

上菜单（dropup），用法和下拉菜单相同

                                  <div class="dropdown open">
				  	<button class="btn btn-default btn-block dropdown-toggle" type="button" data-toggle="dropdown">
				    	Dropdown
				    	<span class="caret"></span>
				 	 </button>
				  	<ul class="dropdown-menu btn-block">
				  	    <li class="dropdown-header">第一部分</li>
					    <li class="active"><a href="#">Action</a></li>   //默认是选中的
					    <li><a href="#">Another action</a></li>
					    <li><a href="#">Something else here</a></li>
					    <li class="divider"></li>
					    <li class="dropdown-header">第二部分</li>
					    <li class="disabled"><a href="#">Action</a></li>  //默认是禁用的
					    <li><a href="#">Another action</a></li>
					    <li><a href="#">Separated link</a></li>
				  	</ul>
				</div>

运动的菜单：

<style>
	.my-btnStyle button{width:85px;height:35px;border:none; background: #ccc;}
	.my-btnStyle .dropdown-menu{animation:0.3s linear imove;}
	@keyframes imove{
		0%{opacity: 0;transform:translateY(-20px); }
		100%{opacity: 1;transform:translateY(0); }
	}
</style>

<div class="dropdown my-btnStyle">
	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
		导航1
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu menu-width">
		<li><a href="#"><span class="glyphicon glyphicon-pawn pull-left"></span>目录1</a></li>
		<li><a href="#"><span class="glyphicon glyphicon-pawn pull-left"></span>目录2</a></li>
		<li><a href="#"><span class="glyphicon glyphicon-pawn pull-left"></span>目录3</a></li>
	</ul>
</div>