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
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> ![JAVA 系列——>開發工具IntelliJ IDEA的安裝以及配置、快捷鍵IDEA 簡介[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)