Bootstrap的实例
先在网站上找到需要的示例模板下载下来
https://v3.bootcss.com/getting-started/#examples
在所需要的模板页右击------>另存为（选择网页全部）------>保存
会保存为一个html页面和一个相同名字的文件夹，文件夹存放的是相关样式文件，将其全部拷贝到我们的项目里面
别的模板网站地址：adminLTE
https://adminlte.io/
1、示例一：登录注册
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>登录注册示例</title>
<style>
body {
background-color: #eee;
}
</style>
</head>
<body>
<div>
<div>
<div class="col-md-4 col-md-offset-4" style="margin-top: 100px">
<h1>请登录</h1>
<form>
<div>
<label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
<div>
<input type="email" id="inputEmail3" placeholder="Email">
</div>
</div>
<div>
<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
<div>
<input type="password" id="inputPassword3" placeholder="Password">
</div>
</div>
<div>
<div class="col-sm-offset-2 col-sm-10">
<div>
<label>
<input type="checkbox">记住我
</label>
</div>
</div>
</div>
<div>
<div class="col-sm-offset-2 col-sm-8">
<button type="submit" class="btn btn-primary btn-block">登录</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>效果图如下：
2、示例二：导航条
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>导航条示例</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div>
<!-- Brand and toggle get grouped for better mobile display -->
<div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span>Toggle navigation</span>
<span></span>
<span></span>
<span></span>
</button>
<a href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Link <span>(current)</span></a></li>
<li><a href="#">Link</a></li>
<li>
<a href="#" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span></span></a>
<ul>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator"></li>
<li><a href="#">Separated link</a></li>
<li role="separator"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li>
<a href="#" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span></span></a>
<ul>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>效果图如下：
3、示例三：轮播图动态循环
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>轮播图示例</title>
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol>
<li data-target="#carousel-example-generic" data-slide-to="0"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div role="listbox">
<div class="item active">
<img src="./banner_1.jpg" alt="...">
<div>
<h3>Bootstrap-海阔天空！</h3>
</div>
</div>
<div>
<img src="./banner_2.jpg" alt="...">
<div>
<h3>Bootstrap-最美黄昏！</h3>
</div>
</div>
<div>
<img src="./banner_3.jpg" alt="...">
<div>
<h3>Bootstrap-自然力量！</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span>Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span>Next</span>
</a>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
$('.carousel').carousel({
interval: 3000
})
</script>
</body>
</html>注意：轮播图用到的相片必须是一样大小，否则可能不会出现轮播效果
4、示例四：模态框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>模态框示例</title>
</head>
<body>
<button data-toggle="modal" data-target="#myModal">点我弹出！</button>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div role="document">
<div>
<div>
<button type="button" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4>Modal title</h4>
</div>
<div>
<form>
<div>
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div>
<input type="email" id="inputEmail3" placeholder="Email">
</div>
</div>
<div>
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div>
<input type="password" id="inputPassword3" placeholder="Password">
</div>
</div>
</form>
</div>
<div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
$('#myModal').modal({
backdrop:false,
keyboard: false
})
</script>
</body>
</html>效果图如下：
5、Dashboard
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="https://v3.bootcss.com/favicon.ico">
<title>Dashboard Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./Dashboard_files/dashboard.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div>
<div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span>Toggle navigation</span>
<span></span>
<span></span>
<span></span>
</button>
<a href="https://v3.bootcss.com/examples/dashboard/#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="https://v3.bootcss.com/examples/dashboard/#">Dashboard</a></li>
<li><a href="https://v3.bootcss.com/examples/dashboard/#">Settings</a></li>
<li><a href="https://v3.bootcss.com/examples/dashboard/#">Profile</a></li>
<li><a href="https://v3.bootcss.com/examples/dashboard/#">Help</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" placeholder="Search...">
</form>
</div>
</div>
</nav>
<div>
<div>
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li><a href="https://v3.bootcss.com/examples/dashboard/#">Overview <span>(current)</span></a>
</li>
<li><a href="https://v3.bootcss.com/examples/dashboard/#">Reports</a></li>
<li><a href="https://v3.bootcss.com/examples/dashboard/#">Analytics</a></li>
<li><a href="https://v3.bootcss.com/examples/dashboard/#">Export</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="https://v3.bootcss.com/examples/dashboard/">Nav item</a></li>
<li><a href="https://v3.bootcss.com/examples/dashboard/">Nav item again</a></li>
<li><a href="https://v3.bootcss.com/examples/dashboard/">One more nav</a></li>
<li><a href="https://v3.bootcss.com/examples/dashboard/">Another nav item</a></li>
<li><a href="https://v3.bootcss.com/examples/dashboard/">More navigation</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="https://v3.bootcss.com/examples/dashboard/">Nav item again</a></li>
<li><a href="https://v3.bootcss.com/examples/dashboard/">One more nav</a></li>
<li><a href="https://v3.bootcss.com/examples/dashboard/">Another nav item</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<!--面板 开始-->
<div class="panel panel-primary">
<div>Panel heading without title</div>
<div>
<div style="margin-bottom: 15px">
<div>
<div>
<input type="text" placeholder="Search for...">
<span>
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<button class="btn btn-success btn-sm pull-right" data-toggle="modal" data-target="#myModal" style="margin-right: 15px">添加</button>
</div>
<!--表格 开始-->
<div>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,002</td>
<td>amet</td>
<td>consectetur</td>
<td>adipiscing</td>
<td>elit</td>
</tr>
<tr>
<td>1,003</td>
<td>Integer</td>
<td>nec</td>
<td>odio</td>
<td>Praesent</td>
</tr>
<tr>
<td>1,003</td>
<td>libero</td>
<td>Sed</td>
<td>cursus</td>
<td>ante</td>
</tr>
<tr>
<td>1,004</td>
<td>dapibus</td>
<td>diam</td>
<td>Sed</td>
<td>nisi</td>
</tr>
<tr>
<td>1,005</td>
<td>Nulla</td>
<td>quis</td>
<td>sem</td>
<td>at</td>
</tr>
<tr>
<td>1,006</td>
<td>nibh</td>
<td>elementum</td>
<td>imperdiet</td>
<td>Duis</td>
</tr>
<tr>
<td>1,007</td>
<td>sagittis</td>
<td>ipsum</td>
<td>Praesent</td>
<td>mauris</td>
</tr>
<tr>
<td>1,008</td>
<td>Fusce</td>
<td>nec</td>
<td>tellus</td>
<td>sed</td>
</tr>
</tbody>
</table>
</div>
<div>
<nav aria-label="Page navigation">
<ul>
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</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="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<!--面板 结束-->
</div>
</div>
</div>
<!--模态框开始-->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div role="document">
<div>
<div>
<button type="button" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4>Modal title</h4>
</div>
<div>
<form>
<div>
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div>
<input type="email" id="inputEmail3" placeholder="Email">
</div>
</div>
<div>
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div>
<input type="password" id="inputPassword3" placeholder="Password">
</div>
</div>
</form>
</div>
<div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--模态框结束-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>效果图如下：
转载于:https://blog.51cto.com/qidian510/2091833
扫一扫
526
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
