Bootstrap中常用
<!DOCTYPE html>
<html lang="zh-CN">
<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-3.3.7-dist/css/bootstrap.min.css">
<title>Title</title>
<style>
body {
background-color: #eee;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 100px">
<h1 class="text-center">登录</h1>
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary btn-block">登录</button>
</div>
</div>
</form>
</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">
<title>login-title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<style>
body {
background-color: #eee;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 100px">
<h1 class="text-center">登录</h1>
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-md-2 control-label"></label>
<div class="col-md-10 input-group">
<span class="input-group-addon"><i class="fa fa-user-circle fa-fw"
aria-hidden="true"></i></span>
<input type="text" class="form-control" id="inputText" placeholder="Text">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-md-2 control-label"></label>
<div class="col-md-10 input-group">
<!--<span class="input-group-addon" id="sizing-addon1">@</span>-->
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i></span>
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-md-2 control-label"></label>
<div class="col-md-10 input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span>
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10 input-group">
<div class="checkbox">
<label>
<input type="checkbox"> 记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10 input-group">
<button type="submit" class="btn btn-primary btn-block">登录</button>
</div>
</div>
</form>
</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">
<title>进度条的实现</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container" style="margin-top:200px;">
<div class="progress">
<div id="bar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width: 1%;">
1%
</div>
</div>
</div>
<script src="jquery-3.3.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script>
// JS操作进度条,主要是操作两个地方:
// 1. width --> .css("width", 值)
// 2. 文本 --> .text(值)
// 利用setInterval模拟一个进度条增长,0.2秒钟涨1%
var width = 0;
var t = setInterval(setValue, 200);
function setValue() {
// 修改进度条的width和text
if (width < 100) {
width++;
$("#bar").css("width", width + "%").text(width + "%")
} else {
// 进度条涨到100%,就要把定时器清除
clearInterval(t);
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>info-card</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<!--<style>-->
<!--.radio {-->
<!--background-color: #f00;-->
<!--}-->
<!--</style>-->
</head>
<body>
<div class="container">
<!--页头开始-->
<div class="page-header">
<h1>信息收集卡 <small>共三步</small>
</h1>
</div>
<!--页头结束-->
<!--进度条开始-->
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width: 33.33%;">
1/3
</div>
</div>
<!--进度条结束-->
<!--面版开始-->
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">基本信息<span class="glyphicon glyphicon-pushpin pull-right" aria-hidden="true"></span></div>
<!--表单一开始-->
<form class="form-horizontal" style="margin-top:40px;margin-bottom:30px;">
<div class="form-group">
<label for="inputName" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputName" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="inputPhone" class="col-sm-2 control-label">手机</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputPhone" placeholder="Phone">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="exampleInputFile" class="col-sm-2 control-label">头像</label>
<input type="file" id="exampleInputFile" class="col-sm-10">
<div class="col-sm-10"><p class="help-block">只支持png、jpg、gif格式。</p></div>
</div>
<hr>
<div class="form-group">
<label class="col-sm-2 control-label">属性</label>
<div class="col-sm-10">
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
我是一个好人
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
我是一个坏人
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
我不是一个人
</label>
</div>
</div>
</div>
</form>
<!--表单一结束-->
</div>
<!--面版结束-->
<!--按钮开始-->
<button type="button" class="btn btn-success pull-right" style="margin-bottom: 20px;">下一步</button>
<!--按钮结束-->
</div>
</body>
</html>
<!DOCTYPE html> <!-- saved from url=(0042)https://v3.bootcss.com/examples/dashboard/ --> <html lang="zh-CN"><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-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="./Dashboard_files/dashboard.css" rel="stylesheet"> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> <![endif]--> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" 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" class="form-control" placeholder="Search..."> </form> </div> </div> </nav> <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar"> <li class="active"><a href="https://v3.bootcss.com/examples/dashboard/#">Overview <span class="sr-only">(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"> <h1 class="page-header">学生个人信息</h1> <!--面版开始--> <div class="panel panel-primary"> <!-- Default panel contents --> <div class="panel-heading">基本信息<span class="glyphicon glyphicon-pushpin pull-right" aria-hidden="true"></span></div> <div class="panel-body"> <div class="row"> <div class="col-md-4"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn"> <button class="btn btn-info" type="button">搜索</button> </span> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> <button type="button" class="btn btn-success pull-right" style="margin-right:10px;" data-toggle="modal" data-target="#myModal">新增</button> </div><!-- /.row --> </div> <!-- Table --> <table class="table table-bordered table-hover"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> <nav aria-label="Page navigation" class="text-right" style="margin-right: 10px;"> <ul class="pagination"> <li class="disabled"> <span> <span aria-hidden="true">«</span> </span> </li> <li class="active"> <span>1 <span class="sr-only">(current)</span></span> </li> <li><span>2 <span class="sr-only">(current)</span></span></li> <li><span>3 <span class="sr-only">(current)</span></span></li> <li><span>4 <span class="sr-only">(current)</span></span></li> <li><span>5 <span class="sr-only">(current)</span></span></li> <li> <span> <span aria-hidden="true">»</span> </span> </li> </ul> </nav> </div> <!--面版结束--> </div> </div> </div> <!--模态框开始--> <div class="modal fade" tabindex="-1" role="dialog" id="myModal"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="gridSystemModalLabel">用户信息</h4> </div> <div class="modal-body"> <!--表单开始--> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label">邮箱</label> <div class="col-sm-6"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-3 control-label">密码</label> <div class="col-sm-6"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> </form> <!--表单结束--> </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><!-- /.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.js"></script> <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </body></html>
作者：赵盼盼
出处：https://www.cnblogs.com/zhaopanpan/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
⇩ 关注或点个喜欢就行 ^_^
关注我
浙公网安备 33010602011771号