<!--table ,table-striped列表之间有间隔色,table-responsive表格自适应--> <div> <table> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> </tr> </table> </div>
3.5Badge徽章
<!--Badges徽章--> <br/> <a href="#" > 特别关心<span>42</span> </a> <br/>
3.6导航条
（1）胶囊式导航条
<ul > <li><a href="#">动态 <span>42</span></a></li> <li><a href="#">Profile</a></li> <li><a href="#">私信<span>3</span></a></li> </ul>
（2）标签式导航条
<!--标签式导航菜单--> <ul> <li><a href="#news1" data-toggle="tab">公司新闻</a></li> <li><a href="#news2" data-toggle="tab" >行业新闻</a></li> <li><a href="#news3" data-toggle="tab">通知公告</a></li> </ul> <div> <div> <ul> <li>公司新闻</li> <li>公司新闻</li> <li>公司新闻</li> </ul> </div> <div> <ul> <li>行业新闻</li> <li>行业新闻</li> <li>行业新闻</li> </ul> </div> <div> <ul> <li>通知公告</li> <li>通知公告</li> <li>通知公告</li> </ul> </div> </div>
3.7 input-group
<!--input+button组合--> <div> <input type="text"> <span> <button>搜索</button> </span> </div>
3.8轮播
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta content="width=device-width, initial-scale=1"> <title>Bootstrap模板样式</title> <link href="https://www.jb51.net/css/bootstrap.min.css"> <style> body{background: #eee} .item{position: relative; height: 400px} .item img{ position: relative; width: 100%; height: 400px} .item p{position: absolute; top:40%; width: 100%; color: #fff; } .item h1{position: absolute; top:20%; width: 100%; color: #fff; text-align: center} @media (max-width: 768px) { .slide{ width: 100%} } </style> <!--[if lt IE 9]> <script src="https://www.jb51.net/js/html5shiv.min.js"></script> <script src="https://www.jb51.net/js/respond.min.js"></script> <![endif]--> <script src="https://www.jb51.net/js/jquery.min.js"></script> <script src="https://www.jb51.net/js/bootstrap.min.js"></script> </head> <body> <div> <div data-ride="carousel" > <!--幻灯片导航--> <ol> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div> <!--第一张幻灯片--> <div > <img data-holder-rendered="true" src="https://www.jb51.net/images/图标1.png" > <h1>标题内容</h1> <p>段落内容</p> <!--幻灯片标题--> <div>标题 1</div> </div> <!--第二张幻灯片--> <div > <img data-holder-rendered="true" src="https://www.jb51.net/images/图标2.png"> <div>标题 2</div> </div> <!--第三张幻灯片--> <div> <img data-holder-rendered="true" src="https://www.jb51.net/images/图标3.png"> <div>标题 3</div> </div> </div> <!--左右导航--> <a href="#myCarousel" data-slide="prev"> <span aria-hidden="true"></span> <span>Previous</span> </a> <a href="#myCarousel" data-slide="next"> <span aria-hidden="true"></span> <span>Next</span> </a> </div> </div> <script> $(function(){ $('#myCarousel').on('slide.bs.carousel', function () { // alert("回调函数"); }); }); </script> </body> </html>
3.9面板panel-group