Bootstrap基础教程

Bootstrap 介绍

Bootstrap 是一个由 Twitter 开发的开源前端框架，它基于 HTML、CSS 和 JavaScript。Bootstrap 的设计初衷是为了快速开发响应式和移动设备优先的 Web 应用程序。自 Bootstrap 3 版本起，框架中融入了移动设备优先的样式，这意味着开发人员可以轻松地创建在不同设备上都能良好显示的网页。

一、引入Bootstrap

1. CDN引入

Bootstrap可以通过CDN（内容分发网络）直接引入到你的项目中，这是最简单快捷的方式。你只需在HTML文件的<head>部分添加Bootstrap的CSS链接，在<body>标签结束前添加Bootstrap的JS和Popper.js（用于工具提示、弹出框等）链接。

<!-- 引入Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@最新版本号/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- 引入Bootstrap JS 插件和 Popper.js，用于工具提示、弹出框等 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@最新版本号/dist/js/bootstrap.bundle.min.js"></script>

注意：请将@最新版本号替换为当前Bootstrap的最新版本号。

2. 本地引入

你也可以从Bootstrap官网下载Bootstrap的压缩包，然后将其解压到你的项目中。接着，你需要在HTML文件中通过<link>和<script>标签引入Bootstrap的CSS和JS文件。

二、容器（Containers）

Bootstrap提供了两种类型的容器：.container和.container-fluid。

.container：固定宽度并支持响应式布局的容器。其最大宽度会根据屏幕大小而变化，但不会超过一个预设的最大值。
.container-fluid：100%宽度的容器，它会占据全部视口的宽度。

三、栅格系统（Grid System）

Bootstrap的栅格系统使用行（rows）和列（columns）来创建页面布局。这是一个基于12列的系统，意味着你可以将一个行（row）划分为最多12个等宽的列（column）。

使用.row来创建一个行容器。
使用.col-*（*可以是数字1-12，表示列的宽度）来创建一个列。例如，.col-6表示该列占据行宽度的50%。

Bootstrap还提供了响应式前缀，如.col-sm-*、.col-md-*等，用于在不同屏幕尺寸下控制列的宽度。

四、基础组件

Bootstrap提供了丰富的基础组件，如按钮（Buttons）、导航条（Navbar）、表单（Forms）、下拉菜单（Dropdowns）等。这些组件都已经被预定义好了样式，你可以直接在你的项目中使用它们。

示例：按钮（Buttons）

<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>

示例：导航条（Navbar）

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <!-- 导航条内容 -->
</nav>

五、自定义和响应式设计

Bootstrap允许你通过CSS变量和Sass/Less来自定义主题和组件。同时，Bootstrap的栅格系统和许多组件都是响应式的，可以自动适应不同尺寸的屏幕。

六、JavaScript插件

Bootstrap还包含了一系列的JavaScript插件，如模态框（Modals）、工具提示（Tooltips）、弹出框（Popovers）等。这些插件可以增强你的网站功能和用户体验。

七、实用工具类

Bootstrap提供了大量的实用工具类，如边距（Margins）、填充（Paddings）、文本对齐（Text Alignments）等。你可以通过添加相应的类名来快速应用这些样式。

八、文档和社区

Bootstrap拥有完善的官方文档和活跃的社区，你可以通过官方文档学习Bootstrap的更多特性和用法，也可以在社区中寻求帮助和分享经验。

Bootstrap作为一个广泛使用的前端开发框架，具有多个显著的优点和一些潜在的缺点。以下是关于Bootstrap的优缺点及其适用场景的详细分析：

Bootstrap优点

响应式布局：
- Bootstrap提供了一套响应式的网格系统，可以灵活地调整和布局网页，以适应不同屏幕尺寸和设备。这使得开发者能够轻松地创建在各种设备上都能良好显示的网页，提供一致的用户体验。
组件丰富：
- Bootstrap包含了丰富的Web组件，如下拉菜单、按钮组、导航条、分页等，这些组件可以快速搭建出功能完备的网站。这些预定义的组件和样式大大减少了开发时间，提高了开发效率。
样式一致性：
- Bootstrap确保了网页的样式一致性，使得开发者可以专注于业务逻辑的实现，而不必过多关注样式细节。这有助于保持网站的整体风格统一，提升用户体验。
文档完善：
- Bootstrap拥有完整的文档支持，包括安装指南、组件说明、API文档等。这使得开发者可以轻松地学习和使用Bootstrap，减少了学习成本。
社区支持：
- Bootstrap拥有一个活跃的社区，开发者可以在社区中交流经验、分享资源、解决问题。这种社区支持为Bootstrap的广泛应用提供了有力保障。
移动设备优先：
- Bootstrap从V3版本开始坚持移动设备优先的原则，提供了针对移动设备的优化样式和组件。这使得开发者可以更容易地创建具有良好用户体验的移动应用。

Bootstrap缺点

项目定制性差：
- 由于Bootstrap的样式和组件比较固定，可能会导致一些项目在外观上缺乏个性化。开发者需要花费额外的时间和精力进行定制开发，以满足项目的特殊需求。
兼容性问题：
- 在一些旧版本的浏览器上，Bootstrap可能会出现兼容性问题。尽管Bootstrap团队已经尽力优化兼容性，但开发者仍然需要注意测试不同浏览器上的显示效果。
学习成本提高：
- 使用Bootstrap需要了解整个框架的架构和组件，以及阅读框架的文档。这可能会增加初学者的学习成本。然而，一旦掌握了Bootstrap的使用方法，就可以大大提高开发效率。
框架臃肿：
- Bootstrap框架中包含了大量的样式和组件代码，其中可能包含一些项目并不需要的部分。这会导致最终生成的网页文件较大，影响加载速度。开发者需要仔细选择需要的组件和样式，以减小框架的臃肿程度。
过度依赖框架：
- 过度依赖Bootstrap框架可能会导致开发者在排除bug时遇到困难。因为有时候bug可能来源于框架本身，而不是开发者的代码。此外，过度依赖框架还可能限制开发者的技术提高和创新能力。

Bootstrap适用场景

响应式网页设计：
- Bootstrap的响应式网格系统使得它非常适合用于开发响应式网站。无论用户是在桌面浏览器、平板电脑还是手机上访问网站，都能获得良好的用户体验。
移动端应用开发：
- Bootstrap的组件和样式可以直接用于开发移动端应用，为应用提供良好的用户界面和用户体验。无论是基于Web的移动应用还是原生移动应用，Bootstrap都能提供丰富的组件和样式供开发者使用。
快速原型开发：
- Bootstrap提供了丰富的预定义组件和样式，开发者可以利用这些组件和样式快速构建出具有基本功能的网页原型。这有助于在项目初期进行快速迭代和演示，以便及时调整设计方向。
管理后台界面：
- Bootstrap提供了多种样式和组件，可以方便地用于开发管理后台界面。例如，数据表格、表单、导航菜单等都是管理后台界面常见的元素，Bootstrap提供了丰富的模板和样式供开发者使用。
前端组件库开发：
- Bootstrap不仅可以直接用于开发网页和应用，还可以作为基础组件库进行二次开发。开发者可以根据项目的需求，自定义或扩展Bootstrap的组件和样式，以满足特定的项目需求。

Bootstrap 代码案例

以下是一个简单的 Bootstrap 代码案例，展示了如何使用 Bootstrap 创建一个包含轮播图、书籍分类和新书上架的网页。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 示例</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<!-- 轮播图 -->
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="img/lb1.png" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="img/lb2.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="img/lb3.jpg" class="d-block w-100" alt="...">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

<!-- 书籍分类 -->
<div class="list-group mt-4">
    <a href="#" class="list-group-item list-group-item-action active" aria-current="true">书籍分类</a>
    <a href="#" class="list-group-item list-group-item-action">文学</a>
    <a href="#" class="list-group-item list-group-item-action">科幻</a>
    <a href="#" class="list-group-item list-group-item-action">军事</a>
    <a href="#" class="list-group-item list-group-item-action">小说</a>
    <a href="#" class="list-group-item list-group-item-action">名著</a>
    <a href="#" class="list-group-item list-group-item-action">漫画</a>
    <a href="#" class="list-group-item list-group-item-action">报刊</a>
</div>

<!-- 新书上架 & 热门书籍 -->
<div class="row mt-4">
    <div class="col">
        <figure class="figure">
            <img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
            <figcaption class="figure-caption">新书1</figcaption>
        </figure>
    </div>
    <div class="col">
        <figure class="figure">
            <img src="img/2.png" class="figure-img img-fluid rounded" alt="...">
            <figcaption class="figure-caption">新书2</figcaption>
        </figure>
    </div>
    <!-- 更多书籍可以继续添加 -->
</div>

<!-- 引入 Bootstrap JS (依赖 Popper) -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>

在这个示例中，使用了 Bootstrap 的轮播图（Carousel）、列表组（List Group）和栅格系统（Grid System）来创建网页。通过为 HTML 元素添加 Bootstrap 的类名，可以轻松地应用 Bootstrap 的样式和组件。此外，还引入了 Bootstrap 的 JavaScript 文件来支持轮播图的动态效果。

标签：框架,样式,可以,Bootstrap,开发者,基础教程,组件
From： https://blog.csdn.net/qq_63447955/article/details/142610189