tailwind.css bootstrap

_mapping

已于 2025-02-08 21:44:25 修改

阅读量1.1k

点赞数 26

分类专栏： # css # vue 文章标签： css bootstrap 前端

于 2024-12-26 23:24:10 首次发布

本文链接：https://blog.csdn.net/qq_37757277/article/details/144755178

版权

css 同时被 2 个专栏收录

6 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

tailwind.css bootstrap

Tailwind CSS 和 Bootstrap 是两种流行的 CSS 框架，但它们的设计理念和使用方式有所不同。以下是它们的对比、优缺点以及如何在项目中同时使用它们的指南。

Tailwind CSS 和 Bootstrap 的对比

特性	Tailwind CSS	Bootstrap
设计理念	工具类优先（Utility-First），通过类名直接控制样式	组件优先，提供预定义的组件和样式
灵活性	高度灵活，完全自定义	灵活性较低，依赖预定义的组件和样式
学习曲线	需要熟悉大量工具类	上手简单，直接使用预定义组件
响应式设计	内置响应式工具类，完全自定义	提供栅格系统和响应式组件
文件大小	生产环境中未使用的类会被清理，文件较小	包含所有组件和样式，文件较大
扩展性	通过配置文件轻松扩展	通过自定义 SASS 变量扩展

什么时候选择 Tailwind CSS 或 Bootstrap？

Tailwind CSS

功能类优先（Utility-First）
高度可定制
从零开始构建设计
更灵活的样式控制

<!-- Tailwind CSS 示例 -->  
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">  
  按钮  
</button>

Bootstrap

预设组件为主
现成的设计系统
快速搭建统一风格的界面
更快的开发速度

<!-- Bootstrap 示例 -->  
<button class="btn btn-primary">  
  按钮  
</button>

选择 Tailwind CSS：
- 需要完全自定义的设计。
- 想要更细粒度的控制样式。
- 项目需要高度灵活的响应式设计。
选择 Bootstrap：
- 想快速构建一个标准化的界面。
- 不需要太多自定义设计。
- 更倾向于使用预定义的组件（如按钮、导航栏等）。

同时使用 Tailwind CSS 和 Bootstrap

在某些情况下，您可能希望同时使用 Tailwind CSS 和 Bootstrap，例如：

使用 Bootstrap 的组件（如模态框、导航栏等）。
使用 Tailwind CSS 的工具类来实现更细粒度的样式控制。

以下是如何在项目中同时集成它们的步骤：

1. 安装 Tailwind CSS 和 Bootstrap

在项目中安装 Tailwind CSS 和 Bootstrap：

# 安装 Tailwind CSS  
npm install -D tailwindcss postcss autoprefixer  

# 安装 Bootstrap  
npm install bootstrap

2. 配置 Tailwind CSS

初始化 Tailwind CSS 配置文件：

npx tailwindcss init

修改 tailwind.config.js 文件，确保 Tailwind CSS 的 content 配置正确：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./public/index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  // 禁用 Tailwind 的预设样式，避免与 Bootstrap 冲突  
  corePlugins: {  
    preflight: false,  
  },  
  theme: {  
    extend: {},  
  },  
  plugins: [], 
};

3. 引入 Tailwind CSS 和 Bootstrap

在项目的 src/assets 文件夹中创建一个 styles.css 文件，并引入 Tailwind CSS 和 Bootstrap 的样式：

/* src/assets/styles/main.css */  
/* 先引入 Bootstrap */  
@import 'bootstrap/dist/css/bootstrap.min.css';  

/* 再引入 Tailwind */  
@tailwind base;  
@tailwind components;  
@tailwind utilities;  

/* 自定义样式 */  
.custom-style {  
  @apply text-blue-500 hover:text-blue-700;  
}

然后在 src/main.js 中引入这个样式文件：

import { createApp } from 'vue';
import App from './App.vue';
import './assets/styles.css'; // 引入样式文件

createApp(App).mount('#app');

4. 解决样式冲突

由于 Tailwind CSS 和 Bootstrap 都会定义一些全局样式（如 container 类），可能会导致样式冲突。以下是解决冲突的几种方法：

使用命名空间

为 Bootstrap 的样式添加一个父级容器类，例如：

<div class="bootstrap">
  <button class="btn btn-primary">Bootstrap 按钮</button>
</div>

然后在 CSS 中限制 Bootstrap 的样式作用范围：

.bootstrap {
  @import "bootstrap/dist/css/bootstrap.min.css";
}

优先使用 Tailwind 的工具类
- 在需要自定义样式的地方，优先使用 Tailwind 的工具类，而不是 Bootstrap 的预定义样式。
按需引入 Bootstrap
- 如果只需要使用 Bootstrap 的某些组件，可以通过 SASS 按需引入。例如：
```
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/buttons";
```

5. 示例代码

以下是一个同时使用 Tailwind CSS 和 Bootstrap 的示例：

<template>
  <div class="min-h-screen bg-gray-100 flex items-center justify-center">
    <!-- 使用 Tailwind CSS -->
    <div class="p-6 bg-white rounded-lg shadow-lg">
      <h1 class="text-2xl font-bold text-gray-800">Hello, Tailwind CSS!</h1>
      <p class="text-gray-600 mt-2">这是一个使用 Tailwind CSS 的卡片。</p>
    </div>

    <!-- 使用 Bootstrap -->
    <div class="bootstrap mt-5">
      <button class="btn btn-primary">Bootstrap 按钮</button>
    </div>
  </div>
</template>

<template>  
  <!-- 混合使用示例 -->  
  <div class="container mx-auto"> <!-- Bootstrap 容器 + Tailwind 居中 -->  
    
    <!-- Bootstrap 卡片 + Tailwind 定制 -->  
    <div class="card hover:shadow-lg transition-shadow duration-300">  
      <div class="card-body">  
        <h5 class="card-title text-xl font-bold text-blue-600">  
          标题  
        </h5>  
        <p class="card-text text-gray-600">  
          内容描述  
        </p>  
        <!-- Bootstrap 按钮 + Tailwind 增强 -->  
        <button class="btn btn-primary hover:scale-105 transform transition">  
          点击  
        </button>  
      </div>  
    </div>  

    <!-- 导航栏示例 -->  
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-md">  
      <div class="container-fluid">  
        <a class="navbar-brand hover:text-blue-600 transition-colors" href="#">  
          Logo  
        </a>  
        <div class="collapse navbar-collapse">  
          <ul class="navbar-nav space-x-4">  
            <li class="nav-item">  
              <a class="nav-link hover:bg-gray-100 rounded-lg px-3 py-2" href="#">  
                首页  
              </a>  
            </li>  
            <li class="nav-item">  
              <a class="nav-link hover:bg-gray-100 rounded-lg px-3 py-2" href="#">  
                关于  
              </a>  
            </li>  
          </ul>  
        </div>  
      </div>  
    </nav>  

    <!-- 表单示例 -->  
    <form class="mt-6 space-y-4">  
      <div class="form-group">  
        <input   
          type="email"   
          class="form-control focus:ring-2 focus:ring-blue-500 focus:border-blue-500"  
          placeholder="请输入邮箱"  
        >  
      </div>  
      <div class="form-group">  
        <input   
          type="password"   
          class="form-control focus:ring-2 focus:ring-blue-500 focus:border-blue-500"  
          placeholder="请输入密码"  
        >  
      </div>  
      <button class="btn btn-primary w-full hover:bg-blue-600 transition-colors">  
        提交  
      </button>  
    </form>  

    <!-- 网格系统示例 -->  
    <div class="row mt-6">  
      <div class="col-md-4">  
        <div class="p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow">  
          第一列  
        </div>  
      </div>  
      <div class="col-md-4">  
        <div class="p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow">  
          第二列  
        </div>  
      </div>  
      <div class="col-md-4">  
        <div class="p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow">  
          第三列  
        </div>  
      </div>  
    </div>  
  </div>  
</template>

优缺点分析

优点

可以同时利用 Bootstrap 的组件和 Tailwind CSS 的灵活性。
在需要快速开发时使用 Bootstrap，在需要自定义时使用 Tailwind。

缺点

文件体积可能较大（需要清理未使用的样式）。
需要处理样式冲突，增加了复杂性。

使用建议

选择一个主框架

如果项目需要快速开发，选择 Bootstrap
如果需要独特设计，选择 Tailwind CSS

避免冲突

使用 preflight: false 避免基础样式冲突
明确样式优先级
适当使用 !important 解决特定冲突

性能优化

使用 PurgeCSS 清理未使用的样式
按需导入 Bootstrap 组件
考虑使用 Tree Shaking

开发效率

使用 VS Code 插件获得更好的开发体验
创建常用组件库
建立团队样式规范

总结

如果您需要快速开发并且对样式要求不高，可以直接使用 Bootstrap。
如果您需要高度自定义的设计，可以选择 Tailwind CSS。
如果您希望结合两者的优点，可以按照上述步骤同时使用它们，但需要注意样式冲突和文件大小问题。

bootstrap

Bootstrap 简介

Bootstrap 是一个流行的前端框架，用于快速构建响应式、移动优先的网站和应用程序。它提供了丰富的预定义样式、组件和 JavaScript 插件，帮助开发者快速实现复杂的布局和功能。

如何在 Vue CLI 项目中使用 Bootstrap

以下是将 Bootstrap 集成到 Vue CLI 项目的详细步骤：

1. 创建 Vue CLI 项目

如果您还没有 Vue CLI 项目，可以通过以下命令创建：

vue create my-bootstrap-project

进入项目目录：

cd my-bootstrap-project

2. 安装 Bootstrap

在项目中安装 Bootstrap 和其依赖：

npm install bootstrap

3. 引入 Bootstrap 样式

在 src/main.js 文件中引入 Bootstrap 的 CSS 文件：

import { createApp } from 'vue';
import App from './App.vue';
import 'bootstrap/dist/css/bootstrap.min.css'; // 引入 Bootstrap 样式
import 'bootstrap'; // 引入 Bootstrap 的 JS（可选）

createApp(App).mount('#app');

4. 使用 Bootstrap 组件

现在，您可以在 Vue 组件中直接使用 Bootstrap 提供的样式和组件。例如：

<template>
  <div class="container mt-5">
    <h1 class="text-center text-primary">Hello, Bootstrap!</h1>
    <button class="btn btn-success mt-3">点击我</button>
  </div>
</template>

Bootstrap 核心功能

1. 栅格系统（Grid System）

Bootstrap 提供了强大的响应式栅格系统，用于快速构建布局。

<div class="container">
  <div class="row">
    <div class="col-md-4">列 1</div>
    <div class="col-md-4">列 2</div>
    <div class="col-md-4">列 3</div>
  </div>
</div>

.container：用于包裹内容，提供固定宽度或流式布局。
.row：定义一行。
.col-*：定义列的宽度，* 表示列的占比（如 col-4 表示占 4/12）。

2. 按钮（Buttons）

Bootstrap 提供了多种样式的按钮：

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>

3. 表单（Forms）

Bootstrap 提供了丰富的表单样式：

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">邮箱地址</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入邮箱">
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

4. 导航栏（Navbar）

<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" 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>

5. 卡片（Cards）

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" 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>

6. 模态框（Modal）

<!-- 按钮触发模态框 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  打开模态框
</button>

<!-- 模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">模态框标题</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
      </div>
      <div class="modal-body">
        这是模态框的内容。
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>

1. 引入 Bootstrap

可以通过 CDN 快速引入：

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

2. 栅格系统

Bootstrap 使用 12 列栅格系统：

<div class="container">
  <div class="row">
    <!-- 在大屏幕上占4列，中等屏幕占6列，小屏幕占12列 -->
    <div class="col-lg-4 col-md-6 col-12">
      第一列内容
    </div>
    <div class="col-lg-4 col-md-6 col-12">
      第二列内容
    </div>
    <div class="col-lg-4 col-md-6 col-12">
      第三列内容
    </div>
  </div>
</div>

3. 常用组件

导航栏

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</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" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">关于</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

卡片

<div class="card" style="width: 18rem;">
  <img src="..." 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>

按钮

<!-- 不同样式的按钮 -->
<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-secondary">次要按钮</button>
<button class="btn btn-success">成功按钮</button>
<button class="btn btn-danger">危险按钮</button>
<button class="btn btn-warning">警告按钮</button>
<button class="btn btn-info">信息按钮</button>

<!-- 不同大小的按钮 -->
<button class="btn btn-primary btn-lg">大按钮</button>
<button class="btn btn-primary">普通按钮</button>
<button class="btn btn-primary btn-sm">小按钮</button>

表单

<form>
  <div class="mb-3">
    <label for="email" class="form-label">邮箱地址</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">密码</label>
    <input type="password" class="form-control" id="password">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="remember">
    <label class="form-check-label" for="remember">记住我</label>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

4. 实用工具类

间距

<!-- m: margin, p: padding -->
<!-- t: top, b: bottom, s: start, e: end, x: 左右, y: 上下 -->
<!-- 0-5 的数值代表不同的间距大小 -->
<div class="m-3">外边距 1rem</div>
<div class="p-3">内边距 1rem</div>
<div class="mt-3">上外边距 1rem</div>
<div class="mb-3">下外边距 1rem</div>
<div class="mx-auto">水平居中</div>

文本对齐

<p class="text-start">左对齐文本</p>
<p class="text-center">居中文本</p>
<p class="text-end">右对齐文本</p>

颜色

<p class="text-primary">主要颜色文本</p>
<p class="text-secondary">次要颜色文本</p>
<p class="bg-success">成功背景色</p>
<p class="bg-danger">危险背景色</p>

5. 响应式布局

<!-- 响应式显示/隐藏 -->
<div class="d-none d-md-block">
  只在中等及以上屏幕显示
</div>

<!-- 响应式文本对齐 -->
<p class="text-start text-md-center text-lg-end">
  在不同屏幕尺寸下改变对齐方式
</p>

6. 完整页面示例

<!DOCTYPE html>
<html lang="zh">
<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>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <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" 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>

    <!-- 主要内容 -->
    <div class="container my-5">
        <!-- 标题部分 -->
        <div class="row mb-5">
            <div class="col-12 text-center">
                <h1 class="display-4">欢迎访问</h1>
                <p class="lead">这是一个使用 Bootstrap 构建的响应式网页示例</p>
            </div>
        </div>

        <!-- 卡片部分 -->
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">特性一</h5>
                        <p class="card-text">这里是特性一的详细描述内容。</p>
                        <a href="#" class="btn btn-primary">了解更多</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">特性二</h5>
                        <p class="card-text">这里是特性二的详细描述内容。</p>
                        <a href="#" class="btn btn-primary">了解更多</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">特性三</h5>
                        <p class="card-text">这里是特性三的详细描述内容。</p>
                        <a href="#" class="btn btn-primary">了解更多</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-light py-4 mt-5">
        <div class="container text-center">
            <p class="mb-0">© 2024 您的网站名称. 保留所有权利。</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

响应式图片：

<img src="..." class="img-fluid" alt="响应式图片">

表格样式：

<table class="table table-striped table-hover">
  <!-- 表格内容 -->
</table>

警告框：

<div class="alert alert-success" role="alert">
  操作成功！
</div>

使用 Bootstrap 的 JavaScript 功能

如果需要使用 Bootstrap 的交互功能（如模态框、下拉菜单等），需要引入 Bootstrap 的 JavaScript 文件。Vue CLI 项目中已经通过 import 'bootstrap' 引入了 Bootstrap 的 JS。

自定义 Bootstrap 样式（可选）

如果需要自定义 Bootstrap 的样式，可以通过以下方式实现：

安装 SASS 版本的 Bootstrap

npm install bootstrap@5.3.0-alpha1 sass

创建自定义样式文件
在 src/assets 文件夹中创建一个 custom.scss 文件：

// 引入 Bootstrap 的核心文件
@import "bootstrap/scss/bootstrap";

// 自定义变量
$primary: #ff5722;

// 自定义样式
body {
  font-family: 'Arial', sans-serif;
}

在 main.js 中引入自定义样式
```
import './assets/custom.scss';
```

总结

通过以上步骤，您可以在 Vue CLI 项目中快速集成并使用 Bootstrap。Bootstrap 提供了丰富的组件和样式，适合快速开发响应式网站。