BootStrap学习(4)_分页&标签&缩略图&警告&进度条

时间：2022-07-03 08:44:49

一、分页

分页（Pagination），是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页。

 .pagination     --添加该 class 来在页面上显示分页。

.disabled         --定义不可点击的链接

.active             --指示当前页面

.pagination-lg, .pagination-sm   --标签大小

.pager         --翻页

1.分页

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />

    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>

<body style="margin-top: 20px; margin-left: 20px;">

    <ul class="pagination">

        <li><a href="#">&laquo;</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="#">&raquo;</a></li>

    </ul>

</body>

</html>

效果：

BootStrap学习(4)_分页&标签&缩略图&警告&进度条

2.翻页

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />

    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>

<body style="margin-top: 20px; margin-left: 20px;">

     <ul class="pager">

        <li><a href="#">&lt;&lt;</a></li>

        <li><a href="#">&lt;</a></li>

        <li><a href="#">&gt;</a></li>

        <li><a href="#">&gt;&gt;</a></li>

    </ul>

</body>

</html>

效果:

BootStrap学习(4)_分页&标签&缩略图&警告&进度条

二、标签

标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签

可以使用修饰的 class label-default、label-primary、label-success、label-info、label-warning、label-danger 来改变标签的外观

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />

    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>

<body style="margin-top: 20px; margin-left: 20px;">

     <span class="label label-default">默认标签</span>

<span class="label label-primary">主要标签</span>

<span class="label label-success">成功标签</span>

<span class="label label-info">信息标签</span>

<span class="label label-warning">警告标签</span>

<span class="label label-danger">危险标签</span>

</body>

</html>

效果:

BootStrap学习(4)_分页&标签&缩略图&警告&进度条

三、缩略图

  • 在图像周围添加带有 class .thumbnail 的 <a> 标签。
  • 这会添加四个像素的内边距（padding）和一个灰色的边框。
  • 当鼠标悬停在图像上时，会动画显示出图像的轮廓。
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />

    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>

    <body >

<div class="row">

   <div class="col-sm-6 col-md-3">

      <a href="#" class="thumbnail">

          <img src="../Imgs/img1/pic1.jpg"

         alt="通用的占位符缩略图"/>

      </a>

   </div>

   <div class="col-sm-6 col-md-3">

      <a href="#" class="thumbnail">

           <img src="../Imgs/img1/pic1.jpg"

         alt="通用的占位符缩略图"/>

      </a>

   </div>

</div>

</body>

</html>

效果:

BootStrap学习(4)_分页&标签&缩略图&警告&进度条

添加自定义的内容

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

  • 把带有 class .thumbnail 的 <a> 标签改为 <div>。
  • 在该 <div> 内，您可以添加任何您想要添加的东西。由于这是一个 <div>，我们可以使用默认的基于 span 的命名规则来调整大小。
  • 如果您想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />

    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>

    <body >

<div class="row">

   <div class="col-sm-6 col-md-3">

      <div class="thumbnail">

           <img src="../Imgs/img1/pic1.jpg"

         alt="通用的占位符缩略图"/>

      </div>

      <div class="caption">

         <h3>南极企鹅</h3>

         <p>$100/个</p>

         <p>

            <a href="#" class="btn btn-primary" role="button">

               购买

            </a>

            <a href="#" class="btn btn-default" role="button">

               收藏

            </a>

         </p>

      </div>

   </div>

   <div class="col-sm-6 col-md-3">

      <div class="thumbnail">

         <img src="../Imgs/img1/pic1.jpg"

         alt="通用的占位符缩略图"/>

      </div>

      <div class="caption">

         <h3>南极企鹅</h3>

         <p>$100/个</p>

         <p>

            <a href="#" class="btn btn-primary" role="button">

               购买

            </a>

            <a href="#" class="btn btn-default" role="button">

               收藏

            </a>

         </p>

      </div>

   </div>

   </div>

</div>

</body>

</html>

效果:

BootStrap学习(4)_分页&标签&缩略图&警告&进度条

四、警告

基本警告: 

您可以通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框

可取消警告: 

  • 同时向上面的 <div> class 添加可选的 .alert-dismissable。
  • 添加一个关闭按钮。

警告中的链接:

  • 使用 .alert-link 实体类来快速提供带有匹配颜色的链接。
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />

    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>

    <body >

<div class="alert alert-success">

   成功！很好地完成了提交。

</div>

<div class="alert alert-info alert-dismissable">

   <button type="button" class="close" data-dismiss="alert"

      aria-hidden="true">

      &times;

   </button>

   信息！请注意这个信息。

</div>

<div class="alert alert-warning alert-dismissable">

 <button type="button" class="close" data-dismiss="alert"

      aria-hidden="true">

      &times;

   </button>

      <a href="#" class="alert-link"> 警告！请不要提交。</a>

</div>

<div class="alert alert-danger alert-dismissable">

   <button type="button" class="close" data-dismiss="alert"

      aria-hidden="true">

      &times;

   </button>

   错误！请进行一些更改。

</div>

</body>

</html>

效果:

BootStrap学习(4)_分页&标签&缩略图&警告&进度条

五、进度条

兼容性:  Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性，Opera 12 不支持动画。

1. 默认进度条:

  • 添加一个带有 class .progress 的 <div>。
  • 接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
  • 添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。

2.交替的进度条

在默认进度条 class .progress-bar的<div> 内，添加一个class progress-bar-*。其中，* 可以是 success、info、warning、danger。

3.条纹的进度条

在默认进度条带有 class .progress 的 <div> 加入 .progress-striped

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />

    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>

<body>

    <div class="progress">

        <div class="progress-bar" role="progressbar" aria-valuenow=""

            aria-valuemin="" aria-valuemax="" style="width: 40%;">

            <span class="sr-only">% 完成-默认进度条</span>

        </div>

    </div>

    <div class="progress">

        <div class="progress-bar  progress-bar-warning" role="progressbar" aria-valuenow=""

            aria-valuemin="" aria-valuemax="" style="width: 50%;">

            <span class="sr-only">% 完成-交替</span>

        </div>

    </div>

     <div class="progress progress-striped">

        <div class="progress-bar  progress-bar-danger" role="progressbar" aria-valuenow=""

            aria-valuemin="" aria-valuemax="" style="width: 60%;">

            <span class="sr-only">% 完成-条纹</span>

        </div>

    </div>

</body>

</html>

效果:

BootStrap学习(4)_分页&标签&缩略图&警告&进度条

BootStrap学习(4)_分页&标签&缩略图&警告&进度条的更多相关文章

  1. Bootstrap -- 缩略图、进度条、列表组、面板

    Bootstrap -- 缩略图.进度条.列表组.面板 1. 缩略图 大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap ...

  2. bootstrap学习总结-03 常用标签1

    1 显示段落 在HTML中,段落使用p标签包起来,重要的文字使用strong标签,em标签.<em> 标签告诉浏览器把其中的文本表示为强调的内容.对于所有浏览器来说,这意味着要把这段文字用 ...

  3. 学习EXTJS6（5）基本功能-进度条组件

    Ext.ProgressBar有二种模式:手动和自动:手动:自己控制显示.进度.更新.清除.自动只需要调用Wait方法即可. 配置项:   配置项 类型 说明 renderTo String 指定页面 ...

  4. JS框架&lowbar;&lpar;JQuery&period;js&rpar;纯css3进度条动画

    百度云盘 传送门 密码:wirc 进度条动画效果: <!DOCTYPE html> <html lang="zh"> <head> <me ...

  5. bootstrap学习总结-05 常用标签3

    1 单选框,多选框 1)单选框 单选框(radio)用于从多个选项中只选择一个.设置了 disabled 属性的单选或多选框都能被赋予合适的样式.对于和多选或单选框联合使用的 <label&gt ...

  6. bootstrap学习总结-04 常用标签2

    1 表格 Bootstrap为表格设计了漂亮的样式. 1)表格基本实例 任意 <table> 标签添加 .table. <table class="table"& ...

  7. BootStrap学习&lpar;6&rpar;&lowbar;模态框

    一.模态框 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果只使用该功能,只引入BootSt ...

  8. BootStrap学习&lpar;3&rpar;&lowbar;导航菜单

    一.导航元素 1.表格导航或标签 以一个带有 class .nav 的无序列表开始. 添加 class .nav-tabs. <!DOCTYPE html> <html xmlns= ...

  9. BootStrap学习&lpar;2&rpar;&lowbar;下拉菜单&amp&semi;按钮组

    一.下拉菜单 1.基本下拉菜单 如需使用下列菜单,只需要在class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <ht ...

随机推荐

  1. oracle分组查询实例ORA-00979和ORA-00937错误分析

    select J.ZWJGH,J.CZZXBH,J.JZZT,J.CWNY,J.JZPZH sum(J.FSE)<!-- 聚合函数字段没在分组条件中--> from JZPZXX J &l ...

  2. java 27 - 4 反射之 通过反射获取成员变量并使用

    类Field: 提供有关类或接口的单个字段的信息,以及对它的动态访问权限. A:获得类的成员变量 数组: 1.getFields(公共类的) 2.getDeclaredFields(所有类型的) B: ...

  3. react-基础&lpar;2&rpar;

    表单相关 固定的几个属性和事件 value: <input>,<textarea>; checked: <input> typeof checkbox, radio ...

  4. 移动Web框架&colon;jQuery Mobile VS Sencha Touch

    最近常被问到是用 jQuery Mobile还是Sencha Touch,本人也比较关注这两个框架,试图从以下两方面发表点儿见解: 身家背景,都系出名门 1.jQuery Mobile 建立在jQue ...

  5. python基础6之迭代器&amp&semi;生成器、json&amp&semi;pickle数据序列化

    内容概要: 一.生成器 二.迭代器 三.json&pickle数据序列化 一.生成器generator 在学习生成器之前我们先了解下列表生成式,现在生产一个这样的列表[0,2,4,6,8,10 ...

  6. js四则运算

    这个bug是js固有的,浮点数精度不准,你可以用下面方法来解决,思路是先放大,求和.差.积等运算后再缩小. 如: //加法函数,用来得到精确的加法结果 //说明:javascript的加法结果会有误差 ...

  7. Java问题解决：使用maven install 和 package时出错

    今天在idea中使用maven install 和 package时出现以下问题: [WARNING] The POM for org.apache.maven.plugins:maven-compi ...

  8. 关于nginx安装、iptables设置和查看端口指令netstat&sol;ss

    实验1: Nginx介绍 Nginx("engine x")是一款是由俄罗斯的程序设计师Igor Sysoev所开发高性能的 Web和 反向代理 服务器,也是一个 IMAP/POP ...

  9. MySQL 索引与查询优化

    本文介绍一些优化 MySQL 索引设计和查询的建议.在进行优化工作前,请务必了解MySQL EXPLAIN命令: 查看执行计划 索引 索引在逻辑上是指从索引列(关键字)到数据的映射,通过索引可以快速的 ...

  10. redis设置最大内存

相关文章