bootstrap jquery 插件 简单总结

主要分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分
下面是内置的jQuery插件  通过data API 调用   因此不需要写js 代码
也可以通过js运行,因此都会有一些插件运行或完成后触发的事件,和操作插件的方法
要注意引用的bootstrap版本 和 所用的组件,插件的格式是否一致,用官网的对应格式。
一般都要在外面的div 定义一个id 和插件       内容定义data-target为id 的值

--------------------- panel----------------
panel-gruop
 panel panel-default
  panel-heading
    panel-title    在h1-6中使用
  panel-body
  panel-footer
panel-primary、panel-success、panel-info、panel-warning、panel-danger
可在panel-body 下面加表格,还有列表,会有分割线。没有列表,则没有分割线。

------------------collapse---------------
通过data属性来调用,
panel-collapse    在折叠内容中
.collapse.in   初始显示内容。默认是打开的
data-taggle  使用插件
data-parent  折叠面板 每个组件要引用, 可以不用,则是一个简单的组件
data-target or href  子组件的id值

----------------carousel---------------
data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。
carousel-indicators 指标 要有acitve 属性,否则轮播不会出现
    data-target 为id值   使用 data-slide-to 来向轮播传递一个原始滑动索引
carousel-inner 项目
   img 
  carousel-caption 添加内容
carousel-control 导航
   carousel-control-prev
   carousel-control-next 
       carousel-control-prev-icon
      carousel-control-prev-icon   图标
   属性 data-slide 接受关键字 prev 或 next,用来改变幻灯片相对于当前位置的位置。
    href=id   sr-only  属性

-----------------tab----------------
 data-toggle="tab"
 data-toggle="pill"    到锚文本链接中。 
nav 和 nav-tabs   类到 ul    标签样式,
nav 和 nav-pills 类到 ul    胶囊式样式
tab-content 
tab-pane  fade in active   id  标签页   淡入淡出  初始内容  显示标签页  对应a的href

----------------dropdown----------------
可用在导航栏navbar 标签页nav  中 
dropdown
  id 呼应下面的menu    
  dropdown-toggle 属性要有
  data-toggle="dropdown"
  caret
   dropdown-menu  aria-labelledby=id  role=menu

-----------------tooltip---------------
a 标签中使用 
data-toggle="tooltip"
title="" 提示内容
data-placement  位置
需要通过jquery来启用
$function(){ $("[data-toggle='tooltip']").tooltip(); });

------------------navbar----------------
navbar navbar-default
navbar-header
navbar-title
navbar-brand

------------------nav--------------------
.nav nav-tabs 标签页
.nav nav-pills   胶囊式标签页
.nav nav-pills nav-stacked   胶囊式标签页以垂直方向堆叠排列的
.nav nav-tabs  dropdown 下拉菜单
 
-----------------list-------------------
list-group  添加在 ul 中
list-group-item 添加在 li 中 li 可用 a 替代
list-group-item-heading 
list-group-item-text
 badge 添加徽章  span 中

-----------------pagination  pager --------------
pagination 在 ul 中
« 左箭头
» 右箭头
disabled  active  不可用 可用
pagination-lg -sm 大小
.pager   一个简单的分页链接,链接居中对齐。
.previous     .pager 中上一页的按钮样式,左对齐
.next         .pager 中下一页的按钮样式,右对齐

---------------input-group-----------
在form里面
input-group
span 中使用 input-group-addon 来增加内容  
input text  可放在span 前后 ,form-control  属性  placeholder 设置初始显示内容
-lg -sm 大小
checkbox  radio  插在span 里面
button按钮  按钮可以设置属性 放在span 里面  注意 不再是input-group-addon  
 而是 input-group-btn
可在按钮中加下拉菜单  class  =dropdown-toggle和data-toggle =dropdown属性 
也可以分开,在下面在定义一个按钮

---------------插件方法的实现--------------
定义一个按钮,可以是class (.)或者id(#) 
定义一个组件,或插件 id 或者data-target
定义一个click函数,写入插件的方法,点击id or class 按钮时触发id or data-target的方法,
来达到一些操作。
例:
$(".start-slide").click(function(){
            $("#myCarousel").carousel('cycle');
        });

$("#buttonleave").click(function(){
            $("#leaveform").css("display","block")
            $("#backform").css("display","none")
        })


 

猜你喜欢

转载自blog.csdn.net/qq_42114918/article/details/83050915