Bootstrap实例教程有哪些实用案例？-杰瑞科技汇

Bootstrap 实例教程：从零开始构建响应式网站

第一部分：Bootstrap 是什么？为什么要用它？

什么是 Bootstrap？

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架，它由 Twitter 的设计师和开发者 Mark Otto 和 Jacob Thornton 于 2011 年创建。

（图片来源网络，侵删）

你可以把它想象成一个“UI 乐高积木箱”，里面包含了大量预先写好的 HTML、CSS 和 JavaScript 代码（组件），比如按钮、导航栏、轮播图、模态框等，你可以直接把这些“积木”拿过来，像搭积木一样快速拼凑出美观、功能完善的网页。

为什么要使用 Bootstrap？

快速开发：无需从零开始写样式，直接使用现成的组件，大大节省开发时间。
响应式设计：这是 Bootstrap 的核心优势，它内置了一套强大的栅格系统，能自动让你的网站适配手机、平板、桌面等各种不同尺寸的屏幕，你只需要写一套代码，就能实现多端适配。
浏览器兼容性好：Bootstrap 处理了不同浏览器之间的样式差异，你不需要为 IE、Chrome、Firefox 等浏览器写兼容性代码。
设计一致性：使用 Bootstrap 的默认样式，可以保证整个网站的风格统一、专业。
文档和社区丰富：Bootstrap 拥有极其详尽的官方文档和庞大的开发者社区，遇到问题很容易找到解决方案。

第二部分：如何开始一个 Bootstrap 项目？

有两种主要方式在你的项目中引入 Bootstrap：

使用 CDN (最简单，推荐新手)

CDN (Content Delivery Network) 内容分发网络，你只需要在你的 HTML 文件中通过 <link> 和 <script> 标签引入 Bootstrap 的 CSS 和 JS 文件即可，这种方式无需下载，非常方便。

创建一个 index.html 文件，内容如下：

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 这是 Bootstrap 的 CSS 文件 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">我的第一个 Bootstrap 页面</title>
</head>
<body>
    <h1>Hello, Bootstrap!</h1>
    <!-- 这是 Bootstrap 的 JavaScript 文件，通常放在 body 末尾 -->
    <!-- Popper.js 是 Bootstrap 的依赖项，必须先引入 -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
</body>
</html>

你可以在 <body> 标签里添加任何 Bootstrap 的组件和类名了。

下载并使用 (适合需要自定义的项目)

访问 Bootstrap 官网。
点击 "Download" 下载完整的 Bootstrap 文件包。
解压后,你会看到 css、js 和 fonts (旧版本) 等文件夹。
在你的 HTML 文件中，像引用本地文件一样引入它们：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入本地 Bootstrap CSS -->
    <link rel="stylesheet" href="path/to/bootstrap.min.css">我的本地 Bootstrap 页面</title>
</head>
<body>
    <h1>Hello, Bootstrap!</h1>
    <!-- 引入本地 Bootstrap JS 和 Popper.js -->
    <script src="path/to/popper.min.js"></script>
    <script src="path/to/bootstrap.min.js"></script>
</body>
</html>

重要提示：Bootstrap 5 的 JavaScript 依赖 Popper.js 来定位一些组件（如工具提示、弹出框），所以必须确保它被正确引入。

第三部分：核心概念与实例

让我们开始用 Bootstrap 的“积木”搭建页面。

1 布局系统：容器与栅格

Bootstrap 的布局基于一个 12 列的栅格系统，这是其响应式设计的精髓。

（图片来源网络，侵删）

容器：.container 类用于包裹和居中页面内容，它有固定的最大宽度，并在不同屏幕尺寸下有不同的行为。
行：.row 类用于水平排列列，它会清除列的浮动。
列：.col-* 类用于创建列。是一个数字，代表该列占 12 列中的几份。

实例：基础的栅格布局

<div class="container">
    <h2>栅格系统演示</h2>
    <p>下面的行总共有12列。</p>
    <!-- 第一行：两列，每列占6份 -->
    <div class="row">
        <div class="col-6 bg-primary text-white p-3">列 1 (6/12)</div>
        <div class="col-6 bg-success text-white p-3">列 2 (6/12)</div>
    </div>
    <!-- 第二行：三列，每列占4份 -->
    <div class="row mt-3">
        <div class="col-4 bg-danger text-white p-3">列 3 (4/12)</div>
        <div class="col-4 bg-warning text-dark p-3">列 4 (4/12)</div>
        <div class="col-4 bg-info text-white p-3">列 5 (4/12)</div>
    </div>
    <!-- 第三行：一列占12份 -->
    <div class="row mt-3">
        <div class="col-12 bg-secondary text-white p-3">列 6 (12/12)</div>
    </div>
</div>

响应式断点：Bootstrap 的栅格系统可以根据屏幕宽度自动调整列的布局。

col-sm-*：在小屏幕 (≥576px) 及以上生效。
col-md-*：在中等屏幕 (≥768px) 及以上生效。
col-lg-*：在大屏幕 (≥992px) 及以上生效。
col-xl-*：在超大屏幕 (≥1200px) 及以上生效。
col-xxl-*：在超超大屏幕 (≥1400px) 及以上生效。

实例：响应式布局

<div class="container">
    <h2>响应式栅格演示</h2>
    <p>在手机上，这些列会垂直堆叠，在平板或更大的屏幕上，它们会水平排列。</p>
    <div class="row">
        <!-- 在手机上占满12列，在平板及以上占6列 -->
        <div class="col-12 col-md-6 bg-primary text-white p-3">响应式列 1</div>
        <!-- 在手机上占满12列，在平板及以上占6列 -->
        <div class="col-12 col-md-6 bg-success text-white p-3">响应式列 2</div>
    </div>
</div>

你可以调整浏览器窗口大小来观察效果。

2 排版：文本、标题与列表

Bootstrap 提供了丰富的排版工具，让文本更易读、更美观。

使用 <h1> 到 <h6> 标签，或者使用 .h1 到 .h6 类来给其他元素设置标题样式。
对齐：使用 .text-start, .text-center, .text-end 来控制文本对齐。
文本转换：使用 .text-lowercase, .text-uppercase, .text-capitalize 来转换文本大小写。
列表：使用 .list-unstyled 去掉列表的默认样式，使用 .list-inline 让列表项水平排列。

实例：排版

<div class="container">
    <h1 class="display-4">这是一个 Display 标题</h1>
    <p class="lead">这是一个段落，通过 .lead 类使其更突出。</p>
    <p>这是一个普通的段落。</p>
    <h2>标题 2</h2>
    <p class="text-center">这段文本居中显示。</p>
    <p class="text-end">这段文本右对齐。</p>
    <p class="text-uppercase">这段文本全部大写。</p>
    <h3>无序列表</h3>
    <ul class="list-unstyled">
        <li>列表项 1</li>
        <li>列表项 2</li>
        <li>列表项 3</li>
    </ul>
    <h3>内联列表</h3>
    <ul class="list-inline">
        <li class="list-inline-item">内联项 1</li>
        <li class="list-inline-item">内联项 2</li>
        <li class="list-inline-item">内联项 3</li>
    </ul>
</div>

3 组件：快速构建UI

组件是 Bootstrap 的精华，它们是功能完整的 UI 模块。

导航栏

导航栏是网站的骨架,Bootstrap 的导航栏非常强大，支持响应式折叠。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <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" aria-current="page" 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>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">链接 (禁用)</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

navbar-expand-lg：表示在大屏幕上导航栏是展开的，在小屏幕上会折叠成一个汉堡菜单。
navbar-toggler：这是触发折叠的按钮。
collapse navbar-collapse 和 data-bs-target：这是实现折叠效果的核心。

卡片

卡片是一个灵活的、可扩展的容器，用于显示信息。

<div class="container">
    <h2>卡片组件</h2>
    <div class="row">
        <div class="col-md-4">
            <div class="card">
                <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">这是一张示例卡片的文本内容，支持各种HTML元素。</p>
                    <a href="#" class="btn btn-primary">了解更多</a>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">无图片卡片</h5>
                    <p class="card-text">只有文本内容的卡片。</p>
                    <a href="#" class="btn btn-success">另一个按钮</a>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card bg-danger text-white">
                <div class="card-body">
                    <h5 class="card-title">带背景色的卡片</h5>
                    <p class="card-text">通过添加背景色类来改变卡片样式。</p>
                </div>
            </div>
        </div>
    </div>
</div>

按钮

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

<div class="container">
    <h2>按钮</h2>
    <button type="button" class="btn btn-primary">主要按钮</button>
    <button type="button" class="btn btn-secondary">次要按钮</button>
    <button type="button" class="btn btn-success">成功按钮</button>
    <button type="button" class="btn btn-danger">危险按钮</button>
    <button type="button" class="btn btn-warning">警告按钮</button>
    <button type="button" class="btn btn-info">信息按钮</button>
    <button type="button" class="btn btn-light">浅色按钮</button>
    <button type="button" class="btn btn-dark">深色按钮</button>
    <button type="button" class="btn btn-link">链接按钮</button>
</div>

模态框

模态框是一个对话框/弹出窗口，用于显示额外的信息或表单。

HTML 结构 (通常放在 body 的末尾)

<!-- 模态框的触发按钮 -->
<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="Close"></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>

data-bs-toggle="modal" 和 data-bs-target="#exampleModal"：这两个属性将按钮和模态框关联起来。
modal fade：fade 类实现了淡入淡出的动画效果。

轮播图

轮播图用于展示一组图片或幻灯片。

HTML 结构

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
    <!-- 轮播指标 -->
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2"></button>
    </div>
    <!-- 轮播项目 -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 1">
            <div class="carousel-caption d-none d-md-block">
                <h5>第一张幻灯片</h5>
                <p>这是一张示例图片的说明文字。</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 2">
            <div class="carousel-caption d-none d-md-block">
                <h5>第二张幻灯片</h5>
                <p>这是另一张示例图片的说明文字。</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 3">
            <div class="carousel-caption d-none d-md-block">
                <h5>第三张幻灯片</h5>
                <p>最后一张示例图片的说明文字。</p>
            </div>
        </div>
    </div>
    <!-- 轮播控制按钮 -->
    <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </button>
</div>

data-bs-ride="carousel"：让轮播图自动播放。

4 辅助类：微调样式

辅助类是 Bootstrap 的瑞士军刀，用于快速添加或移除特定样式，而无需编写自定义 CSS。

边距/内距：m-* (margin), p-* (padding)。可以是 t(top), b(bottom), s(start/left), e(end/right), x(水平), y(垂直)。mt-3 (上边距), px-5 (水平内距)。
颜色：text-primary, bg-danger, text-white 等。
显示：d-none (隐藏), d-block (显示), d-flex (弹性布局)。
浮动：float-start, float-end, clearfix (清除浮动)。

实例：辅助类

<div class="container">
    <p class="bg-primary text-white p-3 mb-0">这个段落有背景色、白色文字和内距。</p>
    <p class="mt-4">这个段落和上一个段落之间有上边距。</p>
    <div class="bg-warning p-2 d-inline-block">这是一个内联块元素。</div>
    <button class="btn btn-secondary ms-2">这个按钮在左边有外边距。</button>
</div>

第四部分：进阶与资源

当你掌握了基础后,可以探索更多：

定制 Bootstrap：如果你不喜欢默认的颜色、字体或组件样式，可以使用官方的 Bootstrap Customizer 来生成一个只包含你需要功能的、样式定制的 Bootstrap 文件。
Sass：Bootstrap 是用 Sass (CSS 预处理器) 编写的，如果你想在项目中深度定制 Bootstrap，学习 Sass 是一个很好的选择。
官方文档：Bootstrap 5 官方文档是你最好的朋友，它包含了所有组件、工具和类别的详细说明和实例。
Bootstrap 主题：市场上有大量基于 Bootstrap 的付费和免费主题，可以让你快速构建出专业级别的网站。

Bootstrap实例教程有哪些实用案例？

Bootstrap 实例教程：从零开始构建响应式网站

目录

第一部分：Bootstrap 是什么？为什么要用它？

什么是 Bootstrap？

为什么要使用 Bootstrap？

第二部分：如何开始一个 Bootstrap 项目？

使用 CDN (最简单，推荐新手)

下载并使用 (适合需要自定义的项目)

第三部分：核心概念与实例

1 布局系统：容器与栅格

2 排版：文本、标题与列表

3 组件：快速构建UI

导航栏

卡片

按钮

模态框

轮播图

4 辅助类：微调样式

第四部分：进阶与资源

# Bootstrap实战案例 # Bootstrap实用教程 # Bootstrap项目实例

99ANYc3cd6

Java replace替换时，为何有时未生效？

iPhone5s换屏幕教程详细步骤是什么？

CAXA线切割XP实例教程怎么学？

python opencv 人脸识别

Java toString()方法到底有什么用？

Java Socket编程实例具体怎么实现？

哪里能下载Adobe Premiere教程？

Materials教程从哪学？入门到精通怎么学？

Python如何替换列表指定索引的值？

Python中crossentropy怎么用？

Project 2010中文教程如何快速入门？

AVS Video Editor教程怎么学？新手必看指南？

Python JPype安装问题如何解决？

Python ctypes如何获取handle？

Java String转byte数组如何正确编码？

AutoCAD Electrical教程如何快速上手？

Bootstrap实例教程有哪些实用案例？

Bootstrap 实例教程：从零开始构建响应式网站

目录

第一部分：Bootstrap 是什么？为什么要用它？

什么是 Bootstrap？

为什么要使用 Bootstrap？

第二部分：如何开始一个 Bootstrap 项目？

使用 CDN (最简单，推荐新手)

下载并使用 (适合需要自定义的项目)

第三部分：核心概念与实例

1 布局系统：容器与栅格

2 排版：文本、标题与列表

3 组件：快速构建UI

导航栏

卡片

按钮

模态框

轮播图

4 辅助类：微调样式

第四部分：进阶与资源

相关推荐

Java Socket编程实例具体怎么实现？