Bootstrap应用

什么是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。GitHub上介绍 的...
    凛0_0阅读 7,930评论 3 183
  • CSS全局样式 概览 移动设备优先 布局容器 1、container类用于固定宽度并支持响应式布局的容器 2、co...
    VEN_64d6阅读 234评论 0 1
  • 一、响应式网页 一个页面,可以根据浏览设备的不同,以及特性的不同,而自动改变布局、大小等 响应式网页的三个特征1)...
    挣脱吧小白阅读 238评论 0 3
  • 特点 跨设备、跨浏览器 响应式布局 提供了全面的组件 内置jQuery插件 支持HTML5、CSS3 支持LESS...
    osoLife阅读 338评论 0 2
  • 医院,还需等上三四个小时。 看着滑梯边上正在玩耍的子淇和坐在花坛边犹如瘟鸡,两眼茫然的pp,我知道我这么想不对,可...
    小耳木阅读 22评论 0 0