柵格系統
1. row必須放到container和container-fluid裏面
2. 你的內容應當放置於「列（column）」內，而且，只有「列（column）」能夠做爲行（row）」的直接子元素。 javascript
列的樣式
.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-數字 css
文本對齊類
- .text-left
- .text-center
- .text-right html
表單
.form-group
.form-inline
.form-horizontalhtml5
表格
.table
.table-striped
.table-bordered
.table-hover
.table-condensed java
響應式表格
<div class="table-responsive"> // table外面包裹一層div
<table class="table">
...
</table>
</div jquery
按鈕
.btn
.btn-default
.btn-success
.btn-warning
.btn-danger
.btn-lg
.btn-sm
.btn-xsios
快速浮動
- .pull-left
- .pull-rightgit
清除樣式
- .clearfixgithub
Bootstrap3居中處理
水平居中
- .center-block 不涉及到列的居中 本質上就是 margin: 0 auto
讓那個標籤居中就把它寫在哪一個標籤的樣式類中
- 咱們自定義的居中 在涉及到列的居中時使用
.col-centered {
float: none;
margin: 0 auto;
}
- 文本類居中或者display: inline
.text-centerbootstrap
垂直居中
.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>