bootstrap学习总结-06 按钮

一按钮的基本样式

Bootstrap提供一组标准的按钮配色和大小调整方案,只需要简单的应用的按钮类即可。BootStrap3提供了按钮的标准样式如图。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<!- 表示标准的按钮样式 ->
<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" >Link</button> <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js"></script>
</body>
</html>

按钮类的总结参见表

意义

按钮类

颜色和样式

标准按钮

btn btn-default

白色

主要按钮

btn btn-pri

深蓝色

成功按钮

btn btn-success

绿色

消息按钮

btn btn-info

浅蓝色

警告按钮

btn btn-warning

橙黄色

危险操作按钮

btn btn-danger

红色

链接按钮

btn btn-link

和链接的样式一样

注意:按钮类不经可以用于<button>标签,还可以用于<a> 或 <input>标签,它们的样式表现是一致的,不过出于浏览器表现一致性的考虑,Bootstrap推荐使用<button>标签。

二调节按钮大小

  Bootstrap还提供了 .btn-lg, .btn-sm, .btn-xs 3个类对按钮的大小进行标准化的调节。下面代码分别显示了大按钮(.btn-lg) , 标准按钮, 小按钮(.btn-sm),超小按钮(.btn-xs).

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<p>
<button type="button" class="btn btn-primary btn-lg" >大号按钮</button>
<button type="button" class="btn btn-default btn-lg" >大号按钮</button>
</p> <p>
<button type="button" class="btn btn-primary" >默认按钮</button>
<button type="button" class="btn btn-default" >默认按钮</button>
</p> <p>
<button type="button" class="btn btn-primary btn-sm" >小号按钮</button>
<button type="button" class="btn btn-default btn-sm" >小号按钮</button>
</p> <p>
<button type="button" class="btn btn-primary btn-xs" >超小按钮</button>
<button type="button" class="btn btn-default btn-xs" >超小按钮</button>
</p> <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js"></script>
</body>
</html>

三 块状按钮

<button>, <a> 标签默认都是内联元素,对于移动端来说,一个占据一整行的大按钮非常常见,这中情况使用 .btn-block类。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<p>
<button type="button" class="btn btn-primary btn-lg btn-block" >此按钮为块级元素</button>
<button type="button" class="btn btn-default btn-lg btn-block" >此按钮为块级元素</button>
</p>
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js"></script>
</body>
</html>

4 为按钮设置不可点击样式

  Bootstrap通过将按钮的背景色做 50%的褪色处理以呈现出无法点击的效果。只需要为按钮添加 disabled属性。代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<p>
<button type="button" class="btn btn-lg btn-primary disabled" >主要按钮</button>
<button type="button" class="btn btn-default btn-lg disabled" >链接</button>
</p>
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js"></script>
</body>
</html>

对于装成按钮样式的<a>标签, 则需要添加.dsabled类。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<p>
<a href="#" class="btn btn-lg btn-primary disabled" >主要链接</a>
<a href="#" class="btn btn-lg btn-primary disabled" >链接</a>
</p>
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js"></script>
</body>
</html>

注意:

<a>标签加了 .disabled类后只是样式发生了变化,点击后任然可以正常工作,所以一般情况下可以使用JavaScript来进行<a> 标签的禁用。

上一篇:Python 去除文件中的空行


下一篇:Core模块其他常用知识点[OpenCV 笔记14]