编码规范
1.1 HTML约定
- 在head中引入必要的CSS文件,优先引用第三方的CSS,方便我们自己的样式覆盖。
- 在body末尾引入必要的JS文件,
优先引用第三方的JS,
注意JS文件之间的依赖关系,
比如bootstrap.js依赖jQuery,
那就应该先引用jquery.js 然后引用bootstrap.js。
1.2CSS约定
- 除了公共级别样式,其余样式全部由 【模块前缀】
- 尽量使用【直接子代选择器】,少用间接子代 避免覆盖
2、 bootstrap常用样式
2.1 container类
- 响应式布局容器:.container 类用于固定宽度并支持响应式布局的容器。
- 流式布局容器:container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
.container用于定义一个固定宽度且居中的版心
<div class="topbar">
<div class="container">
<!--
此处的代码会显示在一个固定宽度且居中的容器中
该容器的宽度会跟随屏幕的变化而变化
-->
2.2 栅格系统
- Bootstrap中定义了一套响应式的网格系统,其使用方式就是将一个容器划分成12列,然后通过col-xx-xx的类名控制每一列的占比。
- 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
2.3.row类
- 清除父容器的默认的左右15px内边距
因为每一个列默认有一个15px的左右外边距,row类的一个作用就是通过左右-15px屏蔽掉这个边距
3.3 .col-**-*类
- col-*-类
- col-xs-[列数]:在超小屏幕下展示几份
- col-sm-[列数]:在小屏幕下展示几份
- col-md-[列数]:在中等屏幕下展示几份
- col-lg-[列数]:在大屏幕下展示几份
- xs : 超小屏幕 手机 (<768px)
- sm : 小屏幕 平板 (≥768px)
- md : 中等屏幕 桌面显示器 (≥992px)
- lg : 大屏幕 大桌面显示器 (≥1200px)
列偏移offset
使用 .col-md-offset-* 类可以将列向右侧偏移
<!--列偏移-->
<div class="col-md-9 col-md-offset-3"></div>
列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序。
push往右推
pull往左拉(往回拉)
<!--列排序-->
<div class="col-md-6">
<div class="row">
<div class="col-xs-9 col-xs-push-3">9</div>
<div class="col-xs-3 col-xs-pull-9">3</div>
</div>
</div>
隐藏类 hidden
hidden-xs,hidden-sm,hidden-md,hidden-lg在不同的屏幕下隐藏。
显示类visible
visible-lg
text-* 类
text-center 文本居中
text-left 文本左对齐
text-right 文本右对齐
pull-* 类
pull-left 左浮动类
pull-right 右浮动类
center-block 类 让一个固定宽度的元素居中。
导航条navbar
collapse 折叠条。手风琴
- data-toggle 声明当前的元素是折叠组件的控制点
- data-target 控制目标元素(相当于选择器)
这个格式data-就是HTML5的自定义属性,哈哈
<button data-toggle="collapse" data-target="#content">按钮控制点</button>
<a href="#" data-toggle="collapse" data-target="#content">a链接控制点</a>
<div data-toggle="collapse" data-target="#content">div控制点</div>
<div id="content">
内容内容内容
</div>
轮播图 carousel
- data-ride=”carousel” 声明是一个轮播图组件
- carousel 模块样式前缀
- slide 控制动画
3 字体图标
3.1 自定义字体图标
@font-face {
font-family: 'XXX';
src: url('../font/MiFie-Web-Font.eot') format('embedded-opentype'),
url('../font/MiFie-Web-Font.svg') format('svg'),
url('../font/MiFie-Web-Font.ttf') format('truetype'),
url('../font/MiFie-Web-Font.woff') format('woff');
}
1.6 underscoreJS
1.6.1 _.template
<ol class="carousel-indicators">
<!--渲染的HTML字符串-->
</ol>
<div class="carousel-inner" role="listbox">
<!--渲染的HTML字符串-->
</div>
/*取到模版当中的字符串*/
var pointTemplateStr = $('#point_template').html();
var imageTemplateStr = $('#image_template').html();
/*转化成模版函数*/
var pointTemplate = _.template(pointTemplateStr);
var imageTemplate = _.template(imageTemplateStr);
/*传入数据 解析成 html 字符*/
var pointHtml = pointTemplate({model:data});
var imageHtml = imageTemplate({model:data,isMobile:isMobile});//我们只需要再加一个属性
/*把html字符串渲染在页面当中*/
$('.carousel-indicators').html(pointHtml);
$('.carousel-inner').html(imageHtml);
<!--点模版-->
<script type="text/template" id="point_template">
<%_.each(model,function(obj,i){%>
<li data-target="#carousel-example-generic" data-slide-to="<%=i%>" class="<%=(i==0?'active':'')%>"></li>
<%})%>
</script>
<!--图片模版-->
<script type="text/template" id="image_template">
<%_.each(model,function(obj,i){%>
<div class="item <%=(i==0?'active':'')%>">
<% if(isMobile){ %>
<a href="#" class="m_imgBox">
<img src="<%=obj.img%>" alt=""/>
</a>
<%} else {%>
<a href="#" class="pc_imgBox" style="background-image:url(<%=obj.bac%>)"></a>
<%}%>
</div>
<%})%>
</script>