一个HTML的结构
html<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script> <!--导入js文件-->
<meta charset="utf-8"> <!--网页编码选择utf-8字符集-->
<title>这是标题</title>
<style>
/*这里是写css的*/
.a{ /*这表示对class为a的元素进行css处理 这里的意思是设置外边距为20px */
margin:20px;
}
</style>
<script>
//这里是你可以直接写js代码的地方
</script>
</head>
<body>
<!--每个< >这样的东西叫做一个标签，比如div就是一个框的标签，代表一个框的元素，h1代表的是大标题 -->
<div class="a" id="myId">
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</div>
</body>
</html>
1574736080498
就是这个样子的
导入Bootstrap
具体参考官网：https://v3.bootcss.com/
（目前中文官网貌似比国外的版本低，所以不太一样，最好别混着用）
我们还是以上面的那个文件为例
在head里面引入一堆代码
像这样，直接从官网上剽
1574736912696
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
先别管，把这几行放到你的head里去
1574737005266
在body里的操作
创建一个div标签并且让其class="container"
然后所有的后续标签全部写在这个div里面
像这样：
1574736613954
至此，你就可以开心地使用bootstrap了
使用bootstrap
打开刚才的网页，好像没有什么太大的变化？
1574737060298
但是你仔细看，这些字已经不是在最左边了，而是稍微被往中间放了，这其实就是Bootstrap开始自动帮你调整页面了（而且这种页面的调整是响应式的）
无脑剽代码
去官网上找到：组件 这里
1574737174291
选一个你喜欢的东西
比如我选的巨幕
1574737219421
1574737263551
然后我把下面的代码复制了
1574737298529
直接粘贴到我的html文件里去
1574737351533
然后就可以用了：
1574737395940
自己写点字上去
如果你觉得这个不够爽，那还有：
手写一个好看的导航栏是不是很累？
Bootstrap一键解决：
1574738673728
去官网的组件部分找到 导航栏
然后选一个你心仪的：
1574738726661
然后剽代码：
1574738776753
虽然看起来很复杂但是都是一键剽的.....
然后保存，打开：
1574738851144
done!
具体功能还需要自己实现
然后有些样式出问题了的话自己再调节一下就好了
无脑改样式
我们都知道，原版的按钮很丑
1574737507043
这么丑：
1574737567969
然而Bootstrap人家twitter的工程师已经给你设计了好看的样式了，你只需要加入短短一句代码：像这样：
1574737805828
然后：
1574737857668
就好多了
其他还有很多样式，具体可以去官网的全局样式那里看：
1574737899643
还是直接复制就可以了
1574737931791
因为浏览器不同可能按钮不完全一样（比如我上面的那个）
另外还有更高级的东西比如按钮组，在组件部分里：
1574738003797
抄就对了
栅格系统
这个应该算是Bootstrap里最难的部分了.....其实也很简单，只不过写不写得好看就是另外一回事了
在Bootstrap里
整个网页实际上为了控制元素位置大小是被化成了很多个格子的
比如他规定，一行就有12个格子
那么栅格系统就是用来控制你元素的位置的
比如他的官网
1574738362800
你可以看到，他的总体结构是这样样子的：
1574738438191
每个框框就是一个div标签，然后上面导航栏是一个长长的div，中间写着组件的那段是一个长度长一些的占了整整一排的div框框，然后下面你可以看到左边是说明，右边是目录，大概比例为2：1，其实就是下面总体部分就是个大的div，里面分为两个小的div框框，其中左边那个的宽度是8，右边的那个宽度是4。
网友评论