移动开发-bootstrap

编码规范

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用于定义一个固定宽度且居中的版心


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-* 类可以将列向右侧偏移


列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序。

push往右推
pull往左拉(往回拉)

      
        
9
3

隐藏类 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的自定义属性,哈哈


a链接控制点
div控制点
内容内容内容
  • 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">
  
ol>
<div class="carousel-inner" role="listbox">
  
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>

你可能感兴趣的:(前端,js,移动端,bootstrap)