版权声明：@渔闻520 https://blog.csdn.net/weixin_41060905/article/details/83036454
#图标
要在<span>中使用
提供了200多个图标。
#下拉菜单
菜单div
<div class="dropdown">
下拉按钮，id用来给下拉菜单指向用的
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
菜单列表，aria-labelledby="dropdownMenu1" 就是用来指向哪个菜单，因为有可能有多个菜单
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
菜单项
<li><a href="#">HTML</a></li>
ex：
<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
http://192.168.1.189
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li>
<a href="#">HTML</a>
</li>
<li role="presentation">
<a href="#">CSS</a>
</li>
<li role="presentation">
<a href="#">Javascript</a>
</li>
<li role="presentation">
<a href="#">AJAX</a>
</li>
</ul>
</div>
<div style="height:100px"></div>#徽章
<span class="badge">4</span>
常用来显示还有多少条没有阅读的消息。
#超大屏幕
<div class="jumbotron">
<div class="container" align="center">
<h2 class="text-info" style="font-family:宋体;font-weight:bold;font-size:49px">逼乎</h2>
<br>
<div class="text-muted">与世界分享你的逼格</div>
<br>
<br>
<p><a role="button" href="#" class="btn btn-success">注册</a></p>
</div>
</div>
<style>
img{
width:150px;
}
</style>
<div class="container">
<div class="row">
<div class="col-xs-3 ">
<a href="#" class="thumbnail">
<img src="http://how2j.cn/study/gareen.jpg">
</a>
</div>
<div class="col-xs-3 ">
<a href="#" class="thumbnail">
<img src="http://how2j.cn/study/annie.jpg">
</a>
</div>
<div class="col-xs-3 ">
<a href="#" class="thumbnail">
<img src="http://how2j.cn/study/teemo.jpg">
</a>
</div>
<div class="col-xs-3 ">
<a href="#" class="thumbnail">
<img src="http://how2j.cn/study/katarina.jpg">
</a>
</div>
</div>
</div>可以加一个<div class="caption">
来为图片添加描述。