bootstrap-sass_源码解析四：Utility

Posted 2022-08-16 小马xml

前三节中我们已经讲了Bootstrap-sass的结构，常量的提取，以及混入的定义。

没有什么难度，或许自己看源码来得更加清晰。但是我写这篇文章的目的在这里声明下，主要是：

• 引导自己耐心得看完组件的所有内容；
• 结合OOCSS等理论基础，理解和学习bootstrap的css组织结构和书写思想，为自己写css提供参考；
• 列举bootstrap中的所有组件，常量，混入，以及工具，作为查询手册贡献给大家，是大家在使用bootstrap开发过程中不至于重复制造汽车轮子。

好了，废话不多说，这节我们将解析bootstrap中所有提供的Utility。

内容：

utilities

Bootstrap提供的可以直接使用的工具class

|-- Floats                   //浮动相关
    |-- clearfix             //清除浮动
    |-- center-block         //block元素居中
    |-- pull-right           //右浮动
    |-- pull-left            //左浮动
|-- Toggling content          //切换内容相关
    |-- hide                 //移除
    |-- show                 //出现
    |-- invisible            //不可见
    |-- text-hide            //隐藏文字
    |-- hidden               //同hide
|-- For Affix plugin         //附加导航插件
    |-- affix                 //fix定位

responsive-utilities

响应式布局相关工具class

这部分分两类，一类是根据xs、sm、md、lg四种大小的屏幕控制页面元素的显示和隐藏的class；另一类是控制打印时页面元素是否被打印或隐藏的class；