BootStrap2学习日记17---导航路径和分页
导航路径
代码:
<ul class="breadcrumb">
<li><a href="#">Home</a><span class="divider">></span></li>
<li class="active">Product List</li>
</ul>
效果:

分页器
代码:
<div class="pagination">
<ul>
<li><a href="#">1</a></li>
<li class="active"><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>
</ul>
</div>
效果:

代码:
<div class="pager">
<ul>
<li><a href="#">上一页</a></li>
<li><a href="#">下一页</a></li>
</ul>
</div>
效果:

代码:
<div class="pager">
<ul>
<li class="previous"><a href="#">上一页</a></li>
<li class="next"><a href="#">下一页</a></li>
</ul>
</div>
效果:

BootStrap2学习日记17---导航路径和分页的更多相关文章
- BootStrap2学习日记15----选项卡
导航格式1: <ul class="nav nav-tabs"> <li class="active"><a href=" ...
- BootStrap2学习日记14----导航
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inne ...
- BootStrap2学习日记3--响应式布局实用类
BootStrap2中常用的响应式布局类如: visible-phone 仅在 手机平台显示 visible-tablet 仅在 平板电脑显示 visible-desktop 仅 ...
- BootStrap2学习日记2--将固定布局换成响应式布局
概要:响应式页面是指页面根据浏览平台(尺寸)的不同显示不同的CSS. 原理:在Html的的头加入代码 <style> /*当浏览器宽度大于767是 采用括号里面的CSS样式*/ @medi ...
- BootStrap2学习日记23---图片轮播
<div id="carousel1" class="carousel slide"> <div class="carousel-i ...
- BootStrap2学习日记22---点击展开
先看效果: Code: <div class="accordion" id="accordion2"> <div class="ac ...
- BootStrap2学习日记21---消息提示
<p><a href="#" title="中国(China),位于东亚,是一个以华夏文明为主体.中华文化为基础,以汉族为主要民族的统一多民族国家,通用 ...
- BootStrap2学习日记20---定制缩略图
先看看效果: 代码: <ul class="thumbnails"> <li class="span3"> <div class= ...
- BootStrap2学习日记19---缩略图
缩略图 代码: <ul class="thumbnails"> <li class="span3"><a href="# ...
随机推荐
- 第二百三十一天 how can I 坚持
哎,蛋疼的一天,一点破问题搞了一下午,还没搞利索. 他们要组织出去玩,我没有参加啊,随便找了个借口. 博客园的字体怎么变小了呢,看着好难受啊,昨天传照片传的? 睡觉.外边下着雨呢,喜欢下雨的夏天还有下 ...
- C++Bulder DataSnap 内存泄露元凶
DSServerClass1 DSServerClass1DestroyInstance void __fastcall TServerContainer1::DSServerClass1Destro ...
- area标签circle/rect/poligon坐标
<img src="images/02.gif" title="flower" usemap="#mm" /> <map ...
- OSPF虚链路配置.示例2
先看一个拓扑图 黄色区域是area0,即骨干区域,如果如图示RT1与RT6之间的链路断了,那么会出现骨干区域被“分裂”的情况,很明显骨干区域是不能被分割开的,出现这种状况的时候可能会影响到整个自制系统 ...
- Maven Archetype Plugin
使用Archetype的一般步骤 命令——mvn archetype:generate 输入命令后,Archetype插件会输出一个Archetype列表供用户选择:选择自己想要使用的Archetyp ...
- zendstudio 出现failed to create the java machine转
是因为配置java虚拟机内存太小 打开zend for eclipse 10.5时报了个错: failed to create the java virtual machine google了一下,解 ...
- PB学习笔记(一)
前言:我绝对很痛恨PB.1.没人带2.自己摸索3.头发掉了4.老大不停的给任务5.这语言老的不行了6,代码可读性不是一般的差 我绝对很喜欢PB.1.自我学习成功后那种成就感2.老大也会帮给我看看,指点 ...
- logstash开源日志收集查询分析系统
http://storysky.blog.51cto.com/628458/1158707/ http://www.logstash.net/ http://blog.sina.com.cn/s/bl ...
- Giraph之SSSP(shortest path)单机伪分布运行成功
所遇问题:Exception 1: Exception in thread "main" java.lang.IllegalArgumentException: "che ...
- OC:面向对象的编程思想、基本的知识点总结、强,弱引用
OC 面向对象 和 面向过程 参考 面向过程:使用步骤划分功能,然后用函数一步一步的调用 面向对象:OOP (Object Oriented Programming) 使用功能来简化问题, 面向对象语 ...