任务进展

一、 任务进度：50%；

① 效果呈现（在col-md即>=768px，<992px时的布局）：

二、 今日情况

1. 完成栅格系统的在不同分辨率的情况下进行适配和调整；参考(http://bs4.ntp.org.cn/pages/layout.html)

① Bootstrap 4 对于Bootstrap3多出一种栅格，共有5种栅格类，依次是：

特小(col-)  （<576px）

小(col-sm-)  （>=576px）

中(col-md-)  （>=768px）

大(col-lg-)  （>=992px）

特大(col-xl-)  （>=1200px）

② 以上类似于媒体查询的方式，在对应的分辨率范围内，其相同类名前缀的元素为水平排列，直到相加大于12时，溢出的部分会换到下一行；

③ 所以要在一个栅格系统，针对各个分辨率范围来设置其所占的列数，尤其对于子元素文本宽度较小的，可以在特小的分辨率范围设置所占列数多点，如

④ 默认为一行总共为12列，其元素的宽度以12为分母计算百分比，都是相对于父元素的宽度，然而如果设置了间距值，即使后缀为6的两个元素，都会分为两行，所以一般不设置间距值，或者设置后，列数就要根据实际情况设置；

⑤ 如不设置列数，则会自动布局为相等宽度的列，或者在中间增加<div class="w-100"></div>，会作为拆分形式来实现多行等宽，如设置其中一个子元素的列数，其他子元素不设置或设置为auto如-col-md-auto，则会其他子元素的宽度会自动调整大小且不换行；

⑤ 而列中的元素都是默认为向左对齐，如有水平居中的标题元素，为视觉上能居中对齐，一般采用flex布局，来使列中元素都水平居中，且对于文本链接，需增加空格 &emsp; 来保证宽度一样，如：

或者 应用bootstrap的类，相对于垂直分布来说，.align-items-center也是可以实现各元素水平居中，而.align-content-center为各元素垂直居中，而-start或-end则是轴的开始位置或结束位置，可以实现上或下对齐、左或右对齐，水平分布则相反，如：

而对于子元素为多行文本时，实现子元素文本为左对齐，整体相对于container为水平居中对齐，则通过偏移来实现，如：

对于卡片组件的card-body而言，即有h标题标签和p段落标签，实现水平居中，只需给标题标签text-center，段落标签则是给父元素card-body设置左右padding值相同即可，如

⑥ 完全去除row的间距值即margin值和padding值都为0，则移除父元素的container的类名，给子元素row增加no-gutter类名，如：

<div class="row no-gutters">  

<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>  

<div class="col-6 col-md-4">.col-6 .col-md-4</div>

</div>

⑦ 可以通过order类名来确定各元素的排列顺序，如order-1~12，数值越小，该元素越靠近左边，也可以用.order-first和.order-last的类名来确定该行的第一个元素和最后一个元素；

⑧ 通过使用.mr-auto或.ml-auto的margin工具来使各列元素彼此分离，实现两端对齐的效果，尤其增加如.ml-md-auto的分辨率范围，可以使得在对应范围内属于分离，缩小范围直到换行后，变为左对齐，不用设置offset偏移值，如：

HTML

实现在md范围内即>=768px时：

缩小到sm范围即＜768px时

⑨ 可以实现列的嵌套，即在col类名元素下再增加col子元素，同样具有将父元素分为12份的效果，由此进行进一步的细分元素所占列数；

2. 实现官网页首的按钮跳动动画，但不知道为什么，popover弹出框组件失效，tooltip提示框却是浏览器的默认样式，没有应用bootstrap的样式，还在寻找问题所在；

总算知道问题在哪，通过chrome浏览器报错的提示，发现引用npm下载好的bootstrap本地文件，还要多引用popper.js文件才生效，如：

效果：

HTML

CSS

三、 明天任务

1.  继续完成剩余两页并应用bootstrap对应的组件；

2.  再多看几遍bootstrap4的文档，尽量采用工具中的类名，代替间距、边框、布局等css样式；