【HTML】【笔记】BootStrap4.3.1学习总结
本帖最后由 println 于 2020-1-20 15:23 编辑近段时间了解一下BootStrap这个前端框架，发现之前自己制作的丑陋的页面在使用了BootStrap后页面非常的美观，比之前好了不知道倍。在学习的同时做了一些笔记。
附件中的文件有BootStrap4.3.1的css和js文件，还有MarkDown文档以及自己做的一个demo。
BootStrap的下载与使用
使用迅雷等下载工具下载
BootStrap4下载：https://github.com/twbs/bootstrap/releases/download/v4.4.1/bootstrap-4.4.1-dist.zip
蓝奏云BootStrap4下载：https://www.lanzouj.com/i85xlah
BootStrap4官网：https://getbootstrap.com [可以获取最新的BootStrap版本]
外部引用方式(☆推荐☆)
<!--下载下来的解压包，解压后会得到“bootstrap-4.X.X-dist”-->
<!--点开css和js文件夹后，复制bootstrap.min.css，bootstrap.min.js到项目相对应文件夹下即可-->
<!--引用方式-->
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
CDN应用方式
<!--进入官网后找到BootstrapCDN，直接把两个复制粘贴即可-->
<!--引导CDN
当您只需要包含Bootstrap的已编译CSS或JS时，可以使用BootstrapCDN-->
<!--仅CSS-->
<link rel="stylesheet"integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!--JS，Popper.js和jQuery-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
网格系统
<div class="row">
<div class="col-1 alert alert-info">1</div>
<div class="col-1 alert alert-info">1</div>
<div class="col-1 alert alert-info">1</div>
<div class="col-1 alert alert-info">1</div>
<div class="col-1 alert alert-info">1</div>
<div class="col-1 alert alert-info">1</div>
<div class="col-1 alert alert-info">1</div>
<div class="col-1 alert alert-info">1</div>
<div class="col-1 alert alert-info">1</div>
<div class="col-1 alert alert-info">1</div>
<div class="col-1 alert alert-info">1</div>
<div class="col-1 alert alert-info">1</div>
</div>
<div class="row">
<div class="col-4 alert alert-danger">4</div>
<div class="col-4 alert alert-danger">4</div>
<div class="col-4 alert alert-danger">4</div>
</div>
<div class="row">
<div class="col-6 alert alert-primary">6</div>
<div class="col-6 alert alert-primary">6</div>
</div>
<div class="row">
<div class="col-12 alert alert-success">12</div>
</div>
表格
<table class="table table-hover">
<thead>
<tr>
<th>姓名</th>
<th>曾用名</th>
<th>笔名</th>
</tr>
</thead>
<tbody>
<tr>
<td>周树人</td>
<td>周樟寿</td>
<td>鲁迅</td>
</tr>
<tr>
<td>谢婉莹</td>
<td>谢婉莹</td>
<td>冰心</td>
</tr>
<tr>
<td>舒舍予</td>
<td>舒庆春</td>
<td>老舍</td>
</tr>
</tbody>
</table>
部分代码来自菜鸟教程，如有违规请管理删帖并告知。谢谢。
我在这里说下，如果您是技术大佬看不起我的帖子，我觉得您一笑而过就可以了。没必要出言讽刺，您会不代表他人就会，另外我说了只是一个笔记而已。只是目前用到了这些东西，所以学习了这些。
我非常欢迎各位大佬指正，但是绝对拒绝任何诋毁攻击。 无限苦肉盖神 发表于 2019-12-23 12:05
跟版本3有哪些不同
我去搜索了CSDN论坛的区别，看到了这个帖子写的不错挺详细的。您可以参考下。https://blog.csdn.net/miaomiao_1024/article/details/83418352
跟版本3有哪些不同 技术贴，感谢楼主分享！ 试一下下 8970665 发表于 2019-12-23 13:21
试一下下
可以试下，如果有问题的话可以发出来咱们一起交流。因为这个我也是刚接触 js引入的顺序错了,应该先引入jquery,不然会报错 森岛帆高 发表于 2020-1-19 21:21
js引入的顺序错了,应该先引入jquery,不然会报错
感谢指正，已更正。谢谢 提点建议，
css在head里面引入
js文件在 body标签之后引入
页:
[1]
2