NFH.012 - 响应式开发与Bootstrap框架应用（二）

---

2.17学习经验分享#

Bruce_Zhu于2017.2.17

---

一. bootstrap-全局css样式-栅格布局系统-重点难点

1. 所有的行必须放在容器中.container或container-fluid

   container

   screen>1200px(超大PC显示器-lg)  容器宽1170px
   screen>992px(普通PC显示器-md)   容器宽970px
   screen>768px(平板显示器-sm)     容器宽750px
   screen<768px(手机显示器-xs)     容器宽auto
   

   container-fluid: width:auto+befor+after

2. 分为多行，一行最多分为12列

3. 网页内容只能放在列中，不能放到行中

4. 可以在col中再嵌套row

5. col分为四大类 col-xs-i col-sm-i col-md-i col-lg-i， i值可以为1-12，值为某个列的宽度

6. 可以为一个列指定不同屏幕下的宽度

7. col-lg-i 大PC
   col-md-i 大PC 普通PC
   col-sm-i 大PC 普通PC 平板
   col-xs-i 大PC 普通PC 平板 手机

8. hidden-lg 大PC
   hidden-md 普通PC
   hidden-sm 平板
   hidden-xs 手机

9. 列的偏移问题

   col-xs-offset-i 大PC 普通PC 平板 手机
   col-sm-offset-i 大PC 普通PC 平板
   col-md-offset-i 大PC 普通PC
   col-lg-offset-i 大PC

一行中放一列
一行中放多列
一个行中指定不同宽度的列
一个列中指定不同屏幕下的不同宽度
不同屏幕下列宽的有效范围

10. 使用栅格系统实现响应式布局

11.补充.

1. web开发页面布局可以采用的方式

   1. 使用table做布局

      简单不易出错，但加载效率低

   2. HTML+CSS

      加载速度快，灵活，不易控制

3）使用bootstrap提供的栅格(grid layout)布局系统

    加载速度快，灵活，支持响应式功能，容易控制(有行和列的概念)

2. css相关知识

   1. 如何解决父元素的第一个子元素margin-top越界问题

      给父元素加border-top
      给父元素指定padding-top
      给父元素指定overflow:hidden
      让该元素不是第一个子元素
      为父元素添加前置内容生成-推荐使用
      .parent:before {
      content:" ";
      display:table;
      }

   2. 如果解决所有子元素浮动后，父元素高度变为0，且影响后续元素

      给父元素指定overflow:hidden
      为父元素指定高度
      为父元素添加后置内容生成-推荐使用
      .parent:after {

      content:"";
      display:table;
      clear:both;
      

      }

3. bootstrap系统中容器的特点

   宽度做了媒体查询
   添加了前置和后置内容生成，可以防止子元素的越界,浮动影响

二. bootstrap-全局css样式-表单-重点难点

1. bootstrap中的表单分为三种
   
  1) 默认表单

      


         

           

           
           

         
         
         //bootstrap指定：单选和双选按钮要放到label标签中

         

         
             我接受本站的使用条款
         
         

      

  2) 行内表单

     给表单添加form-inline即可

  3) 水平表单


     默认的栅格系统：container->row->col-*
     默认的栅格系统：form-horizontal->form-group->col-*

三. bootstrap-组件-图标字体

 1.glyphicons是一套收费的图标字体，提供了web/移动开发中常用的小图标

 2. bootstrap中可以免费使用这套字体中的250+个，以服务器端字体形式出现的

 3. 图标字体的本质不是图片，而是字体

 4. glyphicon 图标字体只能用于空元素-不能包含任何内容或子元素；

 5. 用法

    

    字体文件夹fonts必须跟html文件同级

四. bootstrap-组件-按钮组

  btn-group 水平按钮组
  btn-group-vertical 竖直按钮组
  btn-group btn-group-justified 水平且两端对齐的按钮组
  btn-group-lg
  btn-group-xm
  btn-group-xs

五. bootstrap-组件-下拉菜单 重点简单

 1. 必须html结构

    
 相对定义的父元素
      触发元素
      
隐藏元素
  绝对定位
    

 2. 
    divider 分割线
    dropdown-header 分类头