Bootstrap框架的简单使用
Bootstrap框架的简单使用
Bootstrap中文网：http://www.bootcss.com/
1.打开Bootstrap网址下载Bootstrap
打开：https://v3.bootcss.com/getting-started/#download根据需要下载不同的Bootstrap，这里我们下载第一个。
2.解压Bootstrap文件压缩包，放入自己的项目里
项目目录如下：
3.在HTML文件中引入使用Bootstrap
bs.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入Bootstrap中的css样式-->
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<!--<table> 标签添加table类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。添加table-bordered类为表格和其中的每个单元格增加边框。通过添加table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。-->
<table class="table table-bordered table-hover text-center">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>操作</td>
</tr>
<tr>
<td>张三</td>
<td>22</td>
<td>男</td>
<!--当有多个连续空格时，网页默认只有一个，需要多个空格时可用 表示空格。class中为Bootstrap的button标签css样式-->
<td><button class="btn btn-default btn-xs btn-primary">编辑</button> <button class="btn btn-default btn-xs btn-danger" data-toggle="modal" data-target="#myModal">删除</button></td>
</tr>
<tr>
<td>李四</td>
<td>23</td>
<td>男</td>
<td><button>编辑</button><button>删除</button></td>
</tr>
</table>
</body>
</html>
未使用Bootstrap效果如下：
使用Bootstrap效果如下：
除css样式外，Bootstrap还有组件和JavaScript插件，想要深入了解其用法可以访问：http://www.bootcss.com/其中有其他安装方式还有使用方法。
4.总结
这是我第一次使用Bootstrap框架，我感觉Bootstrap框架就是通过引入使用Bootstrap文件，使自己写的网页相对来说更美观，减少自己对网页的样式的设计，让web开发更加简单便捷。