Bootstrap组件 demo

最新推荐文章于 2024-04-05 13:32:18 发布
最新推荐文章于 2024-04-05 13:32:18 发布
阅读量194 收藏
点赞数
分类专栏： Bootstrap 文章标签： Bootstrap组件 demo
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuhui12345/article/details/98210704
版权

BootstrapDemo.html

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>BootstrapDemo合集</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
</head>

<body>
<h1 class="text-center">Bootstrap按钮组件</h1>
<hr/>
<div class="container">
<div class="dropdown"><button type="button" class="btn btn-default btn-lg" data-toggle="dropdown">下拉主菜单<span class="caret"></span><span class="sr-only">切换下拉菜单</span></button>
<ul class="dropdown-menu">
<li class="dropdown-header">小标题1</li>
<li>
<a>选项1</a>
</li>
<li>
<a>选项2</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">小标题2</li>
<li>
<a>选项3</a>
</li>
<li class="disabled">
<a>选项4</a>
</li>
</ul>
</div>
</div>
<hr/>
<div class="container">
<div class="btn-group btn-group-sm"><button type="button" class="btn btn-default">按钮组1</button><button type="button" class="btn btn-default">按钮组2</button><button type="button" class="btn btn-default">按钮组3</button>
<div class="btn-group btn-group-sm"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">菜单<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<a>选项1</a>
</li>
<li>
<a>选项2</a>
</li>
<li>
<a>选项3</a>
</li>
</ul>
</div>
</div>
<div class="btn-group"><button type="button" class="btn btn-primary">原始按钮组</button><button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">用于屏幕阅读器</span></button>
<ul class="dropdown-menu">
<li>
<a>功能1</a>
</li>
<li>
<a>功能2</a>
</li>
<li>
<a>功能3</a>
</li>
</ul>
</div>
</div>
<hr/>
<div class="container">
<form action="#" method="post">
<div class="input-group"><span class="input-group-addon">用户名</span><input type="text" class="form-control" maxlength="12" placeholder="6-12位用户名" /></div><br/>
<div class="input-group"><span class="input-group-addon">密&emsp;码</span><input type="password" class="form-control" maxlength="12" placeholder="6-12位密码" /></div><br/>
<div class="input-group"><input type="text" class="form-control" placeholder="邮箱" /><span class="input-group-addon">@</span>
<div class="input-group-btn"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">选择邮箱<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
<a>163.com</a>
</li>
<li>
<a>qq.com</a>
</li>
<li>
<a>yahoo.com</a>
</li>
</ul>
</div>
</div><br/><input type="submit" class="form-control btn btn-primary" value="提交" onclick="return false;" /></form>
</div>
<hr/>
<div class="container">
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#menu1">普通导航1</a>
</li>
<li>
<a data-toggle="tab" href="#menu2">普通导航2</a>
</li>
<li>
<a data-toggle="tab" href="#menu3">普通导航3</a>
</li>
<li class="dropdown">
<a class="" data-toggle="dropdown" href="#">普通下拉导航<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a data-toggle="tab" href="#menu4" href="#">下拉导航1</a>
</li>
<li>
<a data-toggle="tab" href="#menu5" href="#">下拉导航2</a>
</li>
<li>
<a data-toggle="tab" href="#menu6" href="#">下拉导航3</a>
</li>
</ul>
</li>
</ul>
<div class="tab-content">
<div id="menu1" class="tab-pane fade in active">
<h3>普通导航1</h3></div>
<div id="menu2" class="tab-pane fade">
<h3>普通导航2</h3></div>
<div id="menu3" class="tab-pane fade">
<h3>普通导航3</h3></div>
<div id="menu4" class="tab-pane fade">
<h3>下拉导航1</h3></div>
<div id="menu5" class="tab-pane fade">
<h3>下拉导航2</h3></div>
<div id="menu6" class="tab-pane fade">
<h3>下拉导航3</h3></div>
</div>
<hr/>
<ul class="nav nav-pills nav-justified">
<li class="active">
<a href="#">胶囊导航1</a>
</li>
<li>
<a href="#">胶囊导航2</a>
</li>
<li>
<a href="#">胶囊导航3</a>
</li>
<li>
<a href="#">胶囊导航4</a>
</li>
<li class="dropdown">
<a class="" data-toggle="dropdown" href="#">胶囊下拉导航<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#">下拉导航1</a>
</li>
<li>
<a href="#">下拉导航2</a>
</li>
<li>
<a href="#">下拉导航3</a>
</li>
</ul>
</li>
</ul>
<hr/>
<ul class="nav nav-stacked">
<li class="active">
<a href="#">堆叠导航1</a>
</li>
<li>
<a href="#">堆叠导航2</a>
</li>
<li>
<a href="#">堆叠导航3</a>
</li>
<li>
<a href="#">堆叠导航4</a>
</li>
</ul>
</div>
<hr/>
<nav class="nav navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">导航标题</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">
<a href="#">选项1</a>
</li>
<li>
<a href="#">选项2</a>
</li>
<li>
<a href="#">选项3</a>
</li>
<li>
<a href="#">选项4</a>
</li>
</ul>
</div>
</div>
</nav>
<hr/>
<nav class="nav navbar-default">
<div class="container-fluid">
<div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<a class="navbar-brand" href="#">响应导航</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">选项1</a>
</li>
<li>
<a href="#">选项2</a>
</li>
<li>
<a href="#">选项3</a>
</li>
<li>
<a href="#">试着将窗口拉小</a>
</li>
</ul>
<form class="navbar-form navbar-right" action="#" method="post">
<div class="form-group"><input type="text" class="form-control" placeholder="搜索" /></div><input type="submit" class="btn btn-default" value="提交" /></form>
<ul class="nav navbar-nav navbar-right ">
<li>
<a href="#"><span class="glyphicon glyphicon-user"></span>注册</a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-log-in"></span>登录</a>
</li>
</ul>
</div>
</div>
</nav>
<hr/>
<div class="container">
<ul class="pagination pagination-lg">
<li class="disabled">
<a href="#">&laquo;</a>
</li>
<li class="active">
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#">&raquo;</a>
</li>
</ul>
<ul class="pager">
<li class="previous">
<a href="#">&larr;Previous</a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li class="next">
<a href="#">Next&rarr;</a>
</li>
</ul>
</div>
<hr/>
<div class="container"><span class="label label-default">默认标签</span><span class="label label-primary">主要标签</span><span class="label label-success">成功标签</span><span class="label label-info">信息标签</span><span class="label label-warning">警告标签</span><span class="label label-danger">危险标签</span></div>
<hr/>
<div class="container">
<ul class="nav nav-pills nav-stacked">
<li class="active">
<a href="#">徽章1<span class="badge pull-right">5</span></a>
</li>
<li>
<a href="#">徽章2</a>
</li>
<li>
<a href="#">徽章3<span class="badge pull-right">3</span></a>
</li>
</ul>
</div>
<hr/>
<div class="container">
<div class="jumbotron">
<h1>容器内的超大屏幕</h1><br/><button type="button" class="btn btn-primary btn-lg">这是一个按钮</button></div>
</div>
<div class="jumbotron">
<div class="container">
<h1>容器外的超大屏幕</h1><br/><button type="button" class="btn btn-primary btn-lg">这是一个按钮</button></div>
</div>
<hr/>
<div class="container">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="thumbnail"><img class="img-responsive" data-src="holder.js/800x600?random=yes&auto=yes" />
<div class="caption"><span class="label label-success">标签1</span>
<h3>简介1</h3></div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="thumbnail"><img class="img-responsive" data-src="holder.js/800x600?random=yes&auto=yes" />
<div class="caption"><span class="label label-info">标签2</span>
<h3>简介2</h3></div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="thumbnail"><img class="img-responsive" data-src="holder.js/800x600?random=yes&auto=yes" />
<div class="caption"><span class="label label-warning">标签3</span>
<h3>简介3</h3></div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="thumbnail"><img class="img-responsive" data-src="holder.js/800x600?random=yes&auto=yes" />
<div class="caption"><span class="label label-danger">标签4</span>
<h3>简介4</h3></div>
</div>
</div>
</div>
<hr/>
<div class="container">
<div class="alert alert-success alert-dismissable">
<a href="#" class="alert-link">alert，成功</a><button type="button" class="close" data-dismiss="alert"><span class="glyphicon glyphicon-remove"></span></button></div>
<div class="alert alert-info">
<a href="#" class="alert-link">alert，消息</a><button type="button" class="close" data-dismiss="alert"><span class="glyphicon glyphicon-remove"></span></button></div>
<div class="alert alert-warning">
<a href="#" class="alert-link">alert，警告</a><button type="button" class="close" data-dismiss="alert"><span class="glyphicon glyphicon-remove"></span></button></div>
<div class="alert alert-danger">
<a href="#" class="alert-link">alert，错误</a><button type="button" class="close" data-dismiss="alert"><span class="glyphicon glyphicon-remove"></span></button></div>
</div>
<hr/>
<div class="container">
<div class="progress ">
<div class="progress-bar progress-bar-success" style="width: 90%;">进度条90%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" style="width: 20%;">20%</div>
<div class="progress-bar progress-bar-warning active" style="width: 20%;">活动的进度条</div>
<div class="progress-bar progress-bar-info" style="width: 20%;">20%</div>
<div class="progress-bar progress-bar-success active" style="width: 20%;">20%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" style="width: 60%;">60%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning active" style="width: 40%;">40%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger active" style="width: 20%;">20%</div>
</div>
</div>
<hr/>
<div class="container">
<ul class="list-group">
<li class="list-group-item active">列表组1<span class="badge">新</span></li>
<li class="list-group-item">列表组2<span class="badge">新</span></li>
<li class="list-group-item list-group-item-success">列表组3</li>
<li class="list-group-item list-group-item-info">列表组4</li>
<li class="list-group-item list-group-item-warning">列表组5<span class="badge">旧</span></li>
<li class="list-group-item list-group-item-danger">列表组6<span class="badge">新</span></li>
</ul>
</div>
<hr/>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">基本面板标题</h1></div>
<div class="panel-body">基本面板内容</div>
<div class="panel-footer">基本面板脚注</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title">主要面板标题</h1></div>
<div class="panel-body">这是一个带表格的面板</div>
<table class="table">
<tr>
<th>表格标题1</th>
<th>表格标题2</th>
</tr>
<tr>
<td>内容1</td>
<td>内容1</td>
</tr>
<tr>
<td>内容2</td>
<td>内容2</td>
</tr>
</table>
<div class="panel-footer">主要面板脚注</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h1 class="panel-title">成功面板标题</h1></div>
<div class="panel-body">这是一个带列表组的面板</div>
<div class="list-group">
<a href="#" class="list-group-item">链接列表1</a>
<a href="#" class="list-group-item">链接列表2</a>
<a href="#" class="list-group-item">链接列表3</a>
<a href="#" class="list-group-item">链接列表4</a>
</div>
<div class="panel-footer">成功面板脚注</div>
</div>
</div>
<hr/>
<h1 class="text-center">Bootstrap插件</h1>
<hr/>
<div class="container">
<h2>模态框Modal</h2><button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">按钮触发模态框1</button><button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">按钮触发模态框2</button>
<div class="modal fade" id="myModal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">模态框标题1</h4><button type="button" class="close" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span></button></div>
<div class="modal-body">这是模态框1，已通过JQ设置了相应属性，背景不变暗，无法通过点击其它地方关闭窗口</div>
<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">提交更改</button></div>
</div>
</div>
</div>
<div class="modal fade" id="myModal2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">模态框标题2</h4><button type="button" class="close" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span></button></div>
<div class="modal-body">这是模态框2，已通过JQ添加相应的的事件，当关闭窗口时会弹出对话框</div>
<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">提交更改</button></div>
</div>
</div>
</div>
</div>
<hr/>
<div class="container" style="position: relative;">
<h2>滚动监听Scrollspy</h2>
<div class="row">
<nav class="col-xs-4 col-sm-4" id="myScrollspy">
<div class="container">
<ul class="nav nav-pills nav-stacked" id="nav-pills" style="position: absolute; top: 20px;">
<li class="active">
<a href="#section1">Section1</a>
</li>
<li>
<a href="#section2">Section2</a>
</li>
<li>
<a href="#section3">Section3</a>
</li>
<li>
<a href="#section4">Section4</a>
</li>
</ul>
</div>
</nav>
<div class="col-xs-8 col-sm-8" data-spy="scroll" data-target="#myScrollspy" data-offset="10" style="height: 250px; overflow-y: auto;">
<div id="section1" style="color: #fff; background-color: #1E88E5;">
<h1>Section1</h1>
<h2>这是第一部分的内容，这是第一部分的内容，这是第一部分的内容，这是第一部分的内容，这是第一部分的内容，这是第一部分的内容，这是第一部分的内容，这是第一部分的内容，这是第一部分的内容，这是第一部分的内容</h2></div>
<div id="section2" style="color: #fff; background-color: #673ab7;">
<h1>Section2</h1>
<h2>这是第二部分的内容，这是第二部分的内容，这是第二部分的内容，这是第二部分的内容，这是第二部分的内容，这是第二部分的内容，这是第二部分的内容，这是第二部分的内容，这是第二部分的内容，这是第二部分的内容</h2></div>
<div id="section3" style="color: #fff; background-color: #ff9800;">
<h1>Section3</h1>
<h2>这是第三部分的内容，这是第三部分的内容，这是第三部分的内容，这是第三部分的内容，这是第三部分的内容，这是第三部分的内容，这是第三部分的内容，这是第三部分的内容，这是第三部分的内容，这是第三部分的内容</h2></div>
<div id="section4" style="color: #fff; background-color: #00bcd4;">
<h1>Section4</h1>
<h2>这是第四部分的内容，这是第四部分的内容，这是第四部分的内容，这是第四部分的内容，这是第四部分的内容，这是第四部分的内容，这是第四部分的内容，这是第四部分的内容，这是第四部分的内容，这是第四部分的内容</h2></div>
</div>
</div>
</div>
<hr/>
<div class="container">
<h2>提示工具Tooltip</h2>这是一个
<a href="#" id="a1" data-toggle="tooltip" title="默认的tooltip">默认的tooltip</a><br/><br/>这是一个
<a href="#" id="a2" data-toggle="tooltip" data-placement="left" title="<h4 style='color: red;'>内容包含html标签h4和style样式</h4>">左侧的tooltip</a><br/><br/>这是一个
<a href="#" id="a3" data-toggle="tooltip" data-placement="right" title="右侧的tooltip">右侧的tooltip</a><br/><br/>这是一个
<a href="#" id="a4" data-toggle="tooltip" data-placement="bottom" title="底部的tooltip">底部的tooltip</a><br/><br/></div><br/><br/>
<hr/>
<div class="container">
<h2>弹出框Popover</h2><button type="button" id="b1" class="btn btn-default" data-toggle="popover" data-placement="left" title="Popover标题1" data-content="popover的内容1" style="margin: 20px;">左侧的popover</button><button type="button" id="b2" class="btn btn-primary" data-toggle="popover" data-placement="top" title="<h2 style='font-weight: bold;'>含html的标题2</h2>" data-content="<h3 style='color: red;'>含html的内容2<h3>" style="margin: 20px;">顶部的popover</button><button type="button" id="b3" class="btn btn-success" data-toggle="popover" data-placement="bottom" title="Popover标题3" data-content="popover的内容3" style="margin: 20px;">底部的popover</button><button type="button" id="b4" class="btn btn-danger" data-toggle="popover" data-placement="right" title="Popover标题4" data-content="popover的内容4" style="margin: 20px;">右侧的popover</button></div><br/><br/>
<hr/>
<div class="container">
<h2>按钮的方法</h2><button type="button" id="c1" class="btn btn-default" data-toggle="button" style="margin: 20px;">按压状态切换</button><button type="button" id="c2" class="btn btn-default" data-loading-text="数据加载中……" data-complete-text="数据加载完成，用时1秒！" style="margin: 20px;">读取状态切换按钮</button>
<div class="btn-group" data-toggle="buttons" style="margin: 20px;"><label class="btn btn-default"><input type="checkbox"name="checkbox1"/>复选按钮1</label><label class="btn btn-default"><input type="checkbox"name="checkbox1"/>复选按钮2</label><label class="btn btn-default"><input type="checkbox"name="checkbox1"/>复选按钮3</label></div>
<div class="btn-group" data-toggle="buttons" style="margin: 20px;"><label class="btn btn-default"><input type="radio"name="radio1"/>单选按钮1</label><label class="btn btn-default"><input type="radio"name="radio1"/>单选按钮2</label><label class="btn btn-default"><input type="radio"name="radio1"/>单选按钮3</label></div>
</div>
<hr/>
<div class="container">
<h2>折叠Collapse</h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" href="#collapse1">点我展开或折叠，第一部分</a>
</div>
</div>
<div class="panel-collapse collapse" id="collapse1">
<div class="panel-body">第一部分内容，第一部分内容，第一部分内容，第一部分内容，第一部分内容，第一部分内容，第一部分内容，第一部分内容，第一部分内容，第一部分内容</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" href="#collapse2">点我展开或折叠，第二部分</a>
</div>
</div>
<div class="panel-collapse collapse" id="collapse2">
<div class="panel-body">第二部分内容，第二部分内容，第二部分内容，第二部分内容，第二部分内容，第二部分内容，第二部分内容，第二部分内容，第二部分内容，第二部分内容</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" href="#collapse3">点我展开或折叠，第三部分</a>
</div>
</div>
<div class="panel-collapse collapse" id="collapse3">
<div class="panel-body">第三部分内容，第三部分内容，第三部分内容，第三部分内容，第三部分内容，第三部分内容，第三部分内容，第三部分内容，第三部分内容，第三部分内容</div>
</div>
</div>
</div>
</div>
<hr/>
<div class="container">
<h2>轮播Carousel</h2>
<div class="carousel slide" id="myCarousel">
<!--轮播（Carousel）指标-->
<ul class="carousel-indicators">
<li class="active" data-target="#myCarousel" data-slide-to="0"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ul>
<!--轮播（Carousel）项目-->
<div class="carousel-inner">
<div class="item active"><img class="img-responsive" data-src="holder.js/1200x800?random=yes&auto=yes&text=第一张图" />
<div class="carousel-caption">标题1</div>
</div>
<div class="item"><img class="img-responsive" data-src="holder.js/1200x800?random=yes&auto=yes&text=第二张图" />
<div class="carousel-caption">标题2</div>
</div>
<div class="item"><img class="img-responsive" data-src="holder.js/1200x800?random=yes&auto=yes&text=第三张图" />
<div class="carousel-caption">标题3</div>
</div>
</div>
<!--轮播（Carousel）导航-->
<a class="carousel-control left" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="carousel-control right" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
<!--控制按钮-->
<div class="text-center"><button type="button" class="btn btn-default start">开始</button><button type="button" class="btn btn-default pause">暂停</button><button type="button" class="btn btn-default prev">上一张图</button><button type="button" class="btn btn-default next">下一张图</button><button type="button" class="btn btn-default slide1">图1</button><button type="button" class="btn btn-default slide2">图2</button><button type="button" class="btn btn-default slide3">图3</button></div>
</div>
</div>
<hr/>

<script src="js/jquery-3.4.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/holder.js"></script>
<script type="text/javascript">
// 模态框Modal添加属性
$("#myModal1").modal({
backdrop: false, // 背景不变暗，无法通过点击背景消除模态框
show: false // 页面加载完后不自动显示模态框
});
/*
// 为模态框添加事件show,shown,hide,hidden
$("#myModal2").on("show.bs.modal", function() {
alert("要打开模态框了");
});
$("#myModal2").on("shown.bs.modal", function() {
alert("打开成功了");
});
$("#myModal2").on("hide.bs.modal", function() {
alert("要关闭模态框了");
});
*/
$("#myModal2").on("hidden.bs.modal", function() {
alert("关闭成功了");
});

// 提示工具Tooltip事件
$("a[data-toggle='tooltip']:not(#a2)").tooltip(); // 为除了第二个tooltip之外开启功能
$("#a2").tooltip({
html: true
}); // 单独为第二个tooltip添加属性，显示html内容

$("#a3").on("hidden.bs.tooltip", function() {
alert("右侧的tooltip窗口已经消失了");
});

$("#a4").on("show.bs.tooltip", function() {
alert("底部的tooltip窗口要弹出来了");
});

// 弹出框Popover事件
$("button[data-toggle='popover']:not(#b2)").popover(); // 为除了第二个popover之外开启提示
$("#b2").popover({
html: true
}); // 单独为第二个popover添加属性，显示html内容

$("#b3").on("show.bs.popover", function() {
alert("底部的popover窗口要弹出来了");
});

$("#b4").on("shown.bs.popover", function() {
alert("右侧的popover窗口已经弹出来了");
});

// 按钮事件
$("#c2").click(function() {
// loading状态下按钮禁用，延时1秒后，触发事件，读取complete内容，将标签队列恢复，使得可以再次点击
$(this).removeClass().addClass("btn btn-primary");
$(this).button("loading").delay(1000).queue(function() {
$(this).removeClass().addClass("btn btn-success");
$(this).button("complete").dequeue().delay(1000).queue(function() {
$(this).removeClass().addClass("btn btn-default");
$(this).button("reset").dequeue();
});
});
});

// 折叠Collapse事件
$("#collapse3").on("show.bs.collapse", function() {
alert("第三部分内容要展开了");
});

// 轮播图Carousel事件
$("#myCarousel").carousel({
interval: 3000
}); // 初始化轮播间隔3秒
$(".start").click(function() {
$("#myCarousel").carousel("cycle");
});
$(".pause").click(function() {
$("#myCarousel").carousel("pause");
});
$(".prev").click(function() {
$("#myCarousel").carousel("prev");
});
$(".next").click(function() {
$("#myCarousel").carousel("next");
});
$(".slide1").click(function() {
$("#myCarousel").carousel(0);
});
$(".slide2").click(function() {
$("#myCarousel").carousel(1);
});
$(".slide3").click(function() {
$("#myCarousel").carousel(2);
});
</script>
</body>

</html>
未来无所不能
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Spring Boot+Bootstrap开发小而完整web项目
10-14
跟着本课程Demo完整的动手写一次，会发现你已经可以直接利用Spring Boot上手中小型web项目了。  Spring Boot框架是现在比较热门的微服务框架，很多软件公司都在使用，本课程涵盖Spring Boot和Bootstrap较为多面的知识点，针对Spring Boot开发web项目中每个阶段的关键内容和痛点，一步步进行条理清晰的讲解，学员在听课过程中建立起自己较为完备的前端、后端知识体系，具备较好的项目开展能力和自信。 课程特点是不炫技、条理清晰、生动浅显、化繁为简，每个章节都会围绕Spring Boot、Bootstrap的知识点“是什么、有什么用、怎么用”展开，并根据精心准备的简洁清晰的示例进行讲解。   学完该套课程后，可以很快上手Spring Boot实战开发，一个人就能完成一个基于Spring Boot+Bootstrap的完整WEB项目！  
bootstrap demo 源码大全
11-05
bootstrap demo 大全。非常多的例子。立马上手
使用Bootstrap的栅格布局实现一个简单的demo(1)，web前端开发实战项目
最新发布
2401_84097520的博客
04-05 582
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可免费领取！由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】
bootstrap 开源框架demo_接私活，赚外快，你需要这几个开源项目
weixin_39638188的博客
11-29 677
点击上方蓝色字体，关注我们秋瓷炫：老公，下辈子，你还会不会和我结婚？于晓光：先涨零花钱再说。都没零花钱了，还谈什么下辈子。发工资啦！瞬间富裕了，有没有？我决定买包好烟，抽上两口；狐朋狗友路边烧烤，喝杯小酒；心仪的耳机键盘，走一个……可现实是这样的。老婆：老公，交工资了。老公：好的，可以给点零花钱不？老婆：可以，一个男的兜里不能没钱。我准备以后把你的工资分成两份，一人一半。一人一半，我的工...
【Bootstrap】Bootstrap环境搭建及demo
qq_41604569的博客
03-27 2197
Bootstrap是一个流行的开源前端框架，可以用于快速构建现代化、响应式的网站和Web应用程序。以下是一个简单的示例，演示如何使用Bootstrap构建一个基本的网页。从官网https://getbootstrap.com/下载最新版本的Bootstrap，然后将下载的文件解压缩到本地计算机上的一个目录中。在HTML文件中引入Bootstrap的样式表和脚本，以便使用Bootstrap提供的样式和功能。下面是一个简单的示例，演示如何使用Bootstrap搭建一个基本的网页。是jQuery库文件，
bootstrap完整Demo
01-08
bootstrap完整Demo。 BootStrap是基于HTML、CSS和JavaScript的框架，使你只需要写简单的代码就可以很快的搭建一个还不错的前端框架，他是后端程序员的福音，使他们只需要专注业务逻辑，而无须浪费太多的精力在界面设计上。 它可以开发全响应式网页——不论你使用手机、平板电脑、普通个人电脑浏览网站内容，所有的元素都可以很优雅的呈现。所以，可以用他来开发适合各种设备浏览的页面，避免了大量的因为兼容性而导致的重复劳动。 它的最新版本是4.0，国内目前用的较多的是3.x,我们的教程也基于BootStrap3.x版本，也是目前最受欢迎的前端框架之一。 你可以使用默认的BootStrap样式和组件，你也可以对代码简洁。
Bootstrap组件Demo
12-09
近期因为项目需要，研究了一下Bootstrap，资源中是在学习的过程中编写的实例Demo，基本包括了Bootstrap常用的组件以及样式，每个页面代码均是完整可运行并必要的地方写有注释，其中包括：01网格布局、02流式嵌套布局...
bootstrap之组件demo
02-17
Bootstrap下的组件datagrid使用demo试例，简单易于消化！
bootstrap组件例子
01-07
公司要求研究bootstrap 写了这个例子是基础组件的例子 引用的js、css、字体文件都在包中 在具体使用上 中文的一些例子还是太少 希望能有帮助。
bootstrap-table-demo
03-25
bootstrap-table是一个功能强大的table组件，支持分页、全文检索、导出等
Bootstrap简单Demo（2015年05月-18日）
dizhouna1906的博客
05-27 120
Bootstrap的简单使用 1、Bootstrap是什么？ 这是Bootstrap官网上对它的描述：Bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目 2、Bootstrap的使用需求 1.Bootstrap是一个快速开发Web应用程序的前端框架，并且有丰富的组件、插件，可以用于我们快速开发出用户友好的WEB界面 2.支持移...
bootstrap-demo
07-16
前端模板 默认 HTML5/CSS3/JavaScript 模板 使用的技术： IDE 配置 打开 Sublime 文本 选择首选项 -> 设置 - 默认 一个制表符被认为等于“tab_size”的空格数：2 设置为 true 以在按下 Tab 时插入空格 "translate_tabs_to_spaces": true 设置为 true 以在保存时删除尾随空格“trim_trailing_white_space_on_save”：true 设置为 true 以确保保存时文件的最后一行以换行符结尾 "ensure_newline_at_eof_on_save": true 安装 安装 Node.js 下载 安装时确保您具有管理员角色以设置 PATH 环境变量 安装咕噜声 打开命令行并运行 安装 npm install grunt-cli -g 发展 咕噜声 测试 咕噜声测试 释放
bootstrap-table-demo ( bootstraptable )
02-05
工作需要用到bootstrap-table（bootstrap table）。 网上找了例子参差不齐，实在不堪入目。 我只要最简单的例子，网上没有所需要的，只我自已整理一份了。 该demo包含5个可以运行的最基本的例子。 希望能得到像我这样的菜鸟点赞。
bootstrap系列-1.简单的Demo
cdc8596的博客
08-17 416
bootStrap系列讲解
bootstrap框架demo_入门Leaflet之小Demo
weixin_39980347的博客
11-28 282
入门 Leaflet 之小 Demo 写在前面 ---- WebGIS 开发基础之 LeafletGIS 基本概念：GIS、Map、Layer、Feature、Geometry、Symbol、Data（Point、Polyline、Polygon）、Renderer、Scale、Project、Coordinates；GIS 开发概述：架构模式、常用平台和 SDK、二维三维 使用 Leaflet ...
BootStrap实现带有增删改查功能的表格(DEMO详解)
lgxzzz的博客
08-20 3624
前言 bootstrap的表格样式，有类似EasyUI的表格，也有卡片式表格，放到移动端显示，各有千秋。但是BootStrap自带的表格是没有操作列的，网上的资源不少，但是都是比较单一、零碎，JS、CSS也经常给的不全，自己经过大概一个月左右的时间，把表格封装了一下,希望能分享给大家。 表格封装了3个版本，接下来给大家展示一下样式和代码。 版本一 1. 样式 表格布局： 添加：添加一行新的空白代码 修改：选中可修改的列，点击需要修改的单元格，即可变成可编辑的状态。 2.代码
bootstrap框架demo_Vue+Spring Boot简单用户登录(附Demo)_vue.js
weixin_39731456的博客
11-13 283
这篇文章主要介绍了Vue+Spring Boot简单用户登录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧1 概述前后端分离的一个简单用户登录 Demo 。2 技术栈VueBootstrapVueKotlinSpring BootMyBatis Plus3 前端 创建工程使用 vue-cli 创建，没安装的可以先安装： su...
bootstrap动态分页
07-27
你可以使用Bootstrap的分页组件来创建动态分页。以下是一个基本的示例： ```html <!DOCTYPE html> 动态分页示例 <link rel="stylesheet" href="https://stackpath.bootstrapcdn....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值