跳至主要內容

bootstrap

Emilia Zhen大约 2 分钟webApp

兼容

  • 要兼容media query需要引入respond.js

  • 为了让ie浏览器运行最新的渲染模式需加入

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

布局容器

  • container
当前视口宽度样式宽度
0-768100%
768-992750px
992-1200970px
>12001170px
  • container-fluid 宽度width:100%;

栅格系统

默认将当前12等分

  1. 添加布局容器container/container-fluid
  2. 在布局容器中添加 row
  3. 在 row 中添加子元素设置栅格样式 col-xs-3 col-sm-6 col-md-8 col-lg-12
  4. 在子元素中添加具体内容

offset

偏移距离以栅格作为单位，实际是通过margin-left属性来实现 col-sm-offset-2push右推 pull左拉 通过定位来实现的 col-md-pull-3;

less

动态的样式表语言

注释

//在解析的 css 中看不到 /* */在解释的 css 中可以看到

变量

@aa: red;

混入

.active(@bb:red) {
  color: @bb;
}
.active2 {
  .active(green);
}

嵌套

.jd_layout {
  color: @aa;
  .jd_search {
    width: 100%;
  }
  a {
    color: blue;
    &:hover {
      color: red;
    }
  }
}

导入

@import 'aa.less'; //@import + 路径
p {
  color: @bb;
}

bootstrap 轮播

w<768px 使用 img标签 宽度 100%;
w>=768px 使用背景图片 background-image; background-size:cover; 更改 data-target 和 href data-traget="#id"控制为#id 的容器，herf="#a"锚连接
在 div 行内设置 data 属性 data-small-image="";data-large-image=""; 背景图在移动端隐藏 img 标签图片在非移动端隐藏
因用响应式工具会浪费资源，需同时加载两个端的所有图片，需用 js 根据窗口大小判断使用背景图还是 img 标签，在 div 的 data 中获取图片地址

/*获取当前所有item*/
var items = $('.carousel-inner .item')
/*监听屏幕的大小改变*/
$(window)
  .on('resize', function () {
    /*1.获取当前屏幕的宽度*/
    var width = $(window).width()
    /*2.判断屏幕的宽度*/
    if (width >= 768) {
      /*说明非移动端*/
      /*为每一个item添加子元素--遍历*/
      $(items).each(function (index, value) {
        var item = $(this)
        /*当前自定义属性中 存储的图片路径*/
        var imgSrc = item.data('largeImage')
        /*添加非移动端的子元素*/
        item.html($('<a href="javascript:;" class="pcImg"></a>').css('backgroundImage', "url('" + imgSrc + "')"))
      })
    } else {
      $(items).each(function (index, value) {
        var item = $(this)
        var imgSrc = item.data('smallImage')
        item.html('<a href="javascript:;" class="mobileImg"><img src="' + imgSrc + '" alt="..."></a>')
      })
    }
  })
  .trigger('resize')
属性名说明
innerWidth();content+padding
outerWidth();content+padding+border
outerWidth(true);content+padding+border+margin

bootstrap 定制

em容器设置font-size对em会做相应的倍数
rem 容器设置font-size对rem没影响，html设置对rem有影响
利用媒体查询，设置在不同屏幕下html的font-size将屏幕设置相应的等分，算出每分等于多少px，在后面做布局设置，如每份32px设置margin:0 20px则margin:0 20/32rem;

$(function () {
  $(window)
    .on('resize', function () {
      /*1,获取屏幕的宽度*/
      var width = $(window).width()
      /*2.计算转换至*/
      var fontSize = (width / 640) * 100
      /*3.把值传给html*/
      $('html').css('font-size', fontSize)
    })
    .trigger('resize')
})

20px -> 20/100rem;

EmiliaZhen
Copyright © 2024 Emilia Zhen