您的位置: 首页  >  IT文章  >  BootStrap学习(4)_分页&标签&缩略图&警告&进度条

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

分类: IT文章 • 2024-01-03 20:28:54

一、分页

分页（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>
View Code

效果：

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>
View Code

效果:

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>
View Code

效果:

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

 添加自定义的内容

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

<!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>
View Code

效果:

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

四、警告

基本警告: 

     您可以通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-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 >
<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. 默认进度条:

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="60"
            aria-valuemin="0" aria-valuemax="100" style=" 40%;">
            <span class="sr-only">40% 完成-默认进度条</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar  progress-bar-warning" role="progressbar" aria-valuenow="60"
            aria-valuemin="0" aria-valuemax="100" style=" 50%;">
            <span class="sr-only">50% 完成-交替</span>
        </div>
    </div>
     <div class="progress progress-striped">
        <div class="progress-bar  progress-bar-danger" role="progressbar" aria-valuenow="60"
            aria-valuemin="0" aria-valuemax="100" style=" 60%;">
            <span class="sr-only">40% 完成-条纹</span>
        </div>
    </div>
</body>
</html>

效果:

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