Bootstrapbutton

Bootstrap 提供了一些选项来定义button的样式，详细例如以下表所看到的：

下面样式可用于<a>, <button>, 或 <input> 元素上：

类	描写叙述
.btn	为button加入基本样式
.btn-default	默认/标准button
.btn-primary	原始button样式（未被操作）
.btn-success	表示成功的动作
.btn-info	该样式可用于要弹出信息的button
.btn-warning	表示须要慎重操作的button
.btn-danger	表示一个危急动作的button操作
.btn-link	让button看起来像个链接 (仍然保留button行为)
.btn-lg	制作一个大button
.btn-sm	制作一个小button
.btn-xs	制作一个超小button
.btn-block	块级button(拉伸至父元素100%的宽度)
.active	button被点击
.disabled	禁用button

首先看下不同颜色的button：

<html lang="en">

<head>

	<!--站点编码格式，UTF-8 国际编码。GBK或 gb2312 中文编码-->

	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<meta name="Keywords" content="关键词一，关键词二">

	<meta name="Description" content="站点描写叙述内容">

	<meta name="Author" content="Yvette Lau">

	<meta name = "viewport" content = " width = device-width, initial-scale = 1 ">

	<title>BootstrapDemo</title>

	<!--css js 文件的引入-->

	<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css">

</head>

	<body style="padding: 20px;">

		<!-- 标准的按钮 -->

		<button type="button" class="btn btn-default">默认按钮</button>

		<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->

		<button type="button" class="btn btn-primary">原始按钮</button>

		<!-- 表示一个成功的或积极的动作 -->

		<button type="button" class="btn btn-success">成功按钮</button>

		<!-- 用于要弹出信息的按钮 -->

		<button type="button" class="btn btn-info">信息按钮</button>

		<!-- 表示应慎重操作的动作 -->

		<button type="button" class="btn btn-warning">警告按钮</button>

		<!-- 表示一个危急动作的按钮 -->

		<button type="button" class="btn btn-danger">危急按钮</button>

		<!-- 让按钮看起来像一个链接，但同一时候保持按钮的行为 -->

		<button type="button" class="btn btn-link">链接按钮</button>

	</body>

</html>

效果：

btn-default / btn-primary /btn-success/ btn-info/ btn-warning/ btn-danger/ btn-link给button加上了不同的样式。

button大小

鉴于head部分都是同样的。仅仅列出Body的内容。

<body style="padding: 20px;width:500px;">

	<!-- 标准的按钮 -->

	<button type="button" class="btn btn-default">默认按钮</button>

	<button type="button" class="btn btn-lg btn-default">大的默认按钮</button>

	<br/><br/>

	<!-- 提供额外的视觉效果。标识一组按钮中的原始动作 -->

	<button type="button" class="btn btn-primary">原始按钮</button>

	<button type="button" class="btn btn-sm btn-primary">小的原始按钮</button>

	<br/><br/>

	<!-- 表示一个成功的或积极的动作 -->

	<button type="button" class="btn btn-success">成功按钮</button>

	<button type="button" class="btn btn-xs btn-success">特别小的成功按钮</button>

	<br/><br/>

	<!-- 用于要弹出信息的按钮 -->

	<button type="button" class="btn btn-info">信息按钮</button><br/><br/>

	<button type="button" class="btn btn-block btn-info">块级信息按钮</button>

</body>

效果例如以下所看到的：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

button状态

button分为active和disabled两种状态、

激活状态：button呈现出被按压的外观，即背景颜色变深、深色边框和阴影。

禁用状态：button颜色会变淡 50%，并失去渐变

看详细的样例：

<body style="padding: 20px;width:500px;">

	<!-- 标准的按钮 -->

	<button type="button" class="btn btn-default">默认按钮</button>

	<button type="button" class="btn btn-default active">激活的默认按钮</button>

	<br/><br/>

	<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->

	<button type="button" class="btn btn-primary">原始按钮</button>

	<button type="button" class="btn btn-primary active">激活的原始按钮</button>

	<br/><br/>

	<!-- 表示一个成功的或积极的动作 -->

	<button type="button" class="btn btn-success">成功按钮</button>

	<button type="button" class="btn btn-success active">激活的成功按钮</button>

	<br/><br/>

	<!-- 用于要弹出信息的按钮 -->

	<button type="button" class="btn btn-info">信息按钮</button>

	<button type="button" class="btn btn-info active">激活的信息按钮</button>

	<br/><br/>

	<button type="button" class="btn btn-default">默认按钮</button>

	<button type="button" class="btn btn-default disabled">禁用的默认按钮</button>

	<br/><br/>

	<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->

	<button type="button" class="btn btn-primary">原始按钮</button>

	<button type="button" class="btn btn-primary disabled">禁用的原始按钮</button>

	<br/><br/>

	<!-- 表示一个成功的或积极的动作 -->

	<button type="button" class="btn btn-success">成功按钮</button>

	<button type="button" class="btn btn-success disabled">禁用的成功按钮</button>

	<br/><br/>

	<!-- 用于要弹出信息的按钮 -->

	<button type="button" class="btn btn-info">信息按钮</button>

	<button type="button" class="btn btn-info disabled">禁用的信息按钮</button>

</body>

button标签

a,input都能够表现的像一个button，可是避免跨浏览器不一致。最好使用Button标签。

<body style="padding: 20px;">

	<a class="btn btn-default" href="#" role="button">超链接按钮</a>

	<button class="btn btn-default btn-primary" type="submit">button按钮</button>

	<input class="btn btn-default btn-success" type="button" value="input按钮">

	<input class="btn btn-default btn-info" type="submit" value="submit按钮">

</body>