Bootstrap学习(六）响应式嵌入、well、分页符、label、徽章、巨幕、警告框、进度条
今天继续学习！
响应式嵌入
可以将外部网页嵌入自己的网页中，长宽比由.embed-responsive-4by3控制。
<div class="container"><div class="embed-responsive embed-responsive-4by3"><iframe class="embed-responsive-item" src="http://www.yxdown.com/"></iframe></div></div>
well组件
类似panel面板，有一种嵌入效果。
<div class="well">well组件</div>
同理存在.well-sm等控制大小
分页符
<ul class="pagination"><li class="disabled"><a href="#" >«</a> </li><li class="active"><a href="#" >1</a> </li><li><a href="#">2</a> </li><li><a href="#">3</a> </li><li><a href="#">4</a> </li><li><a href="#">»</a> </li></ul>
同理存在.pagination-sm等控制大小
翻页符
<ul class="pager"><li><a href="#">下一页</a></li><li><a href="#">上一页</a></li></ul><ul class="pager"><li class="previous"><a href="#">下一页</a></li><li class="next"><a href="#">上一页</a></li></ul>
.previous/next把链接向左/向右对齐
label
<span class="label label-default">label-default</span><span class="label label-success">label-success</span><span class="label label-warning">label-warning</span><span class="label label-info">label-info</span><span class="label label-primary">label-primary</span>
badge 徽章
<div class="container"><a href="#">Message <span class="badge">30</span></a><button class="btn btn-default" type="button">Message <span class="badge">30</span></button></div>
page-header 大标题
<div class="page-header" ><h1>巨幕<samll>很大的标题</samll></h1></div>
alert 警告框
<div class="alert alert-success" role="alert">《骑马与砍杀2》新截图 改进UI，战场气势恢宏<button class="close" data-dismiss="alert"><span aria-disabled="true">×</span></button></div>
注意：给一个元素data-dimiss属性的话，可以通过点击该元素达到让目标消失的效果，这里是关闭外层alert。.alert-success各种样式不表。aria-disable表禁用状态，true表示当前是非激活状态；
超链接+alert
<div class="alert alert-success" role="alert"><a href="http://www.yxdown.com/" class="alert-link">单机游戏下载</a></div>
progress 进度条
<div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="20%" aria-valuemin="0" aria-valuemax="100" style="width:60%"60%</div></div>
注意：.aria-valuenow/valuemin/valuemax是给盲人阅读器准备的，另外如果不想显示百分比就加
<span class="sr-only">60%</span>
.progress-bar-danger/info/…/ 各种样式
.progress-bar-striped 条纹样式
.active 滚动动态特效
进度条堆叠
<div class="progress"><div class="progress-bar progress-bar-striped" role="progressbar" style="width:20%" aria-valuemin="0" aria-valuemin="100" ></div><div class="progress-bar progress-bar-info" role="progressbar" style="width:20%" aria-valuemin="0" aria-valuemin="100" ></div><div class="progress-bar" role="progressbar" style="width:10%" aria-valuemin="0" aria-valuemin="100" ></div></div>
Bootstrap学习(六）响应式嵌入、well、分页符、label、徽章、巨幕、警告框、进度条相关推荐
- 分享几个好看的Bootstrap后台管理响应式模板
原文地址:http://www.75271.com/1105.html 分享几个好看的Bootstrap后台管理响应式模板 1/charisma 国内下载地址:https://yunpan.cn/c6 ...
- Bootstrap实现的响应式APP下载页面代码
这次分享的是,一个设计优雅的APP下载页面主题,这套HTML是用当下最流行的Bootstrap框架实现的版本是v3.3.3,这套代码非常适合再次开发,代码简介没有多余的部分,结构组织清晰,代码注释完整 ...
- 使用Bootstrap框架-实现响应式页面开源案例-阿里百秀静态页面
使用Bootstrap框架-实现响应式页面开源案例-阿里百秀静态页面 tips 在不同设备中显示的样式 页面布局思路 html css tips 这个页面里的图片忒难看,实际可以换一换 在不同设备中显 ...
- 使用Bootstrap 3开发响应式网站实践04,使用Panels展示内容
在Bootstrap页面中,通常用Panels来展示主要功能的内容.该部分Html为: <div class="row" id="featureHeading&qu ...
- Vue学习 — Vue响应式原理
一. Object.defineProperty 在学习vue响应式原理之前,必须搞懂 Object.defineProperty. Object.defineProperty(obj, prop, ...
- 初学Bootstrap，制作响应式布局
Bootstrap是目前比较受欢迎的前端框架.它是基于 HTML.CSS.JAVASCRIPT 的,简洁灵活.因为在前几个月的学习中有了解到Bootstrap,并且当时就使用Bootstrap制作了简 ...
- Bootstrap样式插件/响应式布局/旅游网案例
Bootstrap 1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JavaScript 的,它简洁 ...
- BootStrap之前奏响应式布局
BootStrap 简介 概念: 课程目标: 响应式布局技术 了解BootStrap前端框架 一.响应式布局 1.1 历史问题 回顾之前HTML+CSS的布局方式,都是使用像素(px)来布局网页的,可 ...
- bootstrap导航窗格响应式二级菜单
这次碰到的需求是响应式二级导航窗格,默认的导航窗格只有点击下拉框的二级窗格,会有如下问题:一级菜单无法添加超链接,二级菜单展示要多点一下. 实现目标: 1.滑动到指定区域,展示二级菜单. 2.一级菜单 ...
最新文章
- 编译+构建+链接+运行之间的关系分析
- 从信息传递的视角看因果关系
- 深入理解Java原始数据类型和包装类关于==和equals的比较
- windows php apc 安装,php-apc 安装
- Java-ReentrantLock-NonfairSync/FairSync
- 01.ZooKeeper安装和介绍
- 蚂蚁课堂视频笔记思维导图-3期 九、分布式缓存架构
- 虚拟化arm服务器,服务器虚拟化领域的ARM处理器与RISC技术
- 计算机专业英语交换机,计算机专业英语词汇
- 两个不同网段的局域网如何互通_不同品牌的对讲机如何实现互通？
- Git fatal: Authentication failed for
- 【IT之路】连接MySQL遇到ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using passwor:yes)问题
- uni-app开发桌面应用
- 统计学原理 数据的来源
- oracle event 设置 alter system set events
- 【分享】如何自动同步企业微信外部客户信息到CRM系统？
- openwrt的自动挂载功能
- 进程介绍及和线程的关系
- pygame之pygame模块
- Echarts全国地区地图json获取（包含乡镇）