<!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>