概述: Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式佈局、移動設備優先的 WEB 項目。 作用: 開發響應式的頁面 響應式:就是一個網站能夠相容多個終端 節約開發成本,提高開發效率 入門: 下載BootStrap www.bootcss.com 官網地址 模版 ... ...
概述: Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式佈局、移動設備優先的 WEB 項目。 作用: 開發響應式的頁面 響應式:就是一個網站能夠相容多個終端 節約開發成本,提高開發效率 入門: 下載BootStrap www.bootcss.com 官網地址 模版 1.導入BootStrap的css 2.導入jquery的js(1.8+) 3.導入BootStrap的js 4.設置視口(支持移動設備) <meta name="viewport" content="width=device-width, initial-scale=1"> 5.添加一個佈局容器 通過div設置一個 class 方式1:class="container" 方式2:class="container-fluid" 核心: 全局CSS 設置全局 CSS 樣式；基本的 HTML 元素均可以通過 class 設置樣式並得到增強效果；還有先進的柵格系統。 媒體查詢(瞭解) 預設有一些解析度臨界點的閥值 解析度 屏幕大小 解析度>=1200px 超大屏幕 992<=解析度<1200 中等屏幕 768<=解析度<992 小屏幕 解析度<768 超小屏幕 柵格系統★ 在不同解析度的屏幕下展示不同的效果,根據不同的上網設備,柵格系統將屏幕分成一系列的行(row)和列(column),由行和列來創建頁面佈局,註意柵格系統必須放在佈局容器內使用 行: 通過class = "row"來設置一行 列(最多將視口分為12列) 通過class屬性來設置在不同屏幕是所占的列 n表示每格占的份數 col-lg-n 大屏 解析度>=1200 col-md-n 中屏 992<=解析度<1200 col-sm-n 小屏 768<=解析度<992px col-xs-n 超小屏 解析度<768px 案例: <div class="container"> <div class=" col-md-2 col-sm-3 hidden-xs" style="border: solid 1px red;height: 20px;">1</div> <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">2</div> <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">3</div> <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">4</div> <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">5</div> <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">6</div> <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">7</div> <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">8</div> <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">9</div> <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">10</div> <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">11</div> <div class=" col-md-2 col-sm-3 col-xs-6" style="border: solid 1px red;height: 20px;">12</div> </div> 響應式工具: 顯示: .visible-xs 超小屏可見 .visible-sm 小屏可見 .visible-md 中等屏幕可見 .visible-lg 大屏可見 隱藏: .hidden-xs 超小屏時隱藏 .hidden-sm 小屏幕時隱藏 .hidden-md 中等屏幕時隱藏 .hidden-lg 大屏幕時隱藏 標題: .h1 -- .h6 對齊方式:(文本) .text-left 左對齊 .text-center居中 .text-right 右對齊 列表: .list-unstyled 移除預設的列表樣式 .list-inline 將所有列表項放置同一行 表格:bootstrap給表格添加了預設樣式 .table 普通表格 .table-striped 條紋表格(IE8不支持) .table-bordered 邊框表格 .table-hover 帶有滑鼠懸停的表格 .table-condensed 緊縮表格 表單: 垂直表單: 內聯表單:(將所有內容放在同一行) 水平表單: 按鈕:★ .btn 為按鈕添加基本樣式 .btn-default 預設/標準按鈕 .btn-primary 原始按鈕樣式（未被操作） .btn-success 表示成功的動作 .btn-info 該樣式可用於要彈出信息的按鈕 圖片: .img-rounded 為圖片添加圓角 (IE8 不支持) .img-circle 將圖片變為圓形 (IE8 不支持) .img-responsive 圖片響應式 組件 無數可復用的組件，包括字體圖標、下拉菜單、導航、警告框、彈出框等更多功能。 下拉選: 導航條: javaScript插件 jQuery 插件為 Bootstrap 的組件賦予了“生命”。可以簡單地一次性引入所有插件，或者逐個引入到你的頁面中。 圖片輪播 綜合案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title></title> <link rel="stylesheet" href="css/bootstrap.css" /> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script> $(function() { $('.carousel').carousel({ interval: 1000 }) }); </script> </head> <body> <div class="container"> <!--1.topbar--> <div class="row text-center"> <!--img1:中等屏幕時占4份,在小屏時占6份,在超小屏時占12份 img2:中等屏幕時占4份,在小屏時隱藏,在超小屏時占12份 超鏈接:中等屏幕時占4份,在小屏時占6份,在超小屏時占12份--> <div class="col-md-4 col-sm-6"> <img src="img/logo2.png" /> </div> <div class="col-md-4 hidden-sm"> <img src="img/header.jpg" /> </div> <div class="col-md-4 col-sm-6 text-center" style="padding-top: 20px;"> <a href="#" class="btn btn-default">登錄</a> <a href="#" class="btn btn-default">登錄</a> <a href="#" class="btn btn-default">登錄</a> </div> </div> <!--2.導航條--> <div class="row"> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <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="#">首頁</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"> <a href="#">手機數位 <span class="sr-only">(current)</span></a> </li> <li> <a href="#">電腦辦公</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li> <a href="#">Action</a> </li> <li> <a href="#">Another action</a> </li> <li> <a href="#">Something else here</a> </li> <li role="separator" class="divider"></li> <li> <a href="#">Separated link</a> </li> <li role="separator" class="divider"></li> <li> <a href="#">One more separated link</a> </li> </ul> </li> </ul> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> </div> <!--3.輪播圖--> <div class="row"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="./img/1.jpg" alt="..."> <div class="carousel-caption"> 歡迎你... </div> </div> <div class="item"> <img src="./img/2.jpg" alt="..."> <div class="carousel-caption"> </div> </div> <div class="item"> <img src="./img/3.jpg" alt="..."> <div class="carousel-caption"> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <!--4.熱門商品--> <div class="row"> <div> <span class="h2">熱門商品</span><img src="img/title2.jpg" /> </div> <!--下div: 左div:中等屏幕時占2份,小屏和超小屏隱藏 圖片 右div:中等屏幕時占10份,小屏和超小屏占12份 middle div:中等屏幕時占6份,小屏和超小屏隱藏 圖片 商品div:中等屏幕時占2份,小屏占4份,超小屏時占6份 圖片 2個p標簽--> <div class="row"> <!--左div:中等屏幕時占2份,小屏和超小屏隱藏 圖片--> <div class="col-md-2 hidden-sm hidden-xs"> <img src="img/big01.jpg" width="100%" height="100%" /> </div> <!--右div:中等屏幕時占10份,小屏和超小屏占12份 --> <div class="col-md-10"> <!--middle div:中等屏幕時占6份,小屏和超小屏隱藏 圖片--> <div class="col-md-6 hidden-sm hidden-xs"> <img src="img/middle01.jpg" width="100%" height="180px" /> </div> <!--商品div:中等屏幕時占2份,小屏占4份,超小屏時占6份 圖片 2個p標簽--> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> </div> </div> </div> <!--5.圖片--> <div class="row"> <img src="img/ad.jpg" width="100%" /> </div> <!--6.熱門商品--> <div class="row"> <div> <span class="h2">熱門商品</span><img src="img/title2.jpg" /> </div> <!--下div: 左div:中等屏幕時占2份,小屏和超小屏隱藏 圖片 右div:中等屏幕時占10份,小屏和超小屏占12份 middle div:中等屏幕時占6份,小屏和超小屏隱藏 圖片 商品div:中等屏幕時占2份,小屏占4份,超小屏時占6份 圖片 2個p標簽--> <div class="row"> <!--左div:中等屏幕時占2份,小屏和超小屏隱藏 圖片--> <div class="col-md-2 hidden-sm hidden-xs"> <img src="img/big01.jpg" width="100%" height="100%" /> </div> <!--右div:中等屏幕時占10份,小屏和超小屏占12份 --> <div class="col-md-10"> <!--middle div:中等屏幕時占6份,小屏和超小屏隱藏 圖片--> <div class="col-md-6 hidden-sm hidden-xs"> <img src="img/middle01.jpg" width="100%" height="180px" /> </div> <!--商品div:中等屏幕時占2份,小屏占4份,超小屏時占6份 圖片 2個p標簽--> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> <div class="col-md-2 col-sm-4 col-xs-6 text-center"> <img src="img/small08.jpg" /> <p>妹子</p> <p>288</p> </div> </div> </div> </div> <!--7.圖片--> <div class="row"> <img src="img/footer.jpg" width="100%" /> </div> <!--8--> <div class="row text-center"> <p> <ol class="list-unstyled list-inline"> <li><a href="#">聯繫我們</a></li> <li><a href="#">聯繫我們</a></li> <li><a href="#">聯繫我們</a></li> <li><a href="#">聯繫我們</a></li> <li><a href="#">聯繫我們</a></li> <li><a href="#">聯繫我們</a></li> </ol> </p> <p>Copyright © 2005-2016 版權所有</p> </div> </div> </body> </html> 案例-將我們的項目發佈出去 需求分析: 將我們編寫好的(web項目)項目放到伺服器上,這樣以來用戶就可以通過網路訪問到我們的(web項目)項目了 技術分析: web伺服器 web項目 Http協議 ////////////////////////// http://localhost/webDemo/html/hello.html get /////////////////// day33HTTP&Tomcat - Web伺服器 - 概念: - web資源: "英文直譯"網"的意思 資源:一切數據文件 web資源:通過網路可以訪問到的資源,通常指的是一切放在伺服器上的文件" - web資源的分類: - 靜態的web資源: " 內容是一成不變的" - 動態的web資源: " 內容有可能在不同的時間或者不同的人訪問的時候會發生改變的" - web技術分類 - 靜態的web技術 " 例如: html css js ....." - 動態的web技術 " 例如:servlet jsp" - 軟體的架構 - c/s架構(Client/Server 客戶端/伺服器) " 例如:qq 迅雷 lol" - b/s架構(Browser/Server 瀏覽器/伺服器) " 例如:京東 淘寶 " - 區別 - c/s:需要客戶下載客戶端,頁面比較炫,和伺服器交互少,可以在客戶端處理部分業務邏輯,可降低伺服器的壓力.需要維護客戶端和伺服器端 - b/s:只需要客戶有一個瀏覽器,一切頁面從伺服器載入,和伺服器交互頻繁,由伺服器處理業務邏輯,伺服器壓力較大.只需要維護伺服器端. - 通訊機制 - 基於http協議 - 瀏覽器發送給伺服器的內容:請求(request) - 伺服器返回給瀏覽器的內容:響應(response) - 註意:先有請求,後有響應,一次請求對應一次響應 - web伺服器 - 作用:將我們編寫好的網頁發佈出去,別人就可以通過網路訪問 - 常見的web伺服器 "名稱 廠商 特點 Weblogic oracle 大型的收費的支持javaEE所有規範的web伺服器(servlet和jsp) websphere ibm 大型的收費的支持javaEE所有規範的web伺服器(servlet和jsp) tomcat apache 小型的免費的支持servlet和jsp規範的"web伺服器"" - Tomcat伺服器★ Tomcat如何優化? 1: 優化連接配置.修改連接數,關閉客戶端的dns查詢(DNS查詢需要占用網路，再獲取對方ip的時候會消耗一定的時間) 2: 優化jdk,擴大tomcat使用的記憶體,預設為128M - 下載 - http://tomcat.apache.org/download-70.cgi - core: - zip:可以在window上運行的(我們今天使用) - tar.gz:運行在linux上的 - 安裝 - 解壓縮即可 - 目錄結構 - bin:存放可執行的文件 - ★conf:存放配置文件 - lib:存放的是tomcat運行時和項目運行時必須的jar包 - logs:存放的是日誌文件(catalina.out) - temp:存放臨時文件(不用管) - ★★webapps:存放要發佈的web項目 - ★work:存放項目運行時產生的java文件和class文件 - 啟動 " 雙擊 tomcat目錄下/bin/startup.bat" - 關閉 " 方式1:點 x 方式2:ctrl + c (記住)方式3:雙擊 tomcat目錄下/bin/shutdown.bat" - 配置 - 常見問題 - 一閃而過 "查看JAVA_HOME是否配置正確" - 埠占用: 可以修改Tomcat的埠號 "修改 tomcat目錄下/conf/server.xml 大約70行 <Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" /> 需要將 8080 修改成其他的埠號 埠號:0~65535 0~1024:系統預留的埠
