移动Web开发--学习笔记三 响应式项目实战（微金所）
2024-06-04 08:40:12
响应式项目实战（微金所）
响应式项目开发流程
- 选择一种屏幕格式进行开发
- 相应功能模块完成后，测试是否响应式效果
- 确保响应式效果满足要求
- 进行下一个功能模块开发
使用自定义字体图标
创建自己的字体图标https://icomoon.io/
- 通过
@font-face定义自己的字体
@font-face {/*2.申明自己的字体名称*/font-family: 'wjs';/*3.引入字体文件（约束某一段字符代码什么图案）*/src:url(../fonts/MiFie-Web-Font.svg) format('svg'),url(../fonts/MiFie-Web-Font.eot) format('embedded-opentype'),url(../fonts/MiFie-Web-Font.ttf) format('truetype'),url(../fonts/MiFie-Web-Font.woff) format('woff');
}
- 怎么使用维护性更好，使用组合样式，通过修改类，直接修改字体图标
.wjs_icon{font-family: wjs;
}
/* css只能修改样式，伪元素可以修改html结构的内容 */
.wjs_icon_phone::before{content: "\e908";
}
.wjs_icon_tel::before{content: "\e909";
}
- 使用字体图标
<a href="#" class="wjs_app"><span class="wjs_icon wjs_icon_phone"></span><span>手机微金所</span><span class="glyphicon glyphicon-menu-down"></span><img src="images/code.jpg" alt=""></a>
单元素重置样式
<div class="col-md-3"><a href="#" class="btn btn-default btn-register">免费注册</a><a href="#" class="btn btn-link btn-login">登录</a></div>
当使用默认样式不能满足需求时，可以重置样式，两种方式
- 重置引用的框架样式如
btn-default，但会影其他页面 - 自定义样式，使用自定义样式类，可以方便修改样式（推荐）
.wjs_topBar .btn-register{border: none;background: #e92322;color: #fff;font-size: 12px;padding: 3px 12px;
}
.wjs_topBar .btn-register:hover{}
.wjs_topBar .btn-login{font-size: 12px;color: #666;
}
.wjs_topBar .btn-login:hover{text-decoration: none;color: #666;
}
组件重置样式
组件中涉及的元素较多，一个个确定样式并进行修改过于麻烦，需要通过一种简便的方式进行设置，并要注意样式优先级，确保自定义样式的优先级高于bootstrap默认样式
设置如下结构的样式
<!--导航栏-->
<nav class="navbar wjs_nav"><!--<nav class="navbar navbar-default wjs_nav">--><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#"><span class="wjs_icon wjs_icon_logo"></span><span class="wjs_icon wjs_icon_name"></span></a></div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">我要投资</a></li><li><a href="#">我要借贷</a></li><li><a href="#">平台介绍</a></li><li><a href="#">新手专区</a></li><li><a href="#">最新动态</a></li><li><a href="#">微平台</a></li></ul><ul class="nav navbar-nav navbar-right hidden-sm"><li><a href="#">个人中心</a></li></ul></div></div></nav>
方法
- 拷贝源码的模块样式：
bootstrap源码为分模块进行设置，相同的模块样式再一真起，可以方便的进行复制。
并可以准确定位到所有元素的选择器并且能保证优先级比源码高
以navbar-default为例，复制样式到自定义样式文件中
.navbar-default {background-color: #f8f8f8;border-color: #e7e7e7;
}
.navbar-default .navbar-brand {color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {color: #5e5e5e;background-color: transparent;
}
.navbar-default .navbar-text {color: #777;
}
.navbar-default .navbar-nav > li > a {color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {color: #333;background-color: transparent;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {color: #555;background-color: #e7e7e7;
}
.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {color: #ccc;background-color: transparent;
}
.navbar-default .navbar-toggle {border-color: #ddd;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {background-color: #ddd;
}
.navbar-default .navbar-toggle .icon-bar {background-color: #888;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {border-color: #e7e7e7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {color: #555;background-color: #e7e7e7;
}
@media (max-width: 767px) {.navbar-default .navbar-nav .open .dropdown-menu > li > a {color: #777;}.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {color: #333;background-color: transparent;}.navbar-default .navbar-nav .open .dropdown-menu > .active > a,.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {color: #555;background-color: #e7e7e7;}.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {color: #ccc;background-color: transparent;}
}
.navbar-default .navbar-link {color: #777;
}
.navbar-default .navbar-link:hover {color: #333;
}
.navbar-default .btn-link {color: #777;
}
.navbar-default .btn-link:hover,
.navbar-default .btn-link:focus {color: #333;
}
.navbar-default .btn-link[disabled]:hover,
fieldset[disabled] .navbar-default .btn-link:hover,
.navbar-default .btn-link[disabled]:focus,
fieldset[disabled] .navbar-default .btn-link:focus {color: #ccc;
}
- 针对功能进行覆盖：更改模块名称,
.navbar-default修改为自定义模块.wjs_nav
直接在复制的样式文件上修改会影响其他使用此样式的结构，通过修改模块名，指定模块为当前要修改的模块，就可以方便的控制其只能当前模块生效。可以随意的在其基础上进行修改。
.wjs_nav {margin-bottom: 0;border: none;border-bottom: 1px solid #ccc;/*固定导航样式*/z-index: 999999;background: #fff;width: 100%;border-radius: 0;top: 0;
}
.wjs_nav .wjs_icon_logo{font-size: 50px;color: #e92322;vertical-align: middle;
}
.wjs_nav .wjs_icon_name{font-size: 36px;color: #333;vertical-align: middle;
}.wjs_nav .navbar-brand {color: #777;height: 80px;line-height: 50px;
}
.wjs_nav .navbar-brand:hover,
.wjs_nav .navbar-brand:focus {color: #5e5e5e;background-color: transparent;
}
.wjs_nav .navbar-text {color: #777;
}
.wjs_nav .navbar-nav > li > a {color: #777;height: 80px;line-height: 50px;
}
.wjs_nav .navbar-nav > li > a:hover,
.wjs_nav .navbar-nav > li > a:focus {color: #777;background-color: transparent;border-bottom: 3px solid #e92322;
}
.wjs_nav .navbar-nav > .active > a,
.wjs_nav .navbar-nav > .active > a:hover,
.wjs_nav .navbar-nav > .active > a:focus {color: #555;border-bottom: 3px solid #e92322;
}
.wjs_nav .navbar-nav > .disabled > a,
.wjs_nav .navbar-nav > .disabled > a:hover,
.wjs_nav .navbar-nav > .disabled > a:focus {color: #ccc;background-color: transparent;
}
.wjs_nav .navbar-toggle {border-color: #ddd;margin-top: 23px;
}
.wjs_nav .navbar-toggle:hover,
.wjs_nav .navbar-toggle:focus {background-color: #ddd;
}
.wjs_nav .navbar-toggle .icon-bar {background-color: #888;
}
.wjs_nav .navbar-collapse,
.wjs_nav .navbar-form {border-color: #e7e7e7;
}
.wjs_nav .navbar-nav > .open > a,
.wjs_nav .navbar-nav > .open > a:hover,
.wjs_nav .navbar-nav > .open > a:focus {color: #555;background-color: #e7e7e7;
}
@media (max-width: 767px) {.wjs_nav .navbar-nav .open .dropdown-menu > li > a {color: #777;}.wjs_nav .navbar-nav .open .dropdown-menu > li > a:hover,.wjs_nav .navbar-nav .open .dropdown-menu > li > a:focus {color: #333;background-color: transparent;}.wjs_nav .navbar-nav .open .dropdown-menu > .active > a,.wjs_nav .navbar-nav .open .dropdown-menu > .active > a:hover,.wjs_nav .navbar-nav .open .dropdown-menu > .active > a:focus {color: #555;background-color: #e7e7e7;}.wjs_nav .navbar-nav .open .dropdown-menu > .disabled > a,.wjs_nav .navbar-nav .open .dropdown-menu > .disabled > a:hover,.wjs_nav .navbar-nav .open .dropdown-menu > .disabled > a:focus {color: #ccc;background-color: transparent;}
}
.wjs_nav .navbar-link {color: #777;
}
.wjs_nav .navbar-link:hover {color: #333;
}
.wjs_nav .btn-link {color: #777;
}
.wjs_nav .btn-link:hover,
.wjs_nav .btn-link:focus {color: #333;
}
.wjs_nav .btn-link[disabled]:hover,
fieldset[disabled] .wjs_nav .btn-link:hover,
.wjs_nav .btn-link[disabled]:focus,
fieldset[disabled] .wjs_nav .btn-link:focus {color: #ccc;
}
缺点
有一些没有用到的选择器，代码的冗余
两种解决方案：
- 删除冗余代码：降低代码量
- 保留：利于维护，方便产品跟新的时候不用再去修改代码
可以根据喜好选择解决方案（建议保留）
方法2
所有复制的bootstrap样式前加入当前模块的前缀，声明只在当前模块生效，即不会影响其他模块。如下
.wjs_navbar .navbar-default {background-color: #f8f8f8;border-color: #e7e7e7;
}
.wjs_navbar .navbar-default .navbar-brand {color: #777;
}
Bootstrap使用方式
- 分析demo,引入到基本模板代码中
- 修改样式，完成项目样式要求
- 测试是否响应式效果
- 不满足响应式时，需要手动通过媒体查询进行设置
collapse组件(折叠)
- 类名：
collapsedclass只有样式效果 - 属性：带
JS交互效果，所有通过添加属性，添加动态效果
data-toggle="collapse"申明是什么组件=折叠组件
data-target="#bs-example-navbar-collapse-1"控制的目标元素=选择器
<!--
data-toggle="collapse"声明对象转换为切换按钮
data-target=".box" 控制的目标元素，为选择器
-->
<button data-toggle="collapse" data-target=".box">切换</button><!--
data-target=".box"具有相同效果
href=".box" 控制的目标元素，为选择器
-->
<a href=".box" data-toggle="collapse" >切换</a>
<div class="collapse box">内容<br>内容<br>内容<br>内容<br>内容<br>
</div>
总结：bootstrap通过属性声明为相应的组件，加上相应的功能
导航条
<!-- navbar 导航模块 navbar-default 默认样式 -->
<nav class="navbar navbar-default"><!-- 导航的内容容器 --><div class="container"><!-- 包含 商标区域 和 切换按钮（在移动端显示） --><div class="navbar-header"><!--切换按钮--><!--类名：collapsed 样式属性：data-toggle="collapse" 申明是什么组件=折叠组件data-target="#bs-example-navbar-collapse-1" 控制的目标元素=选择器其他：(可以删除)aria-expanded="false" aria-* 代表提供给屏幕阅读器使用的（盲人阅读器）class="sr-only" screen read only 代表提供给屏幕阅读器使用的（盲人阅读器）--><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><!--商标区域--><a class="navbar-brand" href="#">Brand</a></div><!-- 导航连接 表单 其他内容 被切换 --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--默认的导航--><ul class="nav navbar-nav"><li class="active"><a href="#">Link</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li></ul><!--右对齐的导航--><ul class="nav navbar-nav navbar-right"><li><a href="#">Link</a></li></ul></div></div>
</nav>
轮播图组件分析
<!-- carousel 轮播图的模块 slide是否加上滑动效果 -->
<!-- data-ride="carousel" 初始化轮播图属性-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- 指示器：点盒子 --><ol class="carousel-indicators"><!--data-target="#carousel-example-generic" 控制目标轮播图data-slide-to="0" 控制的是轮播图当中的第几张 （索引）class="active" 当前选中的点--><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li></ol><!-- 图片盒子 --><!-- role="listbox" 提供给屏幕阅读器使用 --><div class="carousel-inner"><!--需要轮播的容器--><div class="item active"><!--图片--><img src="..." alt="..."><!--说明--><div class="carousel-caption">...</div></div><div class="item"><img src="..." alt="..."><div class="carousel-caption">...</div></div>...</div><!-- 上一张下一张按钮 --><!--data-slide="prev"data-slide="next"href="#carousel-example-generic" 控制目标轮播图--><a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
经分析，bootstrap的轮播图pc/mobile端效果一致（移动端是高度并不会变化，不易于观看），不能满足所需要的响应式效果，所以需要自定义
PC端轮播图
需求：高度固定，图片居中，容器铺满
怎么设置不同图片：使用css选择器来设置不太好（html内容动态改变不利于维护）
.pc_imgBox{display: block;height: 400px;width: 100%;background-size: cover;background-position: center;background-repeat: no-repeat;
}
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li><li data-target="#carousel-example-generic" data-slide-to="3"></li></ol><div class="carousel-inner"><div class="item active"><!--模板代码，结合后台数据动态修改--><a href="#" class="pc_imgBox" style="background-image: url(../images/slide_01_2000x410.jpg)"></a></div><div class="item"><a href="#" class="pc_imgBox" style="background-image: url(../images/slide_02_2000x410.jpg)"></a></div><div class="item"><a href="#" class="pc_imgBox" style="background-image: url(../images/slide_03_2000x410.jpg)"></a></div><div class="item"><a href="#" class="pc_imgBox" style="background-image: url(../images/slide_04_2000x410.jpg)"></a></div></div><a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
M端轮播图
需求：宽度自适应，高度自动变化
.m_imgBox{display: block;width: 100%;}/*当img宽度固定，高度不设置时，高度会根据宽度等比缩放*/.m_imgBox img{display: block;width: 100%;}
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li><li data-target="#carousel-example-generic" data-slide-to="3"></li></ol><div class="carousel-inner"><!--注意PC/M端的不同--><div class="item active"><a href="#" class="m_imgBox"><img src="../images/slide_01_640x340.jpg" alt=""></a></div><div class="item"><a href="#" class="m_imgBox"><img src="../images/slide_02_640x340.jpg" alt=""></a></div><div class="item"><a href="#" class="m_imgBox"><img src="../images/slide_03_640x340.jpg" alt=""></a></div><div class="item"><a href="#" class="m_imgBox"><img src="../images/slide_04_640x340.jpg" alt=""></a></div></div><a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
静态响应式轮播图
通过添加响应式工具类控制不同设备间使用的轮播图
<a href="#" class="pc_imgBox hidden-xs" style="background-image: url(../images/slide_02_2000x410.jpg)"></a>
<!--除了超小屏设备都不显示-->
<a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="../images/slide_02_640x340.jpg" alt=""></a>
缺点：
hidden-xs只是设置display:none图片不会加载，当在M端时，不仅增加带宽，而且还影响加载速度
.pc_imgBox{display: block;height: 400px;width: 100%;background-size: cover;background-position: center;background-repeat: no-repeat;
}
.m_imgBox{display: block;width: 100%;
}
.m_imgBox img{display: block;width: 100%;
}
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li><li data-target="#carousel-example-generic" data-slide-to="3"></li></ol><div class="carousel-inner"><div class="item active"><a href="#" class="pc_imgBox hidden-xs" style="background-image: url(../images/slide_01_2000x410.jpg)"></a><a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="../images/slide_01_640x340.jpg" alt=""></a></div><div class="item"><a href="#" class="pc_imgBox hidden-xs" style="background-image: url(../images/slide_02_2000x410.jpg)"></a><a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="../images/slide_02_640x340.jpg" alt=""></a></div><div class="item"><a href="#" class="pc_imgBox hidden-xs" style="background-image: url(../images/slide_03_2000x410.jpg)"></a><a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="../images/slide_03_640x340.jpg" alt=""></a></div><div class="item"><a href="#" class="pc_imgBox hidden-xs" style="background-image: url(../images/slide_04_2000x410.jpg)"></a><a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="../images/slide_04_640x340.jpg" alt=""></a></div></div><a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
动态轮播图
使用JS根据后台数据，动态控制前端html结构。
html修改使用模板代码
<!--使用模版引擎-->
<script type="text/template" id="pointTemplate"><% for(var i = 0 ; i < list.length ; i ++){ %><li data-target="#carousel-example-generic" data-slide-to="<%=i%>" class="<%=i==0?'active':''%>"></li><% } %></script><script type="text/template" id="imageTemplate"><% for(var i = 0 ; i < list.length ; i ++){ %><div class="item <%=i==0?'active':''%>"><% if(isMobile){ %><a href="#" class="m_imgBox"><img src="<%=list[i].mUrl%>" alt=""></a><% }else{ %><a href="#" class="pc_imgBox" style="background-image: url(<%=list[i].pcUrl%>)"></a><% } %></div><% } %></script>
模板代码说明
<% js代码 %>，<% %>中间可以书写任意的JS代码，但是不能写全局变量，只能用传递过来的局部变量
<% for(var i = 0 ; i < list.length ; i ++){ %><li data-target="#carousel-example-generic" data-slide-to="<%=i%>" class="<%=i==0?'active':''%>"></li><% } %>
- 两对
<% %>html代码<% %>中间可以书写html代码
$(function () {/*动态轮播图*/banner();/*移动端页签*/initMobileTab();/*初始工具提示*/$('[data-toggle="tooltip"]').tooltip();
});
var banner = function () {/*1.获取轮播图数据 ajax *//*2.根据数据动态渲染 根据当前设备 屏幕宽度判断 *//*2.1 准备数据*//*2.2 把数据转换成html格式的字符串 （动态创建元素，字符串拼接，模版引擎【artTemplate】*//*2.3 把字符渲染页面当中*//*3.测试功能 页面尺寸发生改变重新渲染*//*4.移动端手势切换 touch*//*ui框架：bootstrap,妹子UI,jqueryUI,easyUI,jqueryMobile,mui,framework7*//*关于移动端的UI框架：bootstrap,jqueryMobile,mui,framework7*//*模板引擎：artTemplate,handlebars,mustache,baiduTemplate,velocity,underscore*//*做数据缓存*/var getData = function (callback) {/*缓存了数据*/if(window.data){callback && callback(window.data);}else {/*1.获取轮播图数据*/$.ajax({type:'get',url:'js/data.json',/*设置同步执行*//*async:false,*//*强制转换后台返回的数据为json对象*//*强制转换不成功程序报错，不会执行success,执行error回调*/dataType:'json',data:'',success:function (data) {window.data = data;callback && callback(window.data);}});}}var render = function () {getData(function (data) {/*2.根据数据动态渲染 根据当前设备 屏幕宽度判断 */var isMobile = $(window).width() < 768 ? true : false;//console.log(isMobile);/*2.1 准备数据*//*2.2 把数据转换成html格式的字符串*//*使用模版引擎：那些html静态内容需要编程动态的*//*发现：点容器 图片容器 新建模版*//*开始使用*//*<% console.log(list); %> 模版引擎内不可使用外部变量 */var pointHtml = template('pointTemplate',{list:data});//console.log(pointHtml);var imageHtml = template('imageTemplate',{list:data,isMobile:isMobile});//console.log(imageHtml);/*2.3 把字符渲染页面当中*/$('.carousel-indicators').html(pointHtml);$('.carousel-inner').html(imageHtml);});}/*3.测试功能 页面尺寸发生改变事件*/$(window).on('resize',function () {render();/*通过js主动触发某个事件*/}).trigger('resize');/*4.移动端手势切换*/var startX = 0;var distanceX = 0;var isMove = false;/*originalEvent 代表js原生事件*/$('.wjs_banner').on('touchstart',function (e) {startX = e.originalEvent.touches[0].clientX;}).on('touchmove',function (e) {var moveX = e.originalEvent.touches[0].clientX;distanceX = moveX - startX;isMove = true;}).on('touchend',function (e) {/*距离足够 50px 一定要滑动过*/if(isMove && Math.abs(distanceX) > 50){/*手势*//*左滑手势*/if(distanceX < 0){//console.log('next');$('.carousel').carousel('next');}/*右滑手势*/else {//console.log('prev');$('.carousel').carousel('prev');}}startX = 0;distanceX = 0;isMove = false;});
}
var initMobileTab = function () {/*1.解决换行问题*/var $navTabs = $('.wjs_product .nav-tabs');var width = 0;$navTabs.find('li').each(function (i, item) {var $currLi = $(this);//$(item);/** width() 内容* innerWidth() 内容+内边距* outerWidth() 内容+内边距+边框* outerWidth(true) 内容+内边距+边框+外边距* */var liWidth = $currLi.outerWidth(true);width += liWidth;});console.log(width);$navTabs.width(width);/*2.修改结构使之区域滑动的结构*///加一个父容器给 .nav-tabs 叫 .nav-tabs-parent/*3.自己实现滑动效果 或者 使用iscroll */new IScroll($('.nav-tabs-parent')[0],{scrollX:true,scrollY:false,click:true});
}
固定导航组件(Affix)
<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">...
</div>
.wjs_nav {margin-bottom: 0;border: none;border-bottom: 1px solid #ccc;/*固定导航样式*/z-index: 999999;background: #fff;/*设置宽度，默认为版心宽度*/width: 100%;border-radius: 0;/*bootstrap自动添加fix后未设置top*/top: 0;
}
常用类
pull-left左浮动pull-right右浮动text-right文字靠右- 阴影
box-shadow
/*
参数1：x轴的偏移
参数2：y轴的偏移
参数3：阴影的模糊度
参数4：阴影的延伸（为实体颜色）
参数5：阴影的颜色
参数6：内阴影
*/
box-shadow: 0 -2px 2px #d8d8d8 inset;
bootstrap常用类
| 类名 | 说明 |
|---|---|
.container
|
响应式容器 |
.row
|
行 |
.col-*-*
|
列 |
.col-*-offset-*
|
列偏移 |
.col-*-pull-*
|
|
.col-*-push-*
|
|
pull-left*
|
左浮动 |
pull-right
|
右浮动 |
text-center
|
文字居中 |
text-left
|
文字左对齐 |
text-right
|
|
hidden-xs
|
超小屏隐藏 |
hidden-sm
|
|
hidden-md
|
|
hidden-lg
|
常用伪类选择器
p:first-of-type{}
p:last-of-type{}
p:nth-of-type(n){}
p:nth-last-of-type(n){}
p:first-child{}
补充
- css3规范
:伪类::伪元素
相关资源
- ui框架：
bootstrap，妹子UI，jqueryUI，easyUI，jqueryMobile，mui，framework7 - 移动端的UI框架：
bootstrap,jqueryMobile,mui,framework7 - 模板引擎：artTemplate,handlebars,mustache,baiduTemplate,velocity,underscore
源码https://gitee.com/dev_gitee/WeiJinSuo
移动Web开发--学习笔记三 响应式项目实战（微金所）相关推荐
- 【Vue3】学习笔记-reactive响应式
[Vue3]学习笔记-reactive响应式 用ref 设置响应式对象 用reactive 设置响应式对象 总结 用ref 设置响应式对象 JS中设置对象 import { ref } from &q ...
- Polyworks脚本开发学习笔记(三)-TREEVIEW进阶操作
Polyworks脚本开发学习笔记(三)-TREEVIEW进阶操作 移动/交换对象的顺序 移动对象的顺序 TREEVIEW FEATURE MOVE ( 1,2 ) 将索引号为1和2的特征交换位置 T ...
- 【web开发学习笔记】Structs2 Result学习笔记（三）带參数的结果集
Result学习笔记(三)带參数的结果集 第一部分:代码 //前端 <head> <meta http-equiv="Content-Type" content= ...
- Web 开发学习笔记(1) --- 搭建你的第一个 Web Server
简介 Flask 是一个轻量级的 Web 框架, 如果要学习 Web 开发, Flask 非常适合作为我们学习的起点. 通过接下来的这一些列的博客, 我们将学习如何利用 Flask 以及其他工具, 搭 ...
- Web 开发学习笔记——关于互联网和互联网应用
作为一名前端开发者,了解互联网和浏览器的相关知识是极其有必要的,因为我们所有开发出来的网站全部以互联网和浏览器为基础的. 关于互联网 互联网到底是什么?对于网站普通用户来说,它可能就是宽带.购物网站. ...
- java web前端模版,以Eclipse替核心搭建JAVA WEB开发环境（三）-模板项目Archetype
以Eclipse为核心搭建JAVA WEB开发环境(三)-模板项目Archetype 本篇介绍创建archetype,用于创建WEB项目的模板. 1.创建一个Dynamic Web Project. ...
- BootStrap响应式项目实战之世界杯网页设计
视频 BootStrap实战 目标 响应式布局复习 HTML5的复习 CSS3的复习 了解BootStrap 一.复习 响应式布局:页面可以随着设备的变化而动态改变. 淘宝:pc端一套页面:不能随 ...
- 学习笔记之《Android项目实战——手机安全卫士》
[Android项目实战-手机安全卫士] 目标:快速积累开发经验,具备中级Android工程师能力. 如遇到难以理解的逻辑或功能,可以先将程序打断点观察程序的执行逻辑. 第一章项目简介:欢迎界面.主界 ...
- Vue学习记录三 --- vue的项目实战
一.常规项目配置安装: 1.安装vue-router路由: cmd下在当前项目目录下执行 : npm install vue-router --save-dev 如果因为依赖安装失败,则执行 : np ...
最新文章
- DialogFragment 全屏显示
- Py之basemap：python库之basemap的简介、安装、使用方法之详细攻略
- 机器学习中的逻辑回归
- 基于redis 内存数据库简单使用
- MOXy的对象图– XML和JSON的输入/输出局部模型
- linux如何记录测试时长,如何测试Linux命令运行时间？
- 实时计算pv/uv Demo
- Error:Connection activation failed: No suitable device found for this connection
- 如何执行静默（无人参与）Java 安装？
- 看章立民的sql server 2000程序设计
- 10.数据结构 --- 内部排序
- cl.exe nmake.exe
- 7教程统计意义_SPSS混合线性模型在生物医药统计中的应用——杏花开生物医药统计...
- win7怎么把计算机放到桌面6,手机投屏到电脑win7最简单具体操作步骤
- Redis复习记录（二）：数据类型与基本操作
- 关键字深度剖析,集齐所有关键字可召唤神龙？【完】
- 自建游戏加速器教程（国内玩家联机）
- 纽扣电池命名（常规表述）
- 知识见解关于高斯定理
- 微信小程序 如何上传音视频到百度云Bos cloud BCE