bootstrap笔记

boostrap 学习笔记

---

目录

• • 要求
  • 使用
  • 栅格
  • 表格
  • 按钮
  • 图片
  • 清除浮动
  • 下拉菜单
  • 表单
  • 输入框组
  • 导航
  • 标签
  • 徽章
  • 缩略图
  • 进度条
  • js插件

要求

• 引入前必须有jQuery1.9.0+
• 必须是html5模式
• 要使用移动设备时 必须引入

<meta name='viewport' content='width=device-width, initial-scale=1.0'>

使用

• 外部box类名 .container

栅格

• 外部box类名 .row
• 栅格就是将box分为12块相等宽度，然后根据这十二块布局
• col-md-4 表示此区域占 12/4 1/3的区域
• col-md-offset-4 表示此区域前面空 4格区域

表格

• 类名： .table
• .table-striped 斑马条纹
• .table-bordered 表格边框
• .table-hover 悬停状态
• 状态类 显示背景色.active .success .info .warning .danger
• 响应式表格.table-responsive 加在table外面的box上 ps(表格列数要足够多才起作用)

按钮

• 类名 .btn
• 样式： .btn-default .btn-success 等
• 大小： .btn-lg .btn-sm .btn-xs
• .btn-block 变为块级元素
• 属性： 禁止点击 disabled
• 那些标签都可以做按钮： （鼠标可以点击的） a input button
• 按钮组： .btn-group (外部box) (内部按钮必须有.btn) .btn-group-vertical 垂直按钮组
• 按钮工具框： .btn-toolbar （内部包含按钮组.btn-group）
• 按钮组嵌入下拉菜单：

图片

• 形状： 类名 .img-rounded 圆角 .img-circle 圆 .img-thumbnail 边框（背景透明的显示不出来）
• 响应式图片 .img-responsive

清除浮动

• .clearfix

下拉菜单

• 外部box类名 .dropdown 向上.dropup
• 按钮属性 data-toggle='dropdown'
• 下拉列表类名 .dropdown-menu
• 下拉列表位置类名 .dropdown-menu-right
• 列表标题 .dropdown-header
• 列表分割线 .divider
• 禁用菜单项 .disabled (仅是样式 实际需要js控制)

表单

• 以 label input 标签为一组外部box类名 .from-group 内部表单标签类名 .from-control
• 表单嵌入输入控件 .input-group
• 整个表单水平排列(内联排列)： 给from 添加类名 .from-inline
• 表单水平排列： from标签添加类名 .from-horizontal并且 label和input 标签分别使用栅格 比如.col-sm-2 .col-sm-10然后给label标签添加类名.control-label 使其靠近输入框
• .form-control-static 使label标签旁边的文本对齐
• 加入图标： .has-feedback一组表单外部Box input后面添加 span 标签 添加类名 form-control-feedback 添加图标类名glyphicon glyphicon-ok
• 表单描述 .help-block 比如p标签

输入框组

• 外部box类名: .input-group

• 输入框组格式 比如

  <div class="input-group ">
  <div class="input-group-addon">+</div>
  <input type="text">
  <div class="input-group-addon">-</div>
  </div>
  

导航

• 面包屑导航 ol li ol 标签类名 .breadcrumb
• 分页导航 ul li ul 标签类名 .pagination **状态 li .active 禁用 .disabled

标签

• 类名： .label

徽章

• 类名： .badge

缩略图

• 外部类名： .thumbnail 如果a标签里有图片 则有hover效果
• 也可以图文并存

进度条

• 外部box: .progress 内部显示box .progress-bar
• 进度条叠加： 内部box加class .progress-bar-success

js插件

弹框

• 点击按钮属性： data-toggle='modal'
• 点击按钮选择显示那个弹框属性： data-target='弹框id'
• 弹框类名： modal fade
• 弹框基本dom结构：

<div class="modal fade" >
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <!--- 头部内容 --->
      </div>
      <div class="modal-body">
        <!--- 中间内容 --->
      </div>
      <div class="modal-footer">
        <!--- 底部内容 --->
      </div>
    </div>
  </div>
</div>

• 关闭弹框属性 data-dismiss="modal"
• 弹框中的 .fade 控制弹出动画
• js控制弹框打开关闭 （按钮此时不需要属性data-toggle='modal' 和data-target='弹框id'）
  
  • 手动打开或者关闭 按钮.modal('toggle')
  • 手动打开 按钮.modal('show')
  • 手动关闭 按钮.modal('hide')
• js控制相关事件
  
  • 弹框展示前： show.bs.modal
  • 弹框展示后： shown.bs.modal
  • 弹框隐藏前： hide.bs.modal
  • 弹框隐藏后： hidden.bs.modal
  • 远端数据加载完后： loaded.bs.modal

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

滚动监听

• 不够优化（可自己写）

标签页

• 标签导航类名： .nav-tabs (可以结合导航使用)
• 标签导航内a标签href='#对应id' (对应展示页) 属性 data-toggle="tab" .active默认显示
• 标签内容box外部类名： .tab-content
• 每个标签内容的的类名： .tab-pane id='对应导航' .active默认显示 .fade .in 切换淡入动画

工具提示

• 需要引入bs中 docs.min.js 文件 （官方bug v3.3.5）
• 外部box类名： tooltip-demo
• 属性： ata-toggle="tooltip"
• 出现位置： data-placement="left"

幻灯片

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 <!--- 幻灯片图片 --->
 <div class="carousel-inner" >
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
      图片描述
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
      </div>
    </div>
  </div>
  <!-- 指示灯 -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <!-- 左右 -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>