Bootstrap是Twitter推出的一款简洁、直观、强悍的前端开发框架。
Bootstrap基于 HTML、CSS、JAVASCRIPT。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。
~~~引入bootstrap的css和页面自身的css
~media="screen" //该样式表适用于屏幕类的设备
~~~设置视口
~~~让IE8支持HTML5标签和媒体查询
~~~导航和下拉列表
~ .navbar.navbar-inverse.navbar-fixed-top > nav.navbar-nav > .active
~ .dropdown > .dropdown-toggle + .dropdown-menu > li
~ .navbar-brand
~ .nav-header
~ .navbar-text
~~~浮动 pull-left pull-right
~~~ 轮播
~ .carousel.slide > ( ol.carousel-indicators > li + li.active ) + ( .carousel-inner > (.item.active > img.img-responsive + .carousel-caption) + .item ) + (.left.carousel-control > .icon-prev ) + ( .right.carousel-control > .icon-next ) )
~~~按钮
~ .btn.btn-success.btn-lg
按钮基础类 .btn
按钮类型： .btn-warning, .btn-success, .btn-error btn-primary btn-info
按钮大小： .btn-lg, .btn-sm, .btn-xs
~~~图标
~ .icon-prev, .icon-next
Large Desktops are everywhere
Mobile are outnumberings desktops
Enterprises are adopting Cloud Computing fast
~~~栅格系统
~ .container.responsive 容器 水平居中
~ .row 行
~ .col-lg-4 .col-md-4, .col-sm-4, .col-xs-4列
在现代 Web 开发中，有几个几乎所有的 Web 项目中都需要的组件。
Bootstrap 为您提供了所有这些基本的模块 - Grid、Typography、Tables、Forms、Buttons 和 Responsiveness。
此外，还有大量其他有用的前端组件，比如 Dropdowns、Navigation、Modals、Typehead、Pagination、Carousal、Breadcrumb、Tab、Thumbnails、Headers 等等。
有了这些，你可以搭建一个 Web 项目，并让它运行地更快速更轻松。
~~~ .table.table-bordered 表格 (.table-bordered:{border:#ddd})
~~~ .badge徽章 文本
~~~ 表单
~ .form-horizontal
>> Bootstrap 3 CSS 概览
> HTML 5 文档类型（Doctype）
> 移动设备优先
Bootstrap 3 默认的 CSS 本身就是对移动设备友好的。Bootstrap 3 的设计目标是移动设备优先，然后才是桌面设备。这实际上是一个非常及时的转变，因为现在越来越多的用户使用移动设备。
为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport 元数据标签，如下所示：
通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
> 响应式图片
通过添加 img-responsive class 可以让 Bootstrap 3 中的图片对响应式布局的支持更友好。让我们看看这个 class 包含了哪些 css 属性。其实质是为图片赋予了 max-width: 100%; 和 height: auto; 属性，可以让图片按比例缩放，不超过其父元素的尺寸。
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}
设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。
> 全局显示、排版和链接
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
a:hover,
a:focus {
color: #2a6496;
text-decoration: underline;
}
a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
> 避免跨浏览器的不一致
Bootstrap 3，就像它之前的版本，使用了 Normalize，以建立跨浏览器的一致性。
> Container
Bootstrap 3 的 container class 用于包裹页面上的内容。让我们一起来看看下面这个 class
.container {
margin-right: auto;
margin-left: auto;
}
通过上面的代码，把 container 的左右边距交由浏览器决定。
.container:before,
.container:after {
display: table;
content: " ";
}
这会产生伪元素。设置 display 为 table，会创建一个匿名的 table-cell 和一个新的块格式化上下文。:before 伪元素防止上边距崩塌，:after 伪元素清除浮动。
如果 conteneditable 属性出现在 HTML 中，由于一些 Opera bug，围绕上述元素创建一个空格。这可以通过使用 content: " " 来修复。
.container:after {
clear: both;
}
它创建了一个伪元素，并确保了所有的容器包含所有的浮动元素。
Bootstrap 3 CSS 有一个申请响应的媒体查询，在不同的媒体查询阈值范围内都为 container 设置了max-width，用以匹配网格系统。
>> Bootstrap 网格系统
自版本 2.3.2 起，Bootstrap 提供了两种类型的网格。默认的网格系统是 940px 宽和 12 列( 每格60px宽 margin-left:20px)。您可以添加响应式的样式表让它随着呈现的视口调整宽度为 724px 和 1170px。
这里还设有一个流动网格系统，它是基于百分比的，而不是基于像素的。且可被扩展为像默认固定网格一样具有响应性。
~~~流动网格布局 和 固定网格布局
Bootstrap 使用 CSS 的 class "row" 来创建水平行，使用 CSS 的 class "spanx"（x 的值从 1 到 12）来创建垂直列。通过这两个就可以创建一个三列的网格（每一列包含一些文本内容），HTML 如下所示
> 如何在固定网格中创建行
接下来，在我们继续其他实例之前，先来看看在固定网格中用来创建行和列的 CSS 规则。
.row {
margin-left: -20px;
*zoom: 1;
}
.row:before,
.row:after {
display: table;
line-height: 0;
content: "";
}
.row:after {
clear: both;
}
> 如何在固定网格中创建列
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
使用单独的 CSS 规则来设置列宽。具体如下面的表格所示
.span12 {
width: 940px;
}
.span11 {
width: 860px;
}
.span10 {
width: 780px;
}
...
> 添加响应性到默认网格
如果您想要给 Bootstrap 的默认网格添加响应性能，只需要在 HTML 文件的原生 CSS 后添加
默认网格系统发挥响应性有两个条件。当视口（网格渲染的可用空间）大于 1200px 时[通过 @media (min-width: 1200px) 获得]，当视口大于 768px 但小于 979px 时[通过 @media (min-width: 768px) 和 (max-width: 979px) 设置]。
> 偏移列：默认网格
偏移的宽度是在 Bootstrap CSS 中定义的。offset12 的最高左边距是 980px，offset1 的最低左边距是 100px。
> 嵌套列：默认网格
>> Bootstrap 布局
~~固定布局和流动布局 响应布局
> 固定布局
固定布局的目的是为网页或 app 创建一个 940 像素（默认）宽的布局。
> 流动布局
.container-fluid{
padding-left:20px;
padding-right:20px;
}
.row-fluid{width:100%}
.row-fluid .span3{width: 23.404255317%;}
>> Bootstrap 响应式设计
媒体查询（Media Queries）会先检测设备的视口大小，然后加载特定于设备的样式。
第一个区域以 '@media (max-width: 480px)' 开始，为最大宽度为 480 像素的设备设置样式。
第二个区域以 '@media (max-width: 767px)' 开始，为最大宽度为 767像素的设备设置样式。
第三个区域以 '@media (min-width: 768px) 和 (max-width: 979px)' 开始，为最大宽度为 768 像素和最大宽度为 979 像素的设备设置样式。
下一个区域是为最大宽度为 979 像素的设备设置样式。所以是以 '@media (max-width: 979px)' 开始。
最后两个区域分别以 '@media (min-width: 980px)' 和 '@media (min-width: 1200px)' 开始，前一个是为最小宽度为 980 像素的设备设置样式，后一个是为最小宽度为 1200 像素的设备设置样式。
所以，这样样式表的基本作用就是，通过使用 'min-width' 和 'max-width' 属性，来根据设备的最大宽度和最小宽度决定使用的样式。
Bootstrap 有几个实用的用于开发对移动设备友好的布局的类。这些类可在 'responsive.less' 上看到。
.visible-phone .visible-tablet .visible-desktop .hidden-phone .hidden-tablet .hidden-desktop
>> Bootstrap 排版
h1~h6, p, address, strong, small, blockquote, ul li, dl dt dd, ol li
ul.unstyled 无圆点
>> Bootstrap 表格
table.table > thead(tr > th + th ..) + tbody ( tr > td + td)
.table.table-striped ~~斑马线表格
>> Bootstrap 表单
四种表单布局 - 垂直(默认).form-vertical 搜索 内联 水平
.well ~~灰色背景的圆角容器
垂直表单form-vertical label是块级的, label标签和文本框各占一行
水平表单form-horizontal label是左浮动固定宽度的，label标签和文本框同行 位于左侧
~~~ .form-horizontal > fieldset( legend + .control-group(.control-label + .controls>input) + .control-group + .form-actions)
~~~ .help-inline 行内帮助文本 ， help-block块级帮助文本
~~~ .checkbox,.radio{padding-left:18px;}
.checkbox input[type="checkbox"], .radio input[type="radio"]{float:left; margin-left:-18px;}
~~~ bootstrap已为禁用或只读的表单元素设置样式
~~~表单验证样式 在control-group元素加上class(error, warning, success)即可
搜索表单 form-search
~~input-medium 中等宽度文本框， input-small 小宽度的文本框 ， input-xlarge 特大宽度文本框
内联表单form-inline label是inline-block的
>> Bootstrap 图标
> 作为 CSS Sprite 使用
所有的图标图像都捆绑到一起，并通过 background-position CSS 属性使用。图像文件是 glyphicons-halflings.png,所有的图标 class 都以 "icon-" 为前缀。Bootstrap 2.0 中定义了 120 个图标 class。
~~ icon-white得到白色图标
icon-user icon-upload icon-download ...
icon-align-left icon-align-right...
~~btn-toolbar > btn-group + btn-group(btn + btn ..)
~~~按钮调用：
按钮类型： btn-default btn-primary btn-success btn-info btn-warning btn-danger btn-link
按钮大小： .btn-lg, .btn-sm, .btn-xs
块级按钮 btn-block
.btn-block {
display: block;
width: 100%;
padding-right: 0;
padding-left: 0;
}
.btn-block + .btn-block {
margin-top: 5px;
}
当前的活动按钮： active
禁用按钮：
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
pointer-events: none;
cursor: not-allowed;
opacity: .65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
}
禁用A标签表现的按钮 primary
可以通过 button、a 和 input 元素使用按钮 class。推荐通过 button 元素来使用
Link
渐变背景
.btn-w3r {
background: #cb60b3; /* Old browsers */
background: -moz-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cb60b3), color-stop(50%,#ad1283), color-stop(100%,#de47ac)); / * Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* IE10+ */
background: linear-gradient(to bottom, #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#de47ac',GradientType=0 ); /* IE6-9 */
}
>>> Bootstrap 图像
> img-rounded
.img-rounded {
border-radius: 6px;
}
> img-thumbnail
.img-thumbnail {
display: inline-block;
height: auto;
max-width: 100%;
padding: 4px;
line-height: 1.428571429;
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
> .img-circle
.img-circle {
border-radius: 50%;
}
> 响应式图片 .img-responsive
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
这种响应式图片的局限是：无论设备屏幕大小都加载同样大的一张图；解决方案：HiSRC Jquery 插件
>> Bootstrap 使用清单组组件创建价格表
.list-group > .list-group-item.active + (.list-group-item > .list-group-item-heading + .list-group-item-text)
.list-group {
padding-left: 0;
margin-bottom: 20px;
}
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #ffffff;
border: 1px solid #dddddd;
}
.list-group-item:first-child {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
> 列表组徽章 badge
.list-group-item > .badge {
float: right;
}
.list-group-item > .badge + .badge {
margin-right: 5px;
}
- Very importantUnlimited Users
- Unlimited storage
- Forum support
- More....
- More.....
>> Bootstrap 导航
基本的基于标签和胶囊式标签的导航、堆叠的或垂直的基于标签和胶囊式标签的导航、基于标签和胶囊式标签的下拉菜单、使用导航列表创建堆叠导航、使用 JavaScript 创建可点击导航（不同的方向）。
> 标签式(tabs)的导航
.nav 和 .nav-tabs 用于创建基本的基于标签的导航。
.nav-tabs外包装一层div.tabbale，并引入bootstrap-tab.js即可实现标签切换。
> 堆叠的标签式导航
> 胶囊式(pills)的导航
> 堆叠的胶囊式导航
> 基于标签的下拉菜单 上拉菜单
dropdown, .dropdown-toggle, .dropdown-menu, .caret，divider
> 胶囊式下拉菜单
把上面的 nav-tabs 换成 nav-pills即可。
> 堆叠导航列表
> 带图标的堆叠导航列表
>> Bootstrap 导航条
>> Bootstrap 内联标签和徽章
使用 Bootstrap，您可以创建内联标签（即 Label 和注释的文本）和徽章（即指标和未读计数）。
> 标签
Default
Success
Warning
Important
Info
Inverse
> 徽章
1
2
4
6
8
10
>> Bootstrap 缩略图
使用 Bootstrap 创建缩略图，即图像、录像、文本的网格。 展示产品图片的等用途
> .thumbnails .thumbnail
呈现更多内容的缩略图
Product detail
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Product detail
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
>> Bootstrap 进度条
> .progress > .bar
.progress.progress-striped > .bar
.progress.progress-striped.active > .bar
A basic Progress Bar with vertical gradient
A striped Progress Bar, uses gradient to create a striped effect
An animated Progress Bar
其他颜色的进度条
.progress-info .progress-success .progress-danger .progress-warning
Progress bars may also have additional colors
>> Bootstrap 面包屑导航
.breadcrumb > li(a + .divider) + li.active
>> Bootstrap 分页
.pagination
只带有前后翻页的页码导航
.pager > li +li
左右浮动的前后翻页
.pager > li.previous + li.next
>> Bootstrap 警告和错误
.alert > .close
.alert-block , .alert-heading
提示类型: alert-error, alert-success, alert-info
>> Bootstrap LESS
Less 是一个 CSS 预处理器，让 CSS 具有动态性。您可以在 CSS 中使用 Bootstrap 的 Less 变量、mixins（混合）和 nesting（嵌套）。
>> Bootstrap 多媒体对象
我们可以在组件中使用图文混排，图片可以左对齐或者右对齐。媒体对象可以用更少的代码来实现多媒体对象与文字的混排。
你可以在HTML标签中添加以下两种形式来设置媒体对象：
.media: 该类允许将媒体对象里的多媒体（图像，视频）浮动到内容区块的左边或者右边。
.media-list: 如果你需要一个列表，各项内容是无序列表的一部分，可以使用该类。可用于评论列表与文章列表。
.media组件可以嵌套 ~~~实现图文左右2列布局
.media > a.pull-left( img.media-object ) + .media-body( media-heading)
alt="Media Object">Media heading
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
ul.media-list > li.media + li.media
>> Bootstrap面板
获取基础面板你只需要在
使用.panel-heading类可以很简单的在你的面板中添加一个标题容器
使用
- 元素并使用 .panel-title类到你的加一个预样式标题中。
Panel heading without title
Panel content
Panel With title
Panel content
面板脚注
This is a Basic panel
带警告色彩的面板
可以使用panel-primary, panel-success, panel-info, panel-warning, panel-danger类来设置带警告色彩的面板
Panel title
This is a Basic panel
带表格的面板
.table类来设置无边框的表格。 通过 .panel-body 类可以定义表格额外的文本内容
Panel title
This is a Basic panel
| Product | Price |
|---|---|
| Product A | 200 |
| Product B | 400 |
带列表组的面板
This is a Basic panel content. This is a Basic panel content.
This is a Basic panel content.This is a Basic panel content.
This is a Basic panel content.This is a Basic panel content.
This is a Basic panel content.
- Free Domain Name Registration
- Free Window Space hosting
- Number of Images
- 24*7 support
- Renewal cost per year
>> Bootstrap Wells
如果你需要页面中有嵌入的效果，在Bootstrap中你只需要使用.well类即可
.well, .well-lg, .well-sm
>> 模态对话框 modal
注意在页面底部引入bootstrap.min.js
触发弹出模态对话框
或者用js
$('#example').modal(options);
options对象可以设置的选项有：
backdrop: false/true 是否显示半透明黑色遮罩背景。
keyboard: false/true 点击esc键是否关闭对话框
show: false/true 初始化时是否显示对话框 $('#example').modal({show:false});则不显示对话框
方法：
$obj.modal('toggle'); //切换对话框的显示隐藏。
$obj.modal('show'); //显示对话框
$obj.modal('hide'); //隐藏对话框
事件：
show: fn; 调用 $obj.modal('show')后被触发
shown: fn; 调用 $obj.modal('show')后 且 对话框完全渐现后 触发
hide: fn;
hidden: fn;
$obj.bind('show',function(){ console.log('call show modal');});
$obj.modal('show'); // call show modal
>> Bootstrap Popover（弹出框）
rel="popover" data-content="some text" data-original-title="popover title"
$obj.popover(options);
options对象包含的选项有：
animation: boolean; 是否带css渐变过渡效果
placement: string | fn; 默认值是 'right'，可以是 top、bottom 和 left ，用于决定环绕锚文本周围的 Popover（弹出框）是位置。
selector: string，默认值是 false。把 Tooltip 对象授权给定的目标。
trigger: string，默认值是 'hover'，可以是 focus 和 manual
title: string | fn ,默认为'', 即默认不显示title属性的值
content:string | fn，默认值是 ''。即默认不显示 data-content 属性的值。
delay:number | object，默认值是 0。这决定了显示和隐藏 popover（弹出框）的等待时间，以毫秒为单位。如果值设置为一个数字，则等待时间会应用于显示和隐藏。如果值设置为一个对象，则结构为 delay: { show: 500, hide: 100}，其中 500 和 100 是以毫秒为单位的。
>> Bootstrap Dropdown（下拉菜单）
.dropdown > .dropdown-toggle( >.caret ) + .dropdown-menu ( li + li.divider + li)
>> 滚动监听 scrollspy
data-spy="scroll" data-target="#navbarExample" data-offset="50"
The links of the following navbar is going to be highlighted
Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!
PHP
PHP, an acronym for Hypertext Preprocessor, is a widely-used open source general-purpose scripting language.
JS
JavaScript is a cross-platform, object-oriented scripting language developed by Netscape. JavaScript was created
MySQL
MySQL tutorial of w3resource is a comprehensive tutorial to learn MySQL. We have hundreds of examples covered,
PostgreSQL
In 1986 the Defense Advanced Research Projects Agency (DARPA), the Army Research Office (ARO), the National
MongoDB
how to prepare queries to fetch data against various conditions.
$('#navbarExample').scrollspy();
在 DOM 上创建和移除元素时使用 scrollspy（滚动监听）。但是，您必须调用 refresh 方法。
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
});
使用 'offset' 方法来决定当计算滚动条位置时从顶部开始偏移的像素数。方法的类型是 number，默认值是 10。您需要增加或者减少这个值来让 scrollspy（滚动监听）正常工作。
一旦一个新的条目被 scrollspy（滚动监听）触发时，则触发 'activate' 事件。
>> Bootstrap 轮播
.carousel + carousel-inner (> item + item) + .carousel-control.left + .carousel-control.right
$('.carousel').carousel()
选项：
interval: 规定幻灯片轮换的等待时间，以毫秒为单位。值的类型为 number，默认值是 5000。如果为 false，轮播将不会自动开始循环。
pause: 规定当鼠标停留在幻灯片区域即暂停轮播，鼠标离开即启动轮播。值的类型为 string，默认值是 'hover'。
方法：
$('.carousel').carousel('cycle');
$('.carousel').carousel('pause');
$('.carousel').carousel(number); 将轮播定位到指定的帧上（帧下标以0开始，类似数组）。
$('.carousel').carousel('prev');
$('.carousel').carousel('next');
事件：
slide: 当 slide 实例方法被调用之后，此事件被立即触发。
slid: 当所有幻灯片播放完之后，此事件被触发。
>> Typeahead
在用户填写表单时，为用户提供提示或数据。
data-items, data-source
$('#inputId').typeahead()
可以通过dom传参或js传参 如：
var subjects = ['PHP', 'MySQL', 'SQL', 'PostgreSQL', 'HTML', 'CSS', 'HTML5', 'CSS3', 'JSON'];
$('#search').typeahead({source: subjects})
$inp.typehead(options);
选项：
source: 规定包含查询时要显示的值的数据源。值的类型是 array，默认值是 [ ]。
items: 规定查询时要显示的条目的最大值。数据类型是 number，默认值是 8。
matcher: 决定查询是否匹配条目。带有一个单一的参数，即要测试查询的条目。当前查询通过 this.query 访问。返回一个布尔值 true，表示查询匹配。数据类型是 function。默认情况下是大小写不敏感的。
sorter: 用于自动分类结果。带有一个单一的参数，即具有 typeahead 实例范围的条目。当前查询通过 this.query 访问。数据类型是 function。默认值是精确匹配的，其他的值还可以是大小写敏感、大小写不敏感。
highlighter: 用于自动高亮突出显示结果。带有一个单一的参数，即具有 typeahead 实例范围的条目。数据类型是 function。默认情况下是高亮突出显示所有默认的匹配项。
>> 具有交互的按钮
data-loading-text="loading..." data-toggle="button"
.button-group[data-toggle="buttons-checkbox"]
.button-group[data-toggle="buttons-radio"]
Control state
Single toggle
Checkbox
Radio
$('.nav-tabs').button() //其中 ' .nav-tabs ' 是包含按钮的 div 的 class。
方法：
$('.mybtn1').button('toggle');
该方法切换按钮状态。赋予按钮被激活时的状态和外观。使用 'data-toggle="button"' 自动切换按钮为激活状态。
该方法设置按钮状态为 loading - 即将按钮置为禁用状态并将文字内容切换为 loading。通过使用 'data-loading-text' 属性可以在按钮元素上定义 loading 文本。
如果您使用 Firefox 浏览器，您将发现，在页面加载之后，禁用状态不会自动解除，请使用 'autocomplete="off"' 来避免这个问题。
$().button('reset')
$().button(string) //该方法重置按钮状态，并将按钮上的文本重置为传入的值。
>> Bootstrap 折叠
.accordion > .accordion-group( > .accordion-heading(>accordion-toggle) + .accordion-body(>accordion-inner) ) + .accordion-group
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
这里有三点需要注意。
第一，添加 data-toggle="collapse" 到您要点击的链接上，用来展开或折叠组件。
第二，添加一个 href 或一个 data-target 属性到父组件，它的值为子组件的 id。
第三，添加一个 data-parent 属性用来创建手风琴式的效果。data-parent 属性的值与主容器 div （保存整个手风琴组件）的 id 属性的值相同。如果您想要创建一个简单的折叠组件，不需要像手风琴那么复杂，就不需要添加这个属性。
$(".collapse").collapse() //触发折叠
选项：
parent:值的类型为 Selector。默认值为 false。当父元素显示时，父元素下所有的可折叠元素是关闭的。
toggle:值的类型为 Boolean。默认值为 true。当被调用时，切换所有的可折叠元素。
方法：
.collapse('toggle'):展示或隐藏一个可折叠的页面元素。
.collapse('show'):展示一个可折叠的页面元素。
.collapse(hide):隐藏一个可折叠的页面元素。
事件：
show:当 show 实例方法被调用之后，此事件被立即触发。
shown:当可折叠页面元素显示出来之后（同时 CSS 过渡效果也已执行完毕），此事件被触发。
hide:当 hide 实例方法被调用之后，此事件被立即触发。
hidden:当可折叠页面元素向用户隐藏之后（同时 CSS 过渡效果也已执行完毕），此事件被触发。
转载于:https://www.cnblogs.com/stephenykk/p/3769678.html