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开发更加简单便捷。