1.声明
<!--h5文档申明-->
<!DOCTYPE html>
<!--文档语言申明 en zh-CN zh-tw -->
<html lang="zh-CN">
<head>
<!--文档编码申明-->
<meta charset="utf-8">
<!--要求当前网页使用浏览器最高版本的内核来渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<!-- 优先加载和浏览器解释 -->
<title>title</title>
<!-- Bootstrap 核心样式-->
<link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- html5shiv 和 respond 分别用来解决IE8版本浏览器不支持 H5标签和媒体查询的 不兼容问题-->
<!-- 警告：不能以file形式打开，本地打开。最好http://打开 ,respond.js使用的是异步加载，用到Ajax。不能跨域-->
<!-- 在 IE 9 一下引入-->
<!--[if lt IE 9]>
<script src="../lib/html5shiv/html5shiv.min.js"></script>
<script src="../lib/respond/respond.min.js"></script>
<![endif]-->
</head>
<!--响应式布局容器-->
<div class="container">
</div>
<!--流式布局容器-->
<div class="container-fluid">
</div>
3.container容器默认有15px的左右内间距 .row 填充父容器的15px的左右内间距 margin-left,margin-right -15px拉伸
- col-xx-xx：列样式
第一个：屏幕的大小
大屏设备 lg 大屏设备以上生效包含本身
中屏设备 md 中屏设备以上生效包含本身
小屏设备 sm 小屏设备以上生效包含本身
超小屏设备 xs 超小屏设备以上生效包含本身
第二个：每一行的分等份，默认分成12等份 ，数字代表的是占多少份 - <span class="wjs_icon wjs_icon_phone"></span>
/*自定义字体图标*/
/*1.通过@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');
}
/*4.怎么使用维护性更好*/
.wjs_icon{
font-family: wjs;
}
/* 字体图标 */
.wjs_icon_phone::before{
content: "\e908";
}
.wjs_icon_tel::before{
content: "\e909";
}
6.自定义导航栏
<!-- 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">
<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>
自定义修改 通过nav-default在bootstrap.css中来复制所有的样式，进行覆盖重写即可
1.拷贝源码的模块样式（media中也要）：准确定位到所有元素的选择器并且能保证优先级比源码高
2.针对功能进行覆盖：更改模块名称
3.但是有一些没有用到的选择器 代码的冗余
- 删除：降低代码量
- 保留：利于维护，方便产品跟新的时候不用再去修改代码
7.轮播图移动pc自动适应
.wjs_banner .pc_imgBox{
display: block;
height: 400px;
width: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.wjs_banner .m_imgBox{
display: block;
width: 100%;
}
.wjs_banner .m_imgBox img{
display: block;
width: 100%;
}
加载两套image，通过hidden-xx来设置显示隐藏，一次加载，但是耗费带宽，可以使用arttemplate动态获取数据渲染dom来实现
8.轮播图手势切换
/*移动端手势切换*/
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;
});
9.媒体查询简写
/* sm <768 */
.container {
width: 100%;
margin: 0 auto;
height: 1000px;
background: blue;
}
/* 768< xs <992 */
@media (min-width: 768px) {
.container {
width: 750px;
background: green;
}
}
/* 992<md<1200 */
@media (min-width: 992px) {
.container {
width: 970px;
background: red;
}
}
/* 1200<lg */
@media (min-width: 1200px) {
.container {
width: 1170px;
background: yellow;
}
}
10.Bootstrap定制
在官网Bootstrap定制中，修改各种less属性，然后一键生成自定义bootstrap.css
网友评论