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