目录
1.初识BootStrap
2.准备工作
3. BootStrap 的简单使用
4.案例:用 BootStrap 排版网上书城首页
4.1.需要排版的界面效果
4.2.界面分析
4.3.主要实现代码
第一部分:导航区域
第二部分:搜索区域【文本框&查询按钮】
第三部分:主要内容区域【书籍分类&轮播图&新书上架&热门书籍】
1.初识BootStrap
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。
BootStrap 的响应式布局(一个网站的展示能够兼容多个终端(手机,iPad,PC等))使得同一套页面可以兼容不同分辨率:不同的尺寸宽度,就有不同的布局。
2.准备工作
使用的软件:HBuilder X
首先,使用 bootstrap 必须去 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/weixin_62332711/article/details/123951249
希望对你有所帮助!!!
拜拜
更多推荐
BootStrap01
发布评论