Bootstrap应用

2017-02-17 本文已影响0人 lililifeng

什么是Bootstrap？

bootstrap是一个html/css/js框架，适用于移动设备优先的响应式网页

HTML:为H5扩展了一些自定义属性data-xx
CSS: CSS Reset + 几千个class
JS : 基于jQuery提供了十几个插件函数

bootstrap分为五个部分：

起步stratup

全局css样式

按钮
bootstrap中常用的五种颜色

        红色->危险
        绿色->成功
        黄色->警告
        浅蓝色->信息
        深蓝色->基础的

     bootstrap中常用的四个大小

        btn-lg -》大
        btn-md -》中
        btn-sm -》小
        btn-xs -》最小

     块级按钮

        btn-block

     调整按钮的位置

        pull-right ->右浮动
        pull-left  ->左浮动

图片
img-rounded 圆角
img-circle 圆形
img-thumbnail 缩略图
img-responsive 图片支持响应式布局

排版和代码
文本颜色

        text-danger
        text-success
        text-warning
        text-info
        text-primary

       背景颜色

        bg-danger
        bg-success
        bg-warning
        bg-info
        bg-primary

       文本对齐方式
            
         text-left
         text-right
         text-center
         text-justify

       文本对齐方式

         text-lowercase
         text-uppercase
         text-capitalize

列表
list-unstyled 去掉列表项样式
list-inline 将所有元素放在同一行

表格
table-bordered 带边框的

       table-responsive 响应式表格，注意，使用在table的父元素上，而不是table上

       table-striped 隔行变色的表格
       table-hover 带悬停效果的表格

栅格布局系统

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

组件component

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

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

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

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

     5. 用法

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

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

2). bootstrap-组件-按钮组

      btn-group 水平按钮组
      btn-group-vertical 竖直按钮组
      btn-group btn-group-justified 水平且两端对齐的按钮组
      btn-group-lg
      btn-group-xm
      btn-group-xs
      
3). bootstrap-组件-下拉菜单 重点简单

     1. 必须html结构

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

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


4). 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

      ```
   -  插件plugin
   -  定制customize

Bootstrap应用

什么是Bootstrap？

猜你喜欢

热点阅读