Bootstrap.btn各种按钮样式的使⽤Bootstrap CDN
<link rel="stylesheet" href="/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="/jquery/2.1.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
intro
Bootstrap类.btn会给元素加上圆⾓，灰⾊的按钮的默认样式。
这些按钮类可⽤于<a>, <input>, <button>标签，但推荐⽤于<button>标签，以避免跨浏览器的不⼀致性。
控制按钮⼤⼩的类和控制其他样式的类可以搭配使⽤。
如图：
代码见最后。
按钮组相关类
btn-group 按钮组，⽤于<div>标签，默认⽔平排列。
btn-group-vertical 垂直排列的按钮组。
btn-group-lg|sm|xs 设置按钮组内的按钮⼤⼩。
btn-group-justified 设置按钮组内的按钮为⾃适应⼤⼩(如果是<button>元素, 需要在外层使⽤btn-group类来包裹)
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="/jquery/2.1.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Bootstrap</title>
</head>
<body>
<h3>按钮⼤⼩</h3>
<p>
<button class="btn btn-lg">btn btn-lg</button>
<button class="btn">btn</button>
<button class="btn btn-sm">btn btn-sm</button>
<button class="btn btn-xs">btn btn-xs</button>
为什么使用bootstrap?
<button class="btn btn-block">btn btn-block</button>
</p>
<h3>不同功能的样式</h3>
<p>
<button class="btn btn-default">btn btn-default</button>
<button class="btn btn-primary">btn btn-primary</button>
<button class="btn btn-link">btn btn-link</button>
<button class="btn btn-success">btn btn-success</button>
<button class="btn btn-info">btn btn-info</button>
<button class="btn btn-warning">btn btn-warning</button>
<button class="btn btn-danger">btn btn-danger</button>
</p>
<h3>按钮状态</h3>
<h4>.active</h4>
<p>
<button class="btn btn-primary">btn btn-primary</button>
<button class="btn btn-primary active">btn btn-primary active 显⽰按压后的外观</button>
</p>
<h4>.disabled</h4>
<p>
<button class="btn btn-primary">btn btn-primary </button>
<button class="btn btn-primary disable" disabled="disabled">btn btn-primary disable 颜⾊变淡50%并失去渐变，且⿏标指针发⽣变化(<a>；不会，按钮才会)</button> <br>
<a href="#" class="btn btn-primary" role="button">btn btn-primary</a>
<a href="#" class="btn btn-primary disabled" role="button">btn btn-primary disabled</a>
</p>
<h4>关于按钮的disabled状态，注意 <code><button disabled="disabled" ... ></code> 和 <code><a role="button" ...></code> </h4>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。