【HTML】【笔记】BootStrap4.3.1学习总结

println

  近段时间了解一下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版本]

[1] 外部引用方式(☆推荐☆)

[HTML] 纯文本查看 复制代码

 <!--下载下来的解压包，解压后会得到“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"/>

[2] CDN应用方式

[HTML] 纯文本查看 复制代码

<!--进入官网后找到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>

网格系统                                                                                                                                     

[HTML] 纯文本查看 复制代码

<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>

表格

[HTML] 纯文本查看 复制代码

<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>

部分代码来自菜鸟教程，如有违规请管理删帖并告知。谢谢。

println

我在这里说下，如果您是技术大佬看不起我的帖子，我觉得您一笑而过就可以了。没必要出言讽刺，您会不代表他人就会，另外我说了只是一个笔记而已。只是目前用到了这些东西，所以学习了这些。
我非常欢迎各位大佬指正，但是绝对拒绝任何诋毁攻击。

println

无限苦肉盖神 发表于 2019-12-23 12:05
跟版本3有哪些不同

我去搜索了CSDN论坛的区别，看到了这个帖子写的不错挺详细的。您可以参考下。https://blog.csdn.net/miaomiao_1024/article/details/83418352

无限苦肉盖神

跟版本3有哪些不同

sizhubiao

技术贴，感谢楼主分享！

8970665

试一下下

println

8970665 发表于 2019-12-23 13:21
试一下下

可以试下，如果有问题的话可以发出来咱们一起交流。因为这个我也是刚接触

森岛帆高

js引入的顺序错了,应该先引入jquery,不然会报错

println

森岛帆高 发表于 2020-1-19 21:21
js引入的顺序错了,应该先引入jquery,不然会报错

感谢指正，已更正。谢谢

kiccer

提点建议，
css在head里面引入
js文件在 body标签之后引入