前端学习_web移动布局 _bootstrap布局

前端学习——web移动布局—bootstrap布局

1. 响应式布局容器

响应式布局需父级做为布局容器配合子级元素来实现变化效果。
在不同屏幕下，通过媒体查询改变布局容器的大小，再改变里面子元素的排列方式和大小。
从而实现不同屏幕下不同的页面布局。

通常父容器版心的尺寸划分

• 超小屏幕（手机，小于 768px）：设置宽度为 100%
• 小屏幕（平板，大于等于 768px）：设置宽度为 750px
• 中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
• 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

Bootstrap简介

网站：http://bootstrap.css88.com/

使用方法：创建bootstrap文件夹结构，创建骨架引入相关样式文件

直接拿Bootstrap 预先定义好的样式来使用

修改Bootstrap 原来的样式，注意权重问题

1. bootstrap布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 或者.container-fluid 容器，它提供了两个作此用处的类。

.container（响应式布局样式 不需要再写媒体查询）

• 大屏 ( >=1200px) 宽度定为 1170px
• 中屏 ( >=992px) 宽度定为 970px
• 小屏 ( >=768px) 宽度定为 750px
• 超小屏 (100%)

.container-fluid（流式布局 百分比布局 适合单独的移动端页面布局）

可以定义多个container。

2. bootstrap栅格系统

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，自动分列，最多12列。

• 类前缀	含义
  xs	超小屏幕
  sm	小屏幕
  md	中等屏幕
  lg	大屏幕

• 列总数大于 12份时，超过的列所在的元素将被另起一行

• 每一列默认有左右15px的 padding，可以自己去除

• 可以同时为一列指定多个设备的类名，以便划分不同份数 例如 class=“col-md-4 col-sm-6” 意思为中等屏幕每个盒子占用4份，小屏幕每个盒子占用6份

  栅格嵌套

  简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-*元素内。

  元素内。

  <!-- 列嵌套 -->
   <div class="col-sm-4">
      <div class="row">
           <div class="col-sm-6">小列</div>
           <div class="col-sm-6">小列</div>
      </div>
  </div>
  

  列偏移

  使用 .col-md-offset-* 类可以将列向右侧偏移多少份。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。

   <!-- 列偏移 -->
    <div class="row">
        <div class="col-lg-4">1</div>
        <div class="col-lg-4 col-lg-offset-4">2</div>
    </div>
  
  

  列排序

  通过使用 .col-md-push-* （推 从左往右推）和 .col-md-pull-* （拉 从右往左拉）类改变列的顺序。

   <!-- 列排序 -->
    <div class="row">
    	//将左侧盒子推8份到右边
        <div class="col-lg-4 col-lg-push-8">左侧</div>
        //将右侧盒子拉4份的距离到左边
        <div class="col-lg-8 col-lg-pull-4">右侧</div>
        
    </div>
  

  响应式工具

  为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

  

  visible功能与hidden正好相反，在设定的样式下才进行显示。

  ​

  注：

  1.container宽度修改

  假设设计图是 1280的宽度， 而Bootstrap 里面 container宽度 最大为 1170px，则需要手动改container宽度

   /* 利用媒体查询修改 container宽度适合效果图宽度  */
    @media (min-width: 1280px) { 
      .container { 
  	width: 1280px; 
       } 
     }
  

  2.更多用法在bootstrap手册中进行阅读

  ​

  ​