panel-default、panel-success、panel-info、panel-warning、panel-danger、panel-primary
21、視頻響應式
16:9顯示視頻,4:3則改成4by3
<div>
<embed src="http://www.likecs.com/*.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque"></embed>
</div>
22、模態框(自釋:同jQueryの帶modalの對話框)
簡寫:div .modal .show>div .modal-content
>div .modal-header+div .modal-body+div .modal-footer
<!-- 模态框声明 -->
<div tabindex="-1">
<!-- 窗口声明 -->
<div>
<!-- 内容声明 -->
<div>
<div>
<button data-dismiss="modal"><span>×</span></button>
<h4>会员登陆</h4>
</div>
<div>
<div>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
</div>
<div>
<button>注册</button>
<button>登录</button>
</div>
</div>
</div>
</div>
關閉按鈕:data-dismiss=’modal’,關閉model就將此屬性值設為’modal’
<button type=’button’ class=’close’ data-dismiss=’modal’><span>×</span></button>
div .modalのclass效果
div .modal.show //模態框默認顯示
div .modal .fade //模態框淡入淡出
div .modal .modal-lg //大模態框
div .modal .modal-sm //小模態框
點擊觸發:
<button class=’btn’ data-toggle=’modal’ data-target=’#myModal’>按鈕</button>
div .modalの屬性
data-toggle=’modal’ //觸發類型
data-target=’#my’ //引用のID
data-backdrop=’true’ //默認,黑灰半透明遮罩,點擊空白可關閉
false無黑灰遮罩,空白不可關閉,static有黑灰遮罩,空白不可關閉
data-keyboard=’ture’ //默認,按Esc可關閉,false按Esc不可關閉
data-show=’true’ //初始化時顯示,false不顯示
href=’*.html’ //若非#號開頭,即url,將url内容加載到modal-content容器里,且只加載一次。若是#號,則取代data-target 的方法。
div .modal在JS中設置屬性
$(\'#myModal\').modal({
show : true,
backdrop : false,
keyboard : false,
remote : \'index.html\'
});
div .modalのID方法
$(‘#My’).modal(‘show’);
$(‘#My’).modal(‘hide’);
$(‘#My’).modal(‘toggle’);
div .modalのID事件
$(\'#myModal\').on(\'show.bs.modal\', fn);
show.bs.modal //在 show 方法調用時立即觸發。
shown.bs.modal //在模態框完全顯示出來,并且等CSS動畫完成之後觸發。
hide.bs.modal //在 hide 方法調用時,但還未關閉隱藏時觸發。
hidden.bs.modal //在模態框完全隱藏之後,并且等CSS動畫完成之後觸發。
23、下拉菜單
外部引用:用data-toggle="dropdown" data-target="#dropdown"(內部不用加這句)
內部引用:用data-toggle="dropdown"
<div>
<button data-toggle="dropdown">
下拉菜单<span></span>
</button>
<ul>