3-17 默认按钮
本节编程练习不计算学习进度,请电脑登录imooc.com操作

默认按钮

Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格,然后通过“.btn-default”定义了一个默认的按钮风格。默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色边框颜色文本颜色
/*源码请查阅bootstrap.css文件第2040行~第2044行*/

.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}

使用默认按钮风格也非常的简单,只需要在基础按钮“btn”的基础上增加类名“btn-default”即可:

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

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

 

任务

我来试试:完成下面任务

在代码编辑器中输入代码,完成添加默认按钮。

  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.  
  10.  
  11. </body>
  12. </html>
  1. body {
  2. padding: 100px;
  3. }
下一节