Bootstrap基础
栅格系统
1. row必须放到container和container-fluid里面
2. 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
列的样式
.col-xx（lg md sm xs）-数字（1~12）
container有一个padding是15px
row有一个margin是-15px
列是支持嵌套的
列偏移： col-xx-offset-数字（1~12）
列排序： .col-md-pull-数字 .col-md-push-数字
文本对齐类
- .text-left
- .text-center
- .text-right
表单
.form-group
.form-inline
.form-horizontal
表格
.table
.table-striped
.table-bordered
.table-hover
.table-condensed
响应式表格
<div class="table-responsive"> // table外面包裹一层div
<table class="table">
...
</table>
</div
按钮
.btn
.btn-default
.btn-success
.btn-warning
.btn-danger
.btn-lg
.btn-sm
.btn-xs
快速浮动
- .pull-left
- .pull-right
清除样式
- .clearfix
Bootstrap3居中处理
水平居中
- .center-block 不涉及到列的居中 本质上就是 margin: 0 auto
让那个标签居中就把它写在哪个标签的样式类中
- 我们自定义的居中 在涉及到列的居中时使用
.col-centered {
float: none;
margin: 0 auto;
}
- 文本类居中或者display: inline
.text-center
垂直居中
.vertical-center {
display: flex;
align-items: center;
}
用在父标签中，让子块级标签垂直居中
Bootstrap组件
图标
span标签，里面加上样式类
glyphicon glyphicon-piggy-bank
下拉菜单： 后面我们就要用到bootstrap.js --> 之前还要引用jQuery.js
按钮组
.btn-group
.btn-toolbar
尺寸
分列式下拉菜单按钮
.css 和.min.css的区别是：
.min.css是压缩版的，用于生产环境的，因为它把多余的空格都去掉了，体积很小
.css 是没有压缩的
我们现在是开发阶段，用哪个都可以
.min.js
.js
同上
js文件我们通常放在body标签里面的最下面
除非你的js代码就必须在文档加载之前运行，这个时候要放在head标签里面
导航
<!--导航区开始-->
<ul class="nav nav-tabs nav-stacked" role="tablist">
<li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
</ul>
<!--导航区结束-->
<!--面板区开始-->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">这里是主页的内容</div>
<div role="tabpanel" class="tab-pane" id="profile">这里是简介页面的内容</div>
<div role="tabpanel" class="tab-pane" id="messages">这里是消息页面的内容</div>
</div>
<!--面板区结束-->
.nav-tabs --> tab式
.nav-pills --> 胶囊式
.nav-justified --> 两端对齐
导航条
.navbar-btn
.navbar-text
.navbar-left .navbar-right --> 在导航条里面用左右浮动的化需要使用这俩个
.navbar-link
**导航条不需要放在.container里面**
.navbar-fixed-top --> 固定在顶部
如果使用了上面固定在顶部的样式，那么就需要给body设置padding
body { padding-top: 70px; }
.navbar-static-top --> 静止在顶部
.navbar-inverse --> 反色
面包屑导航/路径导航
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
分页
翻页
标签
.label
徽章
微信未读消息
个人中心通知的提示
巨幕
铺满整个屏幕
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
页头
缩略图 --> 前女友的页面
进度条
应用场景：
- 上传下载加载
- 体现步骤进度
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
.progress-bar-striped 条纹状进度条
动起来
.active
颜色
.progress-bar-success
.progress-bar-warning
.progress-bar-info
.progress-bar-danger
媒体对象
.media-left
.media-body
.media-right
头像的位置
.默认
.media-middle --> 中间
.media-bottom --> 底部
列表组
外面的div加这个样式： .list-group
里面的元素加这个样式: .list-group-item
面板
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">这里写标题</h3>
</div>
<div class="panel-body">
这里面是内容
</div>
<div class="panel-footer">Panel footer</div>
</div>
模态框
位置要放在body里面（body的直接子元素）
弹出方式：
1. 通过 data 属性
data-toggle="modal" data-target="#myModal"
2. 通过JS代码
- $("#myModal").modal("show") --> 显示出来
- $("#myModal").modal("hide) --> 隐藏
模态框大小：(放在modal里面标签上的)
.modal-lg
.modal-sm
动画效果：
fade
一个正经模态框：
1. .modal-header
2. .modal-body
3. .modal-footer
参数
backdrop： true/false/'static' --> 遮罩层的参数
keyboard: true/false --> 键盘上的ESC按键
事件
显示之前
显示完
隐藏之前
隐藏完
$(document).ready(function () {
$('#myModal').on('show.bs.modal', function (e) {
// do something...
alert("我让模态框显示出来，但是它还没来得及显示");
});
$('#myModal').on('shown.bs.modal', function (e) {
// do something...
alert("我让模态框显示出来，现在它已经显示出来了");
})
font awesome
http://fontawesome.io/
i 标签 区别于Bootstrap自带图标的span标签
sweetalert:
https://limonte.github.io/sweetalert2/
引用css文件和JS文件之后
swal("标题", "内容", "success")
Toastr
http://www.jq22.com/yanshi476 可以查看简单示例
jQueryLazyLoad
bootstrap提供给的都是成型的样式和框架，可以拿过来用然后更改一下样式，所以很多都可以直接过去复制粘贴，当然想要自己的效果还是需要修改。
网页的布局说白了就是一个个的盒子，想好每个盒子有多大要放什么，盒子里面是否还有盒子然后是否要分row，这样来布局的话就好得多
以下是实例
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7 <link rel="stylesheet" href="dist/css/bootstrap.css"> 8 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script> 9 <script src="dist/js/bootstrap.js"></script> 10 <title>Title</title> 11 <style> 12 body { 13 background-color: black; 14 } 15 16 .ya { 17 background-color: white; 18 /*border-radius: 2%;*/ 19 width: 450px; 20 height: 250px; 21 margin-top: 200px; 22 margin-left: 30%;; 23 position: fixed; 24 } 25 26 .btn-inf { 27 color: white; 28 background-color: black; 29 border: black; 30 } 31 .btn-inf:active{ 32 color: white !important; 33 background-color: #222222 !important; 34 border: black !important; 35 } 36 .btn-inf:link { 37 color: white; 38 background-color: black; 39 border: black; 40 } 41 42 .btn-inf:hover { 43 color: white; 44 background-color: #333333; 45 } 46 .glyphicon { 47 margin-right: 10px; 48 } 49 .yu{ 50 background-color:black ; 51 color:white ; 52 } 53 .nuo{ 54 margin-top: 40px; 55 margin-left:10px ; 56 } 57 .btn-sc{ 58 color: black; 59 background-color: white; 60 border: white; 61 /*width: 300px;*/ 62 /*height: 100px;*/ 63 /*font-size: 50px;*/ 64 padding: 10px; 65 position: fixed; 66 top:40%; 67 left: 40%; 68 } 69 .btn-sc:hover{ 70 color:white ; 71 background-color: #5e5e5e; 72 border: white; 73 } 74 .btn-lg{ 75 padding: 20px 32px; 76 font-size: 36px; 77 line-height: 2; 78 border-radius: 12px; 79 } 80 </style> 81 </head> 82 <body> 83 <div class="container ya img-rounded hidden"> 84 <form class="form-horizontal nuo novalidate"> 85 <div class="form-group" id="in1"> 86 <label for="inputEmail3" class="col-sm-2 control-label">用户名</label> 87 88 <div class="input-group col-sm-8"> 89 <span class="glyphicon glyphicon-user input-group-addon yu"></span> 90 <input type="text" class="form-control" id="inputEmail3" placeholder="用户名" 91 aria-describedby="inputEmail3"> 92 <span class="glyphicon glyphicon-ok form-control-feedback hidden" id="namer"></span> 93 <span class="glyphicon glyphicon-warning-sign form-control-feedback hidden" 94 id="namew"></span> 95 <span class="glyphicon glyphicon-remove form-control-feedback hidden" id="namec"></span> 96 </div> 97 </div> 98 <div class="form-group" id="in2"> 99 <label for="inputPassword3" class="col-sm-2 control-label">密码</label> 100 <div class="input-group col-sm-8"> 101 <span class="glyphicon glyphicon-lock input-group-addon yu"></span> 102 <input type="password" class="form-control" id="inputPassword3" placeholder="密码"> 103 <span class="glyphicon glyphicon-ok form-control-feedback hidden" id="pwdr"></span> 104 <span class="glyphicon glyphicon-warning-sign form-control-feedback hidden" 105 id="pwdw"></span> 106 <span class="glyphicon glyphicon-remove form-control-feedback hidden" id="pwdc"></span> 107 </div> 108 </div> 109 <div class="form-group"> 110 <div class="col-sm-offset-2 col-sm-8"> 111 <div class="checkbox"> 112 <label> 113 <input type="checkbox"> 记住密码 114 </label> 115 </div> 116 </div> 117 </div> 118 <div class="form-group"> 119 <div class="col-sm-offset-2 col-sm-8"> 120 <a href="javascript:void(0)" class="glyphicon glyphicon-link btn btn-inf btn-block" id="bu">登录</a> 121 </div> 122 </div> 123 </form> 124 </div> 125 <div class="tubiao"> 126 <a href="javascript:void(0)" class="glyphicon glyphicon-tasks btn btn-sc btn-lg"> Login</a> 127 </div> 128 <script> 129 $("#inputEmail3").on("blur",function () { 130 zhi=$("#inputEmail3").val(); 131 if (zhi.length==0){ 132 $("#namew").removeClass("hidden"); 133 $("#in1").addClass("has-warning") 134 } 135 if (zhi.length>15||(zhi.length<6&&zhi.length!=0)){ 136 $("#namec").removeClass("hidden"); 137 $("#in1").addClass("has-error") 138 } 139 if(zhi.length>=6&&zhi.length<15){ 140 $("#namer").removeClass("hidden"); 141 $("#in1").addClass("has-success") 142 } 143 144 }); 145 $("#inputEmail3").on("focus",function () { 146 $("#in1").removeClass("has-error"); 147 $("#in1").removeClass("has-success"); 148 $("#in1").removeClass("has-warning"); 149 $("#namew").addClass("hidden"); 150 $("#namec").addClass("hidden"); 151 $("#namer").addClass("hidden"); 152 }); 153 $("#inputPassword3").on("blur",function () { 154 pwd=$("#inputPassword3").val(); 155 if (pwd.length==0){ 156 $("#pwdw").removeClass("hidden"); 157 $("#in2").addClass("has-warning") 158 } 159 if (pwd.length>15||(pwd.length<6&&pwd.length!=0)){ 160 $("#pwdc").removeClass("hidden"); 161 $("#in2").addClass("has-error") 162 } 163 if(pwd.length>=6&&pwd.length<15) { 164 $("#pwdr").removeClass("hidden"); 165 $("#in2").addClass("has-success") 166 } 167 168 }); 169 $("#inputPassword3").on("focus",function () { 170 $("#in2").removeClass("has-error"); 171 $("#in2").removeClass("has-success"); 172 $("#in2").removeClass("has-warning"); 173 $("#pwdw").addClass("hidden"); 174 $("#pwdc").addClass("hidden"); 175 $("#pwdr").addClass("hidden"); 176 }); 177 $(".btn-sc").on("click",function () { 178 $(".btn-sc").addClass("hidden"); 179 $(".ya").removeClass("hidden"); 180 181 }) 182 </script> 183 </body> 184 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="dist/css/bootstrap.css"> 7 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script> 8 <script src="dist/js/bootstrap.js"></script> 9 <style> 10 .name{ 11 margin-top: 50px; 12 margin-left: 50px; 13 } 14 .uang{ 15 margin-top: 50px; 16 margin-left: 50px; 17 } 18 .c{ 19 color: red; 20 } 21 .hide{ 22 display: none; 23 } 24 </style> 25 </head> 26 <body> 27 <div class="name">用户名<input type="text" class="te"><b class="c hide" id="1">用户名过长</b><b class="c hide" id="3">用户名过短</b><b class="c hide" id="5">请输入用户名</b></div> 28 <div class="name">密码<input type="password" class="te"><b class="c hide" id="2">密码过长</b><b class="c hide" id="4">密码过短</b><b class="c hide" id="6">请输入密码</b></div> 29 <button class="uang btn btn-info">login</button> 30 <script> 31 (function (jq) { 32 function login(arg) { 33 arg.on("click",function () { 34 jq(".te").each(function () { 35 if(jq(this).val().length>7){ 36 jq(this).next().removeClass("hide"); 37 console.log(jq(this).next()); 38 return false 39 } 40 else if (jq(this).val().length<2&&jq(this).val().length>0){ 41 jq(this).next().next().removeClass("hide"); 42 return false 43 } 44 else if (jq(this).val().length==0){ 45 jq(this).next().next().next().removeClass("hide"); 46 return false 47 } 48 }) 49 }); 50 jq(".te").on("focus",function () { 51 jq(this).nextAll().addClass("hide"); 52 }); 53 } 54 jq(document).ready(function () { 55 jq(".uang").check() 56 }); 57 jq.fn.extend({ 58 check:function () { 59 login(this) 60 } 61 }) 62 })(jQuery); 63 64 65 66 </script> 67 </body> 68 <
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7 <link rel="stylesheet" href="dist/css/bootstrap.css"> 8 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script> 9 <script src="dist/js/bootstrap.js"></script> 10 <link rel="stylesheet" href="sw-dist/sweetalert2.min.css"> 11 <script src="sw-dist/sweetalert2.js"></script> 12 <title>信息收集</title> 13 </head> 14 <style> 15 .t{ 16 height: 10px; 17 width: 97%; 18 border-bottom: 1px solid #e0e0e0; 19 margin: 1.5% auto; 20 } 21 .tt{ 22 margin-bottom: 10px; 23 } 24 </style> 25 <body> 26 <div class="container"> 27 <div class="row"> 28 <div class="page-header"> 29 <h1>信息手机卡 <small>共三部</small></h1> 30 </div> 31 </div> 32 <div class="row"> 33 <div class="progress"> 34 <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 33.3%">1/3 35 <span class="sr-only">3/1 (success)</span> 36 </div> 37 </div> 38 </div> 39 <div class="row"> 40 <div class="panel panel-primary"> 41 <div class="panel-heading">基本信息<div class="glyphicon glyphicon-pushpin pull-right"></div></div> 42 <div class="panel-body"> 43 44 <form class="form-horizontal"> 45 <div class="form-group"> 46 <label for="inputEmail3" class="col-sm-2 control-label">姓名</label> 47 <div class="col-sm-4"> 48 <input type="email" class="form-control" id="inputEmail3" placeholder="姓名"> 49 </div> 50 </div> 51 <div class="form-group"> 52 <label for="inputPassword3" class="col-sm-2 control-label">手机</label> 53 <div class="col-sm-4"> 54 <input type="password" class="form-control" id="inputPassword3" placeholder="手机"> 55 </div> 56 </div> 57 <div class="form-group"> 58 <label for="inputEmail4" class="col-sm-2 control-label">邮箱</label> 59 <div class="col-sm-4"> 60 <input type="email" class="form-control" id="inputEmail4" placeholder="邮箱"> 61 </div> 62 </div> 63 <div class="form-group"> 64 <label for="inputEmail5" class="col-sm-2 control-label">密码</label> 65 <div class="col-sm-4"> 66 <input type="email" class="form-control" id="inputEmail5" placeholder="密码"> 67 </div> 68 </div> 69 <div class="form-group"> 70 <label for="exampleInputFile" class="col-sm-2 control-label">头像</label> 71 <input type="file" id="exampleInputFile" class="col-sm-10"> 72 <p class="help-block col-sm-2">只支持png、jpq、gif格式。</p> 73 </div> 74 75 </form> 76 77 <div class="row"> 78 <div class="t"></div> 79 </div> 80 <div class="row"> 81 82 <form id="suiyi" class="col-sm-12 col-sm-offset-1 form-horizontal"> 83 84 <div class="radio "> 85 <label for="optionsRadios1" class="col-sm-1"><strong>属性</strong> </label> 86 <label> 87 <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 88 我是一个好人 89 </label> 90 </div> 91 <div class="radio clearfix col-sm-offset-1"> 92 <label> 93 <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> 94 我是一个坏人 95 </label> 96 </div> 97 <div class="radio disabled col-sm-offset-1"> 98 <label> 99 <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> 100 我真不是个人 101 </label> 102 </div> 103 </form> 104 </div> 105 </div> 106 </div> 107 <button class="btn btn-success pull-right" id="kl">下一步 108 </button> 109 </div> 110 111 </div> 112 <script> 113 $("#kl").on("click",function () { 114 swal("完成","填写成功","success") 115 }) 116 117 </script> 118 </body> 119 120 </html>
1 <!DOCTYPE html> 2 <html lang="zh-CN"><head> 3 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <link rel="stylesheet" href="dist/css/bootstrap.css"> 8 <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> 9 <meta name="description" content=""> 10 <meta name="author" content=""> 11 <link rel="icon" href="http://v3.bootcss.com/favicon.ico"> 12 <link href="dist/fonts/glyphicons-halflings-regular.svg"> 13 <link href="dist/fonts/glyphicons-halflings-regular.ttf" rel="stylesheet"> 14 <link href="dist/fonts/glyphicons-halflings-regular.woff" rel="stylesheet"> 15 <link href="dist/fonts/glyphicons-halflings-regular.woff2" rel="stylesheet"> 16 <title>Dashboard Template for Bootstrap</title> 17 18 <!-- Bootstrap core CSS --> 19 <link href="Dashboard%20Temp_files/bootstrap.css" rel="stylesheet"> 20 21 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 22 <link href="Dashboard%20Temp_files/ie10-viewport-bug-workaround.css" rel="stylesheet"> 23 24 <!-- Custom styles for this template --> 25 <link href="Dashboard%20Temp_files/dashboard.css" rel="stylesheet"> 26 27 <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> 28 <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> 29 <script src="Dashboard%20Temp_files/ie-emulation-modes-warning.js"></script> 30 31 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 32 <!--[if lt IE 9]> 33 <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> 34 <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> 35 <![endif]--> 36 </head> 37 <style> 38 .col-centered { 39 float: none; 40 margin: 0 auto; 41 } 42 </style> 43 <body> 44 45 <nav class="navbar navbar-inverse navbar-fixed-top"> 46 <div class="container-fluid"> 47 <div class="navbar-header"> 48 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 49 <span class="sr-only">Toggle navigation</span> 50 <span class="icon-bar"></span> 51 <span class="icon-bar"></span> 52 <span class="icon-bar"></span> 53 </button> 54 <a class="navbar-brand" href="#">Project name</a> 55 </div> 56 <div id="navbar" class="navbar-collapse collapse"> 57 <ul class="nav navbar-nav navbar-right"> 58 <li><a href="#">Dashboard</a></li> 59 <li><a href="#">Settings</a></li> 60 <li><a href="#">Profile</a></li> 61 <li><a href="#">Help</a></li> 62 </ul> 63 <form class="navbar-form navbar-right"> 64 <input class="form-control" placeholder="Search..." type="text"> 65 </form> 66 </div> 67 </div> 68 </nav> 69 70 <div class="container-fluid"> 71 <div class="row"> 72 <div class="col-sm-3 col-md-2 sidebar"> 73 74 <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 75 <div class="panel panel-default"> 76 <div class="panel-heading" role="tab" id="headingOne"> 77 <h4 class="panel-title"> 78 <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 79 Collapsible Group Item #1 80 </a> 81 </h4> 82 </div> 83 <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 84 <div class="panel-body"> 85 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 86 </div> 87 </div> 88 </div> 89 <div class="panel panel-default"> 90 <div class="panel-heading" role="tab" id="headingTwo"> 91 <h4 class="panel-title"> 92 <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 93 Collapsible Group Item #2 94 </a> 95 </h4> 96 </div> 97 <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 98 <div class="panel-body"> 99 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 100 </div> 101 </div> 102 </div> 103 <div class="panel panel-default"> 104 <div class="panel-heading" role="tab" id="headingThree"> 105 <h4 class="panel-title"> 106 <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 107 Collapsible Group Item #3 108 </a> 109 </h4> 110 </div> 111 <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 112 <div class="panel-body"> 113 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 114 </div> 115 </div> 116 </div> 117 </div> 118 119 </div> 120 <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> 121 122 123 <div class="panel panel-default"> 124 <div class="panel-heading">Panel heading</div> 125 <div class="panel-body"> 126 <div class="row"> 127 <form class="navbar-form navbar-left col-sm-12" role="search"> 128 <div class="form-group"> 129 <input type="text" class="form-control" placeholder="搜索"> 130 </div> 131 <button type="submit" class="btn btn-info">搜索</button> 132 133 </form> 134 <button type="submit" class="btn btn-success pull-right" style="margin-right: 15px;margin-top:8px " data-toggle="modal" data-target="#myModal">添加</button> 135 </div> 136 <div class="modal fade j" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 137 <div class="modal-dialog j" role="document"> 138 <div class="modal-content j"> 139 <div class="modal-header"> 140 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 141 <h4 class="modal-title" id="myModalLabel">信息填写</h4> 142 </div> 143 <div class="modal-body"> 144 <form action=""> 145 <div class="form-group"> 146 <label for="d1">姓名</label> 147 <input type="text" class="hui form-control" id="d1"> 148 </div> 149 <div class="form-group"> 150 <label for="d2">邮箱</label> 151 <input type="text" class="hui form-control" id="d2"> 152 </div> 153 <div class="form-group"> 154 <label for="d3">爱好</label> 155 <input type="text" class="hui form-control" id="d3"> 156 </div> 157 <div class="modal-footer"> 158 <input type="reset" class="an btn btn-default" data-dismiss="modal" value="Close"> 159 <input type="reset" class="anq btn btn-primary" value="确定添加" data-dismiss="modal" > 160 </div> 161 </form> 162 </div> 163 164 </div> 165 </div> 166 </div> 167 168 <div class="table-responsive"> 169 <table class="table table-striped table-bordered"> 170 <thead> 171 <tr> 172 <th class="col-sm-1">#</th> 173 <th>姓名</th> 174 <th>邮箱</th> 175 <th>爱好</th> 176 <th>操作</th> 177 </tr> 178 </thead> 179 <tbody> 180 <tr> 181 <td class="col-sm-1">1,001</td> 182 <td>Lorem</td> 183 <td>ipsum</td> 184 <td>dolor</td> 185 <td class="col-sm-4 "><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button> 186 <button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td> 187 </tr> 188 <tr> 189 <td class="col-sm-1">1,002</td> 190 <td>amet</td> 191 <td>consectetur</td> 192 <td>adipiscing</td> 193 <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button> 194 <button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td> 195 </tr> 196 <tr> 197 <td class="col-sm-1">1,003</td> 198 <td>Integer</td> 199 <td>nec</td> 200 <td>odio</td> 201 <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button> 202 <button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td> 203 </tr> 204 <tr> 205 <td class="col-sm-1">1,003</td> 206 <td>libero</td> 207 <td>Sed</td> 208 <td>cursus</td> 209 <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button> 210 <button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td> 211 </tr> 212 <tr> 213 <td class="col-sm-1">1,004</td> 214 <td>dapibus</td> 215 <td>diam</td> 216 <td>Sed</td> 217 <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button> 218 <button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td> 219 </tr> 220 <tr> 221 <td class="col-sm-1">1,005</td> 222 <td>Nulla</td> 223 <td>quis</td> 224 <td>sem</td> 225 <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button> 226 <button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td> 227 </tr> 228 <tr> 229 <td class="col-sm-1">1,006</td> 230 <td>nibh</td> 231 <td>elementum</td> 232 <td>imperdiet</td> 233 <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button> 234 <button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td> 235 </tr> 236 <tr> 237 <td class="col-sm-1">1,007</td> 238 <td>sagittis</td> 239 <td>ipsum</td> 240 <td>Praesent</td> 241 <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button> 242 <button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td> 243 </tr> 244 <tr> 245 <td class="col-sm-1">1,008</td> 246 <td>Fusce</td> 247 <td>nec</td> 248 <td>tellus</td> 249 <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button> 250 <button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td> 251 </tr> 252 <tr> 253 <td class="col-sm-1">1,009</td> 254 <td>augue</td> 255 <td>semper</td> 256 <td>porta</td> 257 <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button> 258 <button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td> 259 </tr> 260 <tr> 261 <td class="col-sm-1">1,010</td> 262 <td>massa</td> 263 <td>Vestibulum</td> 264 <td>lacinia</td> 265 <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button> 266 <button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td> 267 </tr> 268 <tr> 269 <td class="col-sm-1">1,011</td> 270 <td>eget</td> 271 <td>nulla</td> 272 <td>Class</td> 273 <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button> 274 <button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td> 275 </tr> 276 <tr> 277 <td class="col-sm-1">1,012</td> 278 <td>taciti</td> 279 <td>sociosqu</td> 280 <td>ad</td> 281 <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button> 282 <button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td> 283 </tr> 284 <tr> 285 <td class="col-sm-1">1,013</td> 286 <td>torquent</td> 287 <td>per</td> 288 <td>conubia</td> 289 <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button> 290 <button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td> 291 </tr> 292 <tr> 293 <td class="col-sm-1">1,014</td> 294 <td>per</td> 295 <td>inceptos</td> 296 <td>himenaeos</td> 297 <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button> 298 <button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td> 299 </tr> 300 <tr> 301 <td class="col-sm-1">1,015</td> 302 <td>sodales</td> 303 <td>ligula</td> 304 <td>in</td> 305 <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button> 306 <button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td> 307 </tr> 308 </tbody> 309 </table> 310 </div> 311 <nav aria-label="Page navigation" class=" pull-right"> 312 <ul class="pagination"> 313 <li> 314 <a href="#" aria-label="Previous"> 315 <span aria-hidden="true">«</span> 316 </a> 317 </li> 318 <li><a href="#">1</a></li> 319 <li><a href="#">2</a></li> 320 <li><a href="#">3</a></li> 321 <li><a href="#">4</a></li> 322 <li><a href="#">5</a></li> 323 <li> 324 <a href="#" aria-label="Next"> 325 <span aria-hidden="true">»</span> 326 </a> 327 </li> 328 </ul> 329 </nav> 330 </div> 331 </div> 332 </div> 333 </div> 334 </div> 335 336 337 <!-- Bootstrap core JavaScript 338 ================================================== --> 339 <!-- Placed at the end of the document so the pages load faster --> 340 <script src="Dashboard%20Temp_files/jquery.js"></script> 341 <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> 342 <script src="Dashboard%20Temp_files/bootstrap.js"></script> 343 <!-- Just to make our placeholder images work. Don't actually copy the next line! --> 344 <script src="Dashboard%20Temp_files/holder.js"></script> 345 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 346 <script src="Dashboard%20Temp_files/ie10-viewport-bug-workaround.js"></script> 347 <script> 348 349 </script> 350 351 </body></html>
1 <!DOCTYPE html> 2 <html lang="zh-CN"><head> 3 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> 8 <meta name="description" content=""> 9 <meta name="author" content=""> 10 <link rel="icon" href="http://v3.bootcss.com/favicon.ico"> 11 <link rel="stylesheet" href="dist/css/bootstrap.min.css"> 12 13 <title>Off Canvas Template for Bootstrap</title> 14 15 <!-- Bootstrap core CSS --> 16 <link href="3.%E4%BF%AE%E6%94%B9%E5%8D%9A%E5%AE%A2_files/bootstrap.css" rel="stylesheet"> 17 18 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 19 <link href="3.%E4%BF%AE%E6%94%B9%E5%8D%9A%E5%AE%A2_files/ie10-viewport-bug-workaround.css" rel="stylesheet"> 20 21 <!-- Custom styles for this template --> 22 <link href="3.%E4%BF%AE%E6%94%B9%E5%8D%9A%E5%AE%A2_files/offcanvas.css" rel="stylesheet"> 23 24 <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> 25 <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> 26 <script src="3.%E4%BF%AE%E6%94%B9%E5%8D%9A%E5%AE%A2_files/ie-emulation-modes-warning.js"></script> 27 28 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 29 <!--[if lt IE 9]> 30 <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> 31 <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> 32 <![endif]--> 33 </head> 34 <style> 35 .ty{ 36 margin-top: -20px; 37 } 38 .he{ 39 width: 50px; 40 border-bottom: #9d9d9d solid ; 41 border-width: 1px; 42 margin-left: 45%; 43 } 44 .hi{ 45 width: 50px; 46 border-bottom: #9d9d9d solid ; 47 border-width: 1px; 48 margin-left: 48%; 49 } 50 .hc{ 51 width: 50px; 52 border-bottom: #9d9d9d solid ; 53 border-width: 1px; 54 margin-left: 48.3%; 55 } 56 .tx{ 57 padding: 5px; 58 } 59 .xia{ 60 margin-top: 30px; 61 margin-left: 30px; 62 } 63 </style> 64 <body> 65 <nav class="navbar navbar-fixed-top navbar-inverse container-fluid"> 66 <div class="container"> 67 <div class="row"> 68 <div class="navbar-header"> 69 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 70 <span class="sr-only">Toggle navigation</span> 71 <span class="icon-bar"></span> 72 <span class="icon-bar"></span> 73 <span class="icon-bar"></span> 74 </button> 75 <a class="navbar-brand" href="#">OldBoy</a> 76 </div> 77 <div id="navbar" class="collapse navbar-collapse"> 78 <ul class="nav navbar-nav col-sm-10"> 79 <li class="active"><a href="#">Python学院</a></li> 80 <li><a href="#about">Linux学院</a></li> 81 <li ><a href="#contact">好好学习</a></li> 82 <li class="dropdown pull-right"> 83 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">联系我们<span class="caret"></span></a> 84 <ul class="dropdown-menu"> 85 <li><a href="#">Action</a></li> 86 <li><a href="#">Another action</a></li> 87 <li><a href="#">Something else here</a></li> 88 <li role="separator" class="divider"></li> 89 <li><a href="#">Separated link</a></li> 90 <li role="separator" class="divider"></li> 91 <li><a href="#">One more separated link</a></li> 92 </ul> 93 </li> 94 </ul> 95 </div><!-- /.nav-collapse --> 96 </div><!-- /.container --> 97 </div> 98 </nav><!-- /.navbar --> 99 <div class="container-fluid"> 100 <div class="row"> 101 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 102 <!-- Indicators --> 103 <ol class="carousel-indicators"> 104 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 105 <li data-target="#carousel-example-generic" data-slide-to="1"></li> 106 <li data-target="#carousel-example-generic" data-slide-to="2"></li> 107 </ol> 108 109 <!-- Wrapper for slides --> 110 <div class="carousel-inner" role="listbox"> 111 <div class="item active"> 112 <img src="信息.png" alt="..."> 113 <div class="carousel-caption"> 114 115 </div> 116 </div> 117 <div class="item"> 118 <img src="博客.png" alt="..."> 119 <div class="carousel-caption"> 120 121 </div> 122 </div> 123 124 </div> 125 126 <!-- Controls --> 127 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 128 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 129 <span class="sr-only">Previous</span> 130 </a> 131 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 132 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 133 <span class="sr-only">Next</span> 134 </a> 135 </div> 136 137 </div> 138 </div> 139 <div class="container-fluid"> 140 <div class="row"> 141 <div class="jumbotron"> 142 <div class="page-header text-center"> 143 <h2>Bootstrap能做什么</h2> 144 <div class="hi"></div> 145 <small>网站首页、网站后台、手机页面</small> 146 </div> 147 </div> 148 </div> 149 <div class="row"> 150 <div class="pull-left col-sm-6 col-sm-offset-1"> 151 <img src="登录.png" style="width: 600px;height: 350px;margin-bottom: 50px;margin-top: 50px" class="img-thumbnail"> 152 </div> 153 <div class="page-header text-center col-sm-5 pull-right"> 154 <h2 style="margin-top: 100px">使用Bootstrap搭建的</h2> 155 <h2>登录页面</h2> 156 <div class="he"></div> 157 <small>使用表单、按钮组件搭建</small> 158 </div> 159 </div> 160 <div class="row jumbotron"> 161 <div class="pull-right col-sm-5"> 162 <img src="信息.png" style="width: 600px;height: 350px;margin-bottom: 50px;margin-top: 50px" class="img-thumbnail"> 163 </div> 164 <div class="page-header text-center col-sm-6 pull-left"> 165 <h2 style="margin-top: 100px">使用Bootstrap搭建的</h2> 166 <h2>信息采集单</h2> 167 <div class="he"></div> 168 <small>使用表单、页头、面板组件、进度条组件搭建</small> 169 </div> 170 </div> 171 172 <div class="row"> 173 <div class="pull-left col-sm-6 col-sm-offset-1"> 174 <img src="管理.png" style="width: 600px;height: 350px;margin-bottom: 50px;margin-top: 50px" class="img-thumbnail"> 175 </div> 176 <div class="page-header text-center col-sm-5 pull-right"> 177 <h2 style="margin-top: 100px">使用Bootstrap搭建的</h2> 178 <h2>管理后台</h2> 179 <div class="he"></div> 180 <small>使用导航条、表格、面板、分页等组件搭建</small> 181 </div> 182 </div> 183 184 <div class="row jumbotron"> 185 <div class="pull-right col-sm-5"> 186 <img src="博客.png" style="width: 600px;height: 350px;margin-bottom: 50px;margin-top: 50px" class="img-thumbnail"> 187 </div> 188 <div class="page-header text-center col-sm-6 pull-left"> 189 <h2 style="margin-top: 100px">使用Bootstrap搭建的</h2> 190 <h2>博客页面</h2> 191 <div class="he"></div> 192 <small>使用自定义导航、自定义分栏和分页等组件搭建</small> 193 </div> 194 </div> 195 196 <div class="row"> 197 <div class="page-header text-center col-sm-12" style="margin-top: 30px;margin-bottom: 30px"> 198 <h2 >心路历程</h2> 199 200 <div class="hc"></div> 201 <h5>天啦噜</h5> 202 <small >复制粘贴</small> 203 </div> 204 </div> 205 206 <div class="row"> 207 <div class="col-xs-6 col-md-3"> 208 <a href="#" class="thumbnail"> 209 <img src="1.jpg"> 210 </a> 211 </div> 212 <div class="col-xs-6 col-md-3"> 213 <a href="#" class="thumbnail"> 214 <img src="1112.jpg"> 215 </a> 216 </div> 217 <div class="col-xs-6 col-md-3"> 218 <a href="#" class="thumbnail"> 219 <img src="333.jpg"> 220 </a> 221 </div> 222 223 <div class="col-xs-6 col-md-3"> 224 <a href="#" class="thumbnail"> 225 <img src="44.jpg"> 226 </a> 227 </div> 228 <div class="text-center"><h4>天啦噜</h4></div> 229 </div> 230 <div class="row jumbotron tx"> 231 <div class=" text-center col-sm-6 col-md-3 pull-left"> 232 <h2>所以说</h2> 233 <small>学好Bootstrap真的很重要</small> 234 </div> 235 <div class="col-sm-6"> 236 <button class="btn btn-success xia">我知道了</button> 237 </div> 238 239 </div> 240 241 </div> 242 243 244 245 246 <!-- Bootstrap core JavaScript 247 ================================================== --> 248 <!-- Placed at the end of the document so the pages load faster --> 249 <script src="3.%E4%BF%AE%E6%94%B9%E5%8D%9A%E5%AE%A2_files/jquery.js"></script> 250 <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> 251 <script src="3.%E4%BF%AE%E6%94%B9%E5%8D%9A%E5%AE%A2_files/bootstrap.js"></script> 252 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 253 <script src="3.%E4%BF%AE%E6%94%B9%E5%8D%9A%E5%AE%A2_files/ie10-viewport-bug-workaround.js"></script> 254 <script src="3.%E4%BF%AE%E6%94%B9%E5%8D%9A%E5%AE%A2_files/offcanvas.js"></script> 255 256 257 </body></html>
