主要分为 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")
})