今天完成的事件。

在师兄的帮助下解决了昨天的问题，Bootstrap框架直接复制它的导航栏。代码如下

接下来就很重要需要更改需要用到媒体查询@media。

媒体查询就是文档度小于多少像素的时候就会应用@media里面的属性比如

<span @media="" screen="" and="" (max-width:="" 300px)="" <="" span="">{
<span    ="" body="" <="" span="">{
        <span background-color:<="" span=""><span lightblue;<="" span="">
    }
}

这段代码先给body 背景颜色设置红色那么在小于等于300时候就会出现淡蓝色背景，就是引用媒体查询里面的属性，来进行更改bootcss框架里面的样式。

在更改中会涉及到优先级，这时需要 !important

!important:作用是提高指定CSS样式规则的应用优先权。优先使用你设置的属性而不是BOOTcss框架自带属性。

Bootstrap4 网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。

我们也可以根据自己的需要，定义列数：

Bootstrap 4 网格系统有以下 5 个类:

• .col- 针对所有设备
• .col-sm- 平板 - 屏幕宽度等于或大于 576px
• .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
• .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
• .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

大概意思就是 如果你想让你的图片在缩小到多少像素的时候，元素站多少个，如 如果你有4个元素 在最大的时候大一1200px 的时候那么ol-xl-3意思表示一个元素站上面的3个1列 那么在1200px就是4个元素，如果收缩在992px col-md-6 那意思就是4个每个元素占领一半，本来一行4个其他2就被挤下换行。得记住FLEX布局要在父类里面写flex-wrap：wrap;换行。不然上面的类是不会有用的。

通过师兄的帮助，知道如果用Bootstrap里面的类查询它每个类都是干什么的，虽然还是由很多看不懂的，但已经不是无从下手的感觉了。

明计划：把首页做完。