<!DOCTYPE html><html><head><metacharset="utf-8"><title></title><linkrel="stylesheet"type="text/css"href="css/bootstrap.css"/><scriptsrc="js/jquery-3.5.1.min.js"type="text/javascript"charset="utf-8"></script><scriptsrc="js/bootstrap.min.js"type="text/javascript"charset="utf-8"></script></head><body><divclass="container"><divclass="row"><divclass="col-md-8"><formclass="form-horizontal"><divclass="form-group"><labelfor="inputEmail3"class="col-sm-2 control-label">用户名</label><divclass="col-sm-10"><inputtype="email"class="form-control"id="inputEmail3"placeholder="Email"></div></div><divclass="form-group"><labelfor="inputPassword3"class="col-sm-2 control-label">密码</label><divclass="col-sm-10"><inputtype="password"class="form-control"id="inputPassword3"placeholder="Password"></div></div><divclass="form-group"><divclass="col-sm-offset-2 col-sm-10"><buttontype="submit"class="btn btn-default">登录</button></div></div></form></div><divclass="col-md-4"><tableclass="table table-bordered"><caption>Optional table caption.</caption><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr></thead><tbody><trclass="danger"><thscope="row">1</th><tdclass="warning">Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdclass="info">Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table></div></div><divclass="row"><divclass="col-md-6"><divclass="form-group has-error has-feedback"><labelclass="control-label"for="inputSuccess2">Input with success</label><inputtype="text"class="form-control"id="inputSuccess2"><spanclass="glyphicon glyphicon-remove form-control-feedback"></span></div></div><divclass="col-md-6"><divclass="dropup"><buttonclass="btn btn-default dropdown-toggle"type="button"id="dropdownMenu2"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">
Dropup
<spanclass="caret"></span></button><ulclass="dropdown-menu"aria-labelledby="dropdownMenu2"><li><ahref="#">Action</a></li><li><ahref="#">Another action</a></li><li><ahref="#">Something else here</a></li><lirole="separator"class="divider"></li><li><ahref="#">Separated link</a></li></ul></div></div></div></div><!-- Button trigger modal --><buttontype="button"class="btn btn-primary btn-lg"data-toggle="modal"data-target="#mytest">
添加
</button><!-- Modal --><divclass="modal fade"id="mytest"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"><divclass="modal-dialog"role="document"><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">×</span></button><h4class="modal-title"id="myModalLabel">添加数据</h4></div><divclass="modal-body"><form><divclass="form-group"><labelfor="exampleInputEmail1">Email address</label><inputtype="email"class="form-control"id="exampleInputEmail1"placeholder="Email"></div><divclass="form-group"><labelfor="exampleInputPassword1">Password</label><inputtype="password"class="form-control"id="exampleInputPassword1"placeholder="Password"></div><divclass="form-group"><labelfor="exampleInputFile">File input</label><inputtype="file"id="exampleInputFile"><pclass="help-block">Example block-level help text here.</p></div><divclass="checkbox"><label><inputtype="checkbox"> Check me out
</label></div></form></div><divclass="modal-footer"><buttontype="button"class="btn btn-default"data-dismiss="modal">Close</button><buttontype="button"class="btn btn-primary"data-dismiss="modal">Save changes</button></div></div></div></div></body></html>
2.bootstapdemo
<!DOCTYPE html><html><head><metacharset="utf-8"><title></title><linkrel="stylesheet"type="text/css"href="css/bootstrap.css"/><scriptsrc="js/jquery-3.5.1.min.js"type="text/javascript"charset="utf-8"></script><scriptsrc="js/bootstrap.min.js"type="text/javascript"charset="utf-8"></script><scriptsrc="js/echarts.min.js"type="text/javascript"charset="utf-8"></script><script>$(function(){// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option ={
title:{
text:'出勤图'},
tooltip:{
trigger:'axis'},
legend:{
data:['720A','704A','704B','722']},
grid:{
left:'3%',
right:'4%',
bottom:'3%',
containLabel:true},
toolbox:{
feature:{
saveAsImage:{},
restore:{}}},
xAxis:{
type:'category',
boundaryGap:false,
data:['周一','周二','周三','周四','周五','周六']},
yAxis:{
type:'value'},
series:[{
name:'720A',
type:'line',
data:[120,132,101,134,90,230,210]},{
name:'704A',
type:'line',
data:[220,182,191,234,290,330,310]},{
name:'704B',
type:'line',
data:[150,232,201,154,190,330,410]},{
name:'722',
type:'line',
data:[320,332,301,334,390,330,320]}]};// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);})</script></head><body><divclass="container"><divclass="row clearfix"><divclass="col-md-12 column"><ulclass="nav nav-tabs"><liclass="active"><ahref="#">首页</a></li><li><ahref="#">简介</a></li><liclass="disabled"><ahref="#">信息</a></li><liclass="dropdown pull-right"><ahref="#"data-toggle="dropdown"class="dropdown-toggle">下拉<strongclass="caret"></strong></a><ulclass="dropdown-menu"><li><ahref="#">操作</a></li><li><ahref="#">设置栏目</a></li><li><ahref="#">更多设置</a></li><liclass="divider"></li><li><ahref="#">分割线</a></li></ul></li></ul><ulclass="breadcrumb"><li><ahref="#">Home</a></li><li><ahref="#">Library</a></li><liclass="active">
Data
</li></ul></div></div><divclass="row clearfix"><divclass="col-md-6 column"><tableclass="table"><thead><tr><th>
编号
</th><th>
产品
</th><th>
交付时间
</th><th>
状态
</th></tr></thead><tbody><tr><td>
1
</td><td>
TB - Monthly
</td><td>
01/04/2012
</td><td>
Default
</td></tr><trclass="success"><td>
1
</td><td>
TB - Monthly
</td><td>
01/04/2012
</td><td>
Approved
</td></tr><trclass="error"><td>
2
</td><td>
TB - Monthly
</td><td>
02/04/2012
</td><td>
Declined
</td></tr><trclass="warning"><td>
3
</td><td>
TB - Monthly
</td><td>
03/04/2012
</td><td>
Pending
</td></tr><trclass="info"><td>
4
</td><td>
TB - Monthly
</td><td>
04/04/2012
</td><td>
Call in to confirm
</td></tr></tbody></table><divclass="carousel slide"id="carousel-129170"><olclass="carousel-indicators"><liclass="active"data-slide-to="0"data-target="#carousel-129170"></li><lidata-slide-to="1"data-target="#carousel-129170"></li><lidata-slide-to="2"data-target="#carousel-129170"></li></ol><divclass="carousel-inner"><divclass="item active"><imgalt=""src="http://cdn.ibootstrap.cn/lorempixel.com/1600/500/sports/1/default.jpg"/><divclass="carousel-caption"><h4>
First Thumbnail label
</h4><p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p></div></div><divclass="item"><imgalt=""src="http://cdn.ibootstrap.cn/lorempixel.com/1600/500/sports/2/default.jpg"/><divclass="carousel-caption"><h4>
Second Thumbnail label
</h4><p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p></div></div><divclass="item"><imgalt=""src="http://cdn.ibootstrap.cn/lorempixel.com/1600/500/sports/3/default.jpg"/><divclass="carousel-caption"><h4>
Third Thumbnail label
</h4><p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p></div></div></div><aclass="left carousel-control"href="#carousel-129170"data-slide="prev"><spanclass="glyphicon glyphicon-chevron-left"></span></a><aclass="right carousel-control"href="#carousel-129170"data-slide="next"><spanclass="glyphicon glyphicon-chevron-right"></span></a></div></div><divclass="col-md-6 column"><formrole="form"><divclass="form-group"><labelfor="exampleInputEmail1">Email address</label><inputtype="email"class="form-control"id="exampleInputEmail1"/></div><divclass="form-group"><labelfor="exampleInputPassword1">Password</label><inputtype="password"class="form-control"id="exampleInputPassword1"/></div><divclass="form-group"><labelfor="exampleInputFile">File input</label><inputtype="file"id="exampleInputFile"/><pclass="help-block">
Example block-level help text here.
</p></div><divclass="checkbox"><label><inputtype="checkbox"/>Check me out</label></div><buttontype="submit"class="btn btn-default">Submit</button></form></div></div><divclass="row"><divclass="col-md-12"><divid="main"style="width: 600px;height:400px;"></div></div></div></div></body></html>
扫一扫
503
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
