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

标题: 前端-毛少涵20221126 [打印本页]

作者: 微小星晨 时间: 2022-11-29 19:03
标题: 前端-毛少涵20221126

今日所学内容

响应式布局

1响应式布局的开发原理

1.1就是使用媒体查询针对不同的宽度设备进行布局和样式的设置，从而适配不同设备的目的

设备划分情况

小于768px是超小屏设备（手机）

768px-992px之间的是小屏设备（平板）

992px-1200px之间的是中屏设备（桌面显示器）

大于1200px的是宽屏设备（大桌面显示器）

1.2响应式布局容器

响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。

父级容器版心尺寸划分

超小屏幕版心宽度：100% 小屏幕版心宽度：750px

中等屏幕版心宽度：970px大屏幕版心宽度：1170px也可以根据实际情况划分

bootstrap前端框架

bootstrap前端框架简介标准化的html+css编码规范书写的框架提供了一套简介、直观、强大的组件,有自己的生态圈，更新迭代的速度比较快提高开发效率，让开发更简单

版本介绍

2.x.x:停止维护，兼容性比较好，代码不够简洁，功能也不是很强大。

3.x.x:目前使用最多的、最稳定的版本，但是他放弃了IE6和IE7，对IE8支持，但是界面效果不好，偏向于用于开发响应式布局、移动设备优先的web项目

4.x.x:目前的最新版本，使用的范围不是特别广，目前不是很流行。

bootstrap的栅格系统

概念bootstrap需要为页面内容和栅格系统包裹一个.container或者.container-fluid容器

.container类响应式的布局容器

.container-fluid类

栅格系统介绍

系统会自动将屏幕分为最多12列的栅格

使用栅格系统的注意点

按照不同屏幕划分1-12等分（row）去除父容器左右12px

每一列默认有15px的左右内边距

栅格系统的参数 xs:extra small sm:small md:medium lg:large

bootstrap栅格嵌套

栅格系统内置的栅格可以进行再次嵌套的操作，简单理解就是分好的栅格内可以再次进行栅格划分，但嵌套时，必须要先定义一个行（row）。

bootstrap栅格列偏移

可以使用.col-lg-offset- 的类可以将列向右侧进行偏移。其实偏移的原理是给当前元素增加了额左外边距

bootstrap栅格列排序

我们可以通过.col-lg-push- （将盒子向右推几份）和.col-lg-pull-（将盒子向左拉几份）改变列的顺序

在不同的屏幕下元素的显示:.visible-在不同屏幕下控制元素的隐藏：hidden-

今日问题：无

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