bootstrap-overview（引导程序概述）

Bootstrap 5.3 Overview

Bootstrap 5.3.8 is a powerful front-end framework for building responsive, mobile-first websites. This skill covers installation, project setup, and foundational concepts.

Quick Start Options

CDN (Fastest Setup)

For prototyping or simple projects, use CDN links. Include CSS in <head> and JS before closing </body>:

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

Always use bootstrap.bundle.min.js (includes Popper.js) unless separately managing Popper.

Package Manager Installation

npm:

npm install bootstrap@5.3.8

yarn:

yarn add bootstrap@5.3.8

pnpm:

pnpm add bootstrap@5.3.8

Bun:

bun add bootstrap@5.3.8

Composer (PHP):

composer require twbs/bootstrap:5.3.8

NuGet (.NET):

Install-Package bootstrap -Version 5.3.8

After installation, import in JavaScript:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
// Or import specific components
import { Modal, Tooltip } from 'bootstrap';

ES Module Usage

For native ESM usage in browsers without a bundler, use bootstrap.esm.min.js with an importmap:

<script type="importmap">
{
  "imports": {
    "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/esm/popper.min.js",
    "bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.esm.min.js"
  }
}
</script>
<script type="module">
  import * as bootstrap from 'bootstrap'
  // Use bootstrap components
</script>

For older browsers, include the es-module-shims polyfill.

Starter Template

Every Bootstrap page requires this minimal structure:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, Bootstrap!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
  </body>
</html>

Critical requirements:

• <!doctype html> declaration for proper rendering
• Responsive viewport meta tag with width=device-width, initial-scale=1
• CSS loaded in <head>, JavaScript before </body>

Build Tool Integration

For production applications, integrate Bootstrap with build tools for tree-shaking and optimization.

Vite Setup

npm create vite@latest my-project -- --template vanilla
cd my-project
npm install bootstrap @popperjs/core
npm install -D sass

Import in main.js:

import './scss/styles.scss';
import * as bootstrap from 'bootstrap';

Create src/scss/styles.scss:

// Import Bootstrap
@import "bootstrap/scss/bootstrap";

See references/build-tools.md for Parcel and Webpack setup guides.

Ruby on Rails 8 Setup

Rails 8 uses Propshaft as the default asset pipeline. Three integration approaches:

Approach 1: Importmaps + bootstrap gem (no Node.js):

bundle add bootstrap -v "~> 5.3.8"
bundle add dartsass-rails
bin/rails dartsass:install

Approach 2: cssbundling-rails (full Node.js):

rails new myapp --css bootstrap
# Or for existing apps:
bundle add cssbundling-rails
bin/rails css:install:bootstrap

Approach 3: CDN only — add CDN links directly to layout.

See references/rails-setup.md for complete Rails 8 integration guides including Turbo/Stimulus patterns, form helpers, and Bootstrap Icons.

JavaScript Components

Bootstrap 5 components can be initialized two ways:

Data Attributes (No JavaScript Required)

<button type="button" class="btn btn-primary"
        data-bs-toggle="modal" data-bs-target="#myModal">
  Open Modal
</button>

Programmatic Initialization

// Get element
const myModal = document.getElementById('myModal');

// Create instance
const modal = new bootstrap.Modal(myModal, {
  keyboard: false,
  backdrop: 'static'
});

// Use methods
modal.show();
modal.hide();
modal.toggle();
modal.dispose();

Component Methods Pattern

All components follow consistent patterns:

• getInstance() - Get existing instance
• getOrCreateInstance() - Get or create instance
• dispose() - Destroy instance and clean up
• Component-specific methods (show, hide, toggle, etc.)

See references/javascript-api.md for the complete JavaScript API including events, methods, and options for all components.

Framework Considerations

Bootstrap JavaScript is not fully compatible with React, Vue, or Angular—both Bootstrap and the framework may attempt to mutate the same DOM elements, causing bugs. For these frameworks, use dedicated packages:

• React: React Bootstrap
• Vue 3: BootstrapVueNext
• Angular: ng-bootstrap

Bootstrap CSS works with any framework without issues.

Accessibility

Bootstrap provides accessible components out of the box, but proper implementation remains the developer's responsibility. Understanding Bootstrap's accessibility features ensures WCAG 2.2 compliance.

Key Accessibility Features

Visually Hidden Content:

Use .visually-hidden to hide content visually while keeping it accessible to screen readers:

<p class="text-danger">
  <span class="visually-hidden">Error: </span>
  This field is required
</p>

Use .visually-hidden-focusable for skip links that appear on keyboard focus:

<a class="visually-hidden-focusable" href="#main-content">
  Skip to main content
</a>

Color Contrast Considerations:

Bootstrap's default colors may not meet WCAG contrast requirements in all contexts:

• Text requires 4.5:1 contrast ratio (WCAG AA)
• Large text (18pt+) requires 3:1 ratio
• Non-text elements (icons, borders) require 3:1 ratio

Always test color combinations. The default .text-muted on light backgrounds may need adjustment for compliance. Consider using .text-body or .text-body-emphasis for better contrast when needed.

Reduced Motion Support:

Bootstrap respects the prefers-reduced-motion media query:

@media (prefers-reduced-motion: reduce) {
  /* Transitions and animations are disabled or minimized */
}

Components like carousels, modals, and collapse automatically reduce or disable animations for users who prefer reduced motion.

ARIA Implementation

Interactive components include appropriate ARIA attributes:

<!-- Accordion with ARIA -->
<div class="accordion-item">
  <h2 class="accordion-header">
    <button class="accordion-button" type="button"
            data-bs-toggle="collapse"
            data-bs-target="#collapseOne"
            aria-expanded="true"
            aria-controls="collapseOne">
      Section Title
    </button>
  </h2>
  <div id="collapseOne" class="accordion-collapse collapse show"
       aria-labelledby="headingOne">
    <div class="accordion-body">Content here</div>
  </div>
</div>

Bootstrap handles aria-expanded, aria-controls, and aria-hidden automatically for JavaScript-powered components.

Focus Management

Bootstrap manages focus appropriately for interactive components:

• Modals trap focus within the dialog
• Dropdowns return focus when closed
• Tooltips and popovers are keyboard accessible

For custom implementations, use Bootstrap's focus trap utilities or manage focus manually.

RFS (Responsive Font Sizes)

RFS is Bootstrap's responsive scaling engine that automatically adjusts font sizes, margins, padding, and other properties based on viewport dimensions.

How RFS Works

RFS generates calc() functions combining rem units with viewport width (vw) for fluid scaling:

// Input
.title {
  @include font-size(4rem);
}

// Output
.title {
  font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
  .title {
    font-size: 4rem;
  }
}

Properties scale smoothly between minimum and maximum viewport sizes, then lock at the specified value for larger screens.

Using RFS Mixins

Font sizes:

.heading {
  @include font-size(2.5rem);
}

Other properties:

.card {
  @include padding(2rem);
  @include margin(1.5rem);
  @include rfs(1rem, border-radius);
}

RFS Functions

For properties within media queries or complex calculations:

.responsive-element {
  @include media-breakpoint-down(lg) {
    padding: rfs-fluid-value(2rem);
    font-size: rfs-fluid-value(1.125rem);
  }
}

Configuration

RFS behavior is controlled via Sass variables:

$rfs-base-value: 1.25rem;        // Minimum font size
$rfs-unit: rem;                   // Output unit
$rfs-breakpoint: 1200px;          // Max viewport for scaling
$rfs-factor: 10;                  // Scaling intensity

Lower $rfs-factor values (e.g., 5) create more dramatic scaling; higher values (e.g., 15) reduce the effect. The default is 10.

RTL (Right-to-Left) Support

Bootstrap 5 includes RTL support. To enable:

1. Set dir="rtl" on <html> element
2. Use RTL stylesheet:

<html lang="ar" dir="rtl">
  <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-CfCrinSRH2IR6a4e6fy2q6ioOX7O6Mtm1L9vRvFZ1trBncWmMePhzvafv7oIcWiW" crossorigin="anonymous">
  </head>
</html>

Logical properties (start/end) replace directional ones (left/right).

Browser Support

Bootstrap 5.3 supports modern browsers only:

Not supported: Internet Explorer (any version). Bootstrap 5 dropped IE support entirely, enabling modern CSS features like CSS custom properties, flexbox, and grid without fallbacks.

Mobile Considerations

Bootstrap is designed mobile-first. All components are touch-friendly with appropriate tap targets (minimum 44x44 pixels for interactive elements). Test on actual devices, as browser DevTools cannot fully simulate touch interactions, scroll behavior, or performance characteristics.

CSS Variables

Bootstrap 5.3 uses CSS custom properties extensively:

:root {
  --bs-blue: #0d6efd;
  --bs-primary: #0d6efd;
  --bs-body-font-family: system-ui, -apple-system, sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.5;
}

Override at root level or component level:

.my-component {
  --bs-primary: #custom-color;
}

Dependencies

Bootstrap 5.3 JavaScript requires:

• Popper.js (included in bootstrap.bundle.js) - Required for dropdowns, popovers, tooltips, and any component with positioning
• No jQuery dependency (removed in Bootstrap 5)

Choose the right bundle:

• bootstrap.bundle.js - Includes Popper.js (recommended for most projects)
• bootstrap.js - Without Popper.js (use when managing Popper separately or not using positioned components)

File Structure

When installed via npm:

node_modules/bootstrap/
├── dist/
│   ├── css/
│   │   ├── bootstrap.css
│   │   ├── bootstrap.min.css
│   │   ├── bootstrap.rtl.css
│   │   └── bootstrap.rtl.min.css
│   └── js/
│       ├── bootstrap.js
│       ├── bootstrap.min.js
│       ├── bootstrap.bundle.js
│       └── bootstrap.bundle.min.js
└── scss/
    ├── bootstrap.scss
    ├── _variables.scss
    └── ...

Available CSS builds:

Each variant is available in .min.css (minified) and .rtl.css (right-to-left) versions.

Key Concepts

Mobile-First

Bootstrap is built mobile-first. Base styles target mobile devices, with responsive enhancements applied via media queries at larger breakpoints. This approach means:

• Start with mobile layout, add complexity for larger screens
• Use min-width media queries (styles apply at breakpoint and up)
• Avoid max-width queries unless specifically targeting smaller screens

Box-sizing

Bootstrap sets box-sizing: border-box globally, switching from the default content-box. This ensures padding doesn't affect the final computed width of an element, simplifying sizing calculations. This may conflict with third-party widgets (e.g., Google Maps). Override with .selector {box-sizing: content-box;} when needed.

Reboot

Bootstrap's Reboot provides opinionated CSS normalization for consistent cross-browser rendering. See the bootstrap-content skill for details.

Breakpoints

Default responsive breakpoints:

• xs: <576px (default, no infix)
• sm: ≥576px
• md: ≥768px
• lg: ≥992px
• xl: ≥1200px
• xxl: ≥1400px

Container System

Three container types:

• .container - Fixed-width, responsive (changes width at each breakpoint)
• .container-fluid - Full-width always (100% at all breakpoints)
• .container-{breakpoint} - Full-width until breakpoint, then fixed-width

<div class="container">Fixed-width responsive</div>
<div class="container-fluid">Always 100% width</div>
<div class="container-lg">100% until lg, then fixed</div>

Containers provide horizontal padding (--bs-gutter-x: 1.5rem by default) and center content within the viewport.

Additional Resources

Reference Files

• references/build-tools.md - Complete Vite, Parcel, and Webpack setup guides
• references/rails-setup.md - Ruby on Rails 8 integration with Propshaft, Turbo, and Stimulus
• references/javascript-api.md - Full JavaScript component API reference
• references/vite-setup.md - Detailed Vite project structure and configuration

Example Files

• examples/starter-template.html - Basic HTML starter
• examples/rtl-starter.html - RTL-enabled starter template with Arabic content
• examples/rails-application-layout.html.erb - Rails 8 application layout with Bootstrap
• examples/rails-bootstrap-form.html.erb - Bootstrap-styled Rails form helpers
• examples/rails-flash-messages.html.erb - Flash messages as Bootstrap alerts
• examples/rails-navbar-partial.html.erb - Responsive navbar partial for Rails
• examples/rails-turbo-modal.html.erb - Turbo-compatible Bootstrap modal

Related Skills

• bootstrap-customize - Sass variables, theming, color modes
• bootstrap-layout - Grid system, containers, breakpoints detail
• bootstrap-content - Reboot and typography