响应式项目实战(微金所)
响应式项目开发流程
- 选择一种屏幕格式进行开发
- 相应功能模块完成后,测试是否响应式效果
- 确保响应式效果满足要求
- 进行下一个功能模块开发
使用自定义字体图标
创建自己的字体图标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组件(折叠)
- 类名:
collapsed
class
只有样式效果 - 属性:带
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元素,通过P找到父元素,通过父元素找子元素当中类型为P的,然再去找第几个。
p:first-of-type{}
p:last-of-type{}
p:nth-of-type(n){}
p:nth-last-of-type(n){}
- 如果使用的是
p:first-child
,找到P元素,通过P找到父元素,通过父元素找所有的子元素,找第一个元素,匹配判断类型(如果不是无效选择器)
p:first-child{}
补充
- css3规范
:
伪类::
伪元素
相关资源
- ui框架:
bootstrap,妹子UI,jqueryUI,easyUI,jqueryMobile,mui,framework7 - 移动端的UI框架:
bootstrap,jqueryMobile,mui,framework7 - 模板引擎:artTemplate,handlebars,mustache,baiduTemplate,velocity,underscore