模式框:

<button class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal"> </button> div.modal fadediv.modal-dialogdiv.modal-contentdiv.modal-headerdiv.model-bodydiv.model-footer

模式框關閉:

<button class="btn btn-default" data-dismiss='modal'>Cancel</button>

下拉菜單：

<div class="dropdown"><a data-toggle="dropdown" href="#">Dropdown trigger</a><ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">...</ul> </div>

標簽頁:

<ul class="nav nav-tabs"><li><a href="#home" data-toggle="tab">Home</a></li><li><a href="#profile" data-toggle="tab">Profile</a></li><li><a href="#messages" data-toggle="tab">Messages</a></li><li><a href="#settings" data-toggle="tab">Settings</a></li> </ul> <div class="tab-content"><div class="tab-pane active" id="home">...</div><div class="tab-pane" id="profile">...</div><div class="tab-pane" id="messages">...</div><div class="tab-pane" id="settings">...</div> </div>

工具提示:

<div class=”tooltip-demo”><a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a> </div>

彈出框:

<a data-content="And here's some amazing content. It's very engaging. right?" title="A Title" data-toggle="popover" class="btn btn-lg btn-danger" href="#">Click to toggle popover</a>

警告框:

<div class="alert alert-warning fade in"><button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button><strong>Holy guacamole!</strong> Best check yo self, you'renot looking too good. </div>

按鈕:

<div class="btn-group" data-toggle="buttons"><label class="btn btn-primary"><input type="checkbox"> Option 1</label><label class="btn btn-primary"><input type="checkbox"> Option 2</label><label class="btn btn-primary"><input type="checkbox"> Option 3</label> </div>

折疊:

<div class="panel-group" id="accordion"><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible Group Item #1</a></h4></div><div id="collapseOne" class="panel-collapse collapse in"><div class="panel-body">Anim pariatur cliche reprehenderit</div></div></div> </div>

輪播:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li></ol><div class="carousel-inner"><div class="item active"><img src="..." alt="..."><div class="carousel-caption">...</div></div>...</div><a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div>

轉載于:https://www.cnblogs.com/itzlg/p/10699590.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的三：Bootstrap-js插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。