- 预定义样式分为五种：primary（首选项）、success（成功）、info（一般信息）、warning（警告）、danger（危险），demo如下，设置不同的class展示不同的样式
-
View Code<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.css"> <style> .glyphicon-heart {font-size: 100px; color: red;} </style> </head> <body> <div class="container"> <input type="button" value="默认样式" /> <input type="button" class="btn btn-primary" value="首选项" /> <input type="button" class="btn btn-success" value="成功" /> <input type="button" class="btn btn-info" value="一般信息" /> <input type="button" class="btn btn-warning" value="警告" /> <input type="button" class="btn btn-danger" value="危险" /> </div> </body> <script src="js/jquery-2.1.3.js"></script> <script src="js/bootstrap.js"></script> </html>
- 除了上述的btn-*外还有其他的一些class，比如（bg | text | alert)-(primary | success | info | warning | danger)等，可分别设置不同的样式
-
- 如下是一个面板控件
- 网址：http://v3.bootcss.com/components/#panels
- 一个面板的小demo代码以及效果图如下
View Code
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.css"> <style> .glyphicon-heart {font-size: 100px; color: red;} </style> </head> <body> <div class="container"> <div class="panel panel-primary"> <div class="panel-heading"> <h3>我是面板的标题</h3> </div> <div class="panel-body"> 我是面板的主体内容 </div> </div> </div> </body> <script src="js/jquery-2.1.3.js"></script> <script src="js/bootstrap.js"></script> </html>
