响应式开发以及Bootstrap使用
响应式开发
响应式开发原理
通过媒体查询针对不同宽度设备进行布局和样式的设置，从而适配不同设备。
设备屏幕大小划分：
响应式布局容器
通过父级布局容器，配合子元素实现变化效果。简单来说就是通过媒体查询改变布局容器大小，再改变布局容器中子元素的排列。
- 平时响应式尺寸划分：
超小屏（手机，小于768px）：设置宽度为100%；
小屏（平板，大于等于768px，小于992px）:设置宽度为750px；
中等屏幕：（桌面显示器，大于等于992px，小于1200px）：设置宽度为970px；
大屏幕（大桌面显示器，大于1200px）：设置宽度为1170px。 - 媒体查询设置
//1.超小屏幕布局容器100%
@media screen and (max-width:767px){
//布局容器宽度设置
.container{
width:100%;
}
}
//2.小屏幕布局容器750px
@media screen and (min-width:768px){
.container{
width:750px;
}
}
//3.中等屏幕布局容器970px
@media screen and (min-width:992px){
container{
width:970px;
}
}
//4.大屏幕布局容器1170px
@media screen and (min-width:1200px){
.container{
width:1170px;
}
}
媒体查询划分也可以自定义划分。
Bootstrap前端开发框架
bootstarp使用
- 从中文网或者官网下载bootstrap的相关文件，引用到项目中进行使用。
使用bootstrap需要引入bootstrap.css文件和bootstrap.js文件，由于Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以需要将Jquery引入在bootstrap.js前面
注意：引入bootstrap文件就不需要再引入normalize.css初始化文件了。因为bootstrap本身就引入了normalize.css文件。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--要求当前网页使用IE浏览器最高版本内核来渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口：-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>//IE 6,7,8不认识H5新标签所使用的解决方案
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>//IE 6,7,8不认识css3媒体查询的解决方案
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
- 使用npm进行安装。
安装语句：
npm install jquery --save
npm install bootstrap@3 --save
npm install popper.js --save
布局容器
bootstrap需要微页面内容和栅格系统包裹一个.container容器，bootstrap预先定义好的类，不可以更改。
- container类
在bootstrap的使用中，使用contianer类不需要使用媒体查询。【含有左右15px的内边距】 - container-fluid类
在bootstrap的使用中，使用container-fluid类是一个流式布局容器。特点：百分百宽度，占据全部视口的容器，适用于单独移动端开发。
bootstrap的栅格系统
随着屏幕或者视口尺寸的增加，将页面布局划分为等宽的12等份，然后通过列数来模块化页面布局。bootstrap中必须有container类，在不同屏幕下container的宽度不同。
栅格选项参数
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
- “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
- 通过“行（row）”在水平方向创建一组“列（column）”。
- 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
- 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。实现平均划分需要给列添加类前缀【列前缀：.col-xs-列数 .col-sm-列数 .col-md-列数 .col-lg-列数】
- 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。 - 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
- 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
- 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。
栅格系统列嵌套
为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。
**注意：**已经等分的盒子不可以使用margin增加其间距。容易掉下来。解决方法：给每个等分盒子给一个padding值，然后给其内部再加一个小盒子，宽高100%即可。
列嵌套最好加一个行.row，这样可以消除父元素的padding值，而且高度自动和父级一样高。
栅格系统列偏移
使用.col-md-offset-*类可以将列向右侧偏移。这些类实际是通过使用 *选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
栅格系统列排序
通过使用 .col-md-push-* 和.col-md-pull-*类就可以很容易的改变列（column）的顺序。
响应式工具
利用媒体查询功能，使用这些工具类可以针对不同设备展示或者隐藏页内容。
与之相反的是visible-xs/visible-sm/visible-md/visible/lg是显示页面内容。
210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
