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>
运行效果如下或查看右侧结果窗口:
我来试试:完成下面任务
在代码编辑器中输入代码,完成添加默认按钮。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>默认按钮</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <body> </body> </html>
body { padding: 100px; }