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> 标签的禁用。
一个知识点,你自己看懂了,那是一个层次;你会用,是另外一个层次;你写出来,你写出来让别人懂,那又是更高的一个层次;你用最通俗的言语,把知识点讲出来,让别人一下子明白,又是更高的一个层次。
如果您觉的本篇文章有用,可以赞助作者一些小额的比特币,用来买咖啡,谢谢。 收款地址:3NTPbsJKRKhe1RE1g2rZdr2dFTDgkBUgUa
注:转载需注明出处及作者名,严禁恶意转载,尊重原作者的劳动成果。
如果您觉的本篇文章有用,可以赞助作者一些小额的比特币,用来买咖啡,谢谢。 收款地址:3NTPbsJKRKhe1RE1g2rZdr2dFTDgkBUgUa
注:转载需注明出处及作者名,严禁恶意转载,尊重原作者的劳动成果。