从页面样式设计的颗粒度 Granularity 来谈起

元素颗粒度

我们知道，构成网页页面元素的最底层，最原始的东西就是 HTML & CSS
为每一个元素指定不同的内联 inline-style 或者 class 来控制它的呈现方式，最细程度可以到元素的 style属性来控制，颗粒度停留在元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hello World</title>
</head>
<body>
  <div>
    <h1 style="font-size:28px;">Hello, World!</h1>
    <p style="text-indent: 1em;">This is a basic Hello World page using Bootstrap.</p>
  </div>
</script>
</body>
</html>

组件颗粒度

后来有一些人发现每次起一个新项目都要重复的开发（复制）一套设计体系是一件很麻烦的事（复用以前的样式），应该存在一种通用方案去解决这类问题，于是 Bootstrap 出现了
Bootstrap 的颗粒度是基于网页常用元素的组件概念来设计的，有一套自己从上至下的完整设计体系（颜色，间距，主题色，圆角，线宽等等一系列预设），颗粒度一下上升到了组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hello World with Bootstrap</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container mt-5">
    <h1>Hello, World!</h1>
    <p>This is a basic Hello World page using Bootstrap.</p>
  </div>

  <!-- Bootstrap JS Bundle (Popper.js and Bootstrap JS) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

同类的产品有很多，比如国内的有 Element， AntDPro 系列，这类重型组件通常用于系统控制台，一般的网站后端功能使用。