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宽度适应效果图宽度