<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./plunge/jquery.min.js"></script> <link href="./plunge/bootstrap.min.css" rel="stylesheet"> <script str="./Popper.js"></script> <script src="./plunge/bootstrap.min.js"></script> <style> img { width: 20px; height: 20px; } table tr th { width: 40px; } .inputSty { width: 100px; } </style> </head> <body> <div class="container"> <ul class="nav nav-tabs"> <li role="presentation"><a href="#">导航一</a></li> <li role="presentation"><a href="#">导航二</a></li> <li role="presentation"><a href="#">导航三</a></li> </ul> <br><br> <ul class="breadcrumb"> <li role="presentation" class="active"><a href="#">JAVA</a></li> <li role="presentation"><a href="#">IOS</a></li> <li role="presentation" class="disabled"><a href="#">C++</a></li> </ul> <br><br> <table class="table table-bordered table-hover"> <tr> <th>头像</th> <th>名字</th> <th>HP</th> </tr> <tr class="active"> <td><img src="./img/gareen.png" class="img-rounded"></td> <td>盖伦</td> <td>616</td> </tr> <tr> <td><img src="./img/teemo.png" class="img-circle"></td> <td>提莫</td> <td>383</td> </tr> <tr> <td><img src="./img/akali.png" class="img-thumbnail"></td> <td>阿卡丽</td> <td>448</td> </tr> </table> <div class="pull-centeral">文字浮动到左边</div> <div class="row"> <div class="col-sm-6" style="border: 1px solid black;">一半</div> <div class="col-sm-6" style="border: 1px solid black;">另一半</div> </div> <br><br> <div class="row"> <div class="col-xs-8" style="border: 1px solid red;">一半</div> <div class="col-xs-4" style="border: 1px solid red;">另一半</div> </div> <br><br> <div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">http://192.168.1.189 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li><a href="#">HTML</a></li> <li role="presentation"><a href="#">CSS</a></li> <li role="presentation"><a href="#">jQuery</a></li> <li role="presentation"><a href="#">AJAX</a></li> </ul> </div> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">@@@</span> <input type="text" class="inputSty form-control" placeholder="用户名" aria-describedby="basic-addon1"> <span class="input-group-addon" id="basic-addon200">$$$</span> </div> <nav> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden>«</span> </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> <a href="#" aria-label="Next"> <span aria-hidden>»</span> </a> </li> </ul> </nav> <br><br> <nav> <ul class="pager"> <li><a href="#">上一页</a></li> <li><a href="#">下一页</a></li> </ul> </nav> <nav> <ul class="pager"> <li class="previous"><a href="#"><span aria-hidden="true">←</span> 上一页</a></li> <li class="next"><a href="#">下一页 <span aria-hidden="true">→</span></a></li> </ul> </nav> <button class="label label-default">label-default</button> <button class="label label-primary">label-primary</button> <button class="label label-success">label-success</button> <button class="label label-info">label-info</button> <button class="label label-warning">label-warning</button> <button class="label label-dangerous">label-dangerous</button> <br><br> <a href="#">新的邮件信息<span class="badge">199</span></a> <button class="btn btn-primary">新消息<span class="badge">123</span></button> <br><br><br> </div> <div class="container" align="center"> <h2 class="text-info" style="font-family:宋体;font-weight: bold;font-size: 49px">知乎</h2> <br> <div class="text-muted">与世界分享你的知乎</div> <br><br> <p><a href="#" class="btn btn-success">注册</a></p> </div> <div class="progress"> <div class="progress-bar progress-bar-striped active" style="width: 60%; min-width: 2em">60%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" style="width: 70%;">70%</div> </div> <div class="form"> <ul class="list-group"> <li class="list-group-item"><a href="#">回锅肉</a><span class="badge">13</span></li> <li class="list-group-item">烧烤<span class="badge">15</span></li> <li class="list-group-item">鱼香肉丝<span class="badge">21</span></li> <li class="list-group-item">夫妻肺片<span class="badge">22</span></li> <li class="list-group-item">麻婆豆腐<span class="badge">55</span></li> </ul> <br><br><br> <div class="list-group"> <a href="#" class="list-group-item list-group-item-success">烤鱼</a> <a href="#" class="list-group-item list-group-item-info">鱼香肉丝</a> </div> <div class="list-group"> <button class="list-group-item list-group-item-success">烤鱼<span class="badge">12</span></button> <button class="list-group-item list-group-item-info">鱼香肉丝</button> </div> </div> <div class="well">文字呈现</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./plunge/jquery.min.js"></script> <link href="./plunge/bootstrap.min.css" rel="stylesheet"> <script str="./Popper.js"></script> <script src="./plunge/bootstrap.min.js"></script> <style type="text/css"> p { margin-left: 10px; margin-top: 10px; } </style> <script> $(function() { $("[data-toggle='tooltip']").tooltip(); }); </script> </head> <body> <div class="container"> <ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#dota" data-toggle="tab">Dota</a></li> <li><a href="#lol" data-toggle="tab">英雄联盟</a></li> <li class="dropdown"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">其他类似游戏 <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> <li><a href="#storm" tabindex="-1" data-toggle="tab">暴雪游戏</a></li> <li><a href="#h300" tabindex="-1" data-toggle="tab">300英雄</a></li> </ul> </li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="dota"> Dota游戏 </div> <div class="tab-pane fade" id="lol"> 英雄联盟 </div> <div class="tab-pane fade" id="storm"> 暴雪英雄 </div> <div class="tab-panel fade" id="h300"> 300英雄 </div> </div> <button class="btn btn-primary" data-toggle="tooltip" title="SunXiang" data-placement="top">Button</button> <button class="btn btn-primary" data-toggle="tooltip" title="SunXiang" data-placement="bottom">Button</button> </div> <br><br> <div class="container"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Dota</a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> dota </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne">lol</a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> lol </div> </div> </div> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="./bootstrap.min.css"> <script src="./jquery-3.3.1.min.js" type="text/javascript"></script> <script src="./bootstrap.min.js" type="text/javascript"></script> <style> input { display: inline-block; /* width: 50px; */ } label { display: inline-block; /* width: 50%; */ } table { font-size: 20px; } table tr { border: 1px solid black; border-radius: 8px; } table tr td, table tr th { width: 300px; text-align: center; } </style> </head> <body> <div class="container"> <div class="page-header"> <h1>Bootstrap相关优质项目推介</h1> <p>这些项目或者是对bootstrap进行有益的补充,或者是给予bootstrap开发</p> </div> <div class="jumbotron"> <h1>Bootstrap</h1> <p>简介、直观、强悍的前端开发框架、让web开发更迅速、简单。</p> <a href="" class="btn btn-primary btn-lg">Bootstrap3中文文档(v3.3.5)</a> </div> <table class="table table-bordered"> <tr class="info"> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr class="warning"> <td class="info">孙祥</td> <td>男</td> <td>24</td> </tr> <tr class="success"> <td>程丽芳</td> <td>女</td> <td>21</td> </tr> <tr class="danger"> <td>周莎</td> <td>女</td> <td>22</td> </tr> </table> <button class="btn btn-default">下拉菜单 <span>×</span></button> <div class="row"> <div class="col-md-8" main> 左边,主要内容 </div> <div class="col-md-4 side hidden-sm hidden-xs"> 右边的侧栏 </div> </div> <div class="well"> 这是一个容器 </div> <div class="well well-lg"> 这是一个大号的well </div> <div class="well well-sm"> 这是一个小号的well </div> <h2>热门文章</h2> <p> <span class="label label-danger">1</span> <a href="#">如何为网站和应用创建设计...</a> </p> <p> <span class="label label-danger">2</span> <a href="#">假如5年后你是开发总监</a> </p> <p> <span class="label label-danger">3</span> <a href="#">20个精雕细琢的LOGO草图...</a> </p> <p> <span class="label label-default">4</span> <a href="#">每个程序员都必须遵守的编程...</a> </p> <p> <span class="label label-default">5</span> <a href="#">推荐: 7个有用的HTML5学习...</a> </p> <p> <span class="label label-default">6</span> <a href="#">响应式WEB设计</a> </p> <p> <span class="label label-default">7</span> <a href="#">Javascript判断Chrome浏览器</a> </p> <button class="btn btn-primary">收件箱<span class="badge">99</span></button> <a href="" class="btn btn-success">未接电话<span class="badge">100</span></a> <div class="alert">提示信息</div> <p class="alert alert-success">操作成功</p> <ol class="breadcrumb"> <li><a href="">首页</a></li> <li><a href="">手机</a></li> <li><a href="">华为</a></li> <li><a href="">荣耀</a></li> </ol> <ul class="pagination"> <li><a href="">«</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="">6</a></li> <li><a href="">7</a></li> <li><a href="">»</a></li> </ul> </div> </body> </html>
轮播例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./plunge/jquery.min.js"></script> <link href="./plunge/bootstrap.min.css" rel="stylesheet"> <script str="./Popper.js"></script> <script src="./plunge/bootstrap.min.js"></script> </head> <body> <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> <li data-target="#carousel-example-generic" data-slide-to="3"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://how2j.cn/img/site/step/3491.png" /> </div> <div class="item"> <img src="http://how2j.cn/img/site/step/3492.png" /> </div> <div class="item"> <img src="http://how2j.cn/img/site/step/3493.png" /> </div> <div class="item"> <img src="http://how2j.cn/img/site/step/3494.png" /> </div> </div> </div> </body> </html>