目录
第三部分：主要内容区域【书籍分类&轮播图&新书上架&热门书籍】
1.初识BootStrap
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
BootStrap 的响应式布局（一个网站的展示能够兼容多个终端(手机,iPad,PC等)）使得同一套页面可以兼容不同分辨率：不同的尺寸宽度，就有不同的布局。
2.准备工作
使用的软件：HBuilder X
首先，使用 bootstrap 必须去 BootStrap 官网下载文件，然后解压到文件夹即可（具体下载步骤可百度）。
这里是 BootStrap 官网链接：
然后把下载好的 bootstrap 文件导入 js 目录文件夹里面
打开长这样
因为 bootstrap 是基于 jQuery 的，所以还需要引入 jQuery 的库放到 js 目录文件夹里面
在 HBuilder X 中引入
<!-- 引入jQuery库 -->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<!-- 引入bootstrap的js库 -->
<script type="text/javascript" src="js/bootstrap-5.0.2/dist/js/bootstrap.js"></script>
<!-- 引入bootstrap的css库 -->
<link rel="stylesheet" type="text/css" href="js/bootstrap-5.0.2/dist/css/bootstrap.css"/>注意：先引入 jQuery 库，再引入 bootstrap 库（bootstrap基于jQuery原理）
这里是 BootStrap 中文文档，可以帮助你快速入门：
简介 · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网
上面是v4的版本，现已更新到v5版本（性能更强），如果刚开始学习的话，建议先从v4看起，再是v5：
Borders · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网
3. BootStrap 的简单使用
例：1.这是普通按钮
<button type="button">我是按钮</button>2.这是用bootstrap美化后的按钮（点击后的效果）
<button type="button" class="btn btn-primary">我是按钮</button>4.案例：用 BootStrap 排版网上书城首页
既然已经大致了解和简单使用过 bootstrap 了，那让我们利用里面的组件做个小案例吧！
-
4.1.需要排版的界面效果
-
4.2.界面分析
整个页面分为上（第一部分）、中（第二部分）、下（第三部分）三个部分
首先，在界面的最外面要包裹一个 .cocontainer 容器；
<div class="container">
</div>.cocontainer类：用于固定宽度并支持响应式布局；
此外，还有 .cocontainer-fluid 类：用于100%宽度，占据全部视口（viewport）；
注意：这两类容器不能同时存在。
-
4.3.主要实现代码
第一部分：导航区域
组件使用：Grid system（栅格系统）
HTML代码：
<div class="container">
<div class="row">
<!-- 导航logo -->
<div class="col-sm">
<img src="img/zkinglogo.png" />
</div>
<!-- 四个超链接 -->
<div class="col-sm text-end mt-4">
<a href="#">注册</a> |
<a href="#">登录</a> |
<a href="#">我的购物车</a> |
<a href="#">购物首页</a>
</div>
</div>
</div>
第二部分：搜索区域【文本框&查询按钮】
组件使用：Buttons（按钮）
HTML代码：
<div class="row btn-info" style="height: 60px;width: 1307px">
<div class="col mt-3 text-center">
<!-- 文本框 -->
<input type="text" />
<!-- 查询按钮 -->
<button class="btn btn-primary">查询</button>
</div>
</div>第三部分：主要内容区域【书籍分类&轮播图&新书上架&热门书籍】
主要内容区域最外面的 div
<div class="row">
<div/>第三部分第一列：书籍分类
组件使用：List group（列表组）
HTML代码：
<div class="col-3">
<!-- 书籍分类四个字 -->
<div class="row" style="background-color: #710503;color: white;font-size: 20px;margin-top: 1px">
书籍分类
</div>
<!-- 书籍分类书籍绑定 -->
<div class="list-group row">
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">文艺</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">小说</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">青春</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">童书</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">励志</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">生活</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">科技</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">教育</a>
</div>
</div>书籍分类效果演示：
网上书城 - 书籍分类
轮播图&新书上架&热门书籍最外面的div
<div class="col-9">
<div/>第三部分第二列：轮播图
组件使用：Carousel（轮播）
HTML代码：
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/1.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/2.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/3.png" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
轮播图点击效果演示（可自动轮播）：
网上书城 - 轮播图
第三部分第二列第二行：新书上架和热门书籍
组件使用：Grid system（栅格系统）
HTML代码：
<!-- 一个大的div里面嵌套了四个小的div -->
<!-- 第一个div：新书上架【文字】 -->
<div style="color: white;background-image: url(img/title_bj.png);
background-repeat: no-repeat;
background-size: 30% 100%;
font-size: 20px;">
新书上架
</div>
<!-- 第二个div：新书上架的书籍 -->
<div class="container">
<div class="row mt-2 row-cols-1 row-cols-sm-2 row-cols-md-6">
<div class="col">
<figure class="figure">
<img src="img/imgs/1.png" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">冷间谍</figcaption>
</figure>
</div>
<div class="col">
<figure class="figure">
<img src="img/imgs/2.png" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">第一商会</figcaption>
</figure>
</div>
<div class="col">
<figure class="figure">
<img src="img/imgs/3.png" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">狂人日记</figcaption>
</figure>
</div>
<div class="col">
<figure class="figure">
<img src="img/imgs/4.png" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">学文思考</figcaption>
</figure>
</div>
<div class="col">
<figure class="figure">
<img src="img/imgs/5.png" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">Python自动化运维</figcaption>
</figure>
</div>
<div class="col">
<figure class="figure">
<img src="img/imgs/8.png" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">时光走了你还在</figcaption>
</figure>
</div>
</div>
</div>
代码解析：书籍这里的排版使用的栅格系统（Grid）。在栅格系统中，每一个“row”代表一行，而内部的“col-md-*”代表一个单元格；bootstrap 把每一行分成12等份，“col-md-数字”中的“数字”从1-12中取，数字等于几，就占几份。
例如：上面的例子（新书上架的书籍&热门书籍的书籍）：
cols-1代表在超小屏幕下可以占用1列（即书籍可以占几本）；
cols-sm-2代表在小屏幕下可以占用2列；
cols-md-6代表在中屏幕下可以占用6列。
不同大小屏幕下书籍的排版效果：
网上书城 - 屏幕占比
既然这样，就让我们了解一下 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的（转载自官方）
详细介绍：
.col-xs-*：无论屏幕宽度如何，单元格都在一行，宽度按照百分比设置；适用于手机；
.col-sm-*：屏幕大于768px时，单元格在一行显示；屏幕小于768px时，独占一行；适用于平板；
.col-md-*：屏幕大于992px时，单元格在一行显示；屏幕小于992px时，独占一行；适用于桌面显示器；
.col-lg-*：屏幕大于1200px时，单元格在一行显示；屏幕小于1200px时，独占一行；适用于大型桌面显示器。
一些基本用法
列偏移
有的时候，我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset），通过添加类名" col-md-offset-* "(其中星号代表要偏移的列组合数)。
例如，你在列元素上添加"col-md-offset-4"，表示该列向右移动4个列的宽度。
列排序
列排序其实就是改变列的方向，就是改变左右浮动位置（左边换右边，右边换左边），并且设置浮动的距离。通过添加类名" col-md-push-* "和" col-md-pull-* "(其中星号代表移动的列组合数)。
总结：栅格系统可以根据屏幕的大小重新排列（适应不同的屏幕，手机，平板，电脑（响应式布局）），大大提高了用户的体验度。
<!-- 第三个div：热门书籍【文字】 -->
<div style="color: white;background-image: url(img/title_bj.png);
background-repeat: no-repeat;
background-size: 30% 100%;
font-size: 20px;">
新书上架
</div>
<!-- 第四个div：热门书籍的书籍 -->
<div class="container">
<div class="row mt-2 row-cols-1 row-cols-sm-2 row-cols-md-6">
<div class="col">
<figure class="figure">
<img src="img/imgs/1.png" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">冷间谍</figcaption>
</figure>
</div>
<div class="col">
<figure class="figure">
<img src="img/imgs/2.png" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">第一商会</figcaption>
</figure>
</div>
<div class="col">
<figure class="figure">
<img src="img/imgs/3.png" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">狂人日记</figcaption>
</figure>
</div>
<div class="col">
<figure class="figure">
<img src="img/imgs/4.png" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">学文思考</figcaption>
</figure>
</div>
<div class="col">
<figure class="figure">
<img src="img/imgs/5.png" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">Python自动化运维</figcaption>
</figure>
</div>
<div class="col">
<figure class="figure">
<img src="img/imgs/8.png" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">时光走了你还在</figcaption>
</figure>
</div>
</div>
</div>CSS代码：
<style>
/* 书籍名字 */
.figure-caption{
text-align: center;
}
/* 书籍图片 */
.figure-img{
width: 200px;
}
</style>完。
关于 BootStrap 的使用和案例讲解就到这里啦!
其他案例：https://blog.csdn.net/weixin_62332711/article/details/123951249
希望对你有所帮助！！！
拜拜
4258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
