前 言 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。 作为一个前端程序员，响应式网站可以说使我们接触最早，也是最多的一类。BootS ...
分类：
其他好文 时间：
2017-10-08 21:23:27
阅读次数：
382
1、栅格系统 1.栅格类数字表示的意思 .col-xs-12 .col-sm-6 .col-md-8 .col-lg-12 这里的数字代表在各自对应的屏幕状态下占据的比例。12为总列数。比如col-sm-6，就是指在sm屏幕状态下，包含此类的盒子占据6份的宽度，也就是一半。其他的以此类推。如果在一个 ...
分类：
其他好文 时间：
2017-09-29 00:23:28
阅读次数：
197
在最初学习bootsrap这个框架的时候觉得这个框架中的栅格系统是个做自适应很好的工具，而且开发也很方便，是我接触的第一个前端框架，第一次觉得开发如此的简单，今天看到学妹写了一个后台的界面，虽然用到了bootsrap但是用的不好，有问题，就写下这篇bootsrap的栅格系统的偏移用法 1.在我学网页 ...
分类：
其他好文 时间：
2017-09-29 00:16:04
阅读次数：
242
1、 bootstrap导入 ① <!--[if lt IE 9]> .... <![endif]- -> 这一对标签用于检测当前浏览器的版本。lt表示小于，gt表示大于。所以这句话的作用是，当浏览器版本低于IE执行。 ② html5shiv：解决ie9以下浏览器对html5新增标签的不识别，并导致 ...
分类：
其他好文 时间：
2017-09-25 00:52:02
阅读次数：
122
前 言 栅格系统 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。 栅格系统用于通过一系列的行（row）与列（column）的组合来创建 ...
分类：
其他好文 时间：
2017-09-25 00:45:30
阅读次数：
151
测试1 <div class="row"> <div class="col-xs-12 col-md-8">第一列</div> <div class="col-xs-6 col-md-4">第二列</div> </div> 测试1 1.当只有md存在时： 画布宽度大于992px时，两列都显示在同一行 ...
分类：
其他好文 时间：
2017-09-21 16:40:21
阅读次数：
105
目前,个人了解的前端比较流行的框架是三个:BootStrap,React,Vue想要为公司选一个作为接下来的前端技术研发方向,因此作了一番调查,有点浅见.BootStrap:特点是栅格系统,使用简单,上手容易.专为响应式页面而生.一套代码就可以自适应平板电脑和PC.缺点在于,缺少一套有力的成体系的..
分类：
其他好文 时间：
2017-09-21 09:41:13
阅读次数：
124
摘要：Bootstrap 为我们提供了一套响应式、移动设备优先的流式栅格系统，合理的使用栅格系统将会使得网站页面布局变得更加简单，在设置了媒体查询之后，响应式网站也无需再单独写了。接下来我以Bootstrap的中文官网首页为模板进行展示其栅格布局的使用方法以及相关知识点。相信在看完这篇文章之后，你完 ...
分类：
Web程序 时间：
2017-09-19 00:28:12
阅读次数：
273
目录： 一、栅格系统 内容： 前言： 首先通过https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css 链接下载bootstrap.min.css保存到本地，然后执行下面操作 一、栅格系统 栅格系统是页面布局使用，是区分列布局使用的， ...
分类：
编程语言 时间：
2017-09-19 00:11:57
阅读次数：
257
1、栅格系统实现布局的原理 1）Bootstrap把屏幕的宽度拆分成12格（列），每一格像素的多少由设备屏幕分辨率决定，我们在开发项目的过程中不需要去指定像素或者百分比。 2）不同范围的分辨率对应不同设备 超小屏幕 手机（<768px） 类的前缀：-col-xs- 小屏幕 平板（>=768px<99 ...
分类：
其他好文 时间：
2017-09-18 15:05:44
阅读次数：
246
