BootStrap学习(4)_分页&标签&缩略图&警告&进度条
一、分页
分页(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="#">«</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>
</body>
</html>
效果:
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="#"><<</a></li>
<li><a href="#"><</a></li>
<li><a href="#">></a></li>
<li><a href="#">>></a></li>
</ul>
</body>
</html>
效果:
二、标签
标签可用于计数、提示或页面上其他的标记显示。使用 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>
效果:
三、缩略图
- 在图像周围添加带有 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>
效果:
添加自定义的内容
现在我们有了一个基本的缩略图,我们可以向缩略图添加各种 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>
效果:
四、警告
基本警告:
您可以通过创建一个 <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=""
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 -- 缩略图、进度条、列表组、面板
Bootstrap -- 缩略图.进度条.列表组.面板 1. 缩略图 大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap ...
- bootstrap学习总结-03 常用标签1
1 显示段落 在HTML中,段落使用p标签包起来,重要的文字使用strong标签,em标签.<em> 标签告诉浏览器把其中的文本表示为强调的内容.对于所有浏览器来说,这意味着要把这段文字用 ...
- 学习EXTJS6(5)基本功能-进度条组件
Ext.ProgressBar有二种模式:手动和自动:手动:自己控制显示.进度.更新.清除.自动只需要调用Wait方法即可. 配置项: 配置项 类型 说明 renderTo String 指定页面 ...
- JS框架_(JQuery.js)纯css3进度条动画
百度云盘 传送门 密码:wirc 进度条动画效果: <!DOCTYPE html> <html lang="zh"> <head> <me ...
- bootstrap学习总结-05 常用标签3
1 单选框,多选框 1)单选框 单选框(radio)用于从多个选项中只选择一个.设置了 disabled 属性的单选或多选框都能被赋予合适的样式.对于和多选或单选框联合使用的 <label> ...
- bootstrap学习总结-04 常用标签2
1 表格 Bootstrap为表格设计了漂亮的样式. 1)表格基本实例 任意 <table> 标签添加 .table. <table class="table"& ...
- BootStrap学习(6)_模态框
一.模态框 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果只使用该功能,只引入BootSt ...
- BootStrap学习(3)_导航菜单
一.导航元素 1.表格导航或标签 以一个带有 class .nav 的无序列表开始. 添加 class .nav-tabs. <!DOCTYPE html> <html xmlns= ...
- BootStrap学习(2)_下拉菜单&按钮组
一.下拉菜单 1.基本下拉菜单 如需使用下列菜单,只需要在class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <ht ...
随机推荐
- vue axios 与 FormData 结合 提交文件 上传文件
---再利用Vue.axios.FormData做上传文件时,遇到一个问题,后台虽然接收到请求,但是将文件类型识别成了字符串,所以,web端一直报500,结果是自己大意了. 1.因为使用了new F ...
- Java —— 对象
创建对象 int[] b = new int[30]; 等号右侧:创建了一个数组对象 // 等号左侧:变量 b 称为该对应的引用 // 称作 变量 b 指向了一个对象 // 有时也简称为: b ...
- sqlserver 将 “用 特定字符 分隔的一个字段” 拆分成多个字段,然后两个表之间数据更新
将源TXT文件sourceFile_table.txt导入数据库,生成新表dbo.sourceFile_table.新增字段lon.lat.shi.xian 源表dbo.sourceFile_tabl ...
- Solr全文检索
1.Solr的安装 .环境要求 jdk1.+tomcat8+solr5.5.0 .将以上的软件包上传到服务器 . 安装tomcat8(解压文件) tar -zxvf apache-tomcat-.ta ...
- 使用vue的v-for生成table , 给table加上序号
现在有一个使用mybatis的分页插件生成的table,table中数据是通过vue获得的 , 前台显示使用<tr v-for="item in items"> 后台v ...
- Python3编写网络爬虫12-数据存储方式五-非关系型数据库存储
非关系型数据库存储 NoSQL 全称 Not Only SQL 意为非SQL 泛指非关系型数据库.基于键值对 不需要经过SQL层解析 数据之间没有耦合性 性能非常高. 非关系型数据库可细分如下: 键值 ...
- 使用POI读写word docx文件
目录 1 读docx文件 1.1 通过XWPFWordExtractor读 1.2 通过XWPFDocument读 2 写docx文件 2.1 直接通过XWPF ...
- centos7下安装docker(12.4容器如何与外部进行通信)
1.容器如何访问外部 前面我们做了很多试验:只要host能连外网,使用默认bridge(docker0)创建得容器就能访问外网,那么容器是怎样访问外网的呢? 注:这里的外网不仅是internet,包括 ...
- 判断MS SQLSERVER临时表是否存在
drop table #tempcitys select * into #tempcitys from hy_citys 上面的语句第一次运行的时候就肯定出错了,但第二次就不会.因为select * ...
- MVC知识点记录
_Layout.cshtmlRenderSectionsection 分部页的使用@Html.Partial Html.RenderPartial与 Html.RenderAction的 return ...