pCloud Partner Program

在bootstrap下的影片responsive設定

程式技術 2015/06/12 23:34
views: 68044 times
在 bootstrap 下, image 可以很容易地使用 img-responsive class 進行 image 的 responsive 設定, 但是 embed 或是 video 如何處理呢?

在 bootstrap 3.2 起, 增加了好用的 embed-responsive 功能, 簡單說明語法如下:


在外部建立一個 div, 包含了 embed-responsive 與 embed-responsive-16by9 or embed-responsive-4by3 class, 然後在 video 或 iframe 包含 embed-responsive-item class, 就可以順利地讓 embed video 能有完整地 responsive 功能了.

參考範例:
http://codepen.io/ncerminara/pen/zbKAD/
top

Trackback Address :: http://diary.tw/tim/trackback/1105

Write a comment


PREV : [1] : ... [137] : [138] : [139] : [140] : [141] : [142] : [143] : [144] : [145] : ... [539] : NEXT



DJI OM 4 折疊式手機雲台 手持穩定器(先創公司貨)
【SONY 索尼】2.1 聲道單件式環繞音響(HT-X8500)
ASUS 華碩 RT-AC68U 雙頻AC1900 無線網路分享器
TEAM十銓 L5 Lite 3D 1TB 2.5吋 SSD固態硬碟
統一 番茄汁(6入/組)
UNITEK TYPE-C 轉VGA/HDMI/PD充電/HUB 鋁合金多功能轉接器
亞果元素 CASA Hub VH1 Type-C 轉 VGA - HDMI二合一顯示轉接器
realme XT (8G/128G) 6.4吋6400萬畫素 四鏡頭鷹眼猛獸
DJI Mavic Mini 暢飛套裝
全新原彩Apple MacBook Air 13吋/i5/8G/256G
DJI Mavic Air 2 全能套裝 [先創公司貨]預購-送記憶卡
Patriot美商博帝 BURST 960G 2.5吋 SSD固態硬碟


 Waiting...