《Vue.js+Bootstrap Web开发案例教程（在线实训版）》 课件 第13、14章　CSS原子化与工具类、Bootstrap的栅格布局.pptx

Vue+Bootstrap 2021.06Vue+Bootstrap 第13章 CSS原子化与工具类CSS原子化理念原子化与工具类的优势工具类的使用和规则响应式工具类颜色工具类尺寸工具类布局工具类DEMO（运用工具类制作导航栏）其他工具类DEMO（创建嵌套的留言组件） 第13章 CSS原子化与工具类 第13章 CSS原子化与工具类CSS原子化理念每种被广泛使用的技术都有自己的一套理念和哲学，它是一个技术的灵魂。从历史角度考察CSS，占据主流的是“组件化”思想。在软件开发领域，“组件化”几乎是一个永恒的基础哲学，因为在软件领域，组件化是提升开发效率、可维护性的基石。因此，CSS诞生以后，产生的各种以CSS为核心的UI层框架就把“组件化”当作一个重点。基于这种思想，把各种常用的网页样式需求提炼和抽象出来，为开发人员提供各种“开箱即用”的组件，成为一种深入人心的做法。例如，假设页面上有一个“提示框”元素，可以给它起一个名字，叫作alert-box，然后定义好它的CSS样式属性： 第13章 CSS原子化与工具类CSS原子化理念有了这个预先定义好的CSS类，以后在同一个项目中，所有用到这个样式的地方，都直接在某个HTML元素上使用这个alert-box组件了，这确实是非常高效的做法。事实上，早期的Bootstrap就预先定义好了大量的CSS类和复杂的组件，用户只要按照约定的结构编写HTML结构，并配合相应的CSS类，就可以产生精致的，具有充足设计感的网页效果，给开发人员带来了极大的便利。 第13章 CSS原子化与工具类CSS原子化理念但是，随着时间的推移，人们逐渐发现，基于组件化CSS的设计哲学仅仅是“看起来很美好”。实际开发中，尤其是项目规模扩大之后，隐藏的种种问题就会逐渐暴露出来，给开发人员带来相当大的困扰，主要有以下几点。CSS中所有的样式都是全局作用的，只能通过复杂的选择器实现作用范围的具体化。导致容易重名或者不经意间错误地覆盖了规则。复杂的规则重叠、代码的冗余和膨胀、难于消除无用代码。组件化开发中，需要大量的具有准确语义、易于理解和记忆的名称，这对于开发团队内部保证命名规则的一致性非常困难。 第13章 CSS原子化与工具类CSS原子化理念由此，近年在CSS工程领域，出现了一种新的CSS哲学——“原子化”。它与“组件化”正好相反，例如上面的例子中，alert-box“组件”被拆解为一组独立的微型CSS类： 第13章 CSS原子化与工具类CSS原子化理念可以看到，基于“原子化”哲学，根据直观的命名规则，构造出一套CSS类，每一个CSS类包含非常精简的CSS规则，然后直接用于HTML中。这些原子化的CSS类，被称为“工具类”。当然，在实际的开发中，这些原子化的“工具类”都是经过精心设计的。CSS原子化的理念在2013年被提出，经过了几年的发展，逐步取得业界的接受。目前出现了一些彻底的原子化CSS框架，例如Tailwind框架。另一些就是像Bootstrap这样的传统框架，也引入了“原子化”的工具类，但是仍然保留了组件的概念。 第13章 CSS原子化与工具类原子化与工具类的优势使用工具类比内联样式具有一些重要的优点：基于“约束”的设计。使用内联样式，每个属性值都可以使用。而使用工具类，只能从预定义的类中选择，这使得构建统一的UI更加容易。响应式的设计。在内联样式中不能使用媒体查询，但可以使用响应式工具类来构建完全响应式的页面。类命名的困难。如果使用自定义的类，往往需要进行“语义化”的命名，命名本身就比较困难，而且随着代码的增长会变得难以维护。CSS文件小。使用工具类，几乎不用添加CSS类，文件大小不会随着页面增加而线性增长。维护更容易。工具类是在HTML中使用，因此它只对当前的局部产生影响，不会影响全局。 第13章 CSS原子化与工具类上手案例：卡片设计 第13章 CSS原子化与工具类工具类的规则一个CSS样式类只做一件事，通常只包含一个属性。例如在CSS中有一个最基本的padding（内边距）属性，那么它的缩写是p，因此就对应于会如下的一组工具类：Bootstrap把padding属性的值分成6级，最小的是p-0，padding的值是0，其他依次增大，最大的p-5对应的是3rem。 第13章 CSS原子化与工具类工具类的规则根据类似的方式，一些常用属性的缩写如下。属性缩写font-sizefsfont-weightfwfont-stylefstpaddingppadding-topptmarginmdisplayd 第13章 CSS原子化与工具类响应式工具类有断点的类又称为“响应式工具类”，断点的值包括xs、sm、md、lg、xl和13l这6个，对应于不同的设备的大小。Bootstrap将根据浏览器窗口的宽