Bootstrap笔记

1. .css样式
   背景：bg-danger bg-primary bg-info bg-success bg-warning
   文字：text-danger
   文字对齐方式：text-center/right/left
   浮动：pull-right/left 清除浮动 clearfix
   透明度：in
   显示/隐藏：show hide 弹出框 模态框
   固定定位：affix
   文字小写 text-lowercase
   大写： text-uppercase
   文字首字母大写：text-capitalize
   按钮：
   颜色：btn btn-default/danger/info
   大中小三种按钮尺寸 ：btn-lg、.btn-sm、.btn-xs???
   独占一行：btn-block
   链接：btn-link
   表格:table
   背景色：danger/primary/info/success/warning 直接写，

   响应式：table-reponsive
   table-bordered 为表格和其中的每个单元格增加边框
   table-hover 可以让中的每一行响应鼠标悬停状态
   table-striped可以给之内的每一样增加斑马条纹样式
   table-condensed 类，如果想为表格添加颜色可以选择情景类，
   表单：form-control
   form-group form-group-lg/sm/xs
   图片：
   响应式：img-responsive
   圆形：img-circle
   缩略图：img-thumbnail
   圆形 ：img-rounded（或者有圆角）

2. 组件

按钮组：
水平：btn-group
垂直：btn-group-vertical

表单组件：input-group
表单和文字：
表单和按钮： input-group-btn
表单和下拉菜单：
表单和按钮和下拉菜单：
表单和单选框（复选框） input-group-addon

导航条：navbar
navbar-default（默认）
navbar-form/nav/btn(与其相整合)
navbar-header navbar-brand(logo)
navbar-right/left
折叠：navbar-collapse
反色： navbar-inverse
固定定位：navbar-fixed-top/bottom
激活状态 active??

导航：nav
nav-tabs 表格式
nav-pills 胶囊式
nav-stacked 垂直的

面板：panel panel-info/success
panel-heading panel-title(面板标题)
panel-body
panel-footer

**well**:well
**巨幕**：比较醒目的区块  jumbotron
**徽章**：badge

分页：pagination
.←
»
glyphicon-arrow-right
glyphicon-chcvron-left
>
翻页：pager

media sm端变上图下文 图片较大时用
dl dd xs移动端变上图下文 图片较小时用
dl: dl-horizontal 水平排列
figure-thumbnail figcaption-caption 上图下文
media-list 多个媒体组件
缩略图：thumbnail

进度条：progress
滚动：active
条纹：progress-bar-striped
堆叠：progress-bar-info/danger/success/warning

列表组件：list-group list-group-item
路径导航（面包屑）:breadcrumb

模态框 model model-dialog model-content model-header model-body

轮播图： carousel id data-ride=”carousel” 属性用于标记轮播在页面加载时就开始动画播放。
data-pause=”hover” 鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。
图片 carousel-inner a#id
圆点 carousel-indicators data-target#id data-slide-to (0开始)
箭头 carousel-control data-slide (prev next)
箭头图标 glyphicon-chevron-right
方法
.carousel(‘cycle’) 开始轮播
.carousel(‘pause’) 停止轮播
.carousel(‘prev’) 上一张
.carousel(‘next’) 下一张
.carousel(索引值)//第几张轮播
事件
on.(‘slide.bs.carousel’,function(){}) 刚要轮播
slid.bs.carousel 完成轮播

1. 插件

---

下拉菜单/弹出框/提示工具
方法：.dropdown() /popover()/tooltip()[ 显示show 隐藏hide() 切换 toggle ]
事件：（给父级元素）
show.bs.dropdown 刚一显示触发事件
shown.bs.dropdown 显示完毕触发
hide.bs.dropdown 刚要隐藏
hidden.bs.dropdown 隐藏完毕

---

下拉菜单：
绑定功能：dropdown 绑定菜单加类名：dropdown-menu
父元素类名: dropdown 按钮类名: dropdown-toggle
dropdown-header

弹出框：
绑定功能：popover
绑定目标：data-target=”#id/.class”
弹出框标题 title
弹出框的内容 data-content
弹出框能解析标签 data-html true
弹出框触发条件 data-trigger 1.hover / 2.click(默认) / 3.focus
弹出框位置：data-placement
弹出框动画效果：data-animation true/false
弹出框延时：data-delay 1000 (毫秒)
js代码 （初始化） $(‘data-toggle=”popover”’).popover()

提示工具：
title:
绑定功能：tooltip
位置：data-placement
标题：title
初始化：$(‘data-toggle=”tooltip”’).tooltip()

警告框
alert alert-info/danger
关闭警告框 class=“close” data-dismiss=”alert”
alert-link 警告框里的链接
&times 错号
方法：alert(“close”) js关闭警告框（先点击click）
事件 ：close.bs.alert刚要关闭
closed.bs.alert 完全关闭

按钮：
单个切换 data-toggle=”button”
按钮组 多个切换 data-toggle=”buttons” 单选按钮消失 类似Tab切换
上传 （调用js代码） class名 data-loading-text=”文件正在上传ing…内容提示” 可不加
方法：
.button(“loading”) 正在加载
.button(“reset”) 重置

    $(function(){
          $("class名").click(function(){
          var filebtn=$(this).button("loading");//存起来
           setTimeout(function(){                                        filebtn.button("reset")//重置
                            },2000)
          })
  })   

栅格系统
容器 固定宽度 container
100% container-fulid
行:row
列:col-(xs sm md lg)-(1-12)
辅助工具 ：隐藏hidden-(xs sm md lg)
列偏移：col-(xs sm md lg)-offset-(1-12)
列排序：col-(xs sm md lg)-push-(1-12) 左
col-(xs sm md lg)-pull-(1-12) 右