本文主要是介绍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;
}
这篇关于bootstrap3-Button 按钮的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
