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>
效果例如以下所看到的:
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>
本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。