菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 陈玉-20221028-响应式布局 [打印本页]

作者: polaris123 时间: 2022-10-28 00:14
标题: 陈玉-20221028-响应式布局
一、今日学习内容
1.Web移动端响应式开发
  1.1 响应式开发原理：使用媒体查询针对不同的宽度的设备进行布局和样式的设置，从而适配不同设备。
  1.2 设备开发情况：
1.小于768px的为超小的屏幕（手机）

2.768px~992px之间的小屏幕设备（平板）

                  3.992px~1200px之间为中等屏幕（桌面显示器）

4.1200px以上为超大屏幕（大桌面显示器）
  1.3 版心尺寸划分：
1.小于768px超小屏幕版心为100%；

                  2.768px~992px小屏幕设备版心为750px；

3.992px~1200px中屏幕设备版心为970px；

4.1200px以上超大屏幕设备的版心为1170px
2.Bootstrap前端框架
  2.1 介绍：
1.标准化html+css的编码规范

2.提供一套简洁强大的组件

3.有自己的生态圈，会不断更新迭代

         4.让开发会更简单，提升我们的开发效率
  2.2 版本简介：

   2.x.x：停止维护，兼容性好，但是代码不够简洁，功能不完善

3.x.x：目前使用最多的，稳定，但是它放弃了IE6、IE7。对IE8支持，但是界面效果不太好，偏向开发响应式布局、移动设备优先的Web项目

4.x.x：最新版，目前使用的用户较少。
   引入Bootstrap步骤：
1.创建文件结构，将代码放到相应文件；
2.在<head>标签中link引入bootstrap.min.css
3.将想要的结构复制即可
3.Bootstrap栅格系统
  3.1bootstrap的布局容器
   概念：它为页面内容和栅格系统包裹了一个.container容器或者 .container-fluid容器
  3.2BootStrap的栅格系统使用
   随着屏幕或者视口尺寸的增加，系统会自动分配最多12列的栅格。
   栅格系统通过一系列的行（row）和列（column）的组合来创建页面布局，我们内容就可以写在这些创建好的布局中
   按照不同的屏幕划分为1~12等份，如果想去掉padding，可以给父容器加row即可
   xs-extra-small 超小；
sm-small：小；
md-media 中等；
lg-large 大；
  3.3栅格份数的不同会有不同的显示方式
   1.份数为12份时会占满盒子
   2.如果份数不平均，会按照每个盒子的份数进行分配
   3.份数不够12份会在最后一个盒子之后留空白
   4.总份数超过12份，超过12份的盒子会换行显示
   5.通过多类名的方式来控制盒子在不同屏幕下的占比
  3.4栅格系统的列嵌套
   特点：每一个盒子都可以作为一个新的行进行处理，进行列嵌套操作
  3.5栅格系统的列偏移 col-lg-offset-n
   代表在大屏幕下将盒子向右移动n列，在其他的盒子下进行偏移值需要更改 col-lg-offset-n  中的 lg 即可（xs、sm、md、lg）
  3.6栅格系统的列排序
   通过使用.col-lg-push-n(将盒子向右推n列)和 .col-lg-pull-n(将盒子向右拉n列)
   bootstrap在不同屏幕下对元素进行隐藏.hidden-xs/sm/md/lg
   bootstrap在不同屏幕下对元素进行显示.visible-xs/sm/md/lg
二、今日问题
今日课程基本掌握，未遇到问题

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)