Bootstrap 框架响应式网页开发
Bootstrap
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架,它提供了大量编写好的 CSS 样式,允许开发者结合一定 HTML 结构及JavaScript,快速编写功能完善的网页及常见交互效果。
Bootstrap 框架下载
建议直接百度去官网下载 Bootstrap3 ,最新的Bootstrap4 开发都放弃维护和更新了不建议使用,官网地址 (Bootstrap中文网)。
在实际的开发中,我们都是按需导入,简单理解,需要用到啥,我们复制那个文件,没有必要都放入,提高性能。
响应式
响应式的开发离不开一个核心原理:媒体查询 (media) ,媒体查询能检测游览器视口的宽度然后可以类似伪类一样修改一些属性或者值,演示代码如下:
body {background-color: gray;
}/* 大于等于768px 为粉色 */
@media (min-width: 768px) {body {background-color: pink;}
}/* 大于等于992px 为蓝色 */
@media (min-width: 992px) {body {background-color: skyblue;}
}/* 大于等于992px 为绿色 */
@media (min-width: 1200px) {body {background-color: green;}
}
媒体查询的具体事用场景1:
body {max-width: 540px;margin: 0 auto;
}/* 大于等于540px 则不允许 html文字大小再改动,强制定为 54px*/
@media (min-width: 540px) {html {font-size: 54px !important;}
}
媒体查询使用场景2 元素的显示和隐藏:
@media (max-width: 800px) {.box div:nth-child(2) {display: none;}.box div:last-child {width: 350px;}
}
媒体查询使用场景3:
响应式原理:通过@media媒体标签判断屏幕大小, 让盒子在不同宽度呈现不同的摆放顺序
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 1000px;height: 150px;/* background-color: pink; */margin: 0 auto;display: flex;flex-wrap: wrap;}.box div {width: 25%;background-color: skyblue;height: 150px;margin-bottom: 20px;}.box div:nth-child(even) {background-color: pink;}@media (max-width: 992px) {.box {width: 768px;}.box div {width: 50%;}}@media (max-width: 768px) {.box {width: 100%;}.box div {width: 100%;}}</style>
</head><body><div class="box"><div>1</div><div>2</div><div>3</div><div>4</div></div>
</body></html>
Bootstrap 的使用步骤
1、解压好了后打开并复制 css文件
引用到需要框架的 html 文件中
<link rel="stylesheet" href="./css/bootstrap.min.css">
2、如果需要 js ,则是一样,复制 js 文件并引入
<script src="./js/bootstrap.min.js"></script>
3、官网有具体的文本与演示介绍,使用内部预定义好的类即可。
栅格系统
栅格系统(gridsystems),也叫“网格系统,它就是通过一系列的行(row)与列(column)的组合创建页面布局。简单说,栅格系统也是一种布局方式。 BootStrap 给咱们内置好了一套布局系统。
BootStrap3 默认将网页分成12等份
比如:超大屏幕 (超过1200px) 下我们想要一个通栏的大盒子里子盒子各占一半
<div class="container"><div class="col-lg-6">我占左边6个</div><div class="col-lg-6">我站右边6个</div>
</div>
这些类名都是在引入的 css 文件里预设好了的,直接使用就会有效果。
如果实现不同屏幕下,不同的显示个数,可以通过使用不同类名。
<div class="container"><div class="col-lg-3 col-md-3">盒子内容</div><div class="col-lg-3 col-md-3">盒子内容</div><div class="col-lg-3 col-md-3">盒子内容</div><div class="col-lg-3 col-md-3">盒子内容</div></div>
上面的代码在中等屏幕 (小于1200px但大于992px) 下子盒子只占4格
在小屏幕 (小于992px但是大于768px) 下只显示两个,代码如下:
<div class="container"><div class="col-lg-3 col-md-3 col-sm-6">盒子内容</div><div class="col-lg-3 col-md-3 col-sm-6">盒子内容</div><div class="col-lg-3 col-md-3 col-sm-6">盒子内容</div><div class="col-lg-3 col-md-3 col-sm-6">盒子内容</div></div>
超小屏幕 (小于768px) 也就是手机端下只放一个子盒子,代码如下:
<div class="container"><div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">盒子内容</div><div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">盒子内容</div><div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">盒子内容</div><div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">盒子内容</div></div>
细心的小伙伴应该发现了预设类名的共同点:col- 固定开头、lg 代表大屏幕 (超过1200px,台式机大屏)、md 代表中等屏幕 (小于1200px但大于992px,笔记本中屏) 、sm 代表小屏幕 (小于992px但是大于768px,ipad小屏幕)、xs 代表超小屏幕 (小于 768px,手机屏幕) 后面跟着的数字代表占几份。
在 Bootsrtap 的预设样式里 container 有默认的内边距 (padding),使用 row 类可以取消掉即:
<div class="container"><div class="row"><div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">盒子内容</div><div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">盒子内容</div><div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">盒子内容</div><div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">盒子内容</div></div>
</div>
Bootstrap 子盒子偏移 通过 col-lg-offset-*
* 代表数字,让盒子往右走 * 份 比如:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.first div {height: 100px;background-color: pink;}.second div {background-color: purple;height: 100px;}.third div {height: 100px;background-color: skyblue;}</style><!-- 引入 Bootstrap css文件 --><link rel="stylesheet" href="./素材准备/css/bootstrap.min.css">
</head><body><div class="container"><div class="row first"><div class="col-lg-4">左侧</div><div class="col-lg-4 col-lg-offset-4">右侧</div></div><div class="row second"><div class="col-lg-3 col-lg-offset-3">1侧</div><div class="col-lg-3 col-lg-offset-3">2侧</div></div><div class="row third"><div class="col-lg-6 col-lg-offset-3"></div></div></div></body></html>
效果如下:
媒体查询响应式 与 Bootstrap 框架实例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {background-color: gray;}div {height: 100px;}/* 媒体查询 min-width 值的书写必须从小到大 顺序错误会被覆盖 *//* 媒体查询 max-width 值的书写必须从大到小 顺序错误会被覆盖 *//* 屏幕大于 768px 时为粉色 */@media (min-width: 768px) {div {background-color: pink;}}/* 屏幕大于 992px 时为粉色 */@media (min-width: 992px) {div {background-color: skyblue;}}/* 屏幕大于 1200px 时为绿色 */@media (min-width: 1200px) {div {background-color: green;}} /* @media (max-width: 992px) {div {background-color: skyblue;}} *//* @media (max-width: 992px) {div {background-color: skyblue;}} *//* @media (max-width: 768px) {div {background-color: pink;}} */</style><!-- 引入 Bootstrap css文件 --><link rel="stylesheet" href="./素材准备/css/bootstrap.min.css">
</head><body><div class="container"><div class="row"><div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">盒子内容</div><div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">盒子内容</div><div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">盒子内容</div><div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">盒子内容</div></div>
</div>
</body></html>
效果如下:
Bootstrap 轮播图实例
首先要找到轮播图的预设代码在哪,如下图:
然后就能看到 Bootstrap 的轮播图的所有代码和演示了:
注意:会使用到 Bootstrap 的 js 代码,一定要引入下载包里的 jquery 文件和 js 文件并且是写在body 里的,代码如下:
<!-- 先引入 jquery --><script src="./素材准备/js/jquery-3.5.1.min.js"></script><!-- 再引用 bootstrap.js --><script src="./素材准备/js/bootstrap.min.js"></script>
修改好的整体代码如下:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入 Bootstrap css文件 --><link rel="stylesheet" href="./素材准备/css/bootstrap.min.css">
</head><body><div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- Indicators 轮播图指示器--><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li><li data-target="#carousel-example-generic" data-slide-to="3"></li><li data-target="#carousel-example-generic" data-slide-to="4"></li><li data-target="#carousel-example-generic" data-slide-to="5"></li><li data-target="#carousel-example-geaneric" data-slide-to="6"></li></ol><!-- Wrapper for slides 轮播图的每一项--><div class="carousel-inner" role="listbox"><div class="item active"><img src="./素材准备/images/banner_1.jpg" alt="..."><div class="carousel-caption">第一张图片</div></div><div class="item"><img src="./素材准备/images/banner_4.jpg" alt="..."><div class="carousel-caption">第二张图片</div></div><div class="item"><img src="./素材准备/images/banner_3.jpg" alt="..."><div class="carousel-caption">第三张图片</div></div><div class="item"><img src="./素材准备/images/banner_4.jpg" alt="..."><div class="carousel-caption">第四张图片</div></div><div class="item"><img src="./素材准备/images/banner_1.jpg" alt="..."><div class="carousel-caption">第五张图片</div></div><div class="item"><img src="./素材准备/images/banner_4.jpg" alt="..."><div class="carousel-caption">第六张图片</div></div><div class="item"><img src="./素材准备/images/banner_3.jpg" alt="..."><div class="carousel-caption">第七张图片</div></div></div><!-- Controls --><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div><!-- 先引入 jquery --><script src="./素材准备/js/jquery-3.5.1.min.js"></script><!-- 再引用 bootstrap.js --><script src="./素材准备/js/bootstrap.min.js"></script>
</body></html>
效果如下:
完全复制我的代码而出不来的,要修改引入的文件路径,也就是前面引入文件里的 src 里的代码,
把下图里我的路径删掉,用的软件是 vscode 的话只需要打个英文的点加斜杠 ( ./ ) 后续有提示。
Bootstrap 框架响应式网页开发相关推荐
- Bootstrap下拉菜单失效的解决方法+使用Bootstrap制作响应式网页
目录 问题原因 解决方案 顺便记录一下使用 效果图 HTML CSS 目录 问题原因 两个js文件冲突/没有引入指定的js文件 我们不能同时引入这两个js只能引入其一,同时引入会使得部分功能失效 解决 ...
- 响应式网页开发注意事项
由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素.这一条非常重要. 具体说: 一.CSS代码不能指定像素宽度: width:xxx px; 只能指定 ...
- 零基础Bootstrap入门教程(4)--开发标准的响应式网页
点此查看 所有教程.项目.源码导航 本文目录 1. 背景 2. 创建标准HTML5页面 3. 添加响应式内容 4. 小结 1. 背景 响应式网页指的是可以在不同尺寸/分辨率设备下都可以运行良好的网页, ...
- 移动端网页开发)------响应式网页
移动端网页开发 移动端网页开发的两种方案: 响应式网页 开发一个新的网站.使用移动端的布局方式. 响应式网页 概念 同一个网页会根据视口的不同,显示不同的样式. 优缺点 优点 面对不同分辨率的设备比较 ...
- 12个最佳的响应式网页设计教程,轻松带你入门!
如何让你的网站在其出现的任何设备和屏幕尺寸上能够完美的呈现?响应式设计完美的解决了这一难题,作为现在的网页设计师都应该了解响应式网页设计的原则.而对于刚步入网页设计的新手设计师,如果你还不了解什么是响 ...
- 12个最佳的响应式网页设计教程,轻松带你入门
如何让你的网站在其出现的任何设备和屏幕尺寸上能够完美的呈现?响应式设计完美的解决了这一难题,作为现在的网页设计师都应该了解响应式网页设计的原则.而对于刚步入网页设计的新手设计师,如果你还不了解什么是响 ...
- 20个响应式网页设计中的“神话”误区
关于响应式网页的重要性我们已经证实了很长时间了,现在是该把焦点放到如何做出好的响应式网页设计的时候了.一起来看看吧! 虽然很多人都在谈论响应式网页,但并不是每个人都知道他们在说什么.很多时候你看到网上 ...
- 响应式网页设计的20个误区
响应式网页已经成为当下比较主流的设计形式,似乎每一个人都在谈论,但实际上并不是每一个人都真的懂得.以下总结了在进行响应式网页设计时的20个误区,你可以看看自身是否存在入其中所说的问题. 1.响应式网页 ...
- 响应式布局(响应式网页的构成bootstrap框架)
一.响应式布局 1.概念 响应式又叫自适应网页,可以根据网页窗口的调整而自动布局,不会导致页面效果的错乱,主要是针对移动端浏览器:通过响应式布局,可以使一套代码同时兼容多个尺寸的屏幕 2.响应式网页的 ...
最新文章
- D - 小晴天老师系列——晴天的后花园
- 解决Vs输出中文乱码的问题
- 补天白帽大会:无处不在的无线电攻击
- JavaScript 面试中常见算法问题详解
- 计算机重装系统知识,电脑重装系统基础知识扫盲贴
- Python学习(3)变量类型
- 派生类类型可以转换为基类类型,反之则不行
- python3.x+requests 爬取网站遇到中文乱码的解决方案
- Handler BlockViewHandler has a bad module ManagedPipelineHandler in its module list
- Efficient Inference in Fully Connected CRFs with Gaussian Edge Potential
- ros开发增加clion常用模板及初始化配置(四)
- 【剑指Offer】60、把二叉树打印成多行
- 【计蒜客习题】蒜头君运送宝藏
- CentOS 7 安装 daemontools
- 工业相机二次开发简约教程
- mysql tidb 删除延迟_TiDB DM踩坑实践总结
- matlab floor函数用法,matlab中fix, floor, ceil, round 函数的使用方法
- 自动驾驶中的多传感器融合
- SWUST#954: 单链表的链接
- Windows下使用IDEAS对cala文件打jar包