4.0 Bootstrap

Purpose of CSS frameworks

• CSS frameworks 是用于开发响应式 web 应用的开源库。
• 它们使用 CSS 和 JavaScript 来构建样式组件，只需很少的努力即可实现相当美观的效果。
• CSS 虽然是一种强大的语言，用于为网站或应用创建和实现展示风格，但存在一些限制：
• 一些简单的操作，例如居中图片或文本，可能不够直观。
• 创建取决于设备视图的响应式样式很困难。
• 很多网站不需要 CSS 的全部功能，可以使用更简单的操作子集来设置样式。
• 制作吸引人的风格是一项高度创造性的活动。
• CSS 框架旨在克服这些限制。它们的主要优势之一是通常被设计为响应式的，因此一个应用在移动设备、平板电脑和个人电脑上看起来都不错，且只需很少的努力。
• 框架的一个缺点是使用相同框架构建的网站通常看起来视觉上很相似。

What is meant by a “responsive design”

• Responsive design 是指能够改变风格，以适应不同的设备，例如手机、平板电脑和个人电脑。

• CSS 框架（如 Bootstrap）旨在轻松实现响应式设计。

• 为了支持响应式设计，需要包含一个设置视口宽度为设备宽度的 meta-tag，以便于缩放。

• 框架提供了响应式布局机制：

• Containers: 框架提供容器类来设置页面的主要布局。例如，.container 类会自动设置响应页面大小的边距。.container 是一种响应式的固定宽度容器，其最大宽度会根据不同的断点（xs, sm, md, lg, xl, xxl）调整。它会使内容居中并根据设备的屏幕尺寸进行调整。.container-fluid 是一个全宽容器，始终跨越视口的 100%。.container-{breakpoint} 类（例如 .container-sm, .container-md）在达到指定断点之前是流式（全宽）的，达到断点后则表现为固定宽度容器。

• Grid System

  Bootstrap 的网格系统使用一系列容器、行和列来布局和对齐内容。它使用 12 列的行进行布局。

  • 每个组件（或 div）可以指定跨越这些列中的一定数量。
  • 布局可以根据设备尺寸（extra small, small, medium and large）来指定。
  • col 类可以在所有设备和视口上创建等宽列。
  • 可以通过类（如 col-6）指定列占据的切片数量。col-6 将元素分配为跨越 12 列中的 6 列，即正好是行宽度的一半。col-4 和 col-8 可以实现非对称布局。
  • 可以指定不同设备的布局。例如，col-md-6 指定在中等及更大尺寸设备上，每列将占据行宽的 50%，从而形成两列布局。结合使用类（如 col-sm-6 和 col-lg-3）可以为不同设备指定不同布局。

您将不会被要求阅读、编写或修复 Bootstrap 代码。考试将更侧重于概念性的理解，例如 CSS 框架的目的和响应式设计的含义。