3-19 定制风格
本节编程练习不计算学习进度,请电脑登录imooc.com操作

定制风格

在介绍按钮开篇就说过,Web页面可能会有不同的按钮风格。那么在Bootstrap框架也考虑了。在Bootstrap框架中除了默认的按钮风格之外,还有其他六种按钮风格,每种风格的其实都一样,不同之处就是按钮的背景颜色、边框颜色和文本颜色。

在Bootstrap框架中不同的按钮风格都是通过不同的类名来实现,在使用过程中,开发者只需要选择不同的类名即可:

使用起来就很简单,就像前面介绍的默认按钮一样的使用方法,只需要在基础按钮“.btn”基础上追加对应的类名,就可以得到需要的按钮风格。如:

<button class="btn" type="button">基础按钮.btn</button>
<button class="btn btn-default" type="button">默认按钮.btn-default</button>
<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
<button class="btn btn-success" type="button">成功按钮.btn-success</button>
<button class="btn btn-info" type="button">信息按钮.btn-info</button>
<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
<button class="btn btn-link" type="button">链接按钮.btn-link</button>

运行效果如下或查看右侧结果窗口:

有关于按钮风格定制的源码可以查阅bootstrap.css文件第2081行~第2318行。

 

任务

我来试试:在代码编辑中添加一个信息按钮

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>定制风格</title>
  6. <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <button class="btn" type="button">基础按钮.btn</button>
  10. <button class="btn btn-default" type="button">默认按钮.btn-default</button>
  11. <button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
  12. <button class="btn btn-success" type="button">成功按钮.btn-success</button>
  13.  
  14. <button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
  15. <button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
  16. <button class="btn btn-link" type="button">链接按钮.btn-link</button>
  17. </body>
  18. </html>
  1. body {
  2. padding: 50px 200px;
  3. }
  4.  
  5. .btn {
  6. margin: 20px;
  7. }
下一节