资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

Bootstrap Quickstart

创作时间:

作者:

@小白创作中心

Bootstrap Quickstart

引用

CSDN

https://blog.csdn.net/2301_80346402/article/details/144442048

在前端开发中，快速构建响应式、精美的页面是非常重要的任务，而 Bootstrap 是一个功能强大的 CSS 框架，可以帮助开发者轻松实现这一目标。本文将通过代码示例和表格为你详细讲解如何快速上手Bootstrap。

什么是 Bootstrap？

Bootstrap 是一个用于快速开发响应式和移动优先网页的前端框架，包含了以下内容：

CSS 组件：如网格系统、按钮、卡片等。
JavaScript 插件：如模态框、下拉菜单、轮播图等。
移动优先：内置响应式设计理念，适配不同设备尺寸。

引入 Bootstrap

方法 1：通过 CDN 引入

最简单的方式是通过 Bootstrap 的官方 CDN。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Quickstart</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <h1 class="text-center text-primary">Hello, Bootstrap!</h1>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

方法 2：使用 npm 安装

如果你使用构建工具，可以通过 npm 安装：

npm install bootstrap

然后在你的项目中引入：

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

核心功能示例

1. 网格系统

Bootstrap 的网格系统基于 12 列布局，可以快速创建响应式页面。

<div class="container">
    <div class="row">
        <div class="col-md-4 bg-primary text-white">列 1</div>
        <div class="col-md-4 bg-success text-white">列 2</div>
        <div class="col-md-4 bg-warning text-dark">列 3</div>
    </div>
</div>

网格系统属性表

类名	描述
.container	固定宽度的容器
.row	行，包含列
.col-*	列，根据设备大小调整宽度
.offset-*	偏移列

2. 按钮

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

<div class="text-center">
    <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>
</div>

按钮样式表

类名	描述
.btn-primary	蓝色主按钮
.btn-secondary	灰色次按钮
.btn-success	绿色成功按钮
.btn-danger	红色警告按钮
.btn-outline-*	描边按钮

3. 卡片组件

卡片是一种常见的 UI 组件，用于展示内容。

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

高级功能

1. 模态框

模态框是一个弹出式对话框。

<!-- 触发按钮 -->
<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>

2. 响应式表格

Bootstrap 提供了类 .table 和 .table-responsive 来快速创建表格。

<div class="table-responsive">
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>#</th>
                <th>名称</th>
                <th>描述</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Bootstrap</td>
                <td>最流行的前端框架</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Flexbox</td>
                <td>强大的布局工具</td>
            </tr>
        </tbody>
    </table>
</div>