bootstrap-4-响应式工具

• 响应式工具
• 源码阅读

前面讲解的所有的内容，都在这个地方。

什么图片，表单，按钮这些东西不要看，这些都是最基础的html就可以会了。到时候只要进行复制粘贴就可以了。

不要纠结在这些细节当中，多看看栅格系统的源码，这个才是最重要的。

而且到了公司之后，你根本就不知道你将会使用哪些UI库，看看下面的这张图，我的浏览器当中就存了这么多的UI库。

SUI、MUI，这都是移动端的。

Swiper，滑屏库。这个玩意用来做PPT，真的是很酷。

foundation，这玩意比bootstrap还要老，还要早，跟bootstrap差不多的。

其实，bootstrap还有一个更响亮的名字，叫做响应式工具。

响应式工具

响应式工具的源码就在下面的两个文件当中：

• responsive-utilities.less
• responsive-visibility.less

源码阅读

这个less文件进来的时候，是都隐藏掉，具有这些class属性的元素。

第一种情况：

这里的.visible-xs的意思是，如果给一个元素，加上了这个class，在xs的时候，这个元素会显示的，其他情况下是不显示的。

第二种情况：

这里还有一个.hidden-xs，意思是正好相反的：

这就叫做响应式工具。