BootStrap:基礎知識 (3)

panel-defaultpanel-successpanel-infopanel-warningpanel-dangerpanel-primary

21、視頻響應式

169顯示視頻,43則改成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 .modalclass效果

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可關閉,falseEsc不可關閉

data-show=’true’ //初始化時顯示,false不顯示

href=’*.html’ //若非#號開頭,即url,將url内容加載到modal-content容器里,且只加載一次。若是#號,則取代data-target 的方法。

div .modalJS中設置屬性

$(\'#myModal\').modal({

show : true,

backdrop : false,

keyboard : false,

remote : \'index.html\'

});

div .modalID方法

$(‘#My’).modal(‘show’);

$(‘#My’).modal(‘hide’);

$(‘#My’).modal(‘toggle’);

div .modalID事件

$(\'#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>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzsdpf.html