1、移动web开发基础
浏览器现状
pc端常见浏览器：360浏览器，谷歌，火狐，qq，百度，搜狗，ie
移动端：uc浏览器，qq，欧朋，百度手机，360安全，谷歌，搜狗手机，猎豹，以及其他杂牌浏览器
国内uc和qq、百度等手机浏览器都是根据webkit修改过来的内核，或内尚无自主研发的内核，就像国内手机操作系统都是基于Android修改开发的一样。
总结：兼容移动端主流浏览器，处理webkit内核浏览器即可。
手机屏幕现状
移动端设备屏幕尺寸非常多，碎片化严重
Android设备有多种分辨率
近年iPhone的碎片化页加剧了
作为开发者无需分辨分辨率，因为我们常用的尺寸单位是px
移动端调试方法：
chrome devtools（谷歌浏览器）的模拟手机调试
搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
使用外网服务器，直接IP或域名访问
2、视口
视口就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口
布局视口 layout viewport：一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的pc端页面在手机上显示的问题；iOS，Android基本都将这个视口分辨率设为980px，一般默认可以通过手动缩放网页
视觉视口 visual viewport：用户正在看到的网站的区域（注意：网站的区域）；我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口任保持原来的宽度
理想视口 ideal viewport：为了是网站在移动端有最理想的浏览和于都宽度而设定；理想是口，对设备来讲，是最理想的视口尺寸；需要手动添写<meta>视口标签通知浏览器操作；<meta>视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就有多宽
<meta>视口标签
<meta name="viewport" contente="weidth=device-width,user-scalable=no,initial-scale=1.0,maximun-scal=1.0,minimum-scal=1.0">
weidth：宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale：初始缩放比，大于0的数字
maximum-scale：最大缩放比，大于0的数字
minimum-scale：最小缩放比，大于0的数字
user-scalable：用户是否可以缩放，yes或no（1或0）
3、二倍图
物理像素点值得是屏幕显示的最小颗粒，是物理真实存在的。开发时1px不等于1个物理像素；pc端1px=1个物理像素，移动端不等于。一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比
retina（视网膜屏幕）是一种显示技术，可以将更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。
4、多倍图
对于一张50px*50px的图片，在手机retina屏中打开，按照物理像素比会放大倍数，这样会造成图片模糊
在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
5、移动端主流方案
单独制作移动端页面（主流）：通常情况下，网址域名前加m（mobile）可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。
响应式页面兼容移动端（其次）：pc和移动端公用一套网站，只不过在不同宽度的屏幕下，样式会自动适配；缺点：制作麻烦，需要花很多时间适配
6、移动端技术解决方案
浏览器：移动端浏览器基本以webkit内核为主，放心使用h5标签和css3样式，浏览器的私有前缀只需要考虑从添加-webkit-即可
css初始化 normalize.css：可以定制的css文件，让不同的浏览器在渲染网页元素的时候形式更统一，是一种现代的、为html5准备的优质替代方案
优点：保护了价值的默认值；修复了浏览器的bug，解决了浏览器的不一致的默认样式；normalize.css时模块化的，提高了易用性；normalize.css拥有详细的文档
css3盒子模型 box-sizing
传统模式宽度计算：盒子宽度=css设置的width+border+padding
css3盒子模型：盒子的宽度=css中色湖之的宽度width里面包含了border和padding，也就是说，我们的css3中的盒子模型，padding和border不会撑大盒子
css3盒子模型：box-sizing: border-box;
传统盒子模型：box-sizing: content-box;
点击高亮我们需要清除 设置为transparent 完全透明
-webkit-tap-highlight-color: trasparent;
在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式
-webkit-appearance: none;
禁用长按页面时的弹出菜单
img,a{-webkit-touch-callout: none;}
7、移动端常见的布局方式
单独制作移动端页面（主流）：流式布局（百分比布局）；flex弹性布局（强烈推荐）；less+rem+媒体查询布局；混合布局
响应式页面兼容移动端（其次）：媒体查询；bootstrap。
流式布局（百分比布局）
流式布局就是百分比布局，也称非固定像素布局
通过将盒子的宽度设成百分比，从而根据屏幕的宽度进行伸缩，不受固定像素限制，内容向两侧填充
流式布局方式是移动web开发使用的比较常见的布局方式
注意事项：制作过程中需要定义页面的最大和最小支持宽度：max-width最大宽度（max-height最大高度）；min-width最小宽度（min-height最小高度)
1、京东移动首页
技术选型
方案：采取单独制作移动页面方案；技术：布局采取流式布局
设置视口标签以及引入初始化样式
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum=1.0,minimum=1.0">
<!-- 引入初始化 css 文件 -->
<link rel="stylesheet" href="css/normalize.css">
<!-- 引入自己的首页的 css -->
<link rel="stylesheet" href="css/index.css">
2、MDN开放文档：线性渐变
3、图片格式
dpg图片压缩技术：京东自主研发推出的dpg图片压缩技术，经过测试该技术，可节省用户近50%的浏览流量，极大的提高了用户网页打开速度，能够兼容jpeg，实现全平台、全部浏览器的兼容支持，压缩后的图片和webp的清晰度对比没有差距。
webp图片格式：谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间。
1、传统布局和flex布局
传统布局：兼容性好，布局繁琐，局限性，不能再移动端很好的布局
flex布局：操作方便，布局极为简单，移动端应用很广泛；pc端浏览器支持情况较差；ie11或更低版本不支持或支持部分
建议：如果pc端布局使用传统布局；如果pc端或者不考虑兼容问题的pc端使用flex弹性布局
2、flex布局原理
flex是flexible box的缩写，意为弹性布局，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局
当我们为父盒子设为flex布局以后，子元素的float、clear、vertical-align属性都将失效
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
flex布局原理：
采用flex布局的元素，成为flex容器（flex container），简称“容器”。他的所有子元素自动成为容器成员，成为flex项目（flex item），简称项目
3、flex布局常见属性 父项常见属性
flex-direction：设置主轴的方向
row：默认从左到右；row-reverse从右到左；column：从上到下；colume-reverse从下到上；
justify-content：这是主轴上的子元素排列方式
flex-start：默认值从头部开始，如果主轴是x轴，则从左往右
flex-end：从尾部开始排列
center：主轴居中对齐（如果主轴是x轴则水平居中）
space-around：平分剩余空间
space-between：先两边贴边，再平分剩余空间（重要）
flex-wrap：设置子元素是否换行
nowrap：默认值，不换行
wrap：换行
align-items：设置侧轴上的子元素的排列方式（单行）
flex-start 默认值从上到下
flex-end：从尾部开始排列
center：挤在一起居中
stretch：拉伸
align-content：设置侧轴上的子元素的排列方式（多行）
flex-start 默认值从上到下
flex-end：从尾部开始排列
center：在侧轴中间显示
space-around：子项在侧轴平分剩余空间
space-between：子项在侧轴先分布两头，再平分剩余空间
stretch：设置子项元素高度平分父元素高度
flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
flex-flow:row nowrap;
4、flex布局常见属性 子项常见属性
flex子项目占的份数
flex属性定义子项目分配父盒子的剩余空间，用flex来表示占多少份
属性值为数字，数字为1，表示占总份数中的1份，默认值为0。
.item {
flex:<number>; /* difault 0 */
}
align-self控制子项自己在侧轴的排列方式
align-self属性允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性
默认值是auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
span:nth-child(2) {
/* 设置自己在侧轴上的排列方式 */
align-self-end;
}
order属性定义子项的排列顺序（前后顺序）
数值越小，排列越靠前，默认为0
主要：和index不同
.item {
order: <number>;
}
5、命名
首页搜索框：search-index固定在顶部
焦点图：focus
当地导航：lacal-nav
主要导航：nav
底部导航进入内容：subnav-entry
热门活动区域：sales-box;里面顶部sales-hd;底部：sales-bd
工具栏：tool-box
1、rem单位
rem（root em）是一个相对单位，类似于em，em是父元素字体大小
不同的是rem的基准是相对于<html>元素字体的大小
比如，根元素（html）设置font-size=12px；非根元素设置width：2rem；转化成px表示就是24px；
rem的优势：父元素文字大小可能不一致，但是整个页面只有一个html，可以很好的来控制整个页面的元素大小比例
2、媒体查询
媒体查询（media query）是css3新语法
使用@media查询，可以针对不同媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机，平板等设备都用的到多媒体查询
语法规范
用@media开头，注意@符号
mediatype媒体类型
关键字and not only
media feature 媒体特性 必须有小括号包含
@media mediatype and|not|only (media feature ) {
CSS-Code
}
mediatype媒体类型
将不同的终端设备划分成不同的类型，称为媒体类型：all 用于所有设备；print 用于打印机和打印预览；screen 用于电脑屏幕，平板电脑，智能手机等
关键字
关键字将媒体类型或多个媒体属性连接到一起作为媒体查询的条件
and：可以将多个媒体特性连接到一起，相当于“且”的意思
not：排除某个媒体类型，相当于非的意思，可以省略
or：可以测试多个媒体查询的条件，只要有一个条件成立，就执行，“或”的意思
only：指定某个特特定的媒体类型，可以省略
媒体特性
每种媒体类型都具备各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示分隔（注意写在小括号里）
width 定义输出设备中页面可见区域的宽度
min-width 定义输出设备中页面可见区域的最小宽度
max-width 定义输出设备中页面可见区域的最大宽度
3、媒体查询案例-背景变色
案例思路：1.按照从大到小或者从小到大的思路；2.注意我们的最大值max-width和最小值min-width都是包含等于的；3.当屏幕小于540像素时，背景变为蓝色（x<=539）4.当屏幕大于等于540像素并且小于等于969像素的时候背景颜色为绿色（540=<x<=969）；5.当屏幕大于等于970像素的时候，背景颜色为红色（x>=970)
注意：为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序书写，一般为从小到大
4、媒体查询+rem实现元素动态的大小变化
rem单位是跟着<html>来走的，有了rem页面元素可以设置不同大小尺寸
媒体查询可以根据不同设备宽度来修改样式
媒体查询+rem就可以实现不同设备不同宽度，实现页面元素大小的动态变化
5、媒体查询引入资源（理解）
直接在<link>中判断设备的尺寸，然后引入不同的css文件
1、语法规范<link rel="stylesheet" media="mediatype and|not|only|only (media feature)" href="mystylesheet.css">
2、实例：<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">
6、维护css的弊端
css是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念
css需要书写大量看似没有逻辑的代码，css冗余度式比较高的
不方便维护及扩展，不利于复用
css没有很好的计算能力
非前端开发工程师来讲，往往会因为缺少css编写经验而很难写出组织良好且易于维护的css代码项目
7、less介绍
less（leaner style sheets的缩写）是一门css扩展语言，也成为css预处理器
作为css的一种形式的扩展，它并没有减少css的功能，而是在现有的css语法上，为css加入程序式语言的特性
它在css的语法基础上，引入了变量，Mixin(混入)、运算以及函数等功能，大大简化了css的编写，并且降低了css的维护成本，就像它的名称所说的那样，less可以让我们用更少的代码做更多的事情
less中文网址：http://lesscss.cn/
常见的css预处理器：Sass、Lass、Stylus
一句话：Less是一门css预处理器语言，它扩展了css的动态特性
less安装
1、安装nodejs，可选择最新版本，网址：https://nodejs.org/en/download/ 2、检查是否安装成功，使用cmd命令，（win10是win+r打开运行输入cmd）输入“node -v”查看版本即可 3、基于node.js在线安装less，使用cmd命令“npm install -g less” 即可 4、检查是否安装成功，使用cmd命令“lessc -v”查看版本即可
8、less使用
首先新建一个后缀名为.less的文件，在这个文件里书写Less语句
Less变量
变量是值没有固定的值，可以动态改变的。因为我们css中的一些颜色和数值等经常使用。
@变量名:值;
1、变量命名规范：必须有@为前缀；不能包含特殊符号；不能以数字开头；大小写敏感。如：@color:pink;
2、变量使用规范：body {color: @color;}a:hover {color: @color;}
Less编译
本质上，less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的css文件
所以我们需要把我们的.less文件，编译生成为.css文件，这样我们的html页面才能使用
推荐方法（note.js)：在当前文件夹，使用cmd命令"lessc style.less>style.css"
VScode Less插件：Easy LESS插件用来把less文件编译为css文件；安装完毕此插件，重新加载下vscode；只要保存一下Less文件，会自动生成CSS文件
Less嵌套
写法：#header {
.logo {
width: 300px;
}
}
如果遇见（交集|伪类|伪元素选择器）
内层选择器的前面没有&符，则它被解析为父选择器的后代；
如果有&符号，他就被解析为父元素自身或父元素的伪类
a {
&:hover {
color: red;
}
}
Less运算
任何数字、颜色或者变量都可以参与运算。Less提供了加（+）、减（-）、乘（*）、除（/）算数运算：&width: 10px +5;
注意：1、参与运算的两个数字，可以一个有单位，一个没有单位，最终单位就是唯一的单位
2、参与运算的两个数字，两个单位，最终取第一个数字的单位
3、less运算符左右必须加空格
9、rem适配方案 思考
适配的目的：让一些不能等比自适应的元素，达到当前设备尺寸发生改变的时候，等比例适配当前设备；使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。
rem实际开发适配方案：1、按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小；（媒体查询）；2、css中、设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值；
rem适配方案技术使用（市场主流）
技术方案1：less；媒体查询；rem
技术方案2：flexible.js；rem （推荐）
10、rem实际开发适配方案1
rem+媒体查询+less技术
1、设计稿常见尺寸宽度：iPhone4 5：640px；iPhone6 7 8：750px；Android：常见320px 480px 540px 600px 720px 768px 800px 1080px 目前市场主流设备尺寸按照1080px设计
一般情况下，我们以一套或两套效果图适应大部分的屏幕，放弃极端屏或对齐优雅降级，牺牲一些效果，现在基本以750为准。
动态设置heml标签和font-size大小
1.假设设计稿是750px
2.假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）
3.每一份作为html字体大小，这里就是50px；
4.那么在320px设备的时候，字体大小为320/15就是21.33px
5.用我们页面元素的大小除以不同的html字体大小会发现他们比例还是相同的
比如我们以750px为标准设计稿：
1.一个100*100像素的页面元素在750屏幕下，就是100/50转换为rem就是2rem*2rem比例是1比1
2.320屏幕下，html字体大小为21.33则2rem=42.66px，此时宽和高都是42.66但是宽高的比例还是1比1
3.但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果
小技巧：元素大小取值方法：1.最后的公式：页面元素的rem值=页面元素值（px）/(屏幕宽度/划分的份数)；2.屏幕划分/划分的份数 就是html font-size的大小3.或者：页面元素的rem值=页面元素值（px）/html font-size字体大小
11、苏宁网移动端首页
访问页面：m.suning.com
技术选型 方案：我们采取单独制作移动页面方案； 技术：布局采取rem适配布局（less + rem + 媒体查询）； 设计图：本设计图采用750px设计尺寸
设置公共common.less文件
1.新建common.less设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小，因为除了首页其他页面也需要。
2.苏宁网站首页的开发尺寸有320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px等。
3.划分的份数我们定位15等份。
4.因为我们的pc端也可以打开我们苏宁移动端首页，我们默认html字体大小为50px，注意这句话写到最上面
12、@import 导入 less 文件
1.新建index.less这里写首页的样式
2.将刚才设置好的common.less引入到index.less里
语法： @import “common”
3.生成index.css引入到index.html里面
13、简洁高效的rem适配方案flexible.js
手机淘宝团队出的简洁高效 移动端适配库
我们再也不需要在写不同屏幕的媒体查询，因为里面做了js处理
他的原理是把当前设备划分为10等份，但不同设备下，比例还是一致的
我们要做的，就是确定好我们当前设备的html文字大小就可以了
比如当前的设计稿是750px，那么我们只需要把html文字大小设置为75px（750px / 10）就可以
里面的页面元素rem值：页面元素的px值 / 75
剩余的，让flexible.js来去算
github地址：https://github.com/amfe/lib-flexible
14、使用适配方案2 制作苏宁移动端首页
技术选型：方案 我们采取单独制作移动页面方案；技术 布局采取rem适配布局2（flexible.js + rem）； 设计图 本设计图采用750px 设计尺寸
VScode px 转换rem 插件 cssrem
设置html字体大小基准值：1.打开设置快捷键是ctrl+逗号 ==> 扩展 ==> cssrem configuration ==> root font size ==> 改为75
1、移动端技术选型
1.单独制作移动端页面（主流）
2.响应式页面兼容移动端（其次）：媒体查询；bootstrap。
2、响应式开发原理
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
设备划分： 超小屏幕（手机） <768px
小屏设备（平板） >=768px~<992px
中等屏幕（桌面显示器）>=992px~<1200px
宽屏设备（大桌面显示器） >=1200px
3、响应式布局容器
响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果；
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
平时的响应式尺寸划分：
超小屏幕（手机） <768px：宽度设置为100%
小屏设备（平板） >=768px~<992px：宽度设置为750px
中等屏幕（桌面显示器）>=992px~<1200px：宽度设置为970px
宽屏设备（大桌面显示器） >=1200px：宽度设置为1170px
4、响应式导航案例
1：当屏幕大于等于800像素，给nav设置宽度为800像素，因为里面子盒子要浮动，所以要清楚浮动
2：nav里包含8个小li盒子，每个li宽度设为100px，高度为30px，浮动一行显示
3.当屏幕缩放，宽度小于800px，nav盒子宽度改为100%宽度
4：nav里8个li，宽度修改为33.33%，一行显示3个，剩余下行显示
5、bootstrap 简介
bootstrap来自twitter，是目前最受欢迎的前端框架。bootstrap是基于html、css和JavaScript的，它简介灵活，使web开发更加快捷
中文官网： http://www.bootcss.com/
官网： http://getbootstrap.com/
框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，并且控制权再架构本身，有预设样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发
bootstrap优点：标准化了html+css编码规范；提供了一套简洁、直观、强悍的组件；让自己的生态圈，不断的更新迭代；让开发更简单，提高了开发的效率
bootstrap版本：2.x.x：停止维护，兼容好，代码不够整洁，功能不够完善；3.x.x：目前使用最多，稳定，但是放弃了IE6-IE7。对IE8支持但界面效果不够好，偏向于开发响应式布局、移动设备优先的web项目；4.x.x：最新版，目前还不是很流行
6、bootstrap使用
控制权在框架本身，使用者要按照框架所规定的某种规范进行开发
bootstrap使用四部曲：1.创建文件夹结构；2.创建html骨架结构；3.引入相关样式文件；4.书写内容。
2： <!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 视口的设置：视口的宽度和设备一致，默认的缩放比例和pc端一致，用户不能自行缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<!-- 解决ie9以下h5标签和媒体查询兼容 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
3.<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
7、布局容器
bootstrap需要为页面内容和栅格系统包裹一个 .container 容器，它提供了两个作此用处的类
1.container类：响应式布局的容器 固定宽度；大屏（>=1200px）宽度定为1170px； 中屏（>=992px）宽度定为970px； 小屏（>=768px）宽度定为750px； 超小屏（100%）
2.container-fluid类： 流式布局容器 百分百宽度； 占据全部视口（viewport）的容器； 适用于制作移动页面开发
8、栅格系统建军节
英文名为“grid systems”，也有人翻译为“网格系统”，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局
bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
9、栅格选项参数
栅格系统用于通过一系列的行（row）与列（columm）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
最小屏幕手机 小屏设备（平板） 中等屏幕（桌面显示器） 宽屏设备（大桌面显示器）
.container最大宽度 自动100% 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列（column）数 12
按照不同屏幕划分为1~12等份
行（row）可以去除父容器作用15px的边距
列（column）大于12，多余的“列（column）”所在的元素被作为一个整体另起一行排列
每一列默认有左右15像素的padding
可以同时为一列指定多个设备的类名，以便划分不同份数 例如 class="col-md-4 col-sm-6"
10、栅格系统-列嵌套
栅格系统内置的栅格系统将内容再次嵌套。简单的理解为是一个列再分为若干份小列。我们建议通过添加一个新的.row元素和一些列.col-sm-*元素到已经存在的.col-sm-*元素内
11、栅格系统-列偏移
使用.col-md-offset-*类可以将列向右侧偏移。这些类实际是通过使用*选择器为当前元素增加了左侧边距（margin）。
12、栅格系统-列排序
通过使用.col-md-push-*往右推和.col-md-pull-*往左拉两个类就可以很容易的改变列(column）的顺序。
13、响应式工具
为了加快对移动设备友好的页面开发，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容
.hidden-xs/.hidden-sm/.hidden-md/.hidden-lg
与之相反的，visible-xs，等针对不同设备显示某个内容。
bootstrap其他（按钮、表单、表格）请参考bootstrap文档。
14、阿里百秀案例制作
技术选型：方案 采取响应式页面开发方案； 技术 bootstrap框架； 设计图 本设计图采用1280px设计尺寸
15、continer宽度修改：利用媒体查询修改container宽度适应效果图宽度
313
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
