bootstrap课程10 从外部引入视频到页面用什么标签
bootstrap课程10 从外部引入视频到页面用什么标签
一、总结
一句话总结：a、iframe标签；b、embed标签；c、video标签
1、bootstrap具有响应式特性的嵌入内容如何实现？
根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定视频或
slideshow 的尺寸，能够在各种设备上缩放。
这些规则被直接应用在 <iframe>、<embed>、<video> 和 <object> 元素上。如果你希望让最终样式与
其他属性相匹配，还可以明确地使用一个派生出来的 .embed-responsive-item 类。
超级提示： 不需要为 <iframe> 元素设置 frameborder="0" 属性，因为我们已经替你这样做了！
2、还得去下手册，网上找的那些资料都不全，很多属性都没有？
找手册
3、bootstrap只做了样式没做效果，比如a标签设置为disabled样式后还可以点击刷新，只不过样式改变了，我们应该如何让a标签不可点？
直接在click里面return false即可
添加对应的js即可，比如$('.disabled').click(function(){return false;});
4、如何快速获取别人网站上面用到的js文件？
google浏览器->f12->sources->找到js直接拽下来即可，都不用特地去别的位置下载
5、bootstrap中媒体对象是干嘛的？
可以用来做评论回复，因为是左图右字的形式
默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。
这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。
手册里面真的说的很完整了
二、从外部引入视频到页面用什么标签
1、相关知识
媒体对象:
.media
.media-left
.media-object
.media-body
.media-heading
.media-right
.media-top|middle|bottom
列表组:
.list-group
.list-group-item
面板:
.panel
.panel-primary
.panel-heading
.panel-title
.panel-body
.panel-footer
内嵌框架:
.embed-responsive
.embed-responsive-16by9
.embed-responsive-4by3
.embed-responsive-item
well:
.well
.well-lg
.well-sm
bs jquery插件:
-----------------------------------------------------------
弹框:
.modal
.modal-dialog
.modal-lg
.modal-sm
.modal-content
.modal-header
.modal-body
.modal-footer
.media
.media-left
.media-object
.media-body
.media-heading
.media-right
.media-top|middle|bottom
列表组:
.list-group
.list-group-item
面板:
.panel
.panel-primary
.panel-heading
.panel-title
.panel-body
.panel-footer
内嵌框架:
.embed-responsive
.embed-responsive-16by9
.embed-responsive-4by3
.embed-responsive-item
well:
.well
.well-lg
.well-sm
bs jquery插件:
-----------------------------------------------------------
弹框:
.modal
.modal-dialog
.modal-lg
.modal-sm
.modal-content
.modal-header
.modal-body
.modal-footer
2、代码
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <title>index</title> 7 <style> 8 *{ 9 font-family: 微软雅黑; 10 } 11 </style> 12 <link rel="stylesheet" href="bs/css/bootstrap.min.css"> 13 <script src="bs/js/jquery.min.js"></script> 14 <script src="bs/js/bootstrap.min.js"></script> 15 <script src="bs/js/holder.min.js"></script> 16 </head> 17 <body> 18 <div class="container"> 19 <h1 class='page-header'>Bootstrap框架</h1> 20 <div class="embed-responsive embed-responsive-16by9"> 21 <iframe class='embed-responsive-item' src="http://www.tudou.com/programs/view/html5embed.action?type=1&code=9wrO8-J0UWs&lcode=ThsghtFFChw&resourceId=31943384_06_05_99" allowtransparency="true" allowfullscreen="true" allowfullscreenInteractive="true" scrolling="no" border="0" frameborder="0"></iframe> 22 </div> 23 24 </div> 25 </body> 26 <script> 27 </script> 28 </html>
