Bootstrap的一些应用

一、Bootstrap
1、Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架，是一个html/css/js框架。

 V2: 面向PC进行了样式设定，同时兼顾pad和phone
 V3: 面向Phone进行样式设定，同时兼顾了PC

2、Bootstrap基本模版

二、bootstrap-栅格布局系统

1. 所有的行必须放在容器中.container或container-fluid
   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

三、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结构

相对定义的父元素
触发元素

隐藏元素

绝对定位

divider： 分割线
dropdown-header： 分类头

七、bootstrap-组件-导航 重点简单
1. 标签页导航

• Home


• Profile


• Messages

    data-toggle="tab" 用于切换
2. 胶囊式导航 用于ul
    

      
Home
      
Profile
      
Messages
    
3. 两端对其的导航 nav nav-tabs nav-justified
4. 竖直放置的胶囊导航 nav nav-pills nav-stacked