框架作用：提高开发人员的工作效率（ctrl + c/v 复制粘贴即可） 2.如何使用Bootstrap框架（该流程适用于所有的第三方框架） a.进官网:http://www.bootcss.com/...(行row+列column)，在不同的屏幕下显示不同的区域 c.复制粘贴 3.bootstrap环境配置 目前bootstrap有三个版本，分别是 2.x、3.x、4.x，2.x是旧的版本，3.x是新的稳定版本...默认左右margin为 -15px （作用是抵消container左右的padding） c.列col： 类名遵循固定的格式 col-s-x s(screen):表示屏幕尺寸，他们有四个可选值 lg...：响应式版心容器 默认样式： 没有高度、边框、颜色 左右15px的padding 宽度是响应式 屏幕宽度 < 768 宽度100% 768 三分之一 5-栅格偏移 栅格默认是左浮动的
2、 viewport 在移动端用来承载网页的这个区域就是我们的视觉窗口viewport，这个区域可以设置高度宽度，可以按比例放大缩小，而且能设置是否允许用户自行缩放。 ?...-- 4 此处的代码会显示在一个固定宽度且居中的容器中 5 该容器的宽度会跟随屏幕的变化而变化 6 --> 7 8 栅格系统：Bootstrap...中定义了一套响应式的网格系统，其使用方式就是将一个容器划分成12列，然后通过col-xx-xx的类名控制每一列的占比。...row类： 因为每一个列默认有一个15px的左右外边距。 row类的一个作用就是通过左右-15px屏蔽掉这个边距。...pull-left 左浮动类 pull-right 右浮动类 center-block类：让一个固定宽度的元素居中。
2、添加透明度列变量 =($E$1-D4)/($E$1-$E$2)*90% 根据指标值的范围将指标值转化为0%~90%的透明度指标。 ? 3、选择透明度填充的主色，作为填充色色调的主题色。 ?...将选好的主色填充到指定单元格中。...6、在开发工具中插入一个按钮，并的制定宏代码（命名为填色）。 ? 然后点击一下填色按钮，看下神奇的效果吧~ ? ? ? ?...最后将插入的矩形（作为地图图例）放在数据地图的合适位置，使用照相机快照功能将整个数据地图牌照引用。 保存的时候仍然要保存为xlsm格式的带宏文件。...只需要将你提前准备好的填充颜色主色复制进填色单元格中，然后单击填色按钮，就可以实现不同色调的填充效果。
flex-wrap属性 flex-wrap属性用于设置当项目在容器中一行无法显示的时候如何处理。...stretch：默认值：如果项目未设置高度或者高度为auto，将占满整个容器的高度 ? flex属性 子元素在主轴上划分空间 ?...媒体查询 作用： 感受到屏幕的变化；可以根据屏幕不同的宽，从而获得不同的样式，然后实现不同的样式显示； ? 使用的话可以放在 中 ,也可以引用 ?...02. rem rem是一个相对单位，类似于em，：让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候 ?...列嵌套: ? 可见性: ? 观看更多前端知识 看下我的分类专栏 前端 谢谢了么么哒 点个赞呗
常见的响应式框架有： 1、Bootstrap 官网：http://www.bootcss.com/ ? 简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。...Framework7 主要的作用就是让你有机会能够使用 HTML，CSS 和 JavaScript 简单明了地开发 iOS 和 Android 应用。.../lib/bootstrap/js/bootstrap.min.js"> 3、bootstrap 布局容器 bootstrap 的 css 样式中，有一个起着支撑整个页面框架的容器...4、bootstrap 栅格系统 概念：Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会默认分为12列。...2.Row可以再次嵌套在列中。如果不能填满整列，则默认从左排列，如果超出，则换行展示。 5、列排序 col-xs-offset-n：往右偏移 n 个栅格，但是会影响后面所有元素也偏移 n 个栅格。
下面有常用的bootstrap介绍，基本上就够用了，但是有些样式也没有写全，先自己学会怎么使用，再去官网上深入研究吧 1.栅格系统 定义：一系列行和列构建的布局，可以跟着屏幕自动布局 最多可以展示12个列...网页上所有的内容都放在这个容器中 两种布局：固定布局-container（自动居中），流式布局-container-fluid（铺满整个屏幕） 创建行：（...一般最多显示12列，如果只想要显示四列，可以将12列均分到四列上） 参数介绍： col-lg-3：lg（当屏幕大于1200时，大屏幕） con-md-3：md..."> 下拉菜单的小三角： 快速浮动： pull-left：左浮动 pull-right：右浮动 清除浮动：clearfix 块元素居中：center-block 文字居中：text-center...7.导航：添加nav 可以添加nav-justified让导航铺满整个屏幕 基本：nav-tabs ?
Bootstrap 是基于 HTML、CSS、JAVASCRIPT的，它简洁灵活，使得 Web 开发更加快捷。...下面有常用的bootstrap介绍，基本上就够用了，但是有些样式也没有写全，先自己学会怎么使用，再去官网上深入研究吧 1.栅格系统 定义：一系列行和列构建的布局，可以跟着屏幕自动布局 最多可以展示12个列...网页上所有的内容都放在这个容器中 两种布局：固定布局-container（自动居中），流式布局-container-fluid（铺满整个屏幕） 创建行：（...一般最多显示12列，如果只想要显示四列，可以将12列均分到四列上） 参数介绍： col-lg-3：lg（当屏幕大于1200时，大屏幕） con-md-3：md...7.导航：添加nav 可以添加nav-justified让导航铺满整个屏幕 基本：nav-tabs ?
（不设置宽度时默认撑满整个屏幕），之后给 content 和 header 子元素（比如头部的导航条）、footer 子元素一个共同的宽度。...此时布局是这样的： image.png 这里要注意的点：块级元素在不显式设置宽度的情况下确实撑满整个屏幕，从这个角度来看，width 设置为 100% 似乎没有必要。...两种布局的对比： 优先加载主列。 三列浮动，配合负外边距形成三列布局 两种布局方式的主要区别在于如何处理主列，从而让其内容不被覆盖。...在不优先加载主列的情况下，dom 结构可以按照左中右顺序书写，这样不需要额外设置 order；因为我们这里要优先加载主列，所以 dom 结构还是先写主列，之后通过降低左列的 order 恢复顺序。...假设某一列高度最大，则父盒子的高度会等于这一列高度，而其他列本来的留白部分由带背景色的 padding 补偿。
Bootstrap JS插件使用 > 对于Bootstrap的JS插件，我们只需要将文档实例中的代码粘到我们自己的代码中 > 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Carousel...1、由于轮播图片超宽造成的影响 - 美工为了在不同屏幕下更好地展示将图片两边做的非常宽，但是我们大多数情况的页面宽度都无法满足这样的图片宽度 - 而且Bootstrap的样式中默认将图片的max-width...设置为100%； - 造成界面图片缩放 - 想在一个较小屏幕下展示一个超宽的图片，并让图片居中显示 + 两种办法： （1） 换用背景图的方式，background-position...3列，较小屏幕是分为2列 - 所以使用网格系统划分 支付交易保障 银联支付全称保证支付安全 六、响应式辅助类型 - 整个板块在超小屏幕下是隐藏起来的
每列左右间隙各15px .col-{1到12} 定义在所有屏幕下的列宽 .col-{sm|md|lg|xl}-{1到12} 定义在指定屏幕下该列占据的列宽，sm:屏幕>=576px、md:屏幕>=720px...、lg:屏幕>=960px、xl:屏幕>=1200px .offset-{1到11} 在所有屏幕下的列偏移 .offset-{sm|md|lg|xl}-{1到11} 在指定屏幕下的列偏移 【显示隐藏】....font-weight-bold 粗体 .font-weight-normal 普通文本 .font-weight-light 更细的文本 .font-italic 斜体文本 .lead 让段落更突出....text-left 左对齐 .text-right 右对齐 .text-center 居中对齐 .text-justify 两端对齐 .text-nowrap 段落中超出屏幕部分不换行 .text-lowercase....list-unstyled 移除默认的列表样式，列表项中左对齐 ( 和 中)。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它是一个简洁、直观、强悍的前端开发框架，可以让web开发更迅速、简单。 BootStrap有什么作用和特点?...特点: 简单容易上手，开源产品，提高开发人员的工作效率 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。...渐进增强:随着屏幕大小的增加而添加元素 (2) meta 源标签 viewport meta 标签 为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放: <meta name....img-circle #添加 border-radius:50% 来让整个图片变成圆形。 .img-thumbnail ## 标签包含img标签。...height: auto; #相关元素的高度取决于浏览器。 max-width: 100%; #让图像按比例缩放，不超过其父元素的尺寸。
），高度大都是用px来固定住。...缺点：因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样，显示非常不协调 栅格化布局 将网页宽度人为的划分成均等的长度...bootstrap 的栅格系统是通过一系列的行和列的组合来创建页面布局，它的栅格系统最大分为12份: 不过 版本bootstrap3 与 bootstrap4 实现栅格系统方式不一样, bootstrap3...为了兼容 IE，采用的是浮动方式来实现栅格系统： 即每一个栅格都是用左浮动和百分比来进行排版，当窗口宽度改变，对应改变 container 容器的宽度，对应栅格宽度自然也跟着改变： bootstrap4...Media Queries 是响应式设计的核心，它根据条件告诉浏览器如何为指定视图宽度渲染页面。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。
如何编写响应式网页 (重点) (1). 必须声明视口(已解决) (2)....列 根据适用屏幕分成四种类型 A. .col-xs-* a. .col-xs-1 : 在超小屏幕中，占一列的宽(8.33%) b. .col-xs-2 : 在超小屏幕中，占两列的宽(16.66%) c.....col-xs-12 : 在超小屏幕中，占 12 列的宽(100%) B. .col-sm-*：在小型屏幕中 所占列宽数 C. .col-md-*：在中型屏幕中 所占列宽数 D. .col-lg-*：...列排序数量,控制某列向右或向左移动，并不影响其它的列,主要作用是在特定的屏幕下临时调整列的出现位置 A、col-lg-push-n: 在 lg下，当前列向右移动n 列的距离 B、col-lg-pull-n...Bootstrap 组件－巨幕.jumbotron，如果想让巨幕组件的宽度与浏览器宽度一致并且没 有 圆 角 ， 请 把 此 组 件 放 在 所 有 .container 元 素 的 外 面 ， 并 在
，块级元素充满整个屏幕，但header、content和footer的内容区设置同一个width，并通过margin:auto实现居中。...③ 缺点 center部分的最小宽度不能小于left部分的宽度，否则会left部分掉到下一行 如果其中一列内容高度拉长(如下图)，其他两列的背景并不会自动填充。...两种布局方式的不同之处在于如何处理中间主列的位置： 圣杯布局是利用父容器的左、右内边距+两个从列相对定位； 双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整 四、等高布局 等高布局是指子元素在父元素中高度相等的布局方式...假设你需要实现一个两列等高布局，侧栏高度要和主内容高度相等。...当 元素比较短的时候(比如小于屏幕的高度),我们期望这个 元素能够“粘连”在屏幕的底部 ?
底层，我们可以定义为 bottom，在顶层是按照从右到左的顺序进行打印 2、左列，我们可以定义为 left，在左列是按照从下到上的顺序进行打印 在打印的过程中，矩阵的可打印区间在不断的发生变化： 每当把从左到右把一行打印完毕之后...，即 bottom 位置向上挪了一层 每当把从下到上把一列打印完毕之后，整个矩阵就在左部少了一列，即 left 位置向右挪了一列 每当 top、right、bottom、left 发生挪动之后，需要判断它们挪动之后的区间是否还存在...// 每当把从右到左把一行打印完毕之后，整个矩阵就在底部少了一层，后续打印不需要再去处理它们 // 每当把从下到上把一列打印完毕之后，整个矩阵就在左部少了一列，后续打印不需要再去处理它们...// 整个打印区间需要删除这一列了，因此，将 right 的层数向左挪 right -= 1; // 如果此时发现右部位置越过了左部位置...// 整个打印区间需要删除这一列了，因此，将 left 的层数向右挪 left += 1; // 如果此时发现右部位置越过了左部位置
// 每当把从右到左把一行打印完毕之后，整个矩阵就在底部少了一层，后续打印不需要再去处理它们 // 每当把从下到上把一列打印完毕之后，整个矩阵就在左部少了一列，后续打印不需要再去处理它们...表示左部所在的列数位置，一开始在第 0 列 int left = 0; // right 表示右部所在的列数位置，一开始在第 matrix[0].length - 1...// 整个打印区间需要删除这一列了，因此，将 right 的层数向左挪 right--; // 如果此时发现右部位置越过了左部位置...// index 的元素填充完毕之后，开始填充下一个元素 index++; } // 经过上面这个循环之后，此时，左部这一列的所有元素已经打印完毕...// 整个打印区间需要删除这一列了，因此，将 left 的层数向右挪 left++; // 如果此时发现右部位置越过了左部位置
float+margin 实现两列布局 1. div1 左浮动：给出左侧的空间 2. div2 的margin-left留出 div1 的宽度. + overflow: hidden;也变为BFC块，和...float+margin 实现三列布局 1. div1 左浮动：给出左侧的空间 2. div2 右浮动：给出右侧的空间 3. div3 的margin-left margin-right 分别留出 div1...* 让页面 在不同的设备上 能正常的使用 * 主要处理的是 屏幕大小的问题(严格来讲 还涉及到 是否有鼠标 是否是读屏软件 是否支持一些样式) * 在具体的方法上 涉及到 设计 和 实现 两方面。...留下自适应的空间：和两列布局类似，一列固定宽度 另一列随屏幕自适应。 (类似的思路，在屏幕顶部 给logo固定宽度 logo右侧的纯色背景 可以自适应)。...fixed相对于屏幕(viewport) 来进行定位 3. display: inline-block的间隙 如何处理？
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
