<ul> <li> <a data-toggle="tab" href="#home">首页</a> </li> <li> <a data-toggle="tab" href="#profile">个人资料</a> </li> <li> <!-- 点击 “我的书籍”， 弹出下拉带错 --> <a data-toggle="dropdown" href="#"> 我的书籍 <b></b> </a> <ul> <li> <a data-toggle="tab" href="#dropdown1">javaScript 编程精解</a> </li> <li> <a data-toggle="tab" href="#dropdown2">javaScript 设计模式</a> </li> <li> <a data-toggle="tab" href="#dropdown3">javaScript 启示录</a> </li> <li> <a data-toggle="tab" href="#dropdown4">深入理解 bootstrap</a> </li> </ul> </li> </ul> <div> <div> <p>点击 “首页”显示</p> </div> <div> <p>点击 “个人资料”显示</p> </div> <div> <p>点击 “javaScript 编程精解” 显示</p> </div> <div> <p>点击 “javaScript 设计模式” 显示</p> </div> <div> <p>点击 “javaScript 启示录” 显示</p> </div> <div> <p>点击 “深入理解 bootstrap3” 显示</p> </div> </div>
data-toggle="tab" href="#home"
可以使用
data-toggle="tab" data-target="#home"
替代，效果相同，js 默认先检测 data-target 属性，如果没有，再检测 href 属性，如果还没有，则默认为父元素
【表格】
<table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table>
table-striped : 斑马线
table-bordered : 边框
table-hover : 悬浮
table-condensed : 表格紧凑
注意，斑马线与 鼠标悬浮样式，颜色与 白色很接近，所以可能会误认为 table-striped 与 table-hover 没有生效，不起作用，
如果需要明显显示，我们需要重写样式颜色
/** 斑马线 **/ .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th { background-color: #EFEFEF; } /** 悬浮 **/ .table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th { background-color: #DFE8F6; }
【元素的隐藏与显示】
【响应式导航条】
<div> <div> <!-- 无论是宽屏还是窄屏，navbar-brand 都会显示 --> <a href="https://www.jb51.net/javaScript:void(0)">Brand</a> <!-- .navbar-toggle 样式用于 toggle 收缩的内容， 即 nav-collapse collapse元素 --> <button type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> </button> </div> <!-- 屏幕宽度小于 768 时，该DIV 默认隐藏，(单机 icon-bar 图标，可以再展开)， 大于768 时显示 --> <div> <ul> <li> <a href="https://www.jb51.net/javaScript:void(0)">主页</a> </li> <li> <a href="https://www.jb51.net/javaScript:void(0)">作品</a> </li> <li> <a href="https://www.jb51.net/javaScript:void(0)" data-toggle="dropdown"> 下拉菜单 <b></b> </a> <ul> <li> <a href="https://www.jb51.net/javaScript:void(0)">子菜单1</a> </li> <li> <a href="https://www.jb51.net/javaScript:void(0)">子菜单2</a> </li> </ul> </li> <li> <a href="https://www.jb51.net/javaScript:void(0)">图书</a> </li> </ul> </div> </div>
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程