<h2>路径导航效果</h2> <ol> <li> <a href="#">Home</a> </li> <li> <a href="#">Library</a> </li> <li>Data</li> </ol>
分页
.pagination赋给
元素可以实现分页效果
« 上一页
» 下一页
.disabled禁用状态
.active激活状态
.pagination-lg分页大尺寸
.pagination-sm分页小尺寸
.pager可以实现翻页效果。上一页、下一页效果。
<div> <ul> <li> <a href="#">← 上一页</a> </li> <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="">6</a> </li> <li> <a href="">7</a> </li> <li> <a href="">8</a> </li> <li> <a href="">9</a> </li> <li> <a href="">10</a> </li> <li> <a href="">»</a> </li> <li> <a href="#">下一页 →</a> </li> </ul> </div> <div> <ul> <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="">6</a> </li> <li> <a href="">7</a> </li> <li> <a href="">8</a> </li> <li> <a href="">9</a> </li> <li> <a href="">10</a> </li> <li> <a href="">»</a> </li> </ul> </div>
缩略图
.thumbnail赋给<a>元素，可以实现缩略图样式。
.caption 可以实现缩略图标题及描述
<h2>缩略图效果</h2> <div> <div> <a href=""><img src="https://www.jb51.net/img/001.png" /></a> <div> <h4>图片一</h4> </div> </div> <div> <a href=""><img src="https://www.jb51.net/img/001.png" /></a> <div> <h4>图片一</h4> </div> </div> <div> <a href=""><img src="https://www.jb51.net/img/001.png" /></a> <div> <h4>图片一</h4> </div> </div> </div>
导航栏
导航栏有一个不同，他不是写在Container包含层里面了，而是那个div的上面！
.navbar：导航栏的基类，用于<nav>元素。
.navbar-default：导航栏默认样式，用于<nav>元素。
.container是<nav>的子元素。导航栏内容都放入其中。
.navbar-header：导航栏头部样式。
.navbar-brand：设置品牌图标样式
.collapse是折叠导航栏的样式的基类。
.navbar-collapse是折叠导航栏样式。
.nav是导航栏的链接基类。
.navbar-nav是导航栏的链接样式。
.navbar-from：导航栏表单，可以使表单元素排在同一行。
.navbar-left 或 .navbar-right ：组件排列。导航链接、表单、按钮或文本对齐。
.navbar-btn：对于不在<form>中的<button>元素，实现垂直对齐。
.navbar-text：对于导航栏的普通文本有了行距和颜色，通常用于<p>元素。
.navbar-fixed-top：导航栏固定在顶部，用于<nav>元素。需要为<body>设置padding-top:70px
.navbar-fixed-bottom：导航栏固定在底部，用于<nav>元素。需要为<body>设置padding-bottom:70px;
.navbar-static-top：导航栏静止在顶部，用于<nav>元素。会随着滚动条移动而消失。
.navbar-inverse：可以实现反色导航栏，用于<nav>元素。