UI框架之Bootstrap三大部分

Posted on Views:

1. 全局 CSS（基础层）

负责页面基础样式和布局。

包含：

  • 重置浏览器默认样式（Reboot）
  • 字体、颜色、排版
  • 栅格布局（container、row、col）
  • 间距、显示、定位等工具类

例：

1
2
3
<div class="container mt-3">
  内容
</div>

2. 组件（UI 层）

负责常用界面元素。

  • Button 按钮
  • Navbar 导航
  • Card 卡片
  • Form 表单
  • Alert 提示
  • Modal 弹窗
  • Dropdown 下拉

例：

1
2
3
<button class="btn btn-primary">
  保存
</button>

3. JS 插件（交互层）

负责动态行为。

  • 弹窗打开/关闭
  • 下拉菜单
  • 标签切换
  • 折叠展开
  • 轮播
  • Tooltip 提示

例：

1
2
3
<button data-bs-toggle="modal">
  打开弹窗
</button>

三者关系

Bootstrap
   |
   ├── CSS
   |     └── 基础样式、布局、工具类
   |
   ├── Components
   |     └── 按钮、卡片、导航等
   |
   └── JS Plugins
         └── 点击、弹窗、动画等交互

一句话：

CSS 管外观，组件管结构，JS 插件管行为。