BootStrap框架常用语法

文档结构

• 需要使用HTML5文档结构
• 移动设备优先 需要在头部增加标签

• 引入BootStrap

  • 引入css，当有自己的css文档，应引入bootstrap.css后再引入自己编写额css文件

  • 引入jQuery.js再引入bootstrap.js

  • 若要兼容IE浏览器，再引入两个js文件，使用IE的条件注释

        
      [两个js文件自己google]
    

bootstrap表单样式

    创建表单步骤：
    1.创建form标签并添加role="form"(语义化，给浏览器和搜索引擎看)
    2.控制分组，把标签和控件放在一个class为formgroup的div中
    3.给表单控件(input,textarea,select)添加类名form-control

内联表单

• 给form添加类名form-inline

水平表单

• 给form添加类名form-horizontal
• 给标签label添加类名control-label
• 配合bootstrap网格系统加入类名col-sm-1

其它表单控件

• form-control-static：静态表单控件，添加标签和类名，不必用input特定标签

• help-block：表单提示，添加标签和类名（同上）

• 提示图标：glyphicon glyphicon-ok（参照API文档） form-control-feedback

• 按钮：在使用其它类名前均加上基础类名btn

    基础类名：btn
    默认按钮样式：btn-default
    原始按钮样式：btn-primary
    成功按钮样式：btn-success
    链接式按钮：btn-link
    -----------------------
    设置按钮大小
    超大：btn-lg
    默认大小：btn-md
    小号：btn-xs
    btn-block：块级按钮，宽度取决于它父级的宽度的100%
    -----------------------
    设置按钮状态
    激活：active
    禁用：disable
  

bootstrap图片样式

响应式图片

• img-responsive（max-width:100%）

圆角图片

• img-rounded
• img-circle 圆形

缩略图

• img-thumbnail：添加一个内边距padding和边框

bootstrap辅助类

• 左浮动：pull-left
• 右浮动：pull-right
• 块级并居中：center-block 需要设置宽度，不能设浮动
• 强制元素显示/隐藏：show/hide
• 隐藏文字：text-hide

bootstrap表格样式

• 基础类名：table

    table-striped：斑马线表格
    table-bordered：带边框表格（给td加边框）
    table-hover：鼠标悬停高亮效果
    table-condensed：紧凑型表格（减少单元格padding值）
    table-responsive：响应式表格
  

bootstrap网格系统

原理

• 将容器平分为12份（12列）
  结合媒体查询做出响应式布局效果

用法

• 定义一个.row的容器作为行
  定义一个.col的容器作为列
  只有col才能作为row的直接子元素

                屏幕   屏幕尺寸
    .col-lg-*   超大   >1200px
    .col-md-*   中屏   >992px
    .col-sm-*   小屏   >768px 
    .col-xs-*   超小   <768px
    
    *代表1~12，每一个所占空间大小
  

列偏移&列排序

• 列偏移：不希望两列靠在一起，使用类名.col-*-offset-*
• 列排序：设置网格的排列顺序

  • .col-*-push-* 往右排

  • .col-*-pull-* 往左排

      通俗点就是往左移动和往右移动几个网格空间大小
    

bootstrap下拉菜单

• 创建一个类名为dropdown的div容器，用它来包裹整个下拉菜单

• 在dropdown容器内添加一个按钮button，作为父菜单

    定义类名为dropdown-toggle和自定义属性data-toggle="dropdown"
  

• 添加按钮里的小三角

    button添加类名为caret的span标签
  

• 创建下拉菜单

    添加一个ul无序列表，定义类名为dropdown-menu
  

• 菜单分割线

    添加一个空列表项li，类名为divider
  

bootstrap按钮组

    将几个按钮放入一个类名为btn-group的div中
    btn-group-vertical ☞ 垂直按钮组
    按钮组大 ☞ 给组别加类名btn-group-lg|md|sm|xs

• 嵌套按钮组

    在按钮组里面嵌套下拉列表
  

  • 在btn-group里面嵌套一个btn-group，将下拉菜单的父菜单按钮放置在嵌套的btn-group里
  • 给父菜单按钮添加类名dropdown-toggle和自定义属性data-toggle="dropdown"
  • 增加小三角图标

bootstrap导航

• 添加无序列表，用来作为导航

• 给列表添加类名 .nav ☞ 基础类名

    nav-tabs ☞ 表格式导航
    nav-pills ☞ 鼓囊式导航
  

• 给导航菜单项添加样式

    active ☞ 当前选中项
    disabled ☞ 禁用状态  
  

  ☞ 垂直式导航：给导航添加类名nav-stacked
  一般用于鼓囊式导航

  ☞ 导航二级菜单：在导航里添加下拉列表
  1. 给父级菜单添加类名dropdown
  2. 在此列表项里添加一个二级菜单列表项 .dropdown-menu
  3. 给此列表里面的a标签添加类名dropdown-toggle和自定义属性data-toggle="dropdown"

  ☞ tab标签页导航（选项卡功能）
  1. 添加一个表格式导航
  2. 给导航里面的a标签添加属性data-toggle="tab"的锚点链接地址
  3. 添加一个tab-content的div，在里面包含每一个要切换的tab标签页
  4. 给每一个标签页添加类名tab-pane和fade
  5. 默认显示项
  - 给导航列表项添加类名active
  - 给默认显示标签页添加类名active和in

  ☞ 导航条
  导航条头部里面可以放置导航，表单等
  1. 添加类名为navbar的div，用来制作导航条
  navbar-default ☞ 默认
  navbar-inverse ☞ 反色
  2. 在navbar里面添加页面标题
  添加一个类名为navbar-head的div，包含navbar-brand的a标签
  3. 在navbar里添加导航
  在普通导航基础上添加类名navbar-nav
  4. 导航里添加表单（搜索框）
  添加类名navbar-form
  PS：将搜索框和按钮用类名为input-group的div包起来，将搜索按钮放入类名为input-group-btn的span中，可实现搜索框和按钮连在一起的视觉效果
  5. 导航条里的浮动
  navbar-left ☞ 左浮动
  navbar-right ☞ 右浮动
  6. 导航条里面单独的按钮和链接
  按钮 ☞ navbar-btn
  链接 ☞ navbar-link和navbar-text
  普通文字 ☞ navbar-text
  7. 固定导航条
  navbar-fixed-top|navbar-fixed-bottom

  ☞ 响应式导航条
  1. 将nav导航用一个类名为collapse和navbar-collapse的div包起来
  2. 在navbar-header里添加类名为navbar-toggle和自定义属性为data-toggle="collapse"与data-target="#myNav（自己取名）"的按钮，在按标签里再加入汉堡按钮
  汉堡按钮：三个span标签，每个类名为icon-bar

bootstrap标签/徽章

• 通过span标签，添加类名label ☞ 基础类名

    label-default
    label-primary
    label-success
    ...
  

• 通过span标签，添加类名bodge

bootstrap内置组件

缩略图

• 使用网格系统实现

警示框

若在警告框里的文字加链接，则会覆盖原有警示框颜色，应该在a标签里加类名alert-link

• 给警示框加类名alert-dismissable
• 给警示框加类名为close的button标签
• 按钮上加自定义属性data-dismiss="alert"

进度条

• 外层div用来写灰色背景，类名progress

    加类名progress-striped为条纹进度条
    再加active类名为动态进度条
  

• 里层div显示进度，类名progress-bar ☞ 基础类名

    progress-bar-success
    ...
  

• 给progress-bar加行内样式width=百分比

bootstrap多媒体对象

• 加一个类名为media的div容器
• 在media的div中加一个类名为pull-left的a标签
• 在media的div中添加媒体描述，使用类名为media-body的div
• 给媒体body中的标题加media-heading类名

要放置多个媒体列表，则在所有列表外套一个类名为media-list的div
在media-dody中再写入media的div则为媒体嵌套

bootstrap列表组

• 基础列表组

    给无序列表或div加类名list-group，给li列表项加类名list-group-item
  

• 在列表组里加徽章，bodge，自动的右浮动

• 自定义列表

    li添加标题元素类名为list-group-item-heading放置标题和h标签
    再加入类名为list-group-item-text的p标签来放内容
  

bootstrap面板

基础面板

• 添加类名为panel的div容器，其中panel为基础类名
• 在panel里添加类名为panel-heading的div，在其中添加类名为panel-title的标题h1~h6
• 在panel里添加一个类名为panel-body的div放主内容，表格，表单等
• 在panel-body后添加类名为panel-footer的div，在其中添加普通文字

---

bootstrap插件

以下插件若通过js调用的话，均不必添加任何自定义属性

模态弹出框

通俗点就是alert弹出框，只不过样式花哨点

结构分析

.modal
    .modal-dialog
        .modal-content
            .modal-header
            .modal-body
            .modal-footer

模态框默认为隐藏状态

触发方式

• 给触发元素（按钮）添加属性data-toggle="modal"和data-target="#myModal（自己取名）"

• a标签加href="#myModal"和data-toggle="modal"

• js触发

  $('#myModal').modal();
  

    给模态框添加动画效果：在modal类名上的div中再增加fade类
    当data-backdrop="static"时，点击modal之外的地方不会使其消失
  

• 其他参数

    通过标签属性和js参数传递，通过js，则去掉data-*属性，只传入后面的名称$('#myModal').modal();只传入modal括号内就好
  

  • data-backdrop ☞ true|false ☞ 弹出框是否有大背景，默认true
  • data-keyboard ☞ true|false ☞ 按下Esc键是否可以关闭模态框
    需要同时设置属性tabindex="-1"

滚动监听

• 创建一个导航，添加id属性

• 给导航中的li中的a标签添加href值对应到每一个模块

• 给body添加属性data-spy="scroll"和data-target="#myNavbar（自己取名）"

    固定定位：在需要固定的元素加属性data-spy="affix"和data-offset-top="数值"
  

提示框

• 给需要提示的标签添加属性data-toggle="tooltip"，title="提示"
• 通过js调用提示框插件

  tooltip();
  

• 控制提示框的方向：添加属性data-placement="top|bottom|left|right"

弹出框

• 给需要弹出框的元素加属性data-toggle="popover"和data-content="弹出框内容"，title="标题内容"

警示框

• 创建一个警示框alert
• 在其中加入关闭按钮
• 用警示框外的按钮来关闭它
  • 在外部元素添加属性data-dismiss="alert"和data-target="#自己取名"

按钮

• 模拟单选按钮

  • 在btn-group中添加data-toggle="buttons"

• 模拟复选框

  • 同上，把input的type类型换成checkbox即可

• 按钮状态切换

  • 给button添加属性data-toggle="button"
  • 通过js调用

    $('selector').button('toggle');
    

• 加载状态按钮

    当点击时，按钮状态变为加载中，文本变成data-toggle-text的内容
  

  $('selector').button('toggle');
  $('selector').button('reset');//写入setTimeout函数中去
  

---

手风琴插件使用

• 添加一个类名为panel-group的div作为面板组的内容
• 在面板组里面添加面板，并且为面板定义头部和主体内容
• 在panel-title里添加一个a标签，加属性data-toggle="collapse"和data-parent="#面板组id"，href="#面板内容id"
• 将panel-body用类为panel-collapse和collapse的div包起来，并设置id
• 给指定面板加类名in，则为默认展开状态

轮播图插件使用

• 添加类名为carousel和slide的div，作为轮播图容器，设置id

• 添加计数器，默认样式为圆点，可用无序列表实现，为其添加类名carousel-indicators，为每个li加属性data-target="#容器id"和data-slide-to="0~n"，对应每一张图

• 添加一个类名为carousel-inner的div容器，用来存放图片，每张图放在类名为item的div中

• 给对应的item项和对应的圆点加active为默认显示的状态

• 添加两个类名为carousel-control的a链接，分别加类名left|right，在其中加属性data-slide="prev"或next，并设置href="#容器id"

• 给carousel加data-ride="carousel"使其自动轮播
  data-interval="毫秒数" ☞ 控制轮播图自动轮播切换间隔时间
  data-wrap="true|false" ☞ 是否循环轮播

    js控制轮播：
    $('selector').carousel();参数同上一条的data属性
    $('selector).carousel('pause|prev|next');暂停|上一张|下一张
    
    轮播事件：
    $('selector').on({
        'slide.bs.carousel':function(){
            ...     切换前事件
        },
        'slid.bs.carousel':function(){
            ...     切换后事件
        }
        })