<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>demo01</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="application/javascript" src="js/jquery-1.11.1.min.js"></script>
<script language="JavaScript" src="js/bootstrap.min.js"></script>
</head>
<body>
<ul class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">国内新闻</a></li>
<li><a href="#">高考专题</a></li>
</ul>
<hr/>
<ul class=" pagination 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="#">6</a></li>
<li><a href="#">»</a></li>
</ul>
<ul class=" pagination">
<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="#">»</a></li>
</ul>
<ul class=" pagination pagination-sm">
<li><a href="#">«</a></li>
<li class="active"><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="#">»</a></li>
</ul>
<hr />
<ul class="pager">
<li class="active"><a href="">上一页</a></li>
<li><a href="">下一页</a></li>
</ul>
</body>
</html>
************************************************************************************************************************************************
Bootstrap学习组件篇之导航、标签、面包屑导航
1、导航
Bootstrap中可用的导航有相似的标记，用基类.nav开头，这是相似的部分。改变修饰类可以改变样式。
1）标签页
注意.nav-tabs类需要.nav基类。
代码段：
<h1 class="page-header">标签页</h1>
<ul class="nav nav-tabs">
<li class="active"><a href="#">主页</a></li>
<li><a href="#">属性</a></li>
<li><a href="#">信息</a></li>
</ul>
预览：
Requires JavaScript tabs plugin
For tabs with tabbable areas, you must use the tabs JavaScript plugin.
2）胶囊式标签页
用相同的 HTML 标记，但要用.nav-pills代替。
代码段：
<h1 class="page-header">胶囊式标签页</h1>
<ul class="nav nav-pills">
<li class="active"><a href="#">主页</a></li>
<li><a href="#">属性</a></li>
<li><a href="#">信息</a></li>
</ul>
预览：
3）两端对齐的导航
在大于768px的屏幕上，通过.nav-justified可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。
Safari 和响应式两端对齐导航
Safari有一个bug：对于两端对齐的导航，水平改变浏览器大小将引起绘制错误。此bug可以在justified nav example页面得到重现。
4）禁用的链接
对任何导航（包括标签页，pills，或列表，加入.disabled使链接为灰色且没有鼠标悬停效果。
链接功能没有受到影响
这个类只改变<a>的外观，而不是它的功能。用自定义的 JavaScript 禁用这里的链接。
代码段：
<h1 class="page-header">禁用掉的链接</h1>
<ul class="nav nav-pills">
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Disabled link</a></li>
<li><a href="#">Disabled link</a></li>
<li><a href="#">Disabled link</a></li>
<li><a href="#">Disabled link</a></li>
</ul>
5）使用下拉菜单
一点点额外HTML和 JavaScript下拉菜单插件 加入下拉菜单。
<h1 class="page-header">带下拉菜单的导航</h1>
<ul class="nav nav-tabs">
<li><a href="#">链接</a></li>
<li><a href="#">链接</a></li>
<li><a href="#">链接</a></li>
<li><a href="#">链接</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">linklink</a></li>
<li><a href="#">linklink</a></li>
<li><a href="#">linklink</a></li>
</ul>
</li>
</ul>
2、标签
代码段：
<h1 class="page-header">标签</h1>
<h1>示例标签<span class="label label-default">New</span></h1>
<h2>示例标签<span class="label label-default">New</span></h2>
<h3>示例标签<span class="label label-default">New</span></h3>
<h4>示例标签<span class="label label-default">New</span></h4>
<h5>示例标签<span class="label label-default">New</span></h5>
<h6>示例标签<span class="label label-default">New</span></h6>
可用的变体
用下面的任何一个class即可改变标签的外观。
代码：
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
扫一扫
5205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
