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

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

一.分页 分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页.  .pagination     --添加该 class 来在页面上显示分页. .disabled         --定义不可点击的链接 .active             --指示当前页面 .pagination-lg, .pagination-sm   --标签大小 .pager         --翻页 1.分页 <!DOCTYPE html> <html xmlns…

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

Bootstrap -- 缩略图.进度条.列表组.面板 1. 缩略图 大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下:    (1) 在图像周围添加带有 class .thumbnail 的 <a> 标签.    (2) 这会添加四个像素的内边距(padding)和一个灰色的边框.    (3) 当鼠标悬停在图像上时,会动画显示出图像的轮廓 使用缩略图: <!DOCTYPE html&…

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

1 显示段落 在HTML中,段落使用p标签包起来,重要的文字使用strong标签,em标签.<em> 标签告诉浏览器把其中的文本表示为强调的内容.对于所有浏览器来说,这意味着要把这段文字用斜体来显示.而在BootStramp中通过添加 .lead 类可以让段落突出显示. <h1>标签添加一个.page-header,可以为内容添加合适的边距,并且在下方显示一条灰色的边线. <!DOCTYPE html><html>     <head>     …

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

Ext.ProgressBar有二种模式:手动和自动:手动:自己控制显示.进度.更新.清除.自动只需要调用Wait方法即可. 配置项:   配置项 类型 说明 renderTo String 指定页面上已经存在的元素or元素id,该元素成为新组件的容器 height Number   width Bunber   cls String 一个可选的样式表扩展常用于自定义式样.默认是空 <!DOCTYPE html> <html> <head> <meta http-…

JS框架_(JQuery.js)纯css3进度条动画

百度云盘 传送门 密码:wirc 进度条动画效果: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport"…

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

1 单选框,多选框 1)单选框 单选框(radio)用于从多个选项中只选择一个.设置了 disabled 属性的单选或多选框都能被赋予合适的样式.对于和多选或单选框联合使用的 <label> 标签,如果也希望将悬停于上方的鼠标设置为“禁止点击”的样式,请将 .disabled 类赋予 .radio..radio-inline. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /…

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

1 表格 Bootstrap为表格设计了漂亮的样式. 1)表格基本实例 任意 <table> 标签添加 .table. <table class="table"> <tr> <td></td> <td></td> <td></td> ... </tr> </table> 表格基本实例代码如下: <!DOCTYPE html> <html&…

BootStrap学习(6)_模态框

一.模态框 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果只使用该功能,只引入BootStrap中的 modal.js即可 1.用法: 您可以切换模态框(Modal)插件的隐藏内容: 通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置 data-target="#identifier" 或hre…

BootStrap学习(3)_导航菜单

一.导航元素 1.表格导航或标签 以一个带有 class .nav 的无序列表开始. 添加 class .nav-tabs. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> &…

BootStrap学习(2)_下拉菜单&按钮组

一.下拉菜单 1.基本下拉菜单 如需使用下列菜单,只需要在class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"…