Bootstrap_全局CSS样式_按钮&图片
全局css样式:
按钮:
<a class="btn btn-default" href="#">Link</a>
图片:
<!-- 图片 --> <img src="img/banner_1.jpg" class="img-responsive"/>
图片形状:
<!-- 方形 --> <img src="img/banner_1.jpg" class="img-responsive img-rounded"/> <!-- 原型 --> <img src="img/banner_1.jpg" class="img-responsive img-circle"/> <!-- 相框性 --> <img src="img/banner_1.jpg" class="img-responsive img-thumbnail"/>
Bootstrap_全局CSS样式_表格&表单
表格:
table:表格样式
table-bordered:边框
table-hover:鼠标悬停
<html lang="zh-CN"> <head> <meta charset="utf-8"> <!-- 设编码 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- ie支持 --> <meta name="viewport" content="width=device-width, initial-scale=1"><!-- 视口 --> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>Bootstrap HelloWorld</title> <!-- Bootstrap --> <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- css文件 --> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) --> <script src="js/jquery-3.2.1.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="js/bootstrap.min.js"></script> <style> </style> </head> <body> <!-- 表格 --> <table class="table table-bordered table-hover"> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>001</td> <td>张三</td> <td>23</td> </tr> <tr> <td>002</td> <td>李四</td> <td>25</td> </tr> <tr> <td>003</td> <td>王五</td> <td>30</td> </tr> </table> </body> </html>
表单:
给表单项添加:class="form-control"
<html lang="zh-CN"> <head> <meta charset="utf-8"> <!-- 设编码 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- ie支持 --> <meta name="viewport" content="width=device-width, initial-scale=1"><!-- 视口 --> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>Bootstrap HelloWorld</title> <!-- Bootstrap --> <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- css文件 --> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) --> <script src="js/jquery-3.2.1.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="js/bootstrap.min.js"></script> <style> </style> </head> <body> <!-- 表单 --> <form> <div class="form-group"> <label for="exampleInputEmail1" class="col-sm-2 control-label">Email address</label> <!-- control-label:对字体内置效果 --> <div class="col-sm-10"> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" style="width: 500px"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password" style="width: 500px"> <!-- form-control:边框更圆润 --> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form> </body> </html>
标签:表格,样式,Bootstrap,表单,全局,CSS From: https://www.cnblogs.com/qihaokuan/p/16927292.html