文章

Bootstrap第四小节

分页

默认分页(Pagination)
分页(Pagination)是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页。

下表列出了 Bootstrap 提供的处理分页的类:

翻页(Pager)
我们可以通过翻页(Pager)来实现上一页和下一页的简单翻页功能。

与分页链接一样,翻页也是无序列表。
在默认的翻页中,链接居中对齐。

下表列出了 Bootstrap 处理翻页的类。

<!--默认分页并设置大的分页-->
<ul class="pagination pagination-lg">
    <li>
        <a href="#">«</a>
    </li>
    <li class="active">
        <a href="#">1</a>
    </li>
    <li class="disabled">
        <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="#">»</a>
    </li>
</ul>

<!--并设置对齐翻页链接-->
<ul class="pager">
    <li class="previous">
        <a href="#">上一页</a>
    </li>
    <li class="next">
        <a href="#">下一页</a>
    </li>
</ul>

标签

使用.label类来显示标签,如下实例所示:

<!--在文本后面带上标签-->
<h3>标签 <span class="label label-default">new</span></h3>

我们可以使用修饰的 label-default、label-primary、label-success 等类来改变标签的外观。

代码:

<h6>标签 <span class="label label-primary">new</span></h6>
<h5>标签 <span class="label label-success">new</span></h5>
<h4>标签 <span class="label label-info">new</span></h4>
<h3>标签 <span class="label label-warning">new</span></h3>
<h2>标签 <span class="label label-danger">new</span></h2>

效果如图:

徽章

徽章与标签相似,主要的区别在于徽章的边角更加圆滑。

我们给链接、导航等元素嵌套 span class="badge" 元素,可以很醒目的展示新的或未读的信息条目。

以下是徽章的一些具体实例:

  1. 未读信息数量徽章
    给链接元素嵌套徽章展示未读信息条数:
<a href="#">信息 <span class="badge">10</span></a>
  1. 按钮中使用徽章
<button class="btn btn-success"> 提交 <span class="badge">3</span>
</button>
  1. 激活状态自动适配色调
    我们可以在激活状态的胶囊式导航和列表导航中放置徽章。通过使用 span class="badge" 来激活链接,如下面的实例所示:
<ul class="nav nav-pills">
    <li class="active">
        <a href="#">首页
        <span class="badge">2</span></a>
    </li>
    <li>
        <a href="#">资讯</a>
    </li>
</ul>

巨幕

我们先来看一下巨幕(Jumbotron) 组件,巨幕组件主要是展示网站的关键性区域。具体实例如下所示:

<!--在固定范围内,有圆角-->
<div class="container">

    <div class="jumbotron">
        <h2>W3Cschool</h2>
        <p> 这是一个学习性的网站! </p>
        <p>
            <a href="#" class="btn btn-default">更多内容</a>
        </p>
    </div>
</div>

如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角,步骤如下:

把此组件放在所有 .container 元素的外面
在组件内部添加一个 .container 元素
如下实例所示:

<div class="jumbotron">

  <div class="container">

    ...

  </div>

</div>

页头

当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页头这个组件就显得特别有用。

页头组件能够为 h1 标签增加适当的空间,并且与页面的其他部分形成一定的分隔。

如果需使用页头(Page Header),请把标题放置在带有 .page-header 类 的 div 中,如下实例所示:

<div class="page-header">
    <h1>大标题 <small>小标题</small></h1>
</div>

缩略图

通过缩略图组件扩展 Bootstrap 的 栅格系统,可以很容易地展示栅格样式的图像、视频、文本等内容。

将图像放在带有 .thumbnail 类的 a 标签中即可创建缩略图,具体实例如下:

缩略图配合响应式

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-3 col-sm-4">
            <a class="thumbnail">
                <img src="img/pic.png" alt="">
            </a>
        </div>
        <div class="col-xs-6 col-md-3 col-sm-4">
            <a class="thumbnail">
                <img src="img/pic.png" alt="">
            </a>
        </div>
    </div>
</div>

运行结果如下所示:

添加自定义的内容
现在我们有了一个基本的缩略图,我们可以向缩略图添加各种 HTML 内容,比如标题、段落或按钮。具体如下:

<div class="thumbnail">
    <img src="img/pic.png" alt="">
        <div class="caption">
            <h3>图文并茂</h3>
            <p> 这是一个图片结合文字的缩略图 </p>
            <p>
               <a href="#" class="btn btn-default">按钮</a>
            </p>
         </div>
</div>

警告框

警告框组件是一组预定义消息。

将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框,.alert类是必须要设置的,另外 bootstrap 还提供了有特殊意义的4个类,代表不同的警告信息。

基本警告框实例:

<div class="alert alert-success">成功</div>
<div class="alert alert-info">消息</div>
<div class="alert alert-warning">警告</div>
<div class="alert alert-danger">危险</div>


带关闭的警告框(为警告框添加一个可选的 .alert-dismissible 类和一个关闭按钮):

<div class="alert alert-success"> Bootstrap <button type="button" class="close" data-dismiss="alert">
        <span>×</span>
    </button>
</div>

警告框中的链接(用.alert-link工具类,可以为链接设置与当前警告框相符的颜色)

 <div class="alert alert-success"> Bootstrap,请到官网 <a href="http://www.bootcss.com/" class="alert-link">下载</a>
</div>

列表组

创建一个基本的列表组的步骤如下:

向 ul 添加.list-group类
向 li 添加.list-group-item类

基本实例:

<ul class="list-group">
    <li class="list-group-item"> 1.这是起始 </li>
    <li class="list-group-item"> 2.这是第二条数据 </li>
    <li class="list-group-item"> 3.这是末尾 </li>
</ul>

带徽章的列表组
向列表组添加徽章
给列表组加入徽章组件,它会自动被放在右边,具体做法如下:

<li class="list-group-item"> 1.这是起始 <span class="badge">10</span>
</li>

列表组 -- 定制内容
向列表组添加链接和按钮

用 a 标签代替 li 标签可以组成一个全部是链接的列表组,具体实例如下:

<a href="#" class="list-group-item">W3Cschool</a>

注意:我们需要将 ul 标签替换为 div 标签。

列表组中的元素也可以直接就是按钮,例子如下:

<button class="list-group-item">...</button>

定制内容

列表组中的每个元素都可以是任何 HTML 内容,如下所示:

<div class="list-group">
    <a href="#" class="list-group-item active">
    <h4>内容标题</h4>
    <p class="list-group-item-text"> 这里是相关内容详情! </p>
    </a>
    ...

面板

简直不要太简单,我发现bootstrap就是直接用class类就好了
面板(Panels)组件就是一个存放内容的容器组件。

面板类
下表列出了 bootstrap 提供的一些面板相关的类:

创建一个基本的面板,只需要向 div 元素添加 .panel 和 .panel-default 类即可

表格类面板
为了在面板中创建一个无边框的表格,我们可以在面板中使用 .table 类。

具体实例如下:

<div class="panel panel-default">
    <div class="panel-heading"> 表格标题 </div>
    <div class="panel-body">
        <p> 这里是表格标题的详细内容! </p>
    </div>
    <table class="table">
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
        ......
    </table>
</div>

列表类面板
之前我们已经在上一小节中学过如何创建列表组。通过以下步骤我们可以在任何面板中包含列表组:

通过在 div 元素中添加 .panel 和 .panel-default 类来创建面板;
在面板中添加列表组。

<div class="panel panel-default">
    <div class="panel-heading">面板标题</div>
    <div class="panel-body">
        <p>这是一个基本的面板内容</p>
    </div>
    <ul class="list-group">
        <li class="list-group-item"> 1.这里是首页 </li>

        <li class="list-group-item"> 2.这里是第二个项目 </li>

        <li class="list-group-item"> 3.这里是第三个项目 </li>

    </ul>
</div>

进度条

  1. 基本进度条
<div class="progress">
    <div class="progress-bar" style="width: 60%;"> 60% </div>
</div>

style="width: 60%"; 表示进度条在 60% 的位置
2. 结合情境的进度条
进度条组件使用与按钮和警告框相同的类,根据不同情境展现相应的效果。

<div class="progress">
    <div class="progress-bar progress-bar-info" style="min-width: 20px; width: 2%;">2%</div>
</div>

在展示很低的百分比时,如果需要让文本提示能够清晰可见,可以为进度条设置 min-width 属性
3. 条纹状进度条

<div class="progress">
    <div class="progress-bar progress-bar-success
    progress-bar-striped" style="min-width:20px;width:60%"> 60% </div>
</div>

为 .progress-bar-striped 添加 .active 类,可以使进度条呈现出由右向左运动的动画效果

原文来自:Bootstrap第四小节,尊重自己,尊重每一个人;转发请注明来源!
0 0

发表评论