模态窗体
会有个慢慢出来的效果，注意data-toggle是指切换方式，值为modal就代表是以模态窗口的样式切换。data-target是切换的目标。然后modal fade就是一个有动画的模态窗口。如果想直接弹出无动画，就把fade去掉就行。
无论是否有动画的模态窗口，弹出之后点击周围的空白就会让窗口消失，如果需要点空白窗口不消失，只需要在最外层div设置个data-backdrop="static" 属性就行。
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Mymodal">点击弹出（有动画）</button>
<div class="modal fade" id="Mymodal" role="dialog" tabindex="-1" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" data-dismiss="modal" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">提问</h4>
</div>
<div class="modal-body">
<p>问题描述</p>
<textarea class="form-control"></textarea>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
<button type="button" class="btn btn-primary">提交</button>
</div>
</div>
</div>
</div>例子中是用data-target实现点击切换操作的，也可以通过设置id，利用JavaScript来实现切换操作。
<script>
$(function(){
$("#open").click(function(){
$("#myModal").modal('show');
});
$("#submit").click(function(){
alert("信息已经提交");
$("#myModal").modal('hide');
});
$("#toggle").click(function(){
$("#myModal").modal('toggle');
});
});
</script>
<button class="btn btn-default" id="open"> 打开模态窗口</button>
<button class="btn btn-default" id="close"> 关闭模态窗口</button>
<button class="btn btn-default" id="toggle"> 切换模态窗口</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">提问</h4>
</div>
<div class="modal-body">
<p>问题描述</p>
<textarea class="form-control"></textarea>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
<button class="btn btn-primary" id="submit" type="button">提交</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<div style="height:200px"></div>可切换导航栏
也是很常见的效果哈。data-toggle为tab
</style>
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#dota" data-toggle="tab">
DotA
</a>
</li>
<li><a href="#lol" data-toggle="tab">英雄联盟</a></li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle"
data-toggle="dropdown">其他类似游戏
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#storm" tabindex="-1" data-toggle="tab">风暴英雄</a></li>
<li><a href="#h300" tabindex="-1" data-toggle="tab">300英雄</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="dota">
<p>《DotA》（Defense of the Ancients），可以译作守护古树、守护遗迹、远古遗迹守卫， 是由暴雪公司出品即时战略游戏《魔兽争霸3》的一款多人即时对战、自定义地图，可支持10个人同时连线游戏，是暴雪公司官方认可的魔兽争霸的RPG地图。</p>
</div>
<div class="tab-pane fade" id="lol">
<p>《英雄联盟》（简称lol）是由美国Riot Games开发，中国大陆地区由腾讯游戏运营的网络游戏。</p>
</div>
<div class="tab-pane fade" id="storm">
<p>
《风暴英雄》 是由暴雪娱乐公司开发的一款运行在Windows和Mac OS上的在线多人竞技PC游戏。</p>
<p> 游戏中的英雄角色主要来自于暴雪三大经典游戏系列：《魔兽世界》、《暗黑破坏神》和《星际争霸》。它是一款道具收费的游戏，与《星际争霸Ⅱ》基于同一引擎开发。
</p>
</div>
<div class="tab-pane fade" id="h300">
<p>《300英雄》是由上海跳跃网络科技有限公司自主研发，深圳中青宝互动网络股份有限公司运营的一款类DOTA网游。游戏以7v7组队对抗玩法为主，提供永恒战场和永恒竞技场两种经典模式任由玩家选择，并创新性地加入勇者斗恶龙、克隆战争等多种休闲娱乐玩法。
</p>
</div>
</div>提示工具
鼠标悬停在某个组件上面，如果该组件设置了title属性就会有提示信息，bootstrap就提供了更好看的提示工具、
<button style="margin-left:100px" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="提示信息">鼠标悬停</button>
<script>
$(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>可以通过更改data-placement属性来更改提示信息出现的位置，例子中是左，还可以上下右。
折叠
按钮折叠
点两下就会折叠起来。 collapse
<a href="#data" class="btn btn-info" role="button" data-toggle="collapse" >Data</a>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#LOL">LOL</button>
<div class="collapse" id = "data">
<div class="well">
《DotA》（Defense of the Ancients），可以译作守护古树、守护遗迹、远古遗迹守卫， 是由暴雪公司出品即时战略游戏《魔兽争霸3》的一款多人即时对战、自定义地图，可支持10个人同时连线游戏，是暴雪公司官方认可的魔兽争霸的RPG地图。
</div>
</div>
<div class="collapse" id="LOL">
<div class="well">
《英雄联盟》（简称lol）是由美国Riot Games开发，中国大陆地区由腾讯游戏运营的网络游戏。
</div>
</div>面板折叠，点击面板就会出现、折叠。
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a href="#collapseOne" role="button" data-toggle="collapse" data-parent="#accordion" aria-expanded="true" aria-controls="collapseOne">DATA</a>
</h4>
</div>
<div class="panel-collapse collapse in" id="collapseOne" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
DotA》（Defense of the Ancients），可以译作守护古树、守护遗迹、远古遗迹守卫， 是由暴雪公司出品即时战略游戏《魔兽争霸3》的一款多人即时对战、自定义地图，可支持10个人同时连线游戏，是暴雪公司官方认可的魔兽争霸的RPG地图。
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
LOL
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
《英雄联盟》（简称lol）是由美国Riot Games开发，中国大陆地区由腾讯游戏运营的网络游戏。
</div>
</div>
</div>
</div>轮播
就是图片轮播：用的是carousel，还可以通过设置data-interval="1000" 属性来改变轮播的速度。
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://how2j.cn/img/site/step/3491.png" >
</div>
<div class="item">
<img src="https://how2j.cn/img/site/step/3492.png" >
</div>
<div class="item">
<img src="https://how2j.cn/img/site/step/3493.png" >
</div>
<div class="item">
<img src="https://how2j.cn/img/site/step/3494.png" >
</div>
</div>
</div>如果想在每个图片的下面加个标题，就在图片下面加上carousel-caption就行
<div class="carousel-caption">
LOL1
</div>还可以加上向前向后的按钮效果：
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></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>
</a>学习网站：
