您的位置：首页 > Web前端 > BootStrap

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

2015-11-06 14:00 761 查看

一、分页

分页（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 >
<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 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">
×
</button>
信息！请注意这个信息。
</div>
<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</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">
×
</button>
错误！请进行一些更改。
</div>
</body>
</html>


效果:



五、进度条

兼容性: 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="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>


效果:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航