<nav role="navigation"> <div> <button type="button" data-toggle="collapse" data-target="#example-navbar-collapse"> <span></span> <span></span> <span></span><!--下面有几个选项这里就有几个iconbar--> </button> <a href="#">W3Cschool</a> </div> <div> <ul> <li><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li><a href="#">Troy</a></li> </ul> </div> </nav>
面包屑导航
<ol> <li><a href="#">Home</a></li> <li><a href="#">2013</a></li> <li>十一月</li> </ol>
分页和翻页
<!--以下所有示例都可以用disabled和active类来控制激活和禁用--> <!--分页--> <ul><!--pagination-sm和pagination-lg来控制分页的大小--> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul> <!--翻页--> <ul> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> <!--翻页--> <ul> <li><a href="#">← Older</a></li> <li><a href="#">Newer →</a></li> </ul>
标签
<span>默认标签</span> <span>主要标签</span> <span>成功标签</span> <span>信息标签</span> <span>警告标签</span> <span>危险标签</span>
徽章
徽章比标签更圆滑，主要用于突出显示新的或未读的项
<ul> <li> <a href="#"> <span>42</span> 首页 </a> </li> <li><a href="#">简介</a></li> <li> <a href="#"> <span>3</span> 消息 </a> </li> </ul>
超大屏幕
<div> <div> <h1>欢迎登陆页面！</h1> <p>这是一个超大屏幕（Jumbotron）的实例。</p> <p><a role="button"> 学习更多</a> </p> </div> </div> <!--翻过来jumbotron包着jumbotron就会得到一个不带圆角且占更多宽度的超大屏幕-->
页面标题示例
<div> <h1>页面标题实例 <small>子标题</small> </h1> </div>
缩略图
<div href="#"> <img src="https://www.jb51.net/wp-content/uploads/2014/06/kittens.jpg" alt="通用的占位符缩略图"> </div> <div> <h3>缩略图标签</h3> <p>一些示例文本。一些示例文本。</p> <p> <a href="#" role="button"> 按钮 </a> <a href="#" role="button"> 按钮 </a> </p> </div>
警告
<div><!--alert-dismissable为可删除警告--> <button type="button" data-dismiss="alert" aria-hidden="true"> × </button> 成功！很好地完成了提交。 </div> <div> <button type="button" data-dismiss="alert" aria-hidden="true"> × </button> <a href="#">成功！很好地完成了提交。</a><!--警告中的标签--> </div> <div> <button type="button" data-dismiss="alert" aria-hidden="true"> × </button> 警告！请不要提交。 </div> <div> <button type="button" data-dismiss="alert" aria-hidden="true"> × </button> 错误！请进行一些更改。 </div>
进度条
<!--一般进度条--> <div><!--progress-striped为加条纹,加active条纹会产生动画效果--> <!--progress-bar-info progress-bar-warning progress-bar-danger progress-bar-success 会给进度条不同颜色，不加就是最基本的--> <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> <span>90% 完成（成功）</span> </div> </div> <!---堆叠的进度条--> <div> <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> <span>40% 完成</span> </div> <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> <span>30% 完成（信息）</span> </div> <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> <span>20% 完成（警告）</span> </div> </div>
媒体标签