按钮，玩转Bootstrap（基础）教程-慕课网

按钮

按钮也是Bootstrap框架核心内容之一。因为按钮是Web制作中不可缺少的东西。而且不同的Web页面具有不同的按钮风格，甚至说同一个Web网站或应用程序具有多种按钮风格，比如说不同的按钮颜色、大小和状态等。那么Bootstrap框架也考虑了这些因素，接下来的内容我们一起来探讨Bootstrap框架中的另一核心部分内容——按钮。

Bootstrap框架的按钮也是一个独立部分，我们同样在不同的版本之中能找到对应的代码：

LESS版本：查看源文件buttons.less
Sass版本：查看源文件_buttons.scss
已编译版本：查看源文件bootstrap.css文件第1992行～第2353行

index.html style.css

<!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>
   <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> 
</body>
</html>

body{margin:50px;padding:50px;button:20px;}

按钮

任务