知识库

Appearance

Return to top
On this page

CSS 框架

CSS 框架提供预定义的样式和组件，加速开发过程。

概述

CSS 框架是一套预先编写好的 CSS 样式和组件，用于快速构建网站和应用程序。

主流 CSS 框架

Bootstrap

基本结构

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 示例</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-8">内容区域</div>
      <div class="col-md-4">侧边栏</div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

网格系统

html
<!-- Bootstrap 12列网格系统 -->
<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">列1</div>
    <div class="col-12 col-md-6 col-lg-4">列2</div>
    <div class="col-12 col-lg-4">列3</div>
  </div>
</div>

<!-- 响应式断点 -->
<div class="container">
  <div class="row">
    <!-- xs: <576px, sm: ≥576px, md: ≥768px, lg: ≥992px, xl: ≥1200px, xxl: ≥1400px -->
    <div class="col-12 col-sm-6 col-md-4 col-lg-3">响应式列</div>
  </div>
</div>

组件示例

html
<!-- 按钮 -->
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-outline-secondary">轮廓按钮</button>

<!-- 卡片 -->
<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">卡片内容描述。</p>
    <a href="#" class="btn btn-primary">查看详情</a>
  </div>
</div>

<!-- 导航 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">品牌</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">功能</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Tailwind CSS

基本配置

javascript
// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{html,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

使用示例

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS 示例</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <!-- 实用优先类名 -->
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <div class="flex-shrink-0">
        <span class="text-2xl font-bold text-indigo-600">Logo</span>
      </div>
      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-4">
          <a href="#" class="text-gray-900 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">首页</a>
          <a href="#" class="text-gray-900 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">关于</a>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

响应式设计

html
<!-- Tailwind 的响应式前缀 -->
<div class="p-4 md:p-6 lg:p-8">
  <div class="text-base sm:text-lg md:text-xl lg:text-2xl">
    响应式文本
  </div>
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
    <div class="bg-white p-6 rounded-lg shadow">项目1</div>
    <div class="bg-white p-6 rounded-lg shadow">项目2</div>
    <div class="bg-white p-6 rounded-lg shadow">项目3</div>
    <div class="bg-white p-6 rounded-lg shadow">项目4</div>
  </div>
</div>

Bulma

基本结构

html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bulma 示例</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</head>
<body>
  <section class="section">
    <div class="container">
      <h1 class="title">欢迎使用 Bulma</h1>
      <p class="subtitle">现代 CSS 框架</p>
    </div>
  </section>
</body>
</html>

网格系统

html
<!-- Bulma 网格 -->
<div class="columns">
  <div class="column is-8">主内容 (8/12)</div>
  <div class="column is-4">侧边栏 (4/12)</div>
</div>

<!-- 响应式网格 -->
<div class="columns">
  <div class="column is-12-mobile is-6-tablet is-3-desktop">响应式列</div>
  <div class="column is-12-mobile is-6-tablet is-3-desktop">响应式列</div>
  <div class="column is-12-mobile is-6-tablet is-3-desktop">响应式列</div>
  <div class="column is-12-mobile is-6-tablet is-3-desktop">响应式列</div>
</div>

框架选择指南

按需选择

Bootstrap 适用场景

  • 需要快速原型开发
  • 团队熟悉 Bootstrap
  • 需要丰富的预构建组件
  • 项目时间紧张
html
<!-- Bootstrap 表单 -->
<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">邮箱地址</label>
    <input type="email" class="form-control" id="exampleInputEmail1">
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

Tailwind CSS 适用场景

  • 需要高度定制的设计
  • 偏好实用优先的类名
  • 项目有设计系统
  • 团队适应新的开发方式
html
<!-- Tailwind 表单 -->
<form class="space-y-6">
  <div>
    <label for="email" class="block text-sm font-medium text-gray-700">邮箱地址</label>
    <input type="email" class="mt-1 block w-full border border-gray-300 rounded-md p-2 focus:ring-indigo-500 focus:border-indigo-500">
  </div>
  <div>
    <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
    <input type="password" class="mt-1 block w-full border border-gray-300 rounded-md p-2 focus:ring-indigo-500 focus:border-indigo-500">
  </div>
  <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">
    提交
  </button>
</form>

Bulma 适用场景

  • 简洁的样式需求
  • Flexbox 布局
  • 现代化的外观
  • 需要 SASS 定制

性能考虑

文件大小比较

css
/* 各框架的文件大小（压缩后） */
/* Bootstrap: ~160KB */
/* Tailwind: ~300KB (完整版), ~10KB (Purge后) */
/* Bulma: ~200KB */

按需加载

javascript
// Bootstrap 按需引入
import { Modal } from 'bootstrap';

// Tailwind 按需使用类名，自动移除未使用的样式
// 在构建时通过 PurgeCSS 自动优化

// Bulma 可以按组件引入
@import "bulma/sass/base/_all";
@import "bulma/sass/elements/button";
@import "bulma/sass/components/navbar";

自定义和主题

Bootstrap 自定义

SCSS 变量覆盖

scss
// 自定义变量
$primary: #007bff;
$secondary: #6c757d;
$success: #28a745;
$font-family-base: "Helvetica Neue", Arial, sans-serif;
$border-radius: .4rem;

// 导入 Bootstrap
@import "bootstrap/scss/bootstrap";

JavaScript 组件

javascript
// 初始化模态框
const myModal = new bootstrap.Modal(document.getElementById('myModal'));
myModal.show();

// 事件监听
document.getElementById('myModal').addEventListener('shown.bs.modal', function () {
  console.log('模态框已显示');
});

Tailwind 自定义

主题配置

javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          500: '#3b82f6',
          900: '#1e3a8a',
        }
      },
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      }
    }
  }
}

插件开发

javascript
// 自定义插件
const plugin = require('tailwindcss/plugin')

module.exports = plugin(function({ addUtilities }) {
  addUtilities({
    '.text-shadow': {
      textShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
    },
    '.text-shadow-lg': {
      textShadow: '0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08)',
    },
  })
})

实用组件示例

响应式导航栏

html
<!-- Bootstrap 响应式导航 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">品牌</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link active" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">关于</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">联系</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

卡片组件

html
<!-- Tailwind 卡片 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden max-w-sm">
  <img class="w-full h-48 object-cover" src="image.jpg" alt="图片">
  <div class="p-6">
    <h3 class="text-xl font-semibold text-gray-800 mb-2">卡片标题</h3>
    <p class="text-gray-600 mb-4">卡片描述文本，这里是详细内容。</p>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      了解更多
    </button>
  </div>
</div>

表单布局

html
<!-- Bulma 表单 -->
<form class="box">
  <div class="field">
    <label class="label">姓名</label>
    <div class="control">
      <input class="input" type="text" placeholder="输入姓名">
    </div>
  </div>
  
  <div class="field">
    <label class="label">邮箱</label>
    <div class="control">
      <input class="input" type="email" placeholder="输入邮箱">
    </div>
  </div>
  
  <div class="field">
    <div class="control">
      <label class="checkbox">
        <input type="checkbox"> 我同意条款和条件
      </label>
    </div>
  </div>
  
  <div class="field is-grouped">
    <div class="control">
      <button class="button is-link">提交</button>
    </div>
    <div class="control">
      <button class="button is-link is-light">取消</button>
    </div>
  </div>
</form>

最佳实践

选择框架的原则

  1. 项目需求匹配度
  2. 团队技能水平
  3. 性能要求
  4. 维护成本
  5. 社区支持

使用框架的注意事项

  • 避免过度依赖框架
  • 了解框架的底层实现
  • 定期更新框架版本
  • 合理定制避免臃肿
  • 注意可访问性

性能优化

html
<!-- 只引入需要的组件 -->
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- 使用 PurgeCSS 清理未使用的 Tailwind 类 -->
<!-- 在生产环境中移除未使用的样式 -->

未来趋势

现代化发展方向

  • 更好的可访问性支持
  • 更轻量级的体积
  • 更好的性能表现
  • 更灵活的定制选项
  • 更好的框架集成

CSS 框架是前端开发的重要工具，选择合适的框架并正确使用，可以大大提高开发效率和用户体验。