你的位置:首页 > 网页设计

[网页设计]BootStrap学习_分页标签缩略图警告进度条


一、分页

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

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

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

.active             --指示当前页面

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

 .pager         --翻页

 

1.分页

<!DOCTYPE html><html ="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

效果:

 

2.翻页

<!DOCTYPE html><html ="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

效果:

二、标签

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

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

<!DOCTYPE html><html ="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>

效果:

 三、缩略图

  • 在图像周围添加带有 class .thumbnail 的 <a> 标签。
  • 这会添加四个像素的内边距(padding)和一个灰色的边框。
  • 当鼠标悬停在图像上时,会动画显示出图像的轮廓。
<!DOCTYPE html><html ="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

效果:

 

 添加自定义的内容

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

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

 

<!DOCTYPE html><html ="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

效果:

 

四、警告

基本警告: 

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

可取消警告: 

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

警告中的链接:

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

  

<!DOCTYPE html><html "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 进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性,Opera 12 不支持动画。

1. 默认进度条:

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

2.交替的进度条

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

3.条纹的进度条

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

<!DOCTYPE html><html "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="width: 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="width: 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="width: 60%;">      <span class="sr-only">40% 完成-条纹</span>    </div>  </div></body></html>

效果: