# 学习资料

**Repository Path**: gu-keyang/learning-materials

## Basic Information

- **Project Name**: 学习资料
- **Description**: 学习资料存储仓库
学习资料存储仓库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-24
- **Last Updated**: 2025-09-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# BootStrap5 使用指南

## 简介
BootStrap5 是一个流行的前端框架，用于快速开发响应式网站和应用程序。它提供了丰富的 CSS 样式、组件和 JavaScript 插件，帮助开发者轻松构建现代化的网页。

## 目录结构
1. **入门**
   - 简介
   - 相关资源
   - font-awesome 图标使用
   - BootStrap 使用
   - VSCode 插件

2. **常见组件**
   - 文字颜色
   - 徽章 (badge)
   - 按钮 (btn)
   - 容器 (container)
   - 尺寸效果
   - 布局 (flex)
   - 卡片 (card)
   - 导航栏 (navbar)
   - 表单 (form)
   - 表格 (table)
   - 分页 (pagination)

3. **案例（练习）**
   - 登录页面
   - 首页
   - 管理页面
   - 详情页面

## 安装与使用

### 引入 BootStrap5
你可以通过以下方式引入 BootStrap5：

#### 方法一：使用本地文件
将 `bootstrap-5.3.0-alpha1-dist` 文件夹复制到你的项目目录中，并在 HTML 文件中引用 CSS 和 JS 文件：
```html
<!-- 引入 CSS -->
<link href="path/to/bootstrap.min.css" rel="stylesheet">

<!-- 引入 JS -->
<script src="path/to/bootstrap.bundle.min.js"></script>
```

#### 方法二：使用 CDN
直接在 HTML 文件中通过 CDN 引入：
```html
<!-- CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- JS CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
```

## 主要功能

### 响应式布局
BootStrap5 提供了强大的响应式网格系统，支持多种屏幕尺寸。你可以使用 `.container`, `.row`, `.col-*` 等类来创建灵活的布局。

### 组件样式
框架内置了大量常用组件样式，包括按钮、导航栏、卡片、表单、表格等。你可以直接使用这些类来美化你的网页。

### JavaScript 插件
BootStrap5 提供了多个 JavaScript 插件，如模态框 (Modal)、轮播图 (Carousel)、下拉菜单 (Dropdown) 等，增强网页交互性。

## 示例代码

### 基本按钮
```html
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次要按钮</button>
```

### 响应式容器
```html
<div class="container">
  <div class="row">
    <div class="col-md-6">左侧内容</div>
    <div class="col-md-6">右侧内容</div>
  </div>
</div>
```

### 导航栏
```html
<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" 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
<!-- 按钮触发模态框 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  打开模态框
</button>

<!-- 模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">模态框标题</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p>这是一个模态框内容。</p>
      </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>
```

## 开发工具推荐
- **VSCode**：推荐使用 VSCode 编辑器，并安装以下插件：
  - Live Server：实时预览网页。
  - Bootstrap 5 Snippets：提供 BootStrap5 的代码片段。
  - Prettier：格式化 HTML/CSS/JS 代码。

## 学习资源
- [BootStrap5 官方文档](https://getbootstrap.com/docs/5.3/getting-started/introduction/)
- [Font Awesome 图标库](https://fontawesome.com/)
- [MDN Web Docs](https://developer.mozilla.org/)

## 版本信息
当前 BootStrap 版本为 **5.3.0-alpha1**，支持现代浏览器并提供 RTL（从右到左）语言支持。

## 许可证
BootStrap5 使用 MIT 许可证。有关详细信息，请参阅官方文档。

---

通过 BootStrap5，你可以快速构建美观且功能丰富的网页，无需从头编写复杂的 CSS 和 JavaScript。希望这份文档能帮助你更好地理解和使用 BootStrap5！