它是为实现快速开发Web应用程序而设计的一套前端工具包。 它支持响应式布局，并且在V3版本之后坚持移动设备优先。 ...就是复制黏贴一把梭，html\css\js代码的封装组合 为什么要使用Bootstrap？ ...在Bootstrap出现之前： 命名：重复、复杂、无意义（想个名字费劲） 样式：重复、冗余、不规范、不和谐 页面：错乱、不规范、不和谐 在使用Bootstrap之后： 各种命名都统一并且规范化...Bootstrap下载 官方地址：https://getbootstrap.com 中文地址：http://www.bootcss.com/ 我们使用V3版本的Bootstrap，我们下载的是用于生产环境的...option3" disabled> 我不是一个人
想要达到的效果 最近，一个朋友让我帮忙做一个图标，是这个样子的： ? 相关的统计参数： 最大值 最小值 极差 平均值 标准差 变异系数 2....模拟数据 首先，我模拟一个20行5列的数据框，每一列都是数值的数据类型。...然后使用apply函数，对数据框的列进行操作 最后返回汇总统计的结果 该函数的对象为一个由变量组成的数据框，数据类型都要是数值 3.2 函数测试 > huizong(dat) Max...更简单的方法 5.1 查看数据 tidyverse这个包，要分析的都是长数据，而不是宽数据，所以我们将其转化为长数据进行分析，会更方便快捷。.... 0.973 0.00971 2 V2 101. 98.3 99.9 0.830 0.00830 3 V3 102. 98.5 100. 0.957 0.00956 4 V4
它支持响应式布局，并且在V3版本之后坚持移动设备优先。 为什么要使用Bootstrap？...在Bootstrap出现之前： 命名：重复、复杂、无意义（想个名字费劲） 样式：重复、冗余、不规范、不和谐 页面：错乱、不规范、不和谐 在使用Bootstrap之后： 各种命名都统一并且规范化。...Bootstrap下载 官方地址：https://getbootstrap.com 中文地址：http://www.bootcss.com/ 我们使用V3版本的Bootstrap，我们下载的是用于生产环境的..."（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分...（单位为缩放为 100% 时的 CSS 的像素）。
最关键的一点是很多人认为框架的样式是固定的，修改起来太麻烦，还不如自己根据设计图写起来方便。 为什么使用框架 为什么使用框架？答案显而易见，效率。...经常关注前端动态的工程师会发现轻量级框架每年都层出不穷。在我上面提到的主流轻量级框架之外还有很多类似的框架。我一直问自己，为什么要重复造轮子。...我先说一下 Bootstrap 的优势，不是设计风格，不是模块，不是特效，而是栅格，响应式栅格。Bootstrap 的栅格在与其它框架对比中占有绝对优势，无论是栅格的划分还是类名的风格都堪称经典。...我编写的栅格系统也是默认 12 列，但是后来发现 12 列的栅格缺少最常用的列宽（比如 10%、20%、30%等），比如下面 CodePen 展示的例子用 12 列栅格是无法完成的，所以我又添加了 10...栅格的使用和 Bootstrap 是一样的，除了 12 列栅格外，10 列栅格以及均分栅格都要添加 .cols- 类 <!
这里我们提出三个问题： 为什么是min-width，max-width可以不？ 为什么是这些数字，而不是别的数字？ 为什么用min-width？...为什么是这三种数字其实跟内容在各个平台的表现有关。...全兼容模式一般内容体为流式，可以采用刚才的bootstrap关键断点，再额外增加一些局部断点美化页面以提升体验；而pc+平板的其实也比较简单，设置窄屏，宽屏，超大屏即可；最后对于只针对手机的则直接不设置断点...所以根据我们用户的浏览器分辨率特点制定具体的更有意义的断点尤其重要，省得做些费时费力又没有意义的事。如下图一个站点的pc分辨率占比情况（不包括手机上的数据）： ?...可以看到1024px占比7%，1200px以上的占了84%（100%-7%-9%），1380px以上占比46%。
工作中或许会用到 table 表格固定表头， tbody 滚动的效果。为了方便我这里直接用的 Bootstrap 的表格样式。 ?... 此外，要给 table 添加一个 table-layout: fixed; 属性：使列宽由表格宽度和列宽度设定。其他属性参考这篇文章。...也可以使用 统一设置列宽： col 的属性在下面详细介绍。... 在 标签内添加 标签，统一设置列宽，注意，两个表格都需要加。...注意：因为我直接使用的 Bootstrap ，没有出现问题，如果是原生的表格样式出现对不齐的现象，可以尝试把 div 设置为盒模型： .table-box{ box-sizing: border-box
首先，本文是普通入门知识篇，主要说的是断点的设置。 很多想接触响应式的同学都会有以下疑惑： 为什么要做响应式？ 怎么入门响应式，是不是很难？ 分辨率那么多，响应式断点怎么设置？...这里我们提出三个问题： 为什么是min-width，max-width可以不？ 为什么是这些数字，而不是别的数字？ 为什么用min-width？...为什么是这三种数字其实跟内容在各个平台的表现有关。...全兼容模式一般内容体为流式，可以采用刚才的bootstrap关键断点，再额外增加一些局部断点美化页面以提升体验；而pc+平板的其实也比较简单，设置窄屏，宽屏，超大屏即可；最后对于只针对手机的则直接不设置断点...如下图一个站点的pc分辨率占比情况（不包括手机上的数据）： 可以看到1024px占比7%，1200px以上的占了84%（100%-7%-9%），1380px以上占比46%。
干货 下面来说一些，我平时比较注意的细节、技术点，和一些大家可能不是很熟悉的知识点。...2.左边固定 右边自适应 在布局的时候，比如一些列表页，常常左边是一个固定大小的缩略图，右边剩余部分展示标题，如图 那我们就叫左边固定右边自适应的布局吧，我的方法 100%宽的div用padding-left...100%宽会超出屏幕宽度），大致代码如下： 3.伪类的 content attr 伪类before,after的content属性，是用来插入内容的，我们可以通过attr 传入一个当前元素的属性名，把属性值...所以我们一定要根据自己的情况告诉设计师，在宽是750像素的设计稿里，字体最小应该是多少像素。...13.object-fit: cover 我们在做列表页的时候，图片都是固定的大小，比如是一个100px*100px的正方形图片，但是很有可能拿到的图片并不是正方形的，这个非正方形图片放到正方形的img
所以在创建列的时候要指定列的宽度(当前列要占据几列的宽) 4、列 会根据适用的屏幕分成4中类型 类： 1、....col-xs-* .col-xs-1 : 在超小屏幕中，占一列的宽(width:8.33%) .col-xs...-2 : 在超小屏幕中，占两列的宽(width:16.66%) ...... .col-xs-12: 在超小屏幕中...，占12列的宽(width:100%) 2、.col-md-* .col-md-1 : 在中型屏幕中，占一列的宽(...: 在 sm 屏幕下，当前列要向右偏移n列的位置 .col-md-offset-n : 在 md 屏幕下，当前列要向右偏移n列的位置 .
栅格系统所谓的栅格就是和小时候练字的方格本子是非常相似的。但栅格系统也有它的特别之处，它的大小并不是固定的。...它会随着页面的大小比例随之改变，就像最开始学习网页的布局一样，并不是定宽定长的，和网页里的百分比布局是比较相似的。这样，栅格系统就能够与更多的移动设备相匹配。...也就是说在小屏下或者大屏下都会划分为12列，前面的.container布局容器划也会分为12列。列里面的内容会随着列的大小变化而变化，从而发生相应的缩放效果。...下面就介绍一下 Bootstrap 栅格系统的工作原理： “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列...负值的 margin就是下面的示例为什么是向外突出的原因，在栅格列中的内容排成一行。 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。
大家好，又见面了，我是你们的朋友全栈君。 序言 什么是Bootstrap Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。...它是为实现快速开发Web应用程序而设计的一套前端工具包。 它支持响应式布局，并且在V3版本之后坚持移动设备优先。...Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。 为什么要用Bootstrap 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。...在浏览器的左右俩边都会留有一定的间距 效果如下： .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。...负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。
苹果设备大多都能查到它的开发尺寸是多少。但安卓设备不是，没有这种条件，所以要靠其他手段了。 根据查资料所得，目前有两种方法可以获得移动设备的真实开发尺寸。...在页面建立一个刚好铺满全屏的 div 元素，然后获取它的宽高，这个宽高就是该设备的真实开发尺寸。...为了证明推断是正确的，我拿了一个专门在 m5 pro 上使用的 app 放在 chrome 上运行（模拟该设备的开发尺寸），完美适配。 ?...在此，我建议你使用 vw 和 vh 作为移动端开发的相对单位，包括字体大小、元素宽高、距离等等。...例如在手机上采取两列布局，在平板上采取三列布局。另外还要用 @media 根据分辨率来调整元素的大小、字体的大小等等。
100，第二列占 1 个比例的 *，第三列占 2 个比例的 *。...第三列凭空消失，第二列与之之间依然失去了 1:2 的比例关系。 ? 然而，我们还可以缩小窗口。 缩 小 窗 口 后 竟 然 ? 为什么在缩小窗口的时候突然间出现了那个红色的 Border？...为什么在红色 Border 的右边还留有空白？ 如果说第一节中我们认识到右对齐时右边剩余的空白空间会丢掉，那么为什么此时右边剩余的空白空间会突然出现？...以下是设计器为我们显示的列宽： ? 46、69、46 是怎么来的？莫非是 46:69 与 28:51 相同？然而实际计算结果却并不是！ 可万一这是计算误差呢？...这些未定义的规则总结起来有以下三点： 在无穷大布局空间时的 * 的比例 在跨多列布局时 * 的比例 在全 Auto 尺寸时各列尺寸 不过你也可能会吐槽我的用法不对，可是，作为一个连表现行为都公开的 API
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化 也可以根据实际情况自己定义划分 Bootstrap 简介.../ 官网：http://getbootstrap.com/ 推荐使用：http://bootstrap.css88.com/ 框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身...：停止维护,兼容性好,代码不够简洁，功能不够完善 3.4.1：稳定, 但放弃了IE6-IE7，对IE8支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的Web项目 4.6.1 ：最新版，目前还不是很流行...以上来自2020年的数据 Bootstrap 使用: 控制权在框架本身，使用者要按照框架所规定的某种规范进行开发 =768px 中等屏幕 (桌面显示器) >=992px 宽屏设备 (大桌面显示器) >=1200px .container 最大宽度 自动(100%) 750px 970px 1170px
大家好，又见面了，我是你们的朋友全栈君。...常见属性： device-width, device-height 屏幕宽、高 width,height 渲染窗口宽、高 orientation 设备方向 resolution 设备分辨率 语法： @media...”（viewport）中，通常这个虚拟的”窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分...（单位为缩放为 100% 时的 CSS 的像素）。...Bootstrap的栅格系统 container row column 注意事项： 使用Bootstrap的时候不要让自己的名字与Bootstrap的类名冲突。
dpi是像素密度，指的是在系统软件上指定的单位尺寸的像素数量，它往往是写在系统出厂配置文件的一个固定值。 我为什么要强调它是软件系统上的概念？...这种方式存在两个小问题，第一，这只能保证我们写出来的界面适配绝大部分手机，部分手机仍然需要单独适配，为什么dp只解决了90%的适配问题，因为并不是所有的1080P的手机dpi都是480，比如Google...的Pixel2（19201080）的dpi是420，也就是说，在Pixel2中，1dp=2.625px,这样会导致相同分辨率的手机中，这样，一个100dp100dp的控件，在一般的1080P手机上，可能都是...在把设计稿向UI代码转换的过程中，我们需要耗费相当的精力去转换尺寸，这会极大的降低我们的生产力，拉低开发效率。 宽高限定符适配 为了高效的实现UI开发，出现了新的适配方案，我把它称作宽高限定符适配。...原生的dp适配可能会碰到Pixel 2这种有些特别的手机需要单独适配，但是在smallestWidth适配中，通过计算Pixel 2手机的的smallestWidth的值是411，我们只需要生成一个values-sw411dp
布局容器 Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。由于 padding 等 属性的原因，这两种容器类不能相互嵌套。 ... //100%宽度 ...... 栅格系统介绍: 栅格体系以标准每行12列为基准.。... //100%宽度构建一个栅格区域 //创建一个响应式的行 我是本行第一个元素块...(单行)布局就完成了 col-md-表示在中等屏幕下的分布,col-md-4表示中等屏幕(md)下占据单行的4列,单行不得超过12列否则显示在第二行....数12最大列（column）宽自动~62px~81px~97px槽（gutter）宽30px （每列左右均有 15px）可嵌套是偏移（Offsets）是列排序是 在基础的栅格自适应页面上可以完善一下,进行不同尺寸设备显示的适应
我一个中国人，HarmonyOS也是中国的，我怎么能不支持它，同学！...上面让我学HarmonyOS 去某行搞平板开发，我不学我就会被毕业，毕业后我就找不到工作，找不到工作我就没饭吃，就这么简单，这就是我学下去的动力。 美国的Brendan Eich知道伐？...catalogVersion=V3 二、二手资料和其他 无！ 三、总结 一手资料往往会遇到晦涩难懂的知识点，但长此以往坚持下去，慢慢你就习惯成自然了，然后这是比较好的学习打开姿势。...那么二手资料就是别人咀嚼消化过的，是别人的，你消化不掉那就不是你的。怎么平衡两者的关系？看定位，看你想成为什么，那就看什么。...，感谢阅读，有我瞎子的地方，美好都会如期而至，叮咚！
列 根据适用屏幕分成四种类型 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-*：...在大型屏幕中 所占列宽数 ⑤....列宽、在 sm 中 占 6 列宽、在 md 中 占 3 列宽 ⑩....静态样式语言：CSS 可以被浏览器直接解析处理，但 CSS 并不是合格的语言，缺少了基本编程的要素，如：变量，运算符，函数...... 由于不是动态的，所以导致了 CSS 的可维护性差 (2).
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
