Bootstrap 分页标签徽章超大屏幕页面标题

Posted 2020-08-05 不重名

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Bootstrap 分页标签徽章超大屏幕页面标题相关的知识，希望对你有一定的参考价值。

分页(pagination), 是一种无序列表

1.默认的分页（.pagination）

代码示例：

1 <ul class="pagination"> 
2     <li><a href="#">&laquo;</a></li> 
3     <li><a href="#">1</a></li> 
4     <li><a href="#">2</a></li> 
5     <li><a href="#">3</a></li> 
6     <li><a href="#">4</a></li> 
7     <li><a href="#">5</a></li> 
8     <li><a href="#">&raquo;</a></li> 
9 </ul>

显示结果：

1.1 分页状态：禁用 disabled 和当前 active

例如：<li class="disabled"><a href="#">禁用链接</a></li>; 链接呈现灰色禁用状态。

<li class="active"><a href="#">当前链接</a></li>；当前页添加背景。

1.2 分页的大小（.pagination-*）

在<ul>元素中添加类.pagination-lg、或.pagination-sm可调整分页的大小。

2.翻页（pager）

翻页也是无序列表、默认情况下链接居中显示。可通过向无序列表选项<li>添加类 .previous 和 .next来设置左对齐或者右对齐。代码示例：

1 <ul class="pager"> 
2     <li class="previous"><a href="#">&larr; previous</a></li> 
3     <li class="next"><a href="#">next &rarr;</a></li> 
4 </ul>

结果显示：

翻页的状态（disabled）:通过向列表选项中添加列.disabled 来设置链接的禁用状态。

3.标签（label）

标签可用于计数、提示或页面上其他标记的显示。标签基类是 .label。另外可以用以下的类来修饰标签：

label-default、label-primary、label-success、label-info、label-warning、label-danger。

例如：

<h1>Example Heading <span class="label label-default">Label default</span></h1> 
<h2>Example Heading <span class="label label-info">Label info</span></h2> 
<h3>Example Heading <span class="label label-success">Label success</span></h3> 
<h4>Example Heading <span class="label label-warning">Label warning</span></h4>
<h4>Example Heading <span class="label label-danger">Label danger</span></h4>
<h4>Example Heading <span class="label label-primary">Label primary</span></h4>

显示结果如下：

4 徽章（badge）

与标签相似，只不过徽章的边角更加圆滑，徽章主要是用来提醒新的或者未读的项。使用类 .badge

例如：

<a href="#">收件箱<span class="badge">20</span></a>

结果：

激活导航状态

可以把徽章应用到激活的胶囊式导航菜单。代码示例：

 1 <h4>胶囊式导航中的激活状态</h4> 
 2 <ul class="nav nav-pills"> 
 3     <li class="active"> 
 4         <a href="#">首页<span class="badge">42</span></a> 
 5     </li> 
 6     <li> 
 7         <a href="#">简介</a> 
 8     </li> 
 9     <li> 
10         <a href="#">消息<span class="badge">3</span></a> 
11     </li> 
12 </ul> 
13 <br> 
14 <h4>列表导航中的激活状态</h4> 
15 <ul class="nav nav-pills nav-stacked" style="max-width: 260px;"> 
16     <li class="active"> 
17         <a href="#"><span class="badge pull-right">42</span>首页</a> 
18     </li> 
19     <li> 
20         <a href="#">简介</a> 
21     </li> 
22     <li> 
23         <a href="#"><span class="badge pull-right">3</span>消息</a> 
24     </li> 
25 </ul>

结果显示：

5. 超大屏幕（.jumbotron）

创建一个带有 class .jumbotron. 的容器 <div>。除了<h1>，字体粗细 font-weight 被减为 200px。为了使超大屏幕占用全部宽度且不带圆角。请在带有类.container 的容器外部使用类.jumbotron.

代码示例：

1 <div class="jumbotron"> 
2     <div class="container"> 
3         <h1>欢迎登陆页面！</h1> 
4         <p>这是一个超大屏幕（Jumbotron）的实例。</p> 
5         <p><a class="btn btn-primary btn-lg" role="button">学习更多</a> 
6         </p> 
7     </div> 
8 </div>