BootStrap之前奏响应式布局
BootStrap 简介
概念:
课程目标:
- 响应式布局技术
- 了解BootStrap前端框架
一.响应式布局
1.1 历史问题
回顾之前HTML+CSS的布局方式,都是使用像素(px)来布局网页的,可是现在随着用户使用终端设备的多样化,平板手机已经很常见,所以如何制作适合手机使用的网页?
还是使用以前的固定单位去布局,会引发两个问题:
(1)分辨率太大,网页两边留白太多
(2)分辨率太小,页面显示不完全
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iMUZfhQt-1589378488273)(E:\政通路\课堂笔记\S2\bootstrap\assets\image-20200513093705933.png)]
概念:设备无关性布局方式;在css的发展过程中,逐渐出现了许多的响应式布局方式,今天将介绍的flex布局,就是其中一种。 flex布局,能够将容器,按照特定的比例进行划分,从一维的角度,去更好的对容器进行布局。
历史:
1.固定布局:使用的是div aside article标签,width:xxx px;像素;
2.浮动 百分比的方式;width:100%; widht:90%,发现比刚才要好多了;还是有问题,适应手机的时候;
摘要,没有东西了,还继续留空白在右边;
3.Flex布局,怎么回事?弹性布局
非常easy:最外面的div,设置它的display:flex,设置成弹性布局即可。里面的width:30%;
width:67%;,可以保持不变。如果都去掉了,注意看它的变化。
1.2 Flex容器
任何元素都能作为flex容器,只要使用display:flex,进行描述,该容器就成为了一个flex容器。
伸缩布局决定的特性是让伸缩项目可伸缩,也就是让伸缩项目的宽度或高度自动填充伸缩容器额外的空间,这可以用flex属性来完成。
属性 | 说明 |
---|---|
flex | 伸缩性 |
flex-direction | 伸缩流方向 row row-reverse column column-reverse |
flex-wrap | 伸缩换行 nowrap wrap wrap-reverse |
justify-content | 主轴对齐 |
align-items | 侧轴对齐 |
参考代码:
.box {display: flex; border: 1px solid #000000; padding: 10px; }
aside { flex:1;background: red; padding: 10px; }
article { flex:1; margin-left: 10px; background: yellow; }
1.3 响应式布局
- 弹性布局
- 弹性图片
- 媒体和媒体查询
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A7ZTQb0M-1589378488282)(E:\政通路\课堂笔记\S2\bootstrap\assets\image-20200513112622424.png)]
优点
1.面对不同分辨率设备灵活性强,能够快捷解决多设备显示使用问题
2.更少维护,开发一个网站,多终端使用
缺点
1.兼容各种设备工作量大,网上重复性的代码,你看适合浏览器即可。
2.代码累赘,会出现隐藏无用的元素,加载时间长
1.3.1 媒体类型
方式1:
@media 媒体类型 {
选择器{ /样式代码写在这里…/}
}
方式2:
<link rel=“stylesheet” href=“style.css” meida=“媒体类型”/>
属 性 | 值 | Min/Max | 描 述 |
---|---|---|---|
device-width | Length | Yes | 设置屏幕的输出宽度 |
device-height | Length | Yes | 设置屏幕的输出高度 |
width | Length | Yes | 渲染界面的宽度 |
height | Length | Yes | 渲染界面的高度 |
Orientation | Portrait/landscape | No | 横屏或竖屏 |
Resolution | 分辨率(dpi/dpcm) | Yes | 分辨率 |
Color | 整数 | Yes | 每种色彩的字节数 |
color-index | 整数 | Yes | 色彩表中的色彩数 |
1.3.2 ViewPort
概念:
视窗指的是用户在网页上的可见性,根据设备的不同而不同。网页在手机上的比平板上要小,比pc上要小,之前都是针对的是pc设计,现在要考虑到平板,手机,手表,固定的网页无法适应不同的硬件设备。这时候就要对网页进行等比例的缩放,以适应屏幕。
设置:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width控制 layout viewport的宽度, "device-width"为当前设备的宽度。
initial-scale: 页面初始缩放的比例。
user-scalable: 是否允许用户缩放。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
1.3.3 网格视图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5CP4uqPt-1589378488295)(E:\政通路\课堂笔记\S2\bootstrap\assets\image-20200513120308393.png)]
在设计网页时,使用网格视图非常有用。它可以更轻松地在页面上放置元素。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UiHQ3K9C-1589378488300)(E:\政通路\课堂笔记\S2\bootstrap\assets\image-20200513120334686.png)]
响应式网格视图通常有12列,总宽度为100%,并在调整浏览器窗口大小时缩小和展开。
让我们开始构建响应式网格视图。 首先确保所有HTML元素都将box-sizing属性设置为border-box。这可确保填充和边框包含在元素的总宽度和高度中。
* {box-sizing: border-box;
}
小和展开。
让我们开始构建响应式网格视图。 首先确保所有HTML元素都将box-sizing属性设置为border-box。这可确保填充和边框包含在元素的总宽度和高度中。
* {box-sizing: border-box;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2hWZxIcK-1589378488308)(E:\政通路\课堂笔记\S2\bootstrap\assets\image-20200513160850207.png)]
BootStrap之前奏响应式布局相关推荐
- 初学Bootstrap,制作响应式布局
Bootstrap是目前比较受欢迎的前端框架.它是基于 HTML.CSS.JAVASCRIPT 的,简洁灵活.因为在前几个月的学习中有了解到Bootstrap,并且当时就使用Bootstrap制作了简 ...
- Bootstrap样式插件/响应式布局/旅游网案例
Bootstrap 1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JavaScript 的,它简洁 ...
- 【前端布局篇】响应式布局 Bootstrap 移动端布局
前言 1. 布局介绍 布局:layout 对事物的全面规划和安排 页面布局:对页面的文字.图形或表格进行格式设置.包括字体.字号.颜色纸张大小和方向以及页边距等. 网页布局:利用html搭建结构与内容 ...
- Bootstrap响应式布局以及栅格框架
一.Bootstrap简单配置 简单使用Bootstrap,只需引入: <script type="text/javascript" src="js/jquery. ...
- [JavaWeb-Bootstrap]Bootstrap响应式布局
响应式布局 * 同一套页面可以兼容不同分辨率的设备. * 实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子 * 步骤:1. 定义容器.相当于之前的table.* 容器分类:1. ...
- 2017年最新基于Bootstrap 4 的专业、多用途响应式布局的系统模板
本文分享一款2017年最新的2017年最新基于Bootstrap 4 的专业.多用途响应式布局的系统模板,该模板是一款强大并且非常灵活的后台管理系统模板:能适应绝大多数的web应用程序开发,比如:AP ...
- 移动端WEB开发之响应式布局(响应式开发原理、bootstrap、阿里百秀案例)
移动端WEB开发之响应式布局 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: <!DOCTYPE html> & ...
- Bootstrap 响应式布局辅助类
为了针对移动设备进行快速开发,在 responsive.less 文件中,Bootstrap 为响应式开发提供了一些辅助 class,它们用于针对不同设备显示和隐藏内容.可用的 class 列表及它们 ...
- 响应式布局及bootstrap(实例)
说明: 这几天公司要求网站实现响应式布局,所以对响应式布局进行了相对全面的了解,并做了几个实例. 转载请注明源地址,谢谢^_^,http://www.cnblogs.com/liu-zhen/p/44 ...
最新文章
- [sinatra] Just Do It: Learn Sinatra, Part One Darren Jones
- 520 情人节 :属于Python 程序员的脱单攻略大合集(视频版)
- Latex中的一些表格用法总结(二)——行列式的表格,表格的切分和合并
- 我是买家的前世今生,该到了say goodbye的时候了!
- 通过电脑给继电器发送指令_三菱FX PLC学习之通信指令(上)
- 中国稀土永磁材料市场发展态势及产销需求规模预测报告2021版
- c:forEach 如何输出序号
- 操作12864(ST7920控制器)
- 计算机部件动漫,因一个片段肝了整部番,电脑配件上榜,它满屏“虎狼之词”...
- 集成源码深度剖析:Fescar x Spring Cloud
- max232管脚讲解 单片机与PC通讯
- springcloud 实现反向代理和负载均衡
- macOS 调用浏览器打开网页
- Linux设备模型:kset, kobj, ktype
- 【转】Linux 命令行下的好东西:一些常用指令
- android 控件高度和图片一样高,Android 根据图片宽高比例设置控件宽高
- sun.java2d.fontpath,java起用默认浏览器
- RabbitMQ的入门程序test测试代码
- oracle select输出dbms,PLSQL 中如何使用 dbms_output 输出结果
- Active Diretory 全攻略(一)--目录服务
热门文章
- leetcode 69. x 的平方根(C语言)
- 深入理解nodejs的HTTP处理流程
- java内存模型(JMM)和happens-before
- Scala的存在类型
- charles 过滤指定域名
- Http请求中Content-Type讲解以及在Spring MVC注解中produce和consumes配置详解
- Spring MVC工作原理 及注解说明
- mysql中模糊查询的四种用法
- 使类和成员的可访问性最小化
- 对下图所示的连通网络G,用克鲁斯卡尔(Kruskal)算法求G的最小生成树T,请写出在算法执行过程中,依次加入T的边集TE中的边。说明该算法的基本思想及贪心策略,并简要分析算法的时间复杂度