使用Boostrap開發的優秀站點:http://www.youzhan.org/css
https://v3.bootcss.com/getting-started/#templatehtml
less介紹:http://lesscss.cn/html5
<!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"> <!-- 上述3個meta標籤*必須*放在最前面,任何其餘內容都*必須*跟隨其後! --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim 和 Respond.js 是爲了讓 IE8 支持 HTML5 元素和媒體查詢(media queries)功能 --> <!-- 警告:經過 file:// 協議(就是直接將 html 頁面拖拽到瀏覽器中)訪問頁面時 Respond.js 不起做用 --> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好,世界!</h1> <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery,因此必須放在前邊) --> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> </body> </html>
<div class="container"> ... </div> //幾乎是全局的; <div class="container-fluid"> ... </div>
52.1 柵格系統初識;jquery
52.2 鼻祖是960grid;https://960.gs/ajax
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css"> <title>03-柵格系統</title> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-3"> Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統,隨着屏幕或視口(viewport)尺寸的增長,系統會自動分爲最多12列。它包含了易於使用的預約義類,還有強大的mixin 用於生成更具語義的佈局。 在 Bootstrap 2 中,咱們對框架中的某些關鍵部分增長了對移動設備友好的樣式。而在 Bootstrap 3 中,咱們重寫了整個框架,使其一開始就是對移動設備友好的。此次不是簡單的增長一些可選的針對移動設備的樣式,而是直接融合進了框架的內核中。也就是說,Bootstrap 是移動設備優先的。針對移動設備的樣式融合進了框架的每一個角落,而不是增長一個額外的文件。 </div> <div class="col-lg-3"> Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統,隨着屏幕或視口(viewport)尺寸的增長,系統會自動分爲最多12列。它包含了易於使用的預約義類,還有強大的mixin 用於生成更具語義的佈局。 在 Bootstrap 2 中,咱們對框架中的某些關鍵部分增長了對移動設備友好的樣式。而在 Bootstrap 3 中,咱們重寫了整個框架,使其一開始就是對移動設備友好的。此次不是簡單的增長一些可選的針對移動設備的樣式,而是直接融合進了框架的內核中。也就是說,Bootstrap 是移動設備優先的。針對移動設備的樣式融合進了框架的每一個角落,而不是增長一個額外的文件。 </div> <div class="col-lg-3"> Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統,隨着屏幕或視口(viewport)尺寸的增長,系統會自動分爲最多12列。它包含了易於使用的預約義類,還有強大的mixin 用於生成更具語義的佈局。 在 Bootstrap 2 中,咱們對框架中的某些關鍵部分增長了對移動設備友好的樣式。而在 Bootstrap 3 中,咱們重寫了整個框架,使其一開始就是對移動設備友好的。此次不是簡單的增長一些可選的針對移動設備的樣式,而是直接融合進了框架的內核中。也就是說,Bootstrap 是移動設備優先的。針對移動設備的樣式融合進了框架的每一個角落,而不是增長一個額外的文件。 </div> <div class="col-lg-3"> Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統,隨着屏幕或視口(viewport)尺寸的增長,系統會自動分爲最多12列。它包含了易於使用的預約義類,還有強大的mixin 用於生成更具語義的佈局。 在 Bootstrap 2 中,咱們對框架中的某些關鍵部分增長了對移動設備友好的樣式。而在 Bootstrap 3 中,咱們重寫了整個框架,使其一開始就是對移動設備友好的。此次不是簡單的增長一些可選的針對移動設備的樣式,而是直接融合進了框架的內核中。也就是說,Bootstrap 是移動設備優先的。針對移動設備的樣式融合進了框架的每一個角落,而不是增長一個額外的文件。 </div> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css"> <title>05-柵格系統中的列偏移</title> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css"> <title>05-全局的CSS樣式</title> <style type="text/css"> .thumbnail .project { /*display: block;*/ /*margin-left: auto;*/ /*margin-right: auto;*/ /*text-align: center;*/ /*max-width: 310px;*/ /*margin-bottom: 30px;*/ /*border-radius: 0;*/ } </style> </head> <body> <div class="container"> <div class="row project"> <div class="col-md-4"> <div class="thumbnail" style="height: 536px;"> <h1>h1. Bootstrap BootstrapBootstrap</h1> <h2>h2. Bootstrap</h2> <h3>h3. Bootstrap</h3> <!--<h4>h4. Bootstrap</h4>--> <!--<h5>h5. Bootstrap</h5>--> <!--<h6>h6. Bootstrap</h6>--> <p>你是個人眼,<span class="lead">帶我找尋<mark>四季</mark>的變化</span>,由於你是個人眼,讓我看見幸福就在眼前!</p> <p class="lead">cuixiaozhao</p> <p> <del>我這裏是刪除線</del> </p> <p><s>我這裏是無用的文本</s></p> <p> <small>我這裏是small</small> </p> </div> <div class="thumbnail" style="height: 336px;"> <p class="text-left">我這裏是左對齊</p> <p class="text-right">我這裏是右對齊</p> <p class="text-center">我這裏是中心對齊</p> <p class="text-justify">這裏是兩端對齊,應用於英文!</p> <p class="text-nowrap">這裏是不對齊!</p> <p class="text-lowercase">LOWERcased,所有變爲小寫</p> <p class="text-uppercase">Uppercased,所有變爲大寫</p> <p class="text-capitalize">capitalized,首字母大寫</p> </div> <div class="thumbnail" style="height: 333px;"> <addr> <strong>北京市朝陽區<br> 崔各莊鎮奶東村<br> 11排19號201室<br></strong> <abbr title="Phone">P:</abbr>138-1122-1893 <a href="mailto:#">tqtl@tqtl.org</a> </addr> <blockquote> <p>這裏是Bootstrap中的引用!</p> </blockquote> </div> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css"> <title>07-Boostrap中的表格</title> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="thumbnail table-responsive" style="height: 336px;"> <table class="table table-striped table-bordered table-hover table-condensed "> <thead> <tr class="active"> <th>id</th> <th>name</th> <th>age</th> </tr> </thead> <tbody> <tr class="success"> <td>1</td> <td>cuixiaozhao</td> <td>18</td> </tr> <tr class="warning"> <td>2</td> <td>崔工</td> <td>28</td> </tr> <tr class="info"> <td>3</td> <td>天晴天朗</td> <td>38</td> </tr> <tr class="danger"> <td>4</td> <td>天晴天朗911天晴天朗911天晴天朗911天晴天朗911天晴天朗911天晴天朗911天晴天朗911天晴天朗911天晴天朗911</td> <td>58</td> </tr> </tbody> </table> </div> </div> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css"> <title>08-Bootstrap中的表單</title> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="thumbnail" style="height: 336px;"> <form action=""> <div class="form-group"> <label for="user">form表單學習啦</label> <input class="form-control" type="text" name="user" id="user"> </div> </form> <form> <div class="form-group"> <label for="username">用戶名:</label> <input type="text" class="form-control" id="username" placeholder="請輸入用戶名"> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" class="form-control" id="password" placeholder="請輸入密碼"> </div> <div class="form-group"> <label for="file">請選擇文件</label> <input type="file" id="file"> <p class="help-block">點擊此處可上傳文件</p> </div> <div class="checkbox"> <label> <input type="checkbox"> 已閱讀 </label> </div> <button type="submit" class="btn btn-default">提交</button> <button type="submit" class="btn btn-success">提交</button> <button type="submit" class="btn btn-info">提交</button> <button type="submit" class="btn btn-warning">提交</button> <button type="submit" class="btn btn-danger">提交</button> </form> </div> </div> <div class="col-md-4"> <div class="thumbnail" style="height: 336px;"> <form class="form-inline"> <div class="form-group"> <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label> <div class="input-group"> <div class="input-group-addon"><span class="glyphicon glyphicon-jpy"></span></div> <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount"> <div class="input-group-addon">.00</div> </div> </div> <button type="submit" class="btn btn-primary btn-sm">Transfer cash</button> </form> </div> </div> </div> </div> </body> </html>