Bootstrap架構
第1節 學習目标
能夠建立bootstrap的模闆
能夠使用boostrap的兩種布局容器
能夠了解bootstrap的響應式布局的特點
能夠查詢文檔建立bootstrap的按鈕、表格、表單等常用元件
能夠了解bootstrap的栅格系統
能夠查詢文檔使用bootstrap的導覽列
能夠查詢文檔使用bootstrap的輪播圖
第2節 Boostrap的概述
2.1 Boostrap的簡介
什麼是架構：在現有的語言基礎上，由第三方廠商美國Twitter公司開發的一些功能元件，可以提高開發效率，降低開發難度。我們就是學會使用這些架構來開發程式即可。
說明：由于我們學習的java是oracle公司的，是以第一方指的是oracle公司。作為學習java的我們，我們屬于第二方。而第三方就是除了我們和oracle公司以外的公司，比如最為有名的第三方公司是Apache。
中文官網：www.bootcss.com
2.2 Bootstrap的作用
用于前端開發的架構
主要基于我們之前學習的HTML、CSS和JavaScript技術
2.3 Bootstrap的優勢
移動裝置優先：自 Bootstrap 3 起，架構包含了貫穿于整個庫的移動裝置優先的樣式。
浏覽器支援：Bootstrap支援所有的主流浏覽器。如：Internet Explorer、 Firefox、 Opera、 Google Chrome、Safari。
容易上手：隻要您具備 HTML 和 CSS 的基礎知識，您就可以開始學習 Bootstrap。
響應式設計：Bootstrap 的響應式 CSS 能夠自适應于桌上型電腦、平闆電腦和手機。
2.4 響應式設計
2.4.1 傳統的網頁
如： https://m.jd.com 手機版京東
https://m.taobao.com 手機版淘寶
1、淘寶網站在電腦上的效果：
2、淘寶網站在手機上的效果：
2.4.2 響應式設計
如：
索尼 http://www.sony.com
蘋果中國：http://www.apple.com
1）蘋果網站在電腦上的效果：
概念：一個網站能夠相容多個終端——而不是為每個終端做一個特定的版本，這個概念是為解決移動網際網路浏覽而誕生的。響應式布局可以為不同終端的使用者提供更加舒适的界面和更好的使用者體驗。響應式布局基于HTML和CSS，才可以實作。
l 特點：一個網頁可以自動适應裝置的寬度，在手機，平闆，電腦看到的是同一個頁面。
說明：一般不會将一個非常複雜的網頁作為響應式，如電腦版本的淘寶和京東。響應式一般應用于比較簡單的網頁。
第3節 Boostrap的使用
3.1 準備使用Bootstrap
3.1.1 Boostrap下載下傳
去官網下載下傳即可：http://www.bootcss.com
下載下傳用于生産環境的Bootstrap即可：
1）在浏覽器位址欄中輸入官網位址，進入官網：
2）選擇 起步
3）下載下傳用于生産環境的Bootstrap
4）下載下傳之後的BootStrap如下：
說明：直接解壓壓縮包即可，如下：
3.1.2 Bootstrap的目錄結構
1.設定全局 CSS 樣式：基本的 HTML元素均可以通過 class 設定樣式并得到增強效果。
2.JavaScript 插件：為 Bootstrap 的元件賦予了“生命”。
BootStrap使用JavaScript插件之後就是可以實作資料的互動。要不然資料無法互動，那麼就是靜态頁面了。
3.元件：無數可複用的元件，包括字型圖示、下拉菜單、導航、警告框、彈出框等更多功能。
Bootstrap：
├── css/ 全局的CSS樣式，把所有的标簽重新定義了樣式
│ ├── bootstrap.css 樣式檔案，标準版
│ ├── bootstrap.min.css 壓縮版，我們開發的時候使用壓縮版
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.min.css
├── js/ JavaScript的插件目錄
│ ├── bootstrap.js
│ └── bootstrap.min.js 導入這個JS檔案
└── fonts/ 字型圖示，用于在網頁上使用各種BootStrap提供的小圖示，如果不用，這個檔案夾可以不複制。
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
3.1.3 壓縮版與标準版的差別
壓縮版與标準版的功能是一樣的，壓縮版檔案更小，更省資源，加載速度更快。但是沒有換行，沒有注釋，變量名都很短。隻是閱讀性比較差。
3.1.4 目錄下的字型圖示
3.2 建立Bootstrap模闆
3.2.1 建立Bootstrap模闆檔案的步驟
1.隻需要建立一次，以後可以直接複制這個模闆使用
1)新創鍵一個靜态Web項目day05_bootstrap。
2)将解壓出來的三個檔案夾css、js、fonts指派到項目day05_bootstrap中。
3)将課前資料中jQuery類庫jquery-3.2.1.min.js檔案複制到js檔案夾下。
4)在day05_bootstrap項目下新建立一個HTML檔案index.html。
5)将頁面上"起步基本模闆"代碼複制到index.html中。
說明：如果能夠上網直接到首頁找到起步，然後找到基本模闆。
如果不能上網，找到課前資料，然後找到----》\Bootstrap離線文檔\v3.bootcss.com----》進去之後找到index.htm使用浏覽器打開。如下：
也可以打開，然後按照之前的操作就可以了。
将基本模闆代碼複制到自己建立的index.html後如下：
3.2.2 模闆的詳細解釋
<!DOCTYPE html>
<html lang="zh-CN">
<!--指定為中文-中國-->
<head>
<!-- 指定網頁的字元集為utf-8-->
<meta charset="utf-8">
<!--使用微軟最新的浏覽器Edge的核心來解析目前的HTML檔案，最新的浏覽器都支援 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
響應式布局參數：
viewport： 視口的參數
width=device-width：預設的網頁寬度是裝置的寬度
initial-scale=1: 初始的縮放比1：1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta标簽*必須*放在最前面，任何其他内容都*必須*跟随其後！ -->
<title>Bootstrap 101 Template</title>
<!-- 1. 導入bootstrap的全局css樣式 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>你好，世界！</h1>
<!-- 2. 導入 jQuery 架構 -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 3. 導入bootstrap架構 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
第4節 栅格系統
栅格系統就是我們上面看到的蘋果和索尼系統的效果，随着視窗和裝置不同而改變。
4.1 組成
Bootstrap 提供了一套響應式、移動裝置優先的**流式**栅格系統，随着螢幕或視口（viewport）尺寸的增加，系統會自動分為最多**12列。**栅格系統用于通過一系列的行（row）與列（column）的組合來建立頁面布局，你的内容就可以放入這些建立好的布局中。
下面就介紹一下 Bootstrap 栅格系統的特點：
• “行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合适的排列（aligment）和内間距（padding）。
• 通過“行（row）”在水準方向建立一組“列（column）”。
• 你的内容應當放置于“列（column）”内，并且，隻有“列（column）”可以作為行（row）”的直接子元素。
• 栅格系統中的列是通過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列可以使用三個 .col-xs-4 來建立。
• 如果一“行（row）”中包含了的“列（column）”大于 12，多餘的“列（column）”所在的元素将被作為一個整體另起一行排列。
4.2 網頁布局的兩種容器
| 布局的兩種容器的類樣式名 | 說明 |
|---|---|
| container | 表示固定寬度，在不同的裝置上有不同的固定寬度 |
| container-fluid | 在所有的裝置上都是以100%占全屏 |
4.2.1 案例效果：
4.2.2 案例代碼：
步驟：
1）新創鍵一個頁面demo01.html.
2）将上述建立好的Bootstrap模闆代碼複制到demo01.html頁面中。
3）在body标簽中建立兩個div。第一個div的class屬性設定為container表示固定寬度，第二個div的class屬性設定為container-fluid表示100%寬度。
使用css設定兩個div的高度是200px，邊框border:1px solid red。
<!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">
<title>Bootstrap 101 Template</title>
<!-- 1. 導入bootstrap的全局css樣式 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
div {
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
container固定寬度
</div>
<div class="container-fluid">
container-fluid，100%寬度
</div>
<!-- 2. 導入 jQuery 架構 -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 3. 導入bootstrap架構 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
實作效果：
說明：
container固定寬度随着浏覽器變化而改變，到一定程度就變為100%寬度。
container-fluid，100%寬度 ，無論浏覽器頁面什麼樣，始終100%寬度。
問題：那麼是什麼原因可以讓class是container的時候,具有上述變化。
4.3 媒介查詢@media
**通過不同的媒介(裝置)類型和條件定義樣式表CSS規則。**媒介查詢讓CSS可以更精确作用于不同的媒介(裝置)類型和同一媒介的不同條件。媒介查詢的大部分媒介特性都接收min和max用于表達“大于或等于”和“小于或等于”。 打開檔案：bootstrap.css，可以看到以下代碼：
.container {
padding-right: 15px; //左右内邊距15
padding-left: 15px;
margin-right: auto; //居中
margin-left: auto;
}
@media (min-width: 768px) { //大于或等于768px，寬度750px
.container {
width: 750px;
}
}
@media (min-width: 992px) { //大于或等于992px，寬度970px
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
通過觀察上述代碼發現，當我們建立div的類樣式名container，則會根據螢幕的大小發生變化。
4.4 基本寫法
| 栅格系統 | 描述 | 類似于表格 |
|---|---|---|
| .container或.container-fluid | 表示栅格系統的兩種容器，一般放在最外面。例如：上述的div，都屬于最外層 | |
| .row | 表示容器中的一行，一行最多有12列 | |
| .col-xx-n xx有四個取值： 1) lg大型裝置，如：電視機 2) md 中型裝置，如：電腦 3) sm小型裝置，如：平闆 4) xs微型裝置，如：手機 | 這一行在某種裝置上占多少列 col-lg-3 在大型裝置上占3列 col-md-6 在中型裝置占6列 col-sm-2 在小型裝置上占2列 col-xs-8 在微型裝置上占8*列 |
4.5 栅格的參數
第5節 栅格系統的示例
5.1 示例1
5.1.1 需求：
栅格系統的基本結構。為了讓div可見，設定div的邊框和高度的樣式。
設定div樣式代碼：
<style type="text/css">
.container .row div {
height: 200px;
border: 1px solid black;
}
</style>
5.1.2 案例效果：
5.1.3 案例代碼：
步驟：
1）建立一個div,class屬性值是container；
2）通過觀察案例效果發現含有兩行，是以在上述div内部添加兩個子div,class屬性值是row，表示兩行；
3）在每行即class屬性是row的div中分别添加四個div,class屬性是：col-md-3。
說明：
col ：表示列
md ：表示中型裝置，電腦
3 ：表示一個格占3列
<!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">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.container .row div {
height: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
電腦
</div>
<div class="col-md-3">
電腦
</div>
<div class="col-md-3">
電腦
</div>
<div class="col-md-3">
電腦
</div>
</div>
<div class="row">
<div class="col-md-3">
電腦
</div>
<div class="col-md-3">
電腦
</div>
<div class="col-md-3">
電腦
</div>
<div class="col-md-3">
電腦
</div>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
5.2 示例2
5.2.1 需求：
省略row的情況下，在container中直接寫6個col-md-3，即每個塊(格)占3列，如果超過4個div，則會自動變成2行。
5.2.2 案例效果：
5.2.3 案例代碼：
步驟：
1）建立一個div,class屬性值是container；
2）根據案例需求，要求省略row，是以直接在上述div中在建立6個div,class屬性值是：col-md-3。
說明：
col ：表示列
md ：表示中型裝置，電腦
3 ：表示一個格占3列
注意：由于一個div就已經占有3列了，并且一行最多是12列，是以在一行隻能存放4個div，剩餘的2個div就會到第二行。
div樣式：
<style type="text/css">
.container div {
height: 200px;
border: 1px solid red;
}
</style>
代碼：
<!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>
<!-- 1.導入Bootstrap的全局CSS樣式 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.container div {
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-3">
電腦
</div>
<div class="col-md-3">
電腦
</div>
<div class="col-md-3">
電腦
</div>
<div class="col-md-3">
電腦
</div>
<div class="col-md-3">
電腦
</div>
<div class="col-md-3">
電腦
</div>
</div>
<!-- 2.導入jQuery架構 -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 3.導入Bootstrap架構 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
5.3 示例3：
5.3.1 需求：
不同螢幕的适配。每個div設定三個樣式，col-md-3 col-sm-4 col-xs-6，格子的數量會随着螢幕尺寸的變化而不同。
說明：每個div同時可以設定多個不同的class屬性值即樣式，然後這些樣式會根據裝置的螢幕尺寸變化而發生相應的格式變化。
5.3.2 案例效果：
電腦：col-md-3
平闆：col-sm-4
手機：col-xs-6
5.3.3 案例代碼：
步驟：
1）建立一個div,class屬性值是container；
2）根據案例需求，要求省略row，是以直接在上述div中在建立8個div,
class屬性值分别是：col-md-3 col-sm-4 col-xs-6。
說明：
col ：表示列
md ：表示中型裝置，電腦
sm ：表示小型裝置，平闆
xs ：表示微型裝置， 手機
3 ：表示一個格占3列
4 ：表示一個格占4列
6 ：表示一個格占6列
補充：div的樣式：
<style type="text/css">
.container div {
height: 200px;
border: 1px solid red;
}
</style>
代碼
<!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">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.container div {
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-3 col-sm-4 col-xs-6">
電腦
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
電腦
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
電腦
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
電腦
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
電腦
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
電腦
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
電腦
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
電腦
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
5.4 示例4：
5.4.1 需求：
顯示與隐藏塊。不同螢幕尺寸的時候，讓某些div塊的顯示，也可以讓某些div隐藏。
說明：
1）如果想讓div隻在小型裝置(sm)上即平闆裝置上可見，其他裝置不可見，隻需給class的屬性指派為：visible-sm。
2）如果想讓div隻在微小型裝置(xs)上即手機裝置上隐藏，其他裝置可見，隻需給class的屬性指派為：hidden-xs。
5.4.2 案例效果：
電腦顯示：
平闆顯示：
手機顯示：
說明：
<div class="col-md-3 col-sm-4 col-xs-6 visible-sm">
我隻在小型裝置即平闆電腦上可見，其它裝置上看不見我。
</div>
<div class="col-md-3 col-sm-4 col-xs-6 hidden-xs">
我在微型即手機上裝置上隐藏，其它裝置可見
</div>
上述div在手機螢幕下，一個設定隻在平闆可見，一個設定隻在手機螢幕上隐藏，是以8個div，在手機螢幕上隻顯示6個。
5.4.3 案例代碼：
步驟：
1）建立一個div,class屬性值是container；
2）根據案例需求，要求省略row，是以直接在上述div中在建立8個div,
class屬性值分别是：col-md-3 col-sm-4 col-xs-6。
說明：
col ：表示列
md ：表示中型裝置，電腦
sm ：表示小型裝置，平闆
xs ：表示微型裝置， 手機
3 ：表示一個格占3列
4 ：表示一個格占4列
6 ：表示一個格占6列
<!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">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.container div {
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-3 col-sm-4 col-xs-6 visible-sm">
我隻在小型裝置上可見，其它裝置上看不見我。
</div>
<div class="col-md-3 col-sm-4 col-xs-6 hidden-xs">
我在微型裝置上隐藏，其它裝置可見
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
5.4.4 栅格系統中類的小結
| 類樣式名 | 作用 |
|---|---|
| .container | 不同的裝置上不同的固定大小 |
| .container-fluid | 所有的裝置上100% |
| .row | 表示一行，可以省略 |
| .col-xs-n | 在微型裝置上占n列 |
| .col-sm-n | 在小型裝置上占n列 |
| .col-md-n | 在中型裝置上占n列 |
| .col-lg-n | 在大型裝置上占n列 |
| .hidden-lg/md/sm/xs | 在指定裝置上隐藏 |
| .visible-lg/md/sm/xs | 隻在指定的裝置上顯示 |
學習完Bootstrap的栅格系統之後我們開始學習全局CSS樣式、元件和JavaScript插件。就是Bootstrap官網列出的選項。
第6節 全局CSS樣式
進入全局CSS樣式後，我們選擇頁面中右側的幾個選項：
6.1 按鈕
6.1.1 按鈕：普通按鈕
可作為按鈕使用的标簽或元素，為 、 或 元素添加按鈕類。
完成的效果：
代碼如下：
<div class="container">
<h3>普通按鈕</h3>
<a href="#" class="btn btn-default">我是連結</a>
<input type="button" class="btn btn-default" value="我是按鈕"/>
<button class="btn btn-default">也是按鈕</button>
</div>
說明：如果不添加class屬性，就和之前html中的樣式一樣，但是如果添加class屬性之後，就會出現Bootstrap的上述樣式。
6.1.2 預定義樣式的按鈕：
有不同顔色的按鈕
效果：
6.1.3 案例代碼：
<div class="container">
<h3>預定義按鈕</h3>
<input type="button" class="btn btn-primary" value="我是首選項按鈕"/>
<input type="button" class="btn btn-success" value="我是成功按鈕"/>
<input type="button" class="btn btn-info" value="我是一般資訊按鈕"/>
</div>
6.2 圖檔
6.2.1 響應式圖檔
響應式圖檔是指根據裝置的寬度變化自動變化大小。
通過為圖檔添加 img-responsive 類可以讓圖檔支援響應式布局。其實質是為圖檔設定了 max-width: 100%(--》100%适應裝置;)、 height: auto; 和 display: block;(---》顯示可見圖檔) 屬性，進而讓圖檔在其父元素中更好的縮放。
如果需要讓使用了 img-responsive 類的圖檔水準居中，請使用 center-block 類，不要用 .text-center。因為.text-center表示文本居中。
代碼實作：
步驟：
1）在目前項目下新創鍵一個img檔案夾，然後存放一張圖檔；
2）在頁面中書寫如下img标簽，并給class屬性值是 img-responsive
效果：圖檔可以随着裝置視窗變化而變化了。
6.2.2 圖檔形狀
上述三種圖檔形狀分别對應以下代碼
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
代碼：
頁面效果：
6.3 表單
用于在頁面上送出資料給伺服器。
所有設定了 form-control 類的 、 和 元素都将被預設設定寬度屬性為 width: 100%;。 将 label 元素和前面提到的控件包裹在 **form-group **中可以獲得最好的排列。
說明：lable标簽是我們之前沒有接觸到的标簽，我們簡單介紹下這個标簽。
格式：
lable标簽屬于html中的标簽， 标簽為 input 元素定義标注（标記）。
label 标簽不會向使用者呈現任何特殊效果。不過，它為滑鼠使用者改進了可用性。如果在 label 标簽内點選文本，就會觸發此控件。就是說，當使用者 選擇該标簽時，浏覽器就會自動将焦點轉到和标簽相關的表單控件上。
标簽的 for 屬性應當與相關元素如：input的 id 屬性相同。這樣就可以實作自動将焦點轉到和input标簽相關的表單控件上.
例如下面代碼：
<form>
<label for="male">男</label>
<input type="radio" name="sex" id="male" /> <br />
<label for="female">女</label>
<input type="radio" name="sex" id="female" />
</form>
效果：
隻需要點選前面的字型就可以選中按鈕。要想實作這個效果要求lable的for屬性值必須和下面的input标簽的id屬性值一樣。
6.3.1 案例需求：
使用bootstrap建立如圖所示的添加聯系人的表單
6.3.2 案例效果：
6.3.3 案例代碼：
說明：上述案例效果中關于生日的選項，我們可以使用input标簽中type屬性有一個值叫做date可以生成月曆的實作。推薦使用。
步驟：
1）将bootstrap首頁中關于CSS全局樣式中的表單代碼進行複制到idea中；
2）在form表單上面添加一個
添加聯系人
；
3）将第二個div中的密碼框修改為性别，input的type屬性值是radio類型，class屬性值不能是form-control，因為form-control表示标簽100%适應裝置寬度，我們可以将class屬性值改為form-inline,這樣兩個radio就會正常顯示了，為了讓男女按鈕每次隻能選擇一個，是以需要給按鈕添加一個屬性name并指派為gender；
4）添加生日的div,讓input的type屬性值是date，這樣在頁面中就會彈出一個月曆出來；
5）再添加一個div裡面存放下拉框select作為學曆；
6）給下面注冊、取消、退出按鈕放到一個div中，div的class屬性是text-center;
7）注冊按鈕的class屬性值是：btn btn-primary，取消：btn btn-default，退出：btn btn-danger；
8）給form表單整體添加一個style屬性，屬性值是：max-width: 400px;
<h3 class="text-center">添加聯系人</h3><!--讓标題居中-->
<form style="max-width: 400px;" class="center-block"><!--讓form表格居中-->
<div class="form-group">
<label for="user">姓名：</label><br/>
<input type="text" class="form-control" id="user" placeholder="請輸入姓名">
</div>
<div class="form-group">
<label>性别：</label>
<input type="radio" class="form-inline" id="male" name="gender">
<label for="male">男</label>
<input type="radio" class="form-inline" id="female" name="gender">
<label for="female">女</label>
</div>
<div class="form-group">
<label for="birthday">生日：</label>
<input type="date" class="form-control" id="birthday" >
</div>
<div class="form-group">
<label for="edu">學曆：</label>
<select id="edu" class="form-control">
<option>大學</option>
<option>大學</option>
<option>大學</option>
</select>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary">注冊</button>
<button type="submit" class="btn btn-default">取消</button>
<button type="submit" class="btn btn-danger">退出</button>
</div>
</form>
6.4 表格
表格就是table，為任意
标簽添加 table類可以為其賦予基本的樣式 ，可以完成對表格的美化。
接下來我們可以通過bootstrap首頁中的全局CSS樣式中的右側表格來學習表格知識。
6.4.1 與表格有關的類樣式
| 表格的樣式 | 類名，class屬性值 |
|---|---|
| 基本執行個體 | table |
| 條紋狀表格，就是隔行顔色有點類似斑馬紋 | table-striped |
| 帶邊框的表格 | table-bordered |
| 滑鼠懸停 | table-hover |
6.4.2 表格中的狀态類
即單獨對某個td或tr設定不同的顔色，通過這些狀态類可以為行或單元格設定顔色。
| class屬性值 | 描述 |
|---|---|
| active | 滑鼠懸停在行或單元格上時所設定的顔色 |
| success | 辨別成功或積極的動作，淺綠色 |
| info | 辨別普通的提示資訊或動作 |
| warning | 辨別警告或需要使用者注意 |
| danger | 辨別危險或潛在的帶來負面影響的動作 |
6.4.3 狀态類的效果
6.4.4 表格案例：
1、案例需求：
使用bootstrap制作如下所示的表格效果，支援響應式布局
2、案例效果：
3、案例代碼：
步驟：
1）新創鍵一個html頁面；
2）将之前的Bootstrap模闆頁面複制到上述建立好的html頁面中；
3）在頁面中添加一個div,class屬性是container，同時添加一個标題标簽：内容是表格；
4）根據案例效果圖我們需要建立一個table表格，4行4列，第一行标題可以使用th;
5）首先給表格table的class屬性值添加一個table類，然後添加table-striped表示條紋狀，table-bordered表示表格邊框，table-hover表示當滑鼠懸停在表格上面會有效果；
6）最後給第一行的tr添加一個class屬性，指派為success。這樣第一行就會變為綠色了。
<div class="container">
<h3>表格</h3>
<table class="table table-striped table-bordered table-hover">
<tr class="success">
<th>編号</th>
<th>編号</th>
<th>編号</th>
</tr>
<tr>
<td>1111</td>
<td>1111</td>
<td>1111</td>
</tr>
<tr>
<td>1111</td>
<td>1111</td>
<td>1111</td>
</tr>
<tr>
<td>1111</td>
<td>1111</td>
<td>1111</td>
</tr>
</table>
</div>
第7節 元件
7.1 導覽列
7.1.1 導覽列的作用
導覽列是在您的應用或網站中作為導航頁頭的響應式基礎元件。它們在移動裝置上可以折疊（并且可開可關），且在視口（viewport）寬度增加時逐漸變為水準展開模式。
導覽列樣式效果：
接下來我們可以通過bootstrap首頁中的元件右側導覽列來學習導覽列知識。
7.1.2 導覽列的組成
整個導覽列就是一個nav标簽，nav可以了解為一個div。隻不過這裡語義化了，nav本身就是導航意思。
| 導覽列的類樣式 | 描述 |
|---|---|
| navbar navbar-default | 預設的顔色為白色 |
| navbar-header | 指定商标和開關的樣式，讓它在手機上更好的顯示 |
| collapse navbar-collapse | 可以折疊的所有項 |
| dropdown | 下拉菜單 |
| navbar-left | 左對齊 |
| navbar-right | 右對齊 |
| navbar-inverse | 将顔色反轉，其實就是設定成黑色 |
| 開頭****相關的屬性 | |
|---|---|
| data- | 表示這有一個事件激活，會産生相應的功能。不能删除 |
| aria- | 給殘障人士使用，可以删除 |
| sr-only | 螢幕閱讀的功能，給殘障人士使用，可以删除 |
7.1.3 導覽列的案例
1、案例需求
做出如下圖所示的導覽列
2、案例效果
3、案例代碼
步驟：
1）新創鍵一個html頁面；
2）将之前的Bootstrap模闆頁面複制到上述建立好的html頁面中；
3）在頁面中添加一個div,class屬性是container，同時添加一個标題标簽：内容是導覽列；
4）将bootstrap頁面中的代碼複制到上述建立好的頁面中；
5）navbar navbar-default 表示導覽列的預設顔色是白色，我們可以修改為navbar-inverse ，表示将顔色反轉，其實就是黑色；
<!DOCTYPE html>
<html lang="zh-CN">
<!--指定為中文-中國-->
<head>
<!-- 指定網頁的字元集為utf-8-->
<meta charset="utf-8">
<!--使用微軟最新的浏覽器Edge的核心來解析目前的HTML檔案，最新的浏覽器都支援 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
響應式布局參數：
viewport： 視口的參數
width=device-width：預設的網頁寬度是裝置的寬度
initial-scale=1: 初始的縮放比1：1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta标簽*必須*放在最前面，任何其他内容都*必須*跟随其後！ -->
<title>Bootstrap 101 Template</title>
<!-- 1. 導入bootstrap的全局css樣式 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h3>導覽列</h3>
<!-- 預設是白色，navbar-inverse 表示黑色-->
<nav class="navbar navbar-inverse">
<!-- container-fluid 表示占容器nav的100%-->
<div class="container-fluid">
<!-- navbar-header表示指定商标和開關的樣式，讓它在手機上更好的顯示-->
<div class="navbar-header">
<!--開關按鈕-->
<!--data-toggle="collapse" 表示點選按鈕時可以折疊
data-target 點選開關按鈕時，可以找到id是bs-example-navbar-collapse-1下拉菜單
而我們發現下面的下拉菜單的id正好是 bs-example-navbar-collapse-1
-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<!--開關按鈕中的白線-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--navbar-brand 表示商标 類似于蘋果網站的蘋果标志，無論裝置視窗怎麼變化，商标都會存在-->
<a class="navbar-brand" href="#">傳智播客</a>
</div>
<!-- 下拉菜單，表單等 navbar-collapse 表示可以折疊的所有的項-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">JavaEE <span class="sr-only">(current)</span></a></li>
<li><a href="#">Android</a></li>
<!--dropdown表示下拉菜單-->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false">下拉菜單
<!--向下箭頭-->
<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>
<!--divider表示一條線-->
<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>
<!--navbar-right表示form表機關于右側-->
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="search" class="form-control" placeholder="關鍵字">
</div>
<button type="submit" class="btn btn-default">搜尋</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<!-- 2. 導入 jQuery 架構 -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 3. 導入bootstrap架構 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
補充：
1）開關按鈕：
<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>
當電腦頁面變為手機的視窗大小時就會顯示開關按鈕，如下：
三個span就是上述按鈕中的三條白杠
2）data-開頭的都不能删掉，如果删除，那麼當點選就不會有反應，例如将data-toggle=“collapse” 删除，那麼點選上述開關按鈕之後就不會有反應。
7.2 分頁元件
7.2.1 分頁的作用
為網站或應用提供帶有展示頁碼的分頁元件。
接下來我們可以通過bootstrap首頁中的元件右側分頁來學習分頁知識。
7.2.2 預設分頁
1、分頁效果
注意：我們現在隻是在這裡實作頁面樣式，至于完成頁面跳轉，我們後面需要使用java代碼來實作，我們這裡先不考慮。
分頁組成：
分頁類 描述
pagination 分頁容器
« 向左的兩個箭頭
» 向右的兩個箭頭
disabled 禁用狀态
active 激活狀态
2、分頁代碼
步驟：
1）新創鍵一個html頁面；
2）将之前的Bootstrap模闆頁面複制到上述建立好的html頁面中；
3）在頁面中添加一個div,class屬性是container，同時添加一個标題标簽：内容是分頁；
4）将bootstrap頁面中的代碼複制到上述建立好的頁面中；
<h3>分頁</h3>
<nav>
<!--分頁容器-->
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<!--向左兩個箭頭-->
<span aria-hidden="true">«</span>
</a>
</li>
<!--頁碼-->
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<!--向右兩個箭頭-->
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
頁面效果：
7.2.3 禁用和激活狀态
你可以給不能點選的連結添加 **disabled**類、給目前頁添加 **active **類。
如果正處于目前頁面，可以在目前頁碼上變一個顔色，例如下面的正處于第一頁，是以1是藍色，那麼就給1所在的li标簽添加一個class=”active ”。屬性：
而1已經是第一頁了，不能在前進了，是以向左箭頭不能被點選了，向左箭頭的li标簽設定class=”disabled ”
1、案例代碼
<nav>
<ul class="pagination">
<li class="disabled">
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
第8節 javascript插件
注： javascript插件必須要使用到jQuery架構
8.1 模态框
8.1.1 什麼是模态框
頁面上出現一個對話框在其它的元素前面，如果這個對話框沒有關閉，其它的元素也不能操作。如：alert()
8.1.2 對話框的組成
| modal-dialog | 模态框的容器 |
|---|---|
| modal-content | 模态框的内容 |
| modal-header | 模态框的頭部 |
| modal-body | 模态框的主體 |
| modal-footer | 模态框的腳部 |
| modal-title | 頭部中的标題 |
8.1.3 打開對話框的屬性
| 按鈕上的屬性 | 描述 |
|---|---|
| data-toggle="modal" | 打開模态框的功能 |
| data-target="#id值" 或 =".類名" | 指定需要打開的id或類名來打開模态框 |
| data-dismiss="modal" | 關閉模态框的功能 |
1、案例需求：
點選頁面上的藍色按鈕，打開一個模态框。點模态框上的關閉按鈕或右上角的x，關閉模态框。
2、案例效果：
3、案例代碼：
步驟：
1）進入到bootstrap官網，找到JavaScript插件。
2）然後進入到頁面右側找到模态框
3）我們這裡完成一個動态的模态框。
4）新創鍵一個html頁面。
5）将之前的Bootstrap模闆頁面複制到上述建立好的html頁面中。
6）在頁面中添加一個div,class屬性是container，同時添加一個标題标簽：内容是模态框。
7）将上述動态執行個體的代碼指派到idea新創鍵的頁面中，進行修改和說明。
8）将之前書寫好的form表單放到模态框的主體即modal-body中。
<!DOCTYPE html>
<html lang="zh-CN">
<!--指定為中文-中國-->
<head>
<!-- 指定網頁的字元集為utf-8-->
<meta charset="utf-8">
<!--使用微軟最新的浏覽器Edge的核心來解析目前的HTML檔案，最新的浏覽器都支援 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
響應式布局參數：
viewport： 視口的參數
width=device-width：預設的網頁寬度是裝置的寬度
initial-scale=1: 初始的縮放比1：1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta标簽*必須*放在最前面，任何其他内容都*必須*跟随其後！ -->
<title>Bootstrap 101 Template</title>
<!-- 1. 導入bootstrap的全局css樣式 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h3>模态框</h3>
<!-- Button trigger modal -->
<!--
data-toggle="modal" 表示打開模态框的功能
data-target="#myModal" 指定以id的myModal方式打開模态框
這裡的 #myModal 必須和下面的id="myModal"的值一緻，這樣才能打開模态框
-->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
打開對話框
</button>
<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<!--模态框的容器-->
<div class="modal-dialog" role="document">
<!--模态框的内容-->
<div class="modal-content">
<!--模态框的頭部-->
<div class="modal-header">
<!--右邊的x按鈕-->
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">标題</h4>
</div>
<!--模态框的主體-->
<div class="modal-body">
<form>
<div class="form-group">
<label for="user">姓名：</label>
<input type="email" class="form-control" id="user" placeholder="請輸入姓名">
</div>
<div class="form-group">
<label>性别：</label>
<input type="radio" class="form-inline" id="male" name="gender">
<label for="male">男</label>
<input type="radio" class="form-inline" id="female" name="gender">
<label for="female">女</label>
</div>
<div class="form-group">
<label for="birthday">生日：</label>
<input type="date" class="form-control" id="birthday" >
</div>
<div class="form-group">
<label for="edu">學曆：</label>
<select id="edu" class="form-control">
<option>大學</option>
<option>大學</option>
<option>大學</option>
</select>
</div>
</form>
</div>
<!--模态框的腳部-->
<div class="modal-footer">
<!--data-dismiss="modal" 表示關閉模态框-->
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary">儲存</button>
</div>
</div>
</div>
</div>
</div>
<!-- 2. 導入 jQuery 架構 -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 3. 導入bootstrap架構 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
實作效果：
8.3 輪播圖
這個元件用于輪播顯示一組圖檔，類似于旋轉木馬，頁面加載就自動運作，也可以通過點選左右的兩個箭頭向左或向右翻頁。
8.3.1 組成的類樣式名
| 類樣式名字 | 描述 |
|---|---|
| carousel slide | 輪播圖的容器 |
| carousel-indicators | 中間的小圓點 |
| carousel-inner | 要輪播的圖檔 |
| carousel-caption | 圖檔的名字 |
| carousel-control | 向左向右按鈕 |
8.3.2 相關的屬性
| 屬性名 | 作用 |
|---|---|
| data-ride="carousel" | 指定目前是一個輪播圖，加載時自動運作 |
| data-interval="2000" | 間隔的時間間隔，機關是毫秒 |
| data-target="#myPic" | 指定輪播圖div容器的id值 |
1、案例需求：
參考文檔，實作上面的輪播圖的效果
2、案例代碼：
步驟：
1）進入到JavaScript插件頁面到右下角找到輪播圖即Carousel。
2）新創鍵一個html頁面。
3）将之前的Bootstrap模闆頁面複制到上述建立好的html頁面中。
4）在頁面中添加一個div,class屬性是container，同時添加一個标題标簽：内容是輪播圖。
5）将上述Carousel的執行個體的代碼指派到idea新創鍵的頁面中，進行修改和說明。
<!DOCTYPE html>
<html lang="zh-CN">
<!--指定為中文-中國-->
<head>
<!-- 指定網頁的字元集為utf-8-->
<meta charset="utf-8">
<!--使用微軟最新的浏覽器Edge的核心來解析目前的HTML檔案，最新的浏覽器都支援 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
響應式布局參數：
viewport： 視口的參數
width=device-width：預設的網頁寬度是裝置的寬度
initial-scale=1: 初始的縮放比1：1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta标簽*必須*放在最前面，任何其他内容都*必須*跟随其後！ -->
<title>Bootstrap 101 Template</title>
<!-- 1. 導入bootstrap的全局css樣式 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h3>輪播圖</h3>
<!--
carousel slide 表示輪播圖的容器
data-ride="carousel" 表示指定的目前是一個輪播圖，頁面加載時自動運作
-->
<div id="carousel-example-generic" data-interval="2000" class="carousel slide" data-ride="carousel">
<!-- 中間的小圓點 -->
<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>
<!-- 包含圖檔 -->
<div class="carousel-inner" role="listbox">
<!--每個div是一張圖檔-->
<div class="item active">
<img src="img/1.jpg">
<!--圖檔的文字-->
<div class="carousel-caption">
電腦辦公
</div>
</div>
<div class="item">
<img src="img/2.jpg">
<div class="carousel-caption">
社交網絡
</div>
</div>
<div class="item">
<img src="img/3.jpg">
<div class="carousel-caption">
房子租賃
</div>
</div>
</div>
<!-- 控制按鈕，向左向右按鈕 -->
<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>
<!-- 2. 導入 jQuery 架構 -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 3. 導入bootstrap架構 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
第9節 Nginx【重點】
9.1伺服器
伺服器，是提供計算服務的裝置。其實可以了解為一台計算機。
由于伺服器需要響應服務請求，并進行處理，是以一般來說伺服器應具備承擔服務并且保障服務的能力。
伺服器的構成包括處理器、硬碟、記憶體等，和通用的計算機架構類似，但是由于需要提供高可靠的服務，是以在處理能力、穩定性、可靠性、安全性、可擴充性、可管理性等方面要求較高。
上述描述的基本上都是伺服器的硬體，而我們主要學習伺服器的軟體。
伺服器軟體有很多分類，例如：資料庫伺服器(Oracle、MySql)、郵件伺服器(EyouMailServer易郵郵件伺服器)、網頁伺服器(tomcat、nginx)等。
我們今天學習網頁伺服器nginx，将網頁釋出到nginx伺服器上。
說明：今天我們可以在我們的電腦上安裝一個伺服器軟體，我們的電腦就可以看作為一個小型的伺服器了，而不用再向之前我們學習網絡程式設計時自己書寫ServerSocket了。
9.2什麼是Nginx
Nginx是一種伺服器軟體，其最主要，最基本的功能是可以與計算機硬體結合，讓程式員可以将程式釋出在Nginx伺服器上，讓成千上萬的使用者可以浏覽。
對于nginx使用說明：
需求：假設我希望所有同學通路我的計算機硬碟：D:\index.html頁面。
除此之外，**Nginx還是一種高性能的HTTP伺服器。**我們在Nginx上可以：
- 可以釋出網站
- 可以實作負載均衡
本課程我們隻讨論Nginx釋出網站的功能。
所謂的負載均衡是指，當同時有多個使用者通路我們的伺服器的時候，為了減少伺服器的壓力，我們需要将使用者引入伺服器叢集中的較輕壓力的伺服器，分擔較重壓力伺服器的負擔。
9.3在Windows中安裝Nginx步驟
- 進入http://nginx.org 網站，下載下傳nginx-1.13.8.zip檔案
下載下傳完成之後的目錄結構如下圖所示：
- 啟動nginx伺服器
進入CMD模式，并切換到Nginx安裝檔案所在的目錄
用start nginx指令，啟動Nginx伺服器：
- 接下來測試nginx是否啟動成功
方式1：在任務管理器中的詳細資訊可以檢視
方式2：
打開:浏覽器，通路本機中Nginx伺服器首頁，
Nginx伺服器預設端口号是：80
說明：如果端口号是80，在通路伺服器的時候可以省略不書寫。
http://127.0.0.1:80或者http://127.0.0.1
如果出現如下圖所示頁面，說明nginx伺服器已經啟動成功。
4.用nginx -s stop指令，停止Nginx伺服器
9.4在Nginx中配置和釋出HTML頁面步驟
-
修改Nginx目錄中conf目錄下的nginx.conf配置檔案，并儲存
說明将要釋出的頁面路徑放到root後面，頁面的名字放到index後面
說明：root後面是釋出的頁面路徑，不要有中文，否則會通路不到。F:\LY
- 用start nginx指令，啟動Nginx伺服器
3.用nginx -s stop指令，停止Nginx伺服器
郵件伺服器)、網頁伺服器(tomcat、nginx)等。
我們今天學習網頁伺服器nginx，将網頁釋出到nginx伺服器上。
說明：今天我們可以在我們的電腦上安裝一個伺服器軟體，我們的電腦就可以看作為一個小型的伺服器了，而不用再向之前我們學習網絡程式設計時自己書寫ServerSocket了。
9.2什麼是Nginx
Nginx是一種伺服器軟體，其最主要，最基本的功能是可以與計算機硬體結合，讓程式員可以将程式釋出在Nginx伺服器上，讓成千上萬的使用者可以浏覽。
對于nginx使用說明：
需求：假設我希望所有同學通路我的計算機硬碟：D:\index.html頁面。
[外鍊圖檔轉存中…(img-v3IuAikM-1562501155728)]
除此之外，**Nginx還是一種高性能的HTTP伺服器。**我們在Nginx上可以：
- 可以釋出網站
- 可以實作負載均衡
本課程我們隻讨論Nginx釋出網站的功能。
所謂的負載均衡是指，當同時有多個使用者通路我們的伺服器的時候，為了減少伺服器的壓力，我們需要将使用者引入伺服器叢集中的較輕壓力的伺服器，分擔較重壓力伺服器的負擔。
[外鍊圖檔轉存中…(img-gZRR5Y7x-1562501155729)]
9.3在Windows中安裝Nginx步驟
- 進入http://nginx.org 網站，下載下傳nginx-1.13.8.zip檔案
[外鍊圖檔轉存中…(img-f0txWe7T-1562501155729)]
下載下傳完成之後的目錄結構如下圖所示：
[外鍊圖檔轉存中…(img-ASYGiuOx-1562501155729)]
- 啟動nginx伺服器
進入CMD模式，并切換到Nginx安裝檔案所在的目錄
[外鍊圖檔轉存中…(img-EKngAgAK-1562501155729)]
用start nginx指令，啟動Nginx伺服器：
[外鍊圖檔轉存中…(img-cjpGt3Y8-1562501155730)]
- 接下來測試nginx是否啟動成功
方式1：在任務管理器中的詳細資訊可以檢視
[外鍊圖檔轉存中…(img-Br1HhULA-1562501155730)]
方式2：
打開:浏覽器，通路本機中Nginx伺服器首頁，
Nginx伺服器預設端口号是：80
說明：如果端口号是80，在通路伺服器的時候可以省略不書寫。
http://127.0.0.1:80或者http://127.0.0.1
如果出現如下圖所示頁面，說明nginx伺服器已經啟動成功。
[外鍊圖檔轉存中…(img-vLKzH5dM-1562501155730)]
4.用nginx -s stop指令，停止Nginx伺服器
[外鍊圖檔轉存中…(img-AbantxcD-1562501155731)]
[外鍊圖檔轉存中…(img-qaimpHwr-1562501155731)]
9.4在Nginx中配置和釋出HTML頁面步驟
-
修改Nginx目錄中conf目錄下的nginx.conf配置檔案，并儲存
說明将要釋出的頁面路徑放到root後面，頁面的名字放到index後面
[外鍊圖檔轉存中…(img-X8zXT4Aj-1562501155731)]
說明：root後面是釋出的頁面路徑，不要有中文，否則會通路不到。F:\LY
- 用start nginx指令，啟動Nginx伺服器
[外鍊圖檔轉存中…(img-7CM7gRfR-1562501155732)]
3.用nginx -s stop指令，停止Nginx伺服器
[外鍊圖檔轉存中…(img-Hxi6v2pJ-1562501155732)]