bootstrap3-Button 旋钮 _Web前端

bootstrap3-Button 按钮

Buttons are used widely in any website or app.

按钮在web应用中使用非常的广泛。

按钮类别（不同颜色传递不同信息）

<!DOCTYPE html>
<html>
<head>
<title>Default buttons from Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css"
	rel="stylesheet" media="screen">
<style>
body {
	padding: 50px
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<!-- Standard button -->
	<!-- 标准按钮 -->
	<button type="button" class="btn btn-default">Default</button>

	<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
	<!-- 基本样式 -->
	<button type="button" class="btn btn-primary">Primary</button>

	<!-- Indicates a successful or positive action -->
	<!-- 成功 -->
	<button type="button" class="btn btn-success">Success</button>

	<!-- Contextual button for informational alert messages -->
	<!-- 信息 -->
	<button type="button" class="btn btn-info">Info</button>

	<!-- Indicates caution should be taken with this action -->
	<!-- 警告 -->
	<button type="button" class="btn btn-warning">Warning</button>

	<!-- Indicates a dangerous or potentially negative action -->
	<!-- 危险 -->
	<button type="button" class="btn btn-danger">Danger</button>

	<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
	<!-- 削弱按钮：变成超链接样式 -->
	<button type="button" class="btn btn-link">Link</button>
	
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="../../bootstrap-3.0.0/assets/js/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>

按钮大小

<!DOCTYPE html>
<html>
<head>
<title>Default buttons from Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css"
	rel="stylesheet" media="screen">
<style>
body {
	padding: 50px
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<!-- 大按钮 -->
	<button type="button" class="btn btn-primary btn-lg">Large button</button>
	<!-- 默认 -->
	<button type="button" class="btn btn-primary">Large button</button>
	<!-- 中号按钮 -->
	<button type="button" class="btn btn-primary btn-sm">Large button</button>
	<!-- 小号按钮 -->
	<button type="button" class="btn btn-primary btn-xs">Large button</button>
	
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="../../bootstrap-3.0.0/assets/js/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>

将样式与大小进行组合来控制按钮的外观

	<!-- 大小：大，样式：成功-->
	<button type="button" class="btn btn-primary btn-lg btn-success">Large button</button>
	<!-- 大小：默认，样式：消息-->
	<button type="button" class="btn btn-primary btn-info">Large button</button>
	<!-- 大小：小，样式：警告 -->
	<button type="button" class="btn btn-primary btn-sm btn-warning">Large button</button>
	<!-- 大小：超小，样式：危险 -->
	<button type="button" class="btn btn-primary btn-xs btn-danger">Large button</button>

与父容器等宽

To use the full width of the container within which the button is residing, Bootstrap 3 offers block button option.

使用按钮的block样式，让其与父容器等宽

<div class="container">
	<div class="row">
		<div class="col-lg-12">
			<p>
				<button type="button" class="btn btn-primary btn-sm btn-block">Default small block level button</button>
				<button type="button" class="btn btn-default btn-lg btn-block">Default lg block level button</button>
				<button type="button" class="btn btn-primary btn-lg btn-block">Default lg block level button</button>
				<button type="button" class="btn btn-primary btn-xs btn-block">Default extra block level button</button>
			</p>
		</div>
	</div>
</div>

禁用按钮

<button type="button" class="btn btn-primary btn-lg" disabled="disabled">btn1</button>
<button type="button" class="btn btn-primary" disabled="disabled">btn2</button>
<button type="button" class="btn btn-primary btn-sm" disabled="disabled">btn3</button>
<button type="button" class="btn btn-primary btn-xs" disabled="disabled">btn4</button>

将超链接变成按钮（保留链接功能），还可以设置为禁用，很强大噢！

role属性是为了提供更好的目标可达性

<a href="http://www.baidu.com" class="btn btn-default" role="button">Default</a>
<a href="http://www.baidu.com" class="btn btn-primary disabled" role="button">Primary</a>
<a href="http://www.baidu.com" class="btn btn-info" role="button">Info</a>

使用按钮样式实现Tag，很漂亮哈~

You may use button classes with button, a and input element to use buttons as tags. But it is recommended that you use it with button elements mostly. Otherwise it may cause cross browser inconsistency issues.

可以使用button样式做Tag

该样式建议多用于按钮元素，否则在不同浏览器下可能会发生问题

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Default buttons from Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css"
	rel="stylesheet" media="screen">
<style>
body {
	padding: 50px
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>

	<div class="row">
		<div class="col-lg-1">
			<p>
				默认样式
			</p>
			<p>
				使用button样式后
			</p>
		</div>
		<div class="col-lg-1">
			<p>
				<a href="#">Link</a>
			</p>
			<p>
				<a class="btn btn-success" href="#" role="button">Link</a>
			</p>
		</div>
		<div class="col-lg-1">
			<p>
				<button type="submit">Button</button>
			</p>
			<p>
				<button class="btn btn-danger" type="submit">Button</button>
			</p>
		</div>
		<div class="col-lg-1">
			<p>
				<input type="button" value="Input">
			</p>
			<p>
				<input class="btn btn-danger" type="button" value="Input">
			</p>
		</div>
		<div class="col-lg-1">
			<p>
				<input type="submit" value="Submit">
			</p>
			<p>
				<input class="btn btn-danger" type="submit" value="Submit">
			</p>
		</div>
	</div>

	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="../../bootstrap-3.0.0/assets/js/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>

自定义按钮样式?

<!-- 使用bootstrap提供的按钮样式 -->
<button type="button" class="btn btn-default">Default</button>
	
<!-- 自定义按钮样式 -->
<button type="button" class="btn btn-my">Customized Button</button>

设置css背景

.btn-my {
	background: #cb60b3; /* Old browsers */
	background: -moz-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%);/* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cb60b3),color-stop(50%, #ad1283), color-stop(100%, #de47ac) ); /* Chrome,Safari4+ */ 
	background : -webkit-linear-gradient( top, #cb60b3 0%,#ad1283 50%, #de47ac 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%);/* Opera 11.10+ */
	background: -ms-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%);/* IE10+ */
	background: linear-gradient(to bottom, #cb60b3 0%, #ad1283 50%, #de47ac 100%);/* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(  startColorstr='#cb60b3',endColorstr='#de47ac', GradientType=0 ); /* IE6-9 */
}

设置字体颜色

.btn-my{
	color:#fff;
}

将按钮变为圆形

.btn-my{
	width: 200px;
    height: 200px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

最后，再添加鼠标悬停效果

.btn-my:hover {
    background: #BFEC3E; 
    color:#e75616;
}