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