<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 处理低版本IE 4.0不考虑IE8 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 移动端视口的设置 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 引入bootstrap.css --> <link rel="stylesheet" href="css/bootstrap.css"> <style> #login{ width:400px; } </style> </head> <body> <div class="container"> <br> <input type="button" value="默认样式"> <input type="button" value="首选项" class="btn btn-primary"> <input type="button" value="成功" class="btn btn-success"> <input type="button" value="一般信息" class="btn btn-info"> <input type="button" value="警告" class="btn btn-warning"> <input type="button" value="危险" class="btn btn-danger"> <br> <br> <p>默认段落</p> <p class="bg-primary">首选项</p> <p class="bg-success">成功</p> <p class="bg-info">一般信息</p> <p class="bg-warning">警告</p> <p class="bg-danger">危险</p> <br> <span>默认文字</span> <span class="text-primary">首选项</span> <span class="text-success">成功</span> <span class="text-info">一般信息</span> <span class="text-warning">警告</span> <span class="text-danger">危险</span> <br> <a href="#" class="btn btn-primary">连接1</a> <a href="#" class="bg-success">连接2</a> <a href="#" class="text-danger">连接3</a> <br><br> <div class="alert alert-warning">我是警告框</div> <div class="alert alert-danger">我是危险信息</div> <br><br> <div class="panel panel-primary"> <div class="panel-heading"> <h4>我是面板的标题</h4> </div> <div class="panel-body"> 我是面板的主体内容！ </div> </div> </div> <div class="container"> <br> <div id="login" class="panel panel-primary"> <div class="panel-heading"> Login </div> <div class="panel-body"> <div class="form-group"> <label>用户名:</label><input type="text" class="form-control"> <div class="alert alert-warning">用户名不能为空！</div> <label>密码:</label><input type="password" class="form-control"> </div> <a href="#" class="text-info">忘记密码?</a> <input type="button" value="登录" class="btn btn-primary pull-right"> </div> </div> </div> </body> <script> /* 预定义样式风格 primary (首选项) success (成功) info (一般信息) warning (警告) danger (危险) 实例 ：登录框 */ </script>