Bootstrap组件之具有响应式特性的嵌入内容
来源:互联网 发布:乐清知临公立宿舍学校 编辑:程序博客网 时间:2024/05/22 03:13
根据被嵌入内容的外部容器的宽度,自动创建一个固定的比例,从而让浏览器自动确定视频或 slideshow 的尺寸,能够在各种设备上缩放。这些规则被直接应用在 <iframe>
、<embed>
、<video>
和 <object>
元素上。
.embed-responsive——指定div为具有响应式特性的嵌入内容的组件;
.embed-responsive-16by9、.embed-responsive-4by3——指定组件内元素宽高比分别为16:9、4:3;
.embed-responsive-item——指定组件内的元素的最终样式与其它属性相匹配;
<!DOCTYPE html><html lang="zh_CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>饭盒儿——发现身边不一样的世界</title> <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"> <script src="js/jquery-2.1.3.min.js"></script> <script src="js/bootstrap.min.js"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <style> </style></head><body> <div class="container"> <h3> 具有响应式特性的嵌入内容 </h3> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="http://www.shydzc.com/home"></iframe> </div> <hr/> <div class="embed-responsive embed-responsive-4by3"> <embed class="embed-responsive-item" src="http://player.youku.com/player.php/sid/XMTI3NjI2MzQ2MA==/v.swf" quality="high" width="350" height="240" align="middle" allowScriptAccess="always" allowFullScreen="true" mode="transparent" type="application/x-shockwave-flash"> </embed> </div> </div></body></html>
0 1
- Bootstrap组件之具有响应式特性的嵌入内容
- Bootstrap组件学习笔记(八)——具有响应式的嵌入内容和well
- BootStrap 响应式嵌入组件
- bootstrap响应式嵌入组件
- bootstrap学习27---带有响应式特性的嵌入式内容
- Bootstrap列表组、面板和响应式嵌入组件
- 响应式的嵌入内容和图片
- Bootstrap之辅助类样式,响应式工具和小图标组件
- web响应式之bootstrap的基础用法。
- 具有动态效果的响应式设计
- 具有动态效果的响应式设计
- bootstrap列表组、面板、和嵌入组件
- Bootstrap-列表组面板和嵌入组件
- 响应式布局值之Bootstrap
- SharePoint 2013的HTML5特性之响应式布局
- 免费的响应式Bootstrap模板 - Codester
- bootstrap响应式布局的控制原理
- bootstrap响应式布局的实用类
- C语言编程入门——数组(下)
- CFile、CStdioFile、FILE和其他文件操作(转+总结)
- mac下终端命令汇总(持续更新中)
- 【排序】二分插入排序模板
- 编程之美:第二章 数字之魅 2.20程序理解和时间分析
- Bootstrap组件之具有响应式特性的嵌入内容
- Bower
- 图论中dfs判断是否可行一类问题的写法
- Freescale 之Flexbus总线读写SRAM
- android学习路线图
- 动画特效十:下拉放大
- 【随行笔记】有关servle和数据库
- Codeforces 435B
- 希尔算法 经典解法