Bootstrap 4 开始模板
<!doctype html>
<html lang="zh-cmn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
shrink-to-fit 为了解决一些兼容性问题,阻止某些浏览器因为元素超出范围而重设页面的 scale 。
integrity 验证文件的完整性,不成功就拒绝加载。
bootstrap入门
初识bootstrap:
jquery下载:http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js
bootstrap下载:https://github.com/twbs/bootstrap/archive/v3.3.7.zip
全套
jquery: http://www.bootcdn.cn/jquery/
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
.
.
.
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>
栅格系统、栅格布局
<div class="container-fluid">
<div style="background: red;">michael1</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-1">第1行第1列</div>
<div class="col-lg-11">第1行第2列</div>
</div>
</div>
container-fluid 自适应宽度100%
container 固定宽度(适应响应式)
宽度>=1200 1170px
992<=宽度<1200 970px
768<=宽度<992 750px
宽度<768 auto
注意:这两个class不能放在一起,可以是兄弟关系,但不能是嵌套的关系
如果不想让宽度随着屏幕而变化,可以给它一个!important来提升优先级,这样的话在所有尺寸下都是一个定值
container:如果列的和超过了12,那就会换行;如果有一列只占一行并且这个数值超过了12,那就会按12去显示
屏幕尺寸
<div class="container">
<div class="row">
<div class="col-lg-1">第1行第1列</div>
<div class="col-lg-3">第1行第2列</div>
<div class="col-lg-5">第1行第3列</div>
<div class="col-lg-3">第1行第4列</div>
</div>
<div class="row">
<div class="col-md-4">第2行第1列</div>
<div class="col-md-4">第2行第2列</div>
<div class="col-md-4">第2行第3列</div>
</div>
</div>
lg 宽度>1200
表现形式:屏幕的宽度大于1200,一行显示n(结构里有几个div)列
屏幕的宽度小于1200,一行显示1列
md 992=<宽度<1200
表现形式:屏幕的宽度大于992并且小于1200,一行显示n(结构里有几个div)列
屏幕的宽度小于992,一行显示1列
sm 768=<宽度<992
表现形式:屏幕的宽度大于768并且小于992,一行显示n(结构里有几个div)列
屏幕的宽度小于768,一行显示1列
xs 宽度<768
表现形式:屏幕的宽度小于768,一行永远显示n(结构里有几个div)列
组合模式
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">第1行第1列</div>
<div class="col-lg-3 col-md-4 col-sm-6">第1行第2列</div>
<div class="col-lg-3 col-md-4 col-sm-6">第1行第3列</div>
<div class="col-lg-3 col-md-4 col-sm-6">第1行第4列</div>
</div>
当宽度大于1200px时候,div按照col-lg来显示
当992=<宽度<1200,div按照col-md来显示
当768=<宽度<992,div按照col-sm来显示
当宽度<768,div按照col-xs来显示
列偏移
<div class="row">
<div class="col-lg-4 col-lg-offset-4">第2行第1列</div>
<div class="col-lg-4 col-lg-offset-5">第2行第1列</div>
<div class="col-lg-4 col-lg-offset-12">第2行第1列</div>
<div class="col-lg-4 col-lg-offset-13">第2行第1列</div>
</div>
offset 往右偏移
偏移的格子数量,大于12会不起作用,小于等于12有效。
注意:当有多列时,偏移后超出十二,会导致换行再偏移。如果多列加上偏移小于等于12,则还在一行上。
列排序与嵌套
<div class="container" style="border: 1px solid #f00;">
<div class="row">
<div class="col-lg-2 col-lg-push-1">第1行第1列</div>
<div class="col-lg-2 col-lg-push-12">第1行第2列</div>
</div>
<div class="row">
<div class="col-lg-2 col-lg-push-10">第3行第1列</div>
<div class="col-lg-10 col-lg-pull-2">第3行第2列</div>
</div>
</div>
push 往右走,不能超过12,否则就不起作用
pull 往左走,不能超过12,否则就不起作用
如果两个顺序一样,即push或pull后面的数字一样,则会依次排列,两个层不会重合。
列偏移和列排序的区别
1、列偏移只能往右走,而列排序(pull、push)既可以往右边走,也可以往左边走
2、如果一行中有多列,offset偏移如果大的话,会换行再偏移。而push不会有这个问题
每一列里面都可以在嵌套一行和n(不能超过12)列,那嵌套里面的元素就会以父级的宽度为基准,再分12个格子。
特殊标签以及样式
<p><kbd>ctrl+n</kbd></p>
<pre><p>这里是一段文字,不会被解析</p><br /><div>michael</div></pre>
<code>.michael</code>
<code><span></code>
表格相关样式
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>语文 </td>
<td>数学</td>
<td>英文</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr class="success">
<td>语文 </td>
<td>数学</td>
<td>英文</td>
<td>生物</td>
<td>化学</td>
</tr>
</tbody>
</table>
</div>
table 会修改一些简单的样式
table-striped 隔行换色
table-bordered 给表格添加边框
table-hover 给每一行添加一个hover状态
table-condensed 让表格更加紧凑
注意:将表格包在一个class为table-responsive的div里,当屏幕尺寸小于768的时候会出现滚动条
表单的操作
<form action="#" class="form-inline">
<div class="form-group">
<label for="userName">用户名</label>
<input type="text" id="userName" class="form-control" />
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" class="form-control" />
</div>
<input type="button" value="登录" class="btn-success btn" />
</form>
form-control 让表单的宽度为100%,并且还添加了一些其它的样式
form-group 给表单之间添加了一些距离
form-inline 让表单在一行中显示
上面的代码如果没有form-inline,form-control会显示百分之百,导致表单输入框与表单名称换行。
有了form-inline,会让输入框与表单名称在一行,但是当小于768px,又会使得输入框显示百分之百。
表单
仔细研究下官方文档。
按钮
<!--按钮的背景色-->
<div class="row">
<input type="button" value="按钮" class="btn" />
<button type="button" class="btn btn-default">michael</button>
<button type="button" class="btn btn-primary">michael</button>
<button type="button" class="btn btn-success">michael</button>
<button type="button" class="btn btn-info">michael</button>
<button type="button" class="btn btn-warning">michael</button>
<button type="button" class="btn btn-danger">michael</button>
<button type="button" class="btn btn-link">michael</button>
</div>
<!--按钮的尺寸-->
<div class="row">
<button type="button" class="btn btn-default btn-lg">michael</button>
<button type="button" class="btn btn-primary btn-md">michael</button>
<button type="button" class="btn btn-success btn-sm">michael</button>
<button type="button" class="btn btn-info btn-xs">michael</button>
</div>
<!--btn-block 让按钮的宽度变为100%,并且成了块级元素-->
<div class="row">
<button type="button" class="btn btn-primary btn-block">michael</button>
</div>
<!--激活状态-->
<div class="row">
<button type="button" class="btn btn-primary active">michael</button>
</div>
<!--禁用状态-->
<div class="row">
<button type="button" class="btn btn-primary active" disabled>michael</button>
<button type="button" class="btn btn-info disabled">michael</button>
<a href="#" class="btn btn-danger active disabled">michael</a>
</div>
响应式图片
<div class="container">
<div class="row">
<div class="col-lg-6">
<img src="https://cbu01.alicdn.com/cms/upload/2016/993/298/2892399_1073447813.png" class="img-responsive"/>
</div>
</div>
<!--图片的形状-->
<div class="row" style="margin-top: 10px;">
<div class="col-lg-3">
<img src="https://cbu01.alicdn.com/cms/upload/2016/993/298/2892399_1073447813.png" class="img-responsive img-rounded"/>
</div>
<div class="col-lg-3">
<img src="https://cbu01.alicdn.com/cms/upload/2016/993/298/2892399_1073447813.png" class="img-responsive img-circle"/>
</div>
<div class="col-lg-3">
<img src="https://cbu01.alicdn.com/cms/upload/2016/993/298/2892399_1073447813.png" class="img-responsive img-thumbnail"/>
</div>
</div>
</div>
img-rounded 圆角矩形
img-circle 圆形图片
img-thumbnail 透明表框图片
辅助类样式
<!--字体的颜色-->
<div class="row">
<p class="text-muted">michael,michael,michael</p>
<p class="text-primary">michael,michael,michael</p>
<p class="text-success">michael,michael,michael</p>
<p class="text-info">michael,michael,michael</p>
<p class="text-warning">michael,michael,michael</p>
<p class="text-danger">michael,michael,michael</p>
</div>
<!--字体的背景,测试效果同btn-xxx-->
<div class="row">
<p class="bg-primary">michael,michael,michael</p>
<p class="bg-success">michael,michael,michael</p>
<p class="bg-info">michael,michael,michael</p>
<p class="bg-warning">michael,michael,michael</p>
<p class="bg-danger">michael,michael,michael</p>
</div>
<!--三角符号、关闭按钮-->
<div class="row">
<span class="caret"></span>
<button class="close">×</button>
</div>
<!--浮动,row自带清除浮动-->
<div class="row" style="border: 1px solid #f00;">
<div class="pull-left">michael1</div>
<div class="pull-right">michael2</div>
</div>
<!--清除浮动,效果同上-->
<div class="row" >
<div style="border: 1px solid green;" class="clearfix">
<div class="pull-left">michael1</div>
<div class="pull-right">michael2</div>
</div>
</div>
<!--居中对齐-->
<div class="row" >
<div style="width: 100px; height: 100px; border: 1px solid #f00;" class="center-block">
</div><!--相当于样式invisible,位置还占着。-->
</div>
<!--隐藏与显示-->
<div class="row sh">
<div class="col-lg-2 show">第1列</div>
<div class="col-lg-2 hidden">第2列</div> <!--不占位置-->
<div class="col-lg-2">第3列</div>
<div class="col-lg-2 invisible">第4列</div> <!--但是位置还占着-->
<div class="col-lg-2">第5列</div>
</div>
响应式工具
<div class="container">
<div class="row">
<div class="col-lg-4 visible-lg-block">第1行第1列</div>
<div class="col-lg-4 visible-lg-inline">第1行第2列</div>
<div class="col-lg-4 visible-lg-inline-block">第1行第3列</div>
</div>
<div class="row">
<div class="col-lg-4 visible-md-block">第2行第1列</div>
<div class="col-lg-4 visible-md-inline">第2行第2列</div>
<div class="col-lg-4 visible-md-inline-block">第2行第3列</div>
</div>
<div class="row">
<div class="col-lg-4 hidden-lg">第3行第1列</div>
</div>
</div>
visible 显示
hidden 隐藏
样式col-lg-4 hidden-lg,当宽度小于lg的时候,这个样式就会失效,就会显示出第3行第1列。
打印样式
<div class="container">
<div class="row">
<div class="col-lg-4 visible-print-block">第1行第1列</div>
<div class="col-lg-4 visible-print-inline">第1行第2列</div>
<div class="col-lg-4 visible-print-inline-block">第1行第3列</div>
</div>
<div class="row">
<div class="col-lg-4 hidden-print">第2行第1列</div>
</div>
</div>
visible-print 只有在打印的时候显示
hidden-print 打印的时候不显示
visible-print-block 打印时候显示为块状元素
当在同一个屏幕宽度范围内,设置了栅格化的大小,那么再设置inline或者block无效。也就是说栅格化的优先级比内联或者块状显示的优先级要高。
字体
<div class="container">
<div class="row">
<span class="glyphicon glyphicon-star" style="font-size: 40px; color: red;"></span>
</div>
<button class="btn btn-danger">
<span class="glyphicon glyphicon-camera" style="color: #000;"></span>
michael
</button>
</div>
按钮组
<div class="btn-group">
<button class="btn btn-primary">michael</button>
<button class="btn btn-success">michael</button>
<button class="btn btn-info">michael</button>
</div>
<div class="btn-group btn-group-md">
<button class="btn btn-primary">michael</button>
<button class="btn btn-success">michael</button>
<button class="btn btn-info">michael</button>
</div>
<div class="btn-group-vertical">
<button class="btn btn-primary">michael</button>
<button class="btn btn-success">michael</button>
<button class="btn btn-info">michael</button>
</div>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">michael</a>
<a href="#" class="btn btn-success">michael</a>
<a href="#" class="btn btn-info">michael</a>
</div>
<!--btn-group-justified将这个button组平铺为屏幕宽度的百分之百-->
<div class="row" style="margin-top: 10px;">
<div class="btn-group">
<button class="btn btn-primary">michael</button>
<button class="btn btn-primary"><span class="caret"></span></button>
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="btn-group dropup"> <!--caret三角形会朝上显示。-->
<button class="btn btn-primary">michael</button>
<button class="btn btn-primary"><span class="caret"></span></button>
</div>
</div>
下拉菜单
<div class="dropdown">
<button style=' width: 160px;' class="btn btn-primary" data-toggle="dropdown">welcome</button>
<ul class="dropdown-menu">
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">less</a></li>
<li><a href="#">bootstrap</a></li>
</ul>
</div>
下拉菜单的样式
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="dropdown open">
<button class="btn btn-default btn-block" data-toggle="dropdown">michael <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">less</a></li>
<li><a href="#">bootstrap</a></li>
</ul>
</div>
</div>
<div class="col-lg-4" style="margin-top: 150px;">
<div class="dropup">
<button class="btn btn-default" data-toggle="dropdown">michael <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">less</a></li>
<li><a href="#">bootstrap</a></li>
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown">michael <span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-header text-center"><a href="#"> michael </a></li>
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">less</a></li>
<li><a href="#">bootstrap</a></li>
<li class="divider"></li>
<li class="dropdown-header text-center"><a href="#">后端</a></li>
<li><a href="#">php</a></li>
<li><a href="#">java</a></li>
<li class="disabled"><a href="#">.net</a></li>
</ul>
</div>
</div>
</div>
</div>
输入框组
<div class="container">
<div class="row">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" />
</div>
</div>
<!--输入框组的尺寸-->
<div class="row" style="margin-top: 10px;">
<div class="input-group input-group-lg">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" />
</div>
<div class="input-group input-group-md">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" />
</div>
</div>
<!--额外内容里放的是checkbox-->
<div class="row" style="margin-top: 10px;">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" />
</span>
<input type="text" class="form-control" />
</div>
</div>
<!--额外内容里放的是radio-->
<div class="row" style="margin-top: 10px;">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" />
</span>
<input type="text" class="form-control" />
</div>
</div>
<!--额外内容里放的是按钮-->
<div class="row" style="margin-top: 10px;">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button type="button" class="btn btn-default">搜索</button>
</span>
</div>
</div>
<!--额外内容里放的是按钮-->
<div class="row" style="margin-top: 10px;">
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default" data-toggle="dropdown">michael <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">less</a></li>
<li><a href="#">bootstrap</a></li>
</ul>
</div>
<input type="text" class="form-control" />
</div>
</div>
</div>
导航
<div class="container">
<div class="row">
<ul class="nav nav-tabs">
<li><a href="#">michael</a></li>
<li class="active"><a href="#">michael</a></li>
<li><a href="#">michael</a></li>
</ul>
</div>
<!--胶囊式 nav-pills-->
<div class="row" style="margin-top: 10px;">
<ul class="nav nav-pills">
<li><a href="#">michael</a></li>
<li class="active"><a href="#">michael</a></li>
<li><a href="#">michael</a></li>
</ul>
</div>
<!--竖着排 nav-stacked-->
<div class="row" style="margin-top: 10px;">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">michael</a></li>
<li class="active"><a href="#">michael</a></li>
<li><a href="#">michael</a></li>
</ul>
</div>
<!--两端对齐 nav-stacked-->
<div class="row" style="margin-top: 10px;">
<ul class="nav nav-pills nav-justified">
<li><a href="#">michael</a></li>
<li class="active"><a href="#">michael</a></li>
<li><a href="#">michael</a></li>
</ul>
</div>
<!--导航中放下拉菜单 -->
<div class="row" style="margin-top: 10px;">
<ul class="nav nav-tabs">
<li><a href="#">michael</a></li>
<li class="active"><a href="#">michael</a></li>
<li><a href="#">michael</a></li>
<li>
<a href="#" data-toggle="dropdown">michael课程 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">less</a></li>
<li><a href="#">bootstrap</a></li>
</ul>
</li>
</ul>
</div>
</div>
nav-stacked 会将一列铺满屏幕,即宽设置百分百
nav-justified 会将多列在一行内铺满,即把整个导航栏设置百分百
选项卡
<style>
.tab1{
border: 1px solid #ddd;
border-top: none;
padding: 100px;
border-radius: 0 0 5px 5px;
}
</style>
<div class="container">
<div class="row">
<ul class="nav nav-tabs">
<li class="active"><a href="#con1" data-toggle="tab">michael</a></li>
<li><a href="#con2" data-toggle="tab">michael</a></li>
<li><a href="#con3" data-toggle="tab">leon</a></li>
</ul>
<div class="tab-content">
<div id="con1" class="tab-pane active">html</div>
<div id="con2" class="tab-pane">css</div>
<div id="con3" class="tab-pane">js</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<ul class="nav nav-tabs">
<li class="active"><a href="#con4" data-toggle="tab">michael</a></li>
<li><a href="#con5" data-toggle="tab">michael</a></li>
<li><a href="#con6" data-toggle="tab">leon</a></li>
</ul>
<div class="tab-content tab1">
<div id="con4" class="tab-pane active">html</div>
<div id="con5" class="tab-pane">css</div>
<div id="con6" class="tab-pane">js</div>
</div>
</div>
</div>
</div>
导航条
<div class="container">
<!--默认样式的导航条-->
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="active"><a href="#">111</a></li>
<li><a href="#">111</a></li>
<li><a href="#">111</a></li>
</ul>
</nav>
<!--黑色的导航条-->
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">222</a></li>
<li><a href="#">222</a></li>
<li><a href="#">222</a></li>
</ul>
</nav>
<!--黑色的导航条-->
<nav class="navbar navbar-inverse navbar-static-top">
<ul class="nav navbar-nav">
<li class="active"><a href="#">333</a></li>
<li><a href="#">333</a></li>
<li><a href="#">333</a></li>
</ul>
</nav>
<!--固定在上边的导航条-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<ul class="nav navbar-nav">
<li class="active"><a href="#">444</a></li>
<li><a href="#">444</a></li>
<li><a href="#">444</a></li>
</ul>
</nav>
<!--固定在上边的导航条-->
<nav class="navbar navbar-default navbar-fixed-bottom">
<ul class="nav navbar-nav">
<li class="active"><a href="#">555</a></li>
<li><a href="#">555</a></li>
<li><a href="#">555</a></li>
</ul>
</nav>
</div>
navbar 导航条的基础样式
nav navbar-nav 导航条里菜单的固定样式组合class
navbar-inverse 导航条的样式为黑色,只起到这个作用
navbar-static-top 导航条为直角,只起到这个作用
navbar-fixed-top 导航条固定在最上边,并且设置宽度为整个屏幕的尺寸
navbar-fixed-bottom 导航条固定在最下边,不会随滚动的滚动而走,并且设置宽度为整个屏幕的尺寸
路径导航与分页
<div class="container">
<div class="row">
<ul class="breadcrumb">
<li><a href="#">bootstrap</a></li>
<li><a href="#">dist</a></li>
<li class="active">css</li>
</ul>
</div>
</div>
<div class="container">
<div class="row">
<ul class="pagination">
<li class="disabled"><a href="#"><<</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="active"><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">>></a></li>
</ul>
</div>
<div class="row">
<ul class="pagination pagination-lg">
<li class="disabled"><a href="#"><<</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="active"><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">>></a></li>
</ul>
</div>
<!--翻页-->
<ul class="pager">
<li><a href="#">←上一页</a></li>
<li><a href="#">下一页→</a></li>
</ul>
<ul class="pager">
<li class="previous disabled"><a href="#">←上一页</a></li>
<li class="next"><a href="#">下一页→</a></li>
</ul>
</div>
标记与巨幕
<div class="container">
<div class="jumbotron">
<h1>leon学院</h1>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
<p><a href="#" class="btn btn-primary">Selina</a></p>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>leon学院</h1>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
<p><a href="#" class="btn btn-primary">Selina</a></p>
</div>
</div>
缩略图与警告框
<div class="container">
<div class="row">
<div class="col-lg-3">
<a href="http://www.apeclass.com" class="thumbnail">
<img src="https://cbu01.alicdn.com/cms/upload/2016/993/298/2892399_1073447813.png"/>
</a>
</div>
<div class="col-lg-3">
<a href="http://www.apeclass.com" class="thumbnail">
<img src="https://cbu01.alicdn.com/cms/upload/2016/993/298/2892399_1073447813.png"/>
</a>
</div>
</div>
<!--还可以把thumbnail给父级,会有不同的样式-->
<div class="row">
<div class="col-lg-4">
<div class="thumbnail">
<a href="http://www.apeclass.com">
<img src="https://cbu01.alicdn.com/cms/upload/2016/993/298/2892399_1073447813.png"/>
</a>
<div class="caption">
<h3>leon学院</h3>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
<p><a href="#" class="btn btn-primary">Selina</a> <a href="#" class="btn btn-danger">leon</a></p>
</div>
</div>
</div>
</div>
</div>
<!-----------------警告框--------------------->
<div class="container">
<div class="row">
<p class="alert alert-success">这里是一个警告框!!!!<button class="close" data-dismiss="alert">×</button></p>
<p class="alert alert-info">这里是一个警告框!!!!</p>
<p class="alert alert-warning">这里是一个警告框!!!!</p>
<p class="alert alert-danger">这里是一个警告框!!!!</p>
</div>
</div>
进度条
<div class="container">
<div class="row">
<div class="progress">
<div class="progress-bar" style="width: 60%;">60%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width: 36%;">36%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width: 70%;">70%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger " style="width: 20%;">20%</div>
</div>
<!--带条纹的进度条-->
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 20%;">20%</div>
</div>
<!--带堆叠效果的进度条-->
<div class="progress">
<div class="progress-bar" style="width: 10%;">10%</div>
<div class="progress-bar progress-bar-info" style="width: 20%;">36%</div>
<div class="progress-bar progress-bar-warning" style="width: 30%;">70%</div>
<div class="progress-bar progress-bar-danger" style="width: 20%;">20%</div>
<div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 10%;">20%</div>
</div>
</div>
</div>
图文混排
<!--
media 图文混排
media-left 图片的区域,在左边显示
media-right 图片的区域,在右边显示
media-body 内容区域
media-heading 内容区域里的标题
media-middle 图片垂直对齐
media-bottom 图片靠下边对齐
-->
<div class="container">
<div class="row">
<div class="media">
<a href="http://www.apeclass.com" class="media-left">
<img src="https://cbu01.alicdn.com/cms/upload/2016/993/298/2892399_1073447813.png" width="100"/>
</a>
<div class="media-body">
<h4 class="media-heading">leon学院</h4>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
</div>
</div>
</div>
<!--图片在右边显示-->
<div class="row">
<div class="media">
<div class="media-body">
<h4 class="media-heading">leon学院</h4>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
</div>
<a href="http://www.apeclass.com" class="media-right">
<img src="https://cbu01.alicdn.com/cms/upload/2016/993/298/2892399_1073447813.png" width="100"/>
</a>
</div>
</div>
<!--左右都有图片-->
<div class="row">
<div class="media">
<a href="http://www.apeclass.com" class="media-left">
<img src="https://cbu01.alicdn.com/cms/upload/2016/993/298/2892399_1073447813.png" width="100"/>
</a>
<div class="media-body">
<h4 class="media-heading">leon学院</h4>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
</div>
<a href="http://www.apeclass.com" class="media-right">
<img src="https://cbu01.alicdn.com/cms/upload/2016/993/298/2892399_1073447813.png" width="100"/>
</a>
</div>
</div>
<!--右侧内容又嵌套了一个media-->
<div class="row">
<div class="media">
<a href="http://www.apeclass.com" class="media-left">
<img src="https://cbu01.alicdn.com/cms/upload/2016/993/298/2892399_1073447813.png" width="100"/>
</a>
<div class="media-body">
<h4 class="media-heading">leon学院</h4>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
<div class="media">
<a href="http://www.apeclass.com" class="media-left">
<img src="https://cbu01.alicdn.com/cms/upload/2016/993/298/2892399_1073447813.png" width="100"/>
</a>
<div class="media-body">
<h4 class="media-heading">leon学院</h4>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="media">
<div class="media-body">
<h4 class="media-heading">leon学院</h4>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
</div>
<a href="http://www.apeclass.com" class="media-right media-bottom">
<img src="https://cbu01.alicdn.com/cms/upload/2016/993/298/2892399_1073447813.png" width="100"/>
</a>
</div>
</div>
列表组
<!--
list-group 列表组,给ul添加
list-group-item 列表项,给li添加
-->
<div class="container">
<div class="row">
<ul class="list-group">
<li class="list-group-item">html</li>
<li class="list-group-item">css</li>
<li class="list-group-item">javascript</li>
<li class="list-group-item">html5/css3</li>
<li class="list-group-item">less/sass</li>
<li class="list-group-item">bootstrap</li>
</ul>
</div>
<!--给每个列表项添加了一个标记,那这个标记就会自动跑到右侧-->
<div class="row">
<ul class="list-group">
<li class="list-group-item">html<span class="badge">12</span></li>
<li class="list-group-item">css<span class="badge">34</span></li>
<li class="list-group-item">javascript<span class="badge">52</span></li>
<li class="list-group-item">html5/css3<span class="badge">35</span></li>
<li class="list-group-item">less/sass<span class="badge">27</span></li>
<li class="list-group-item">bootstrap<span class="badge">7</span></li>
</ul>
</div>
<!--用a标签做的列表组,可以添加激活状态,禁用状态,背景色-->
<div class="row">
<div class="list-group">
<a href="#" class="list-group-item active">html<span class="badge">12</span></a>
<a href="#" class="list-group-item disabled">css<span class="badge">34</span></a>
<a href="#" class="list-group-item list-group-item-info">javascript<span class="badge">52</span></a>
<a href="#" class="list-group-item list-group-item-warning">html5/css3<span class="badge">35</span></a>
<a href="#" class="list-group-item list-group-item-danger">less/sass<span class="badge">27</span></a>
<a href="#" class="list-group-item list-group-item-success">bootstrap<span class="badge">7</span></a>
</div>
</div>
<!--添加标题与段落的列表组,列表组标题:list-group-item-heading,列表组内容:list-group-item-text-->
<div class="row">
<ul class="list-group">
<li class="list-group-item active">
<h4 class="list-group-item-heading">leon学院</h4>
<p class="list-group-item-text">leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">leon学院</h4>
<p class="list-group-item-text">leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
</li><li class="list-group-item">
<h4 class="list-group-item-heading">leon学院</h4>
<p class="list-group-item-text">leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
</li><li class="list-group-item">
<h4 class="list-group-item-heading">leon学院</h4>
<p class="list-group-item-text">leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
</li>
</ul>
</div>
</div>
面板
<div class="container">
<div class="row">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">leon学院</h3>
</div>
<div class="panel-body">
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
</div>
</div>
</div>
<!--面板与列表组结合起来-->
<div class="row">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">leon学院</h3>
</div>
<div class="panel-body">
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
</div>
<ul class="list-group">
<li class="list-group-item">html</li>
<li class="list-group-item">css</li>
<li class="list-group-item">javascript</li>
<li class="list-group-item">html5/css3</li>
<li class="list-group-item">less/sass</li>
<li class="list-group-item">bootstrap</li>
</ul>
</div>
</div>
</div>
弹出层
<!--
注意
1、弹出层必需放在body里
2、弹出层里面不能再嵌套别的层
3、弹出层出来以后,页面的滚动条会被覆盖
modal 弹出层父级
modal-dialog 弹出层
modal-content 弹出层的内容区域
modal-header 弹出层的头部区域
modal-body 弹出层的主体区域
modal-footer 弹出层的底部区域
fade 让弹出层有一个运动的效果
-->
<div class="container">
<div class="row">
<button class="btn btn-primary" data-toggle="modal" data-target=".myModal1">弹出一个小层</button>
<button class="btn btn-primary" data-toggle="modal" data-target=".myModal2">弹出一个大层</button>
<button class="btn btn-primary" data-toggle="modal" data-target=".myModal3">弹出一个小小的层</button>
</div>
</div>
<div class="modal fade myModal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4>leon学院</h4>
</div>
<div class="modal-body">
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">确定</button>
</div>
</div>
</div>
</div>
<div class="modal myModal2">
<div class="modal-dialog modal-lg"><!--modal-lg是用来设置弹出层的尺寸,它必需给modal-dialog的层-->
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4>leon学院</h4>
</div>
<div class="modal-body">
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">确定</button>
</div>
</div>
</div>
</div>
<div class="modal myModal3">
<div class="modal-dialog modal-sm"><!--modal-lg是用来设置弹出层的尺寸,它必需给modal-dialog的层-->
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4>leon学院</h4>
</div>
<div class="modal-body">
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
<p>leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael </p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">确定</button>
</div>
</div>
</div>
</div>
滚动监听
<div class="container">
<div class="row">
<div class="col-lg-9" style="padding-bottom: 500px;">
<div class="section">
<h2 id="gaishu">概览</h2>
<h3 id="dange">单个还是全部引入</h3>
<p>JavaScript 插件可以单个引入(使用 Bootstrap 提供的单个 <code>*.js</code> 文件),或者一次性全部引入(使用 <code>bootstrap.js</code> 或压缩版的 <code>bootstrap.min.js</code>)。</p>
<p>建议使用压缩版的 JavaScript 文件bootstrap.js 和 bootstrap.min.js 都包含了所有插件,你在使用时,只需选择一个引入页面就可以了。</p>
<p>插件之间的依赖关系某些插件和 CSS 组件依赖于其它插件。如果你是单个引入每个插件的,请确保在文档中检查插件之间的依赖关系。注意,所有插件都依赖 jQuery (也就是说,jQuery必须在所有插件之前引入页面)。 bower.json 文件中列出了 Bootstrap 所支持的 jQuery 版本。</p>
<h3 id="datashuxing">data 属性</h3>
<p>你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API,也应该是你的首选方式。</p>
<p>话又说回来,在某些情况下可能需要将此功能关闭。因此,我们还提供了关闭 data 属性 API 的方法,即解除以 data-api 为命名空间并绑定在文档上的事件。就像下面这样:</p>
<p>
<pre>$(document).off('.data-api')</pre>
</p>
<p>另外,如果是针对某个特定的插件,只需在 data-api 前面添加那个插件的名称作为命名空间,如下:</p>
<p>
<pre>$(document).off('.alert.data-api')</pre>
</p>
<h3 id="biancheng">编程方式的 API</h3>
<p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式,并且返回其所操作的元素集合(注:和jQuery的调用形式一致)。</p>
<p>$('.btn.danger').button('toggle').addClass('fat')</p>
<p>所有方法都可以接受一个可选的 option 对象作为参数,或者一个代表特定方法的字符串,或者什么也不提供(在这种情况下,插件将会以默认值初始化):</p>
<h3 id="bimian">避免命名空间冲突</h3>
<p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式,并且返回其所操作的元素集合(注:和jQuery的调用形式一致)。</p>
<p>$('.btn.danger').button('toggle').addClass('fat')</p>
<p>所有方法都可以接受一个可选的 option 对象作为参数,或者一个代表特定方法的字符串,或者什么也不提供(在这种情况下,插件将会以默认值初始化):</p>
<h3 id="shijian">事件</h3>
<p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式,并且返回其所操作的元素集合(注:和jQuery的调用形式一致)。</p>
<p>$('.btn.danger').button('toggle').addClass('fat')</p>
<p>所有方法都可以接受一个可选的 option 对象作为参数,或者一个代表特定方法的字符串,或者什么也不提供(在这种情况下,插件将会以默认值初始化):</p>
<h3 id="weidui">未对禁用 JavaScript 的浏览器提供补救措施</h3>
<p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式,并且返回其所操作的元素集合(注:和jQuery的调用形式一致)。</p>
<p>$('.btn.danger').button('toggle').addClass('fat')</p>
<p>所有方法都可以接受一个可选的 option 对象作为参数,或者一个代表特定方法的字符串,或者什么也不提供(在这种情况下,插件将会以默认值初始化):</p>
</div>
<div class="section">
<h2 id="guodu">过渡效果</h2>
<h3 id="guanyu">关于过渡效果</h3>
<p>JavaScript 插件可以单个引入(使用 Bootstrap 提供的单个 <code>*.js</code> 文件),或者一次性全部引入(使用 <code>bootstrap.js</code> 或压缩版的 <code>bootstrap.min.js</code>)。</p>
<p>建议使用压缩版的 JavaScript 文件bootstrap.js 和 bootstrap.min.js 都包含了所有插件,你在使用时,只需选择一个引入页面就可以了。</p>
<p>插件之间的依赖关系某些插件和 CSS 组件依赖于其它插件。如果你是单个引入每个插件的,请确保在文档中检查插件之间的依赖关系。注意,所有插件都依赖 jQuery (也就是说,jQuery必须在所有插件之前引入页面)。 bower.json 文件中列出了 Bootstrap 所支持的 jQuery 版本。</p>
<h3 id="baohan">包含的内容</h3>
<p>你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API,也应该是你的首选方式。</p>
<p>话又说回来,在某些情况下可能需要将此功能关闭。因此,我们还提供了关闭 data 属性 API 的方法,即解除以 data-api 为命名空间并绑定在文档上的事件。就像下面这样:</p>
<p>
<pre>$(document).off('.data-api')</pre>
</p>
<p>另外,如果是针对某个特定的插件,只需在 data-api 前面添加那个插件的名称作为命名空间,如下:</p>
<p>
<pre>$(document).off('.alert.data-api')</pre>
</p>
</div>
<div class="section">
<h2 id="shili">实例</h2>
<h3 id="jingtai">静态实例</h3>
<p>JavaScript 插件可以单个引入(使用 Bootstrap 提供的单个 <code>*.js</code> 文件),或者一次性全部引入(使用 <code>bootstrap.js</code> 或压缩版的 <code>bootstrap.min.js</code>)。</p>
<p>建议使用压缩版的 JavaScript 文件bootstrap.js 和 bootstrap.min.js 都包含了所有插件,你在使用时,只需选择一个引入页面就可以了。</p>
<p>插件之间的依赖关系某些插件和 CSS 组件依赖于其它插件。如果你是单个引入每个插件的,请确保在文档中检查插件之间的依赖关系。注意,所有插件都依赖 jQuery (也就是说,jQuery必须在所有插件之前引入页面)。 bower.json 文件中列出了 Bootstrap 所支持的 jQuery 版本。</p>
<h3 id="dongtai">动态实例</h3>
<p>你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API,也应该是你的首选方式。</p>
<p>话又说回来,在某些情况下可能需要将此功能关闭。因此,我们还提供了关闭 data 属性 API 的方法,即解除以 data-api 为命名空间并绑定在文档上的事件。就像下面这样:</p>
<p>
<pre>$(document).off('.data-api')</pre>
</p>
<p>另外,如果是针对某个特定的插件,只需在 data-api 前面添加那个插件的名称作为命名空间,如下:</p>
<p>
<pre>$(document).off('.alert.data-api')</pre>
</p>
<h3 id="kexuan">可选尺寸</h3>
<p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式,并且返回其所操作的元素集合(注:和jQuery的调用形式一致)。</p>
<p>$('.btn.danger').button('toggle').addClass('fat')</p>
<p>所有方法都可以接受一个可选的 option 对象作为参数,或者一个代表特定方法的字符串,或者什么也不提供(在这种情况下,插件将会以默认值初始化):</p>
<h3 id="jinzhi">禁止动画效果</h3>
<p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式,并且返回其所操作的元素集合(注:和jQuery的调用形式一致)。</p>
<p>$('.btn.danger').button('toggle').addClass('fat')</p>
<p>所有方法都可以接受一个可选的 option 对象作为参数,或者一个代表特定方法的字符串,或者什么也不提供(在这种情况下,插件将会以默认值初始化):</p>
<h3 id="yongfa">用法</h3>
<p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式,并且返回其所操作的元素集合(注:和jQuery的调用形式一致)。</p>
<p>$('.btn.danger').button('toggle').addClass('fat')</p>
<p>所有方法都可以接受一个可选的 option 对象作为参数,或者一个代表特定方法的字符串,或者什么也不提供(在这种情况下,插件将会以默认值初始化):</p>
<h3 id="tongguo1">通过 data 属性</h3>
<p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式,并且返回其所操作的元素集合(注:和jQuery的调用形式一致)。</p>
<p>$('.btn.danger').button('toggle').addClass('fat')</p>
<p>所有方法都可以接受一个可选的 option 对象作为参数,或者一个代表特定方法的字符串,或者什么也不提供(在这种情况下,插件将会以默认值初始化):</p>
<h3 id="tongguo">通过 JavaScript 调用</h3>
<p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式,并且返回其所操作的元素集合(注:和jQuery的调用形式一致)。</p>
<p>$('.btn.danger').button('toggle').addClass('fat')</p>
<p>所有方法都可以接受一个可选的 option 对象作为参数,或者一个代表特定方法的字符串,或者什么也不提供(在这种情况下,插件将会以默认值初始化):</p>
<h3 id="canshu">参数</h3>
<p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式,并且返回其所操作的元素集合(注:和jQuery的调用形式一致)。</p>
<p>$('.btn.danger').button('toggle').addClass('fat')</p>
<p>所有方法都可以接受一个可选的 option 对象作为参数,或者一个代表特定方法的字符串,或者什么也不提供(在这种情况下,插件将会以默认值初始化):</p>
<h3 id="fangfa">方法</h3>
<p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式,并且返回其所操作的元素集合(注:和jQuery的调用形式一致)。</p>
<p>$('.btn.danger').button('toggle').addClass('fat')</p>
<p>所有方法都可以接受一个可选的 option 对象作为参数,或者一个代表特定方法的字符串,或者什么也不提供(在这种情况下,插件将会以默认值初始化):</p>
<h3 id="shijian2">事件</h3>
<p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式,并且返回其所操作的元素集合(注:和jQuery的调用形式一致)。</p>
<p>$('.btn.danger').button('toggle').addClass('fat')</p>
<p>所有方法都可以接受一个可选的 option 对象作为参数,或者一个代表特定方法的字符串,或者什么也不提供(在这种情况下,插件将会以默认值初始化):</p>
</div>
</div>
<div class="col-lg-3">
<div id="subNav" class="navbar-collapse">
<ul class="nav">
<li>
<a href="#gaishu" class="bold">概览</a>
<ul class="nav">
<li><a href="#dange">单个还是全部引入</a></li>
<li><a href="#datashuxing">data 属性</a></li>
<li><a href="#biancheng">编程方式的 API</a></li>
<li><a href="#bimian">避免命名空间冲突</a></li>
<li><a href="#shijian">事件</a></li>
<li><a href="#weidui">未对禁用 JavaScript 的浏览器提供补救措施</a></li>
</ul>
</li>
<li>
<a href="#guodu" class="bold">过渡效果</a>
<ul class="nav">
<li><a href="#guanyu">关于过渡效果</a></li>
<li><a href="#baohan">包含的内容</a></li>
</ul>
</li>
<li>
<a href="#shili" class="bold">实例</a>
<ul class="nav">
<li><a href="#jingtai">静态实例</a></li>
<li><a href="#dongtai">动态实例</a></li>
<li><a href="#kexuan">可选尺寸</a></li>
<li><a href="#jinzhi">禁止动画效果</a></li>
<li><a href="#yongfa">用法</a></li>
<li><a href="#tongguo1">通过 data 属性</a></li>
<li><a href="#tongguo">通过 JavaScript 调用</a></li>
<li><a href="#canshu">参数</a></li>
<li><a href="#fangfa">方法</a></li>
<li><a href="#shijian2">事件</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
提示标签
<div class="container">
<div class="row">
<p><a href="#" class="tool" data-toggle="tooltip" data-placment="top" title="leon学院">leon学院</a>leon michael leon学院leon michael leon学院leon michael leon学院leon michael leon学院leon michael <a href="#" class="tool" data-toggle="tooltip" data-placement="right" title="leon学院">leon学院</a>leon michael leon学院leon michael <a href="#" class="tool" data-toggle="tooltip" data-placement="bottom" title="leon学院">leon学院</a>leon michael leon学院leon michael leon学院leon michael <a href="#" class="tool" data-toggle="tooltip" data-placement="left" title="leon学院">leon学院</a>leon michael </p>
</div>
<div class="row">
<button class="btn btn-primary tool" data-toggle="tooltip" title="leon" data-placement="top">leon</button><br /><br />
<button class="btn btn-primary tool" data-toggle="tooltip" title="leon" data-placement="right">leon</button><br /><br />
<button class="btn btn-primary tool" data-toggle="tooltip" title="leon" data-placement="bottom">leon</button><br /><br />
<button class="btn btn-primary tool btnShow" data-toggle="tooltip" title="leon" data-placement="left">leon</button>
</div>
</div>
提示框
<div class="container">
<div class="row">
<button class="btn btn-danger" data-toggle="popover" data-placement="top" title="这是弹框的标题" data-content="这是弹框的内容,它很长很长,它很长很长,它很长很长,它很长很长,它很长很长,它很长很长,它很长很长,它很长很长,它很长很长,它很长很长,它很长很长">点击我给你弹出一个框</button><br /><br />
<button class="btn btn-danger" data-toggle="popover" data-placement="right" title="这是弹框的标题" data-content="这是弹框的内容,它很长很长,它很长很长,它很长很长,它很长很长,它很长很长,它很长很长,它很长很长,它很长很长,它很长很长,它很长很长,它很长很长">点击我给你弹出一个框</button><br /><br />
<button class="btn btn-danger" data-toggle="popover" data-placement="bottom" title="这是弹框的标题" data-content="这是弹框的内容,它很长很长,它很长很长,它很长很长,它很长很长,它很长很长,它很长很长,它很长很长,它很长很长,它很长很长,它很长很长,它很长很长">点击我给你弹出一个框</button><br /><br />
<button class="btn btn-danger btnShow" data-toggle="popover" data-placement="left" title="这是弹框的标题" data-content="这是弹框的内容,它很长很长,它很长很长,它很长很长,它很长很长,它很长很长,它很长很长,它很长很长,它很长很长,它很长很长,它很长很长,它很长很长">点击我给你弹出一个框</button>
</div>
</div>
折叠菜单
<div class="container">
<div class="row">
<div class="col-lg-5">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a href="#" data-toggle="collapse" data-target="#con">leon学院</a>
</h3>
</div>
<div id="con" class="in">
<div class="panel-body">
leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael
</div>
</div>
</div>
</div>
</div>
</div>
<!--------------------一组折叠菜单------------------------>
<div class="container">
<div class="row">
<div class="col-lg-5">
<!--1、把所有的面板都放到一个父级里,并且给父级添加一个panel-group,还有一个id-->
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<!--2、给要点击的元素添加一个data-parent属性,并让他的值与父级的id一样-->
<h3 class="panel-title" data-parent="#accordion" data-toggle="collapse" data-target="#con1">leon学院</h3>
</div>
<!--3、需要给内容区域添加一个class为collapse-->
<div id="con1" class="collapse in">
<div class="panel-body">
leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" data-parent="#accordion" data-toggle="collapse" data-target="#con2">leon学院</h3>
</div>
<div id="con2" class="collapse">
<div class="panel-body">
leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael leon michael
</div>
</div>
</div>
</div>
</div>
</div>
</div>
1、给要点击的那个元素添加一个data-toggle="collapse"
并且需要给它添加一个data-target,让它的值与对应的内容区域的id或者class相同
2、给对应的内容区域添加一个id或者class,与点击的元素相对应
注意:
1、内容区域不能有padding值
轮播图
<div class="container">
<div id="pic" class="carousel slide" data-interval="2000" data-ride="carousel">
<!--小圆点-->
<ol class="carousel-indicators">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ol>
<!--轮播图的图片-->
<div class="carousel-inner">
<div class="item active">
<img src="images/1.jpg"/>
<div class="carousel-caption">
<h3>这里是标题1</h3>
<p>这里是内容,非常多非常多</p>
</div>
</div>
<div class="item">
<img src="images/2.jpg"/>
<div class="carousel-caption">
<h3>这里是标题2</h3>
<p>这里是内容,非常多非常多</p>
</div>
</div>
<div class="item">
<img src="images/3.jpg"/>
<div class="carousel-caption">
<h3>这里是标题3</h3>
<p>这里是内容,非常多非常多</p>
</div>
</div>
<div class="item">
<img src="images/4.jpg"/>
<div class="carousel-caption">
<h3>这里是标题4</h3>
<p>这里是内容,非常多非常多</p>
</div>
</div>
</div>
<!--左右按钮-->
<a href="#pic" class="carousel-control left" data-slide="prev">‹</a>
<a href="#pic" class="carousel-control right" data-slide="next">›</a>
</div>
</div>
1、写一个父级,放一个id,和一个carousel的class
slide 给图片添加运动的效果
data-interval="500" 间隔时间,不要低于400,容易出现问题
data-ride="carousel" 页面一加载后就开始播放
2、小圆点的内容要放在一个class为carousel-indicators的层里
3、图片内容区域要放在一个class为carousel-inner的层里
每一项内容都需要放到一个叫item的层里
这个里面也可以放文字,那需要来一个父级,父级的class为carousel-caption
4、左右按钮按以下的格式写,href里面的值要与父级的id一样
<a href="#pic" class="carousel-control left" data-slide="prev">‹</a>
<a href="#pic" class="carousel-control right" data-slide="next">›</a>