Bootstrap 高级用法 #

本指南介绍 Bootstrap 的高级用法，包括性能优化、可访问性、与其他框架集成等内容，帮助你成为 Bootstrap 专家。

性能优化 #

按需引入 #

只引入需要的组件，减少文件大小：

scss

// 仅引入必要的文件
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/utilities";

移除未使用的 CSS #

使用 PurgeCSS 移除未使用的样式：

javascript

// purgecss.config.js
module.exports = {
  content: [
    './**/*.html',
    './**/*.js'
  ],
  css: ['./css/bootstrap.css'],
  output: './css/'
};

压缩 CSS #

bash

# 使用 sass 压缩
sass custom.scss custom.css --style=compressed

# 使用 cssnano
npx cssnano bootstrap.css bootstrap.min.css

异步加载 JavaScript #

html

<!-- 异步加载 -->
<script src="bootstrap.bundle.min.js" async></script>

<!-- 延迟加载 -->
<script src="bootstrap.bundle.min.js" defer></script>

预加载关键资源 #

html

<!-- 预加载 CSS -->
<link rel="preload" href="bootstrap.min.css" as="style">
<link href="bootstrap.min.css" rel="stylesheet">

<!-- 预加载字体 -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

可访问性 #

语义化 HTML #

html

<!-- 推荐：使用语义化标签 -->
<nav class="navbar">
  <ul class="navbar-nav">
    <li class="nav-item"><a class="nav-link" href="#">首页</a></li>
  </ul>
</nav>

<main>
  <article>
    <h1>文章标题</h1>
    <p>文章内容</p>
  </article>
</main>

ARIA 属性 #

html

<!-- 导航栏 -->
<nav class="navbar" role="navigation" aria-label="主导航">
  ...
</nav>

<!-- 按钮 -->
<button type="button" class="btn btn-primary" aria-label="保存">
  <svg class="bi">...</svg>
</button>

<!-- 模态框 -->
<div class="modal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalLabel">标题</h5>
      </div>
    </div>
  </div>
</div>

跳过链接 #

html

<a href="#main-content" class="visually-hidden-focusable">跳到主要内容</a>

<nav>...</nav>

<main id="main-content">
  主要内容
</main>

颜色对比度 #

确保文本与背景的对比度符合 WCAG 标准：

scss

// 确保对比度至少为 4.5:1
.text-primary { color: #0d6efd; } // 对白色背景对比度 4.5:1
.text-dark { color: #212529; }    // 对白色背景对比度 14.7:1

键盘导航 #

html

<!-- 确保所有交互元素可通过键盘访问 -->
<button class="btn btn-primary" type="button">按钮</button>

<!-- 使用 tabindex -->
<div class="card" tabindex="0" role="button">
  可聚焦的卡片
</div>

与框架集成 #

React #

bash

npm install bootstrap

javascript

// App.js
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div className="container">
      <button className="btn btn-primary">按钮</button>
    </div>
  );
}

使用 React Bootstrap（推荐）：

bash

npm install react-bootstrap

javascript

import Button from 'react-bootstrap/Button';
import Container from 'react-bootstrap/Container';

function App() {
  return (
    <Container>
      <Button variant="primary">按钮</Button>
    </Container>
  );
}

Vue #

bash

npm install bootstrap

javascript

// main.js
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

vue

<template>
  <div class="container">
    <button class="btn btn-primary">按钮</button>
  </div>
</template>

使用 BootstrapVue（推荐）：

bash

npm install bootstrap-vue

javascript

// main.js
import { createApp } from 'vue';
import BootstrapVue from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';

const app = createApp(App);
app.use(BootstrapVue);

Angular #

bash

npm install bootstrap

json

// angular.json
{
  "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
  ]
}

使用 ng-bootstrap（推荐）：

bash

npm install @ng-bootstrap/ng-bootstrap

typescript

// app.module.ts
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [NgbModule]
})
export class AppModule { }

Next.js #

bash

npm install bootstrap

javascript

// pages/_app.js
import 'bootstrap/dist/css/bootstrap.min.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

Nuxt.js #

bash

npm install bootstrap

javascript

// nuxt.config.js
export default {
  css: [
    'bootstrap/dist/css/bootstrap.min.css'
  ],
  scripts: [
    { src: 'bootstrap/dist/js/bootstrap.bundle.min.js', body: true }
  ]
};

自定义组件 #

扩展按钮 #

scss

.btn-custom {
  @include button-variant(
    $background: #ff6600,
    $border: #ff6600,
    $hover-background: darken(#ff6600, 10%),
    $hover-border: darken(#ff6600, 10%),
    $active-background: darken(#ff6600, 15%),
    $active-border: darken(#ff6600, 15%)
  );
  
  border-radius: 50rem;
  padding: 0.75rem 2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

扩展卡片 #

scss

.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  }
}

扩展模态框 #

scss

.modal-blur {
  backdrop-filter: blur(5px);
}

.modal-slide {
  .modal-dialog {
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  
  &.show .modal-dialog {
    transform: translateX(0);
  }
}

响应式设计技巧 #

响应式字体 #

scss

html {
  font-size: 14px;
  
  @include media-breakpoint-up(sm) {
    font-size: 15px;
  }
  
  @include media-breakpoint-up(md) {
    font-size: 16px;
  }
  
  @include media-breakpoint-up(lg) {
    font-size: 17px;
  }
}

响应式间距 #

html

<div class="p-2 p-md-4 p-lg-5">
  响应式内边距
</div>

响应式隐藏 #

html

<!-- 仅在移动端显示 -->
<div class="d-block d-md-none">移动端内容</div>

<!-- 仅在桌面端显示 -->
<div class="d-none d-md-block">桌面端内容</div>

JavaScript 高级用法 #

编程式控制组件 #

javascript

// 模态框
var modal = new bootstrap.Modal(document.getElementById('myModal'));
modal.show();
modal.hide();
modal.toggle();

// Toast
var toast = new bootstrap.Toast(document.getElementById('myToast'));
toast.show();

// Dropdown
var dropdown = new bootstrap.Dropdown(document.getElementById('myDropdown'));
dropdown.toggle();
dropdown.update();

监听事件 #

javascript

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

// 按钮点击
document.querySelectorAll('.btn').forEach(function(btn) {
  btn.addEventListener('click', function() {
    // 处理点击
  });
});

动态创建组件 #

javascript

// 动态创建模态框
function createModal(title, content) {
  var modalHtml = `
    <div class="modal fade" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">${title}</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">${content}</div>
        </div>
      </div>
    </div>
  `;
  
  var modalElement = document.createElement('div');
  modalElement.innerHTML = modalHtml;
  document.body.appendChild(modalElement.firstElementChild);
  
  var modal = new bootstrap.Modal(modalElement.querySelector('.modal'));
  modal.show();
  
  return modal;
}

最佳实践 #

1. 文件组织 #

text

project/
├── scss/
│   ├── _variables.scss
│   ├── _mixins.scss
│   ├── _components/
│   │   ├── _buttons.scss
│   │   ├── _cards.scss
│   │   └── _navbar.scss
│   └── main.scss
├── css/
│   └── main.css
├── js/
│   └── main.js
└── index.html

2. 命名约定 #

scss

// 使用有意义的类名
.btn-primary { }
.card-product { }
.navbar-main { }

// 避免过度嵌套
.card {
  .card-body { }
}

// 使用 BEM 命名
.card { }
.card__header { }
.card__body { }
.card--featured { }

3. 性能优化清单 #

[ ] 按需引入组件
[ ] 压缩 CSS 和 JS
[ ] 移除未使用的样式
[ ] 使用 CDN 加速
[ ] 启用浏览器缓存
[ ] 优化图片
[ ] 异步加载非关键资源

4. 可访问性清单 #

[ ] 使用语义化 HTML
[ ] 添加 ARIA 属性
[ ] 确保颜色对比度
[ ] 支持键盘导航
[ ] 提供跳过链接
[ ] 添加 alt 属性
[ ] 使用正确的焦点顺序

常见问题解决 #

1. 样式冲突 #

scss

// 使用更高优先级的选择器
.my-app .btn-primary {
  // 自定义样式
}

// 或使用 !important（不推荐）
.btn-primary {
  color: #fff !important;
}

2. JavaScript 依赖 #

html

<!-- 确保 Popper.js 在 Bootstrap 之前加载 -->
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>

<!-- 或使用 bundle -->
<script src="bootstrap.bundle.min.js"></script>

3. IE 兼容 #

Bootstrap 5 不支持 IE，如需支持请使用 Bootstrap 4：

html

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

总结 #

通过本指南，你已经学习了 Bootstrap 的高级用法：

性能优化：按需引入、压缩、PurgeCSS
可访问性：语义化、ARIA、键盘导航
框架集成：React、Vue、Angular
自定义组件：扩展按钮、卡片、模态框
最佳实践：文件组织、命名约定、清单

继续实践和探索，你将成为 Bootstrap 专家！