bootstrap功能-栅格布局系统、组件1

一. 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

一行中放一列
一行中放多列
一个行中指定不同宽度的列
一个列中指定不同屏幕下的不同宽度
不同屏幕下列宽的有效范围
  1. 使用栅格系统实现响应式布局

10.补充.

  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. 默认表单

      <form>

      <div class="form-group">
      <label class="control-label"></label>

       <input class="form-control">
       <span class="help-control"></span>
      

      </div>

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

      <div class="checkbox">
      <label>
      <input type="checkbox">我接受本站的使用条款
      </label>
      </div>

      </form>

    2. 行内表单

      给表单添加form-inline即可

    3. 水平表单

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

三. bootstrap-组件-图标字体

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

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

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

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

 5. 用法

    <span class="glyphicon glyphicon-user"></span>

    字体文件夹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结构

    <div class="dropdown"> 相对定义的父元素
      <a data-toggle="dropdown">触发元素</a>
      <ul/div class="dropdown-menu">隐藏元素</ul/div>  绝对定位
    </div>

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

六. bootstrap-组件-导航 重点简单

1. 标签页导航 

    <ul class="nav nav-tabs">
        <li  class="active"><a href="#">Home</a></li>
        <li ><a href="#">Profile</a></li>
        <li ><a href="#">Messages</a></li>
    </ul>
   
    data-toggle="tab" 用于切换
2. 胶囊式导航 用于ul

    <ul class="nav nav-pills">
        <li  class="active"><a href="#">Home</a></li>
        <li ><a href="#">Profile</a></li>
        <li ><a href="#">Messages</a></li>
    </ul>
3. 两端对其的导航 nav nav-tabs nav-justified

4. 竖直放置的胶囊导航 nav nav-pills nav-stacked

推荐阅读更多精彩内容