zoukankan      html  css  js  c++  java
  • 关于bootstrap的js插件介绍及使用

    模式框:

    <button class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">
    </button>
    div.modal fade
    	div.modal-dialog
    		div.modal-content
    			div.modal-header
    			div.model-body
    			div.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're
    	not 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>
  • 相关阅读:
    Java 第十一届 蓝桥杯 省模拟赛 洁净数
    Java 第十一届 蓝桥杯 省模拟赛 第十层的二叉树
    Java 第十一届 蓝桥杯 省模拟赛 第十层的二叉树
    Java 第十一届 蓝桥杯 省模拟赛 第十层的二叉树
    Java 第十一届 蓝桥杯 省模拟赛 70044与113148的最大公约数
    Java 第十一届 蓝桥杯 省模拟赛 70044与113148的最大公约数
    20. Valid Parentheses
    290. Word Pattern
    205. Isomorphic Strings
    71. Simplify Path
  • 原文地址:https://www.cnblogs.com/itzlg/p/10699590.html
Copyright © 2011-2022 走看看