3.6，表单——校验状态
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>bootstrap基础模板</title> <!-- bootstrap的CSS文件 --> <link rel="stylesheet" href="../css/bootstrap.min.css"> </head> <style> /* .row{ border: 1px solid cadetblue; } .row>div{ border: 1px solid darkblue; } */ </style> <body> <div class="container"> <form class="form-horizontal" action="#"> <div class="form-group has-warning"> <label for="user" class="col-md-1">用户名:</label> <div class="col-md-8"> <input type="text" class="form-control" id="user" placeholder="请输入用户名"> </div> </div> <div class="form-group has-error"> <label for="pwd" class="col-md-1">密码:</label> <div class="col-md-8"> <input type="password" class="form-control" id="pwd" placeholder="请输入密码"> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-2"> <input type="submit" class="form-control" value="登录"> </div> </div> </form> </div> </body> <!-- 如果要使用Bootstrap的JS插件，必须引入jQuery --> <script src="../js/jquery.js"></script> <!-- Bootstrap的JS插件--> <script src="../js/bootstrap.min.js"></script> </html>
添加 .has-warning、.has-error 或 .has-success 到表单控件的父元素即可校验表单状态
3.7，表单——控件尺寸
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>bootstrap基础模板</title> <!-- bootstrap的CSS文件 --> <link rel="stylesheet" href="../css/bootstrap.min.css"> </head> <style> /* .row{ border: 1px solid cadetblue; } .row>div{ border: 1px solid darkblue; } */ </style> <body> <div class="container"> <form class="form-horizontal" action="#"> <div class="form-group"> <input type="text" class="input-lg form-control" placeholder="大型输入框"> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="正常输入框"> </div> <div class="form-group"> <input type="text" class="input-sm form-control" placeholder="小型输入框"> </div> </form> </div> </body> <!-- 如果要使用Bootstrap的JS插件，必须引入jQuery --> <script src="../js/jquery.js"></script> <!-- Bootstrap的JS插件--> <script src="../js/bootstrap.min.js"></script> </html>
通过.input-lg和.input-sm设置表单控件的尺寸
3.8，按钮——预定义样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>bootstrap基础模板</title> <!-- bootstrap的CSS文件 --> <link rel="stylesheet" href="../css/bootstrap.min.css"> </head> <style> /* .row{ border: 1px solid cadetblue; } .row>div{ border: 1px solid darkblue; } */ </style> <body> <div class="container"> <form class="form-horizontal" action="#"> <button type="button" class="btn btn-default">（默认样式-灰色）Default</button> <button type="button" class="btn btn-primary">（首选项-深蓝色）Primary</button> <button type="button" class="btn btn-success">（成功-绿色）Success</button> <button type="button" class="btn btn-info">（一般信息-天蓝色）Info</button> <button type="button" class="btn btn-warning">（警告-黄色）Warning</button> <button type="button" class="btn btn-danger">（危险-红色）Danger</button> <button type="button" class="btn btn-link">（链接）Link</button> </form> </div> </body> <!-- 如果要使用Bootstrap的JS插件，必须引入jQuery --> <script src="../js/jquery.js"></script> <!-- Bootstrap的JS插件--> <script src="../js/bootstrap.min.js"></script> </html>
Bootstrap框架提供了七种样式的按钮风格
3.9，按钮——按钮尺寸
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>bootstrap基础模板</title> <!-- bootstrap的CSS文件 --> <link rel="stylesheet" href="../css/bootstrap.min.css"> </head> <style> /* .row{ border: 1px solid cadetblue; } .row>div{ border: 1px solid darkblue; } */ </style> <body> <div class="container"> <form class="form-horizontal" action="#"> <button type="button" class="btn btn-default">（默认样式-灰色）默认大小</button> <button type="button" class="btn btn-primary btn-lg">（首选项-深蓝色）大型按钮 </button> <button type="button" class="btn btn-success btn-sm">（成功-绿色）小型按钮 </button> <button type="button" class="btn btn-info btn-xs">（一般信息-天蓝色）超小型按钮 </button> </form> </div> </body> <!-- 如果要使用Bootstrap的JS插件，必须引入jQuery --> <script src="../js/jquery.js"></script> <!-- Bootstrap的JS插件--> <script src="../js/bootstrap.min.js"></script> </html>
可以通过.btn-lg、.btn-sm 或 .btn-xs实现按钮具有不同的尺寸
五，图片
5.1，图片——响应式图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>bootstrap基础模板</title> <!-- bootstrap的CSS文件 --> <link rel="stylesheet" href="../css/bootstrap.min.css"> </head> <style> /* .row{ border: 1px solid cadetblue; } .row>div{ border: 1px solid darkblue; } */ </style> <body> <div class="container"> <img src="../../淘宝/img/1231.png" class="img-responsive"> </div> </body> <!-- 如果要使用Bootstrap的JS插件，必须引入jQuery --> <script src="../js/jquery.js"></script> <!-- Bootstrap的JS插件--> <script src="../js/bootstrap.min.js"></script> </html>
- 为图片添加 .img-responsive 可以让图片支持响应式布局
- 实质是为图片设置了max-width: 100%;、 height: auto; 和display: block; 属性，从而让图片在其父元素中更好的缩放
5.2，图片——图片形状
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>bootstrap基础模板</title> <!-- bootstrap的CSS文件 --> <link rel="stylesheet" href="../css/bootstrap.min.css"> </head> <style> /* .row{ border: 1px solid cadetblue; } .row>div{ border: 1px solid darkblue; } */ </style> <body> <div class="container"> <img src="../../淘宝/img/1231.png" class="img-rounded img-responsive" width="50%" alt=""><br> <img src="../../淘宝/img/1231.png" class="img-circle img-responsive" width="50%" alt=""><br> <img src="../../淘宝/img/1231.png" class="img-thumbnail img-responsive" width="50%" alt=""><br> </div> </body> <!-- 如果要使用Bootstrap的JS插件，必须引入jQuery --> <script src="../js/jquery.js"></script> <!-- Bootstrap的JS插件--> <script src="../js/bootstrap.min.js"></script> </html>
为 元素添加.img-rounded、.img-circle、.img-thumbnail，可以让图片呈现不同的形状
最后
送大家一句最喜欢比阿斯的短话： 要从容地着手去做一件事，但一旦开始，就要坚持到底。
