python 全棧開發，Day58(bootstrap組件,bootstrap JavaScript 插件,後臺模板,圖表插件,jQuery插件庫,Animate.css,swiper,運行vue項目
1、bootstrap組件
無數可複用的組件，包括字體圖標、下拉菜單、導航、警告框、彈出框等更多功能。javascript
組件和插件的區別？
插件：一個功能，好比js文件css
組件：html css jshtml
組件包含插件前端
面版
雖然不老是必須，可是某些時候你可能須要將某些 DOM 內容放到一個盒子裏。對於這種狀況，能夠試試面板組件。vue
基本實例
默認的 .panel 組件所作的只是設置基本的邊框（border）和內補（padding）來包含內容。java
帶標題的面版
經過 .panel-heading 能夠很簡單地爲面板加入一個標題容器。你也能夠經過添加設置了 .panel-title 類的 <h1>-<h6> 標籤，添加一個預約義樣式的標題。不過，<h1>-<h6> 標籤的字體大小將被 .panel-heading 的樣式所覆蓋。jquery
爲了給連接設置合適的顏色，務必將連接放到帶有 .panel-title 類的標題標籤內。ios
舉例：css3
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame--> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!--適用於移動設備，禁止頁面縮放--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap --> <script src='../ajax/js/jquery-3.3.1.min.js'></script> <!--<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>--> <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <title>Title</title> <style> </style> </head> <body> <!--正文--> <div class="container"> <div class="row"> <div class="col-md-4"> <!--面板--> <!--panel-success顯示綠色--> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title">下拉菜單</h3> </div> <div class="panel-body"> Panel content </div> </div> </div> </div> </div> </body> </html>
網頁訪問：git
下拉菜單
用於顯示連接列表的可切換、有上下文的菜單。下拉菜單的 JavaScript 插件讓它具備了交互性。
實例
將下拉菜單觸發器和下拉菜單都包裹在 .dropdown 裏，或者另外一個聲明瞭 position: relative; 的元素。而後加入組成菜單的 HTML 代碼。
舉例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame--> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!--適用於移動設備，禁止頁面縮放--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap --> <script src='../ajax/js/jquery-3.3.1.min.js'></script> <!--<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>--> <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <title>Title</title> <style> </style> </head> <body> <!--正文--> <div class="container"> <div class="row"> <div class="col-md-4"> <!--面板--> <!--panel-success顯示綠色--> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title">下拉菜單</h3> </div> <div class="panel-body"> <!--下拉菜單實例--> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <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> </ul> </div> </div> </div> </div> </div> </div> </body> </html>
網頁訪問：
輸入框組
經過在文本輸入框 <input> 前面、後面或是兩邊加上文字或按鈕，能夠實現對錶單控件的擴展。爲 .input-group 賦予 .input-group-addon 或 .input-group-btn 類，能夠給 .form-control 的前面或後面添加額外的元素。
舉例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame--> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!--適用於移動設備，禁止頁面縮放--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap --> <script src='../ajax/js/jquery-3.3.1.min.js'></script> <!--<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>--> <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <title>Title</title> <style> </style> </head> <body> <!--正文--> <div class="container"> <div class="row"> <div class="col-md-4"> <!--搜索框--> <div class="input-group"> <input type="text" class="form-control input-lg"><span class="input-group-addon label-info">搜索</span> </div> </div> </div> </div> </body> </html>
網頁訪問：
標籤
舉例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame--> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!--適用於移動設備，禁止頁面縮放--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap --> <script src='../ajax/js/jquery-3.3.1.min.js'></script> <!--<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>--> <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <title>Title</title> <style> </style> </head> <body> <!--正文--> <div class="container"> <div class="row"> <div class="col-md-4"> <!--面板--> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">標籤</h3> </div> <div class="panel-body"> <!--標籤--> <h5>你有新的短消息<span class="label label-danger">New</span></h5> </div> </div> </div> </div> </div> </body> </html>
訪問網頁：
警告框
警告框組件經過提供一些靈活的預約義消息，爲常見的用戶動做提供反饋消息。
可關閉的警告框
爲警告框添加一個可選的 .alert-dismissible 類和一個關閉按鈕。
舉例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame--> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!--適用於移動設備，禁止頁面縮放--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--jquery--> <script src='js/jquery-3.3.1.min.js'></script> <!-- Bootstrap --> <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <title>Title</title> <style> </style> </head> <body> <!--正文--> <div class="container"> <div class="row"> <div class="col-md-4"> <!--面板--> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">標籤</h3> </div> <div class="panel-body"> <!--可關閉的警告框，關閉效果依賴於jquery--> <div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div> </div> </div> </div> </div> </div> </body> </html>
訪問網頁：
好比用戶註冊時，能夠在輸入框後面提示用戶已存在的警告信息
進度條
經過這些簡單、靈活的進度條，爲當前工做流程或動做提供實時反饋。
帶有提示標籤的進度條
將設置了 .sr-only 類的 <span> 標籤從進度條組件中移除 類，從而讓當前進度顯示出來。
舉例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame--> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!--適用於移動設備，禁止頁面縮放--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap --> <script src='../ajax/js/jquery-3.3.1.min.js'></script> <!--<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>--> <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <title>Title</title> <style> </style> </head> <body> <!--正文--> <div class="container"> <div class="row"> <div class="col-md-4"> <!--面板--> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">標籤</h3> </div> <div class="panel-body"> <!--帶有提示標籤的進度條--> <div class="progress"> <!--真正顯示進度條長度，是靠width: 60%;這個參數來控制的--> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 60% </div> </div> </div> </div> </div> </div> </div> </body> </html>
網頁訪問：
根據情境變化效果
進度條組件使用與按鈕和警告框相同的類，根據不一樣情境展示相應的效果。
舉例：
View Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame--> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!--適用於移動設備，禁止頁面縮放--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap --> <script src='../ajax/js/jquery-3.3.1.min.js'></script> <!--<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>--> <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <title>Title</title> <style> </style> </head> <body> <!--正文--> <div class="container"> <div class="row"> <div class="col-md-4"> <!--面板--> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">標籤</h3> </div> <div class="panel-body"> <!--根據情境變化效果--> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40% Complete (success)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <span class="sr-only">20% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <span class="sr-only">60% Complete (warning)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> <span class="sr-only">80% Complete (danger)</span> </div> </div> </div> </div> </div> </div> </div> </body> </html>
訪問網頁：
動畫效果
爲 .progress-bar-striped 添加 .active 類，使其呈現出由右向左運動的動畫效果。IE9 及更低版本的瀏覽器不支持。
舉例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame--> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!--適用於移動設備，禁止頁面縮放--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap --> <script src='../ajax/js/jquery-3.3.1.min.js'></script> <!--<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>--> <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <title>Title</title> <style> </style> </head> <body> <!--正文--> <div class="container"> <div class="row"> <div class="col-md-4"> <!--面板--> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">標籤</h3> </div> <div class="panel-body"> <!--動畫效果--> <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"> <span class="sr-only">45% Complete</span> </div> </div> </div> </div> </div> </div> </div> </body> </html>
訪問網頁：
比較重要的組件有：
Glyphicons 字體圖標
下拉菜單
按鈕式下拉菜單
導航條
徽章
面板
警告框
進度條
最重要的是面板和導航
2、bootstrap JavaScript 插件
模態框 modal.js
模態框通過了優化，更加靈活，以彈出對話框的形式出現，具備最小和最實用的功能集。
動態實例
點擊下面的按鈕便可經過 JavaScript 啓動一個模態框。此模態框將從上到下、逐漸浮現到頁面前。
官方舉例：
<!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"> <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> </style> </head> <body> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <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"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
訪問網頁：
在模態框中須要注意兩點：
- 第一是.modal，用來把 <div>的內容識別爲模態框。
- 第二是.fade class。當模態框被切換時，它會引發內容淡入淡出。
- aria-labelledby="myModalLabel" ，該屬性引用模態框的標題。
- 屬性 aria-hidden="true" 用於保持模態窗口不可見，直到觸發器被觸發爲止（好比點擊在相關的按鈕上）。
- <div class="modal-header"> ，modal-header 是爲模態窗口的頭部定義樣式的類。
- class="close"，close 是一個 CSS class，用於爲模態窗口的關閉按鈕設置樣式。
- data-dismiss="modal"，是一個自定義的 HTML5 data 屬性。在這裏它被用於關閉模態窗口。
- class="modal-body"，是 Bootstrap CSS 的一個 CSS class，用於爲模態窗口的主體設置樣式。
- class="modal-footer"，是 Bootstrap CSS 的一個 CSS class，用於爲模態窗口的底部設置樣式。
- data-toggle="modal"，HTML5 自定義的 data 屬性 data-toggle 用於打開模態窗口。
舉例2：使用自定義的js來控制模態框彈出’
<!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"> <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> </style> </head> <body> <!-- Button trigger modal --> <button type="button" class="btn btn-danger" data-toggle="modal" id="modelBtn"> 刪除 </button> <!-- Modal --> <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"> <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"> 你肯定嗎？ </div> <div class="modal-footer"> <!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> --> <button type="button" class="btn btn-success" data-dismiss="modal">沒想好</button> <button type="button" class="btn btn-info">想好了</button> </div> </div> </div> </div> <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript"> $(function(){ // 點擊刪除按鈕顯示模態框 $('#modelBtn').click(function(){ $('#myModal').modal('show'); }) // 點擊確認按鈕隱藏 $('.btn-info').click(function(){ $('#myModal').modal('hide'); }) }) </script> </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"> <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> </style> </head> <body> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <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> </ul> </div> <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
aria-haspopup :true表示點擊的時候會出現菜單或是浮動元素； false表示沒有pop-up效果。
aria-expanded:表示展開狀態。默認爲undefined, 表示當前展開狀態未知。其它可選值：true表示元素是展開的；false表示元素不是展開的
aria-labelledby：當想要的標籤文本已在其餘元素中存在時，可使用aria-labelledby，並將其值爲全部讀取的元素的id。以下：
當ul獲取到焦點時，屏幕閱讀器是會讀：「選擇您的職位」
data-toggle: 表示什麼事件類型發生
訪問網頁：
滾動監聽 scrollspy.js
導航條實例
滾動監聽插件是用來根據滾動條所處的位置來自動更新導航項的。以下所示，滾動導航條下面的區域並關注導航項的變化。下拉菜單中的條目也會自動高亮顯示。
舉例：
<!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"> <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> </style> </head> <body> <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy"> <span class="sr-only">切換導航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">luffy</a> </div> <div class="collapse navbar-collapse bs-js-navbar-scrollspy"> <ul class="nav navbar-nav"> <li> <a href="#ios">iOS</a> </li> <li> <a href="#svn">SVN</a> </li> <li class="dropdown"> <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1"> <li> <a href="#jmeter" tabindex="-1">jmeter</a> </li> <li> <a href="#ejb" tabindex="-1">ejb</a> </li> <li class="divider"></li> <li> <a href="#spring" tabindex="-1">spring</a> </li> </ul> </li> </ul> </div> </div> </nav> <div data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height:200px;overflow:auto; position: relative;"> <h4 id="ios">iOS</h4> <p>iOS 是一個由蘋果公司開發和發佈的手機操做系統。最初是於 2007 年首次發佈 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它們共享 Darwin 基礎。OS X 操做系統是用在蘋果電腦上，iOS 是蘋果的移動版本。 </p> <h4 id="svn">SVN</h4> <p>Apache Subversion，一般縮寫爲 SVN，是一款開源的版本控制系統軟件。Subversion 由 CollabNet 公司在 2000 年建立。可是如今它已經發展爲 Apache Software Foundation 的一個項目，所以擁有豐富的開發人員和用戶社區。 </p> <h4 id="jmeter">jMeter</h4> <p>jMeter 是一款開源的測試軟件。它是 100% 純 Java 應用程序，用於負載和性能測試。 </p> <h4 id="ejb">EJB</h4> <p>Enterprise Java Beans（EJB）是一個建立高度可擴展性和強大企業級應用程序的開發架構，部署在兼容應用程序服務器（好比 JBOSS、Web Logic 等）的 J2EE 上。 </p> <h4 id="spring">Spring</h4> <p>Spring 框架是一個開源的 Java 平臺，爲快速開發功能強大的 Java 應用程序提供了完備的基礎設施支持。 </p> <p>Spring 框架最初是由 Rod Johnson 編寫的，在 2003 年 6 月首次發佈於 Apache 2.0 許可證下。 </p> </div> <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
訪問網頁，拉動滾動條，對應的標題就會高亮顯示。
Tooltips(提示工具)
受Jason Frame編寫的優秀jQuery.tipsy插件的啓發;工具提示是一個更新的版本，它不依賴圖像，使用CSS3做爲動畫，數據屬性用於本地標題存儲。
零長度的標題是不會顯示的
選擇加入功能
出於性能緣由，Tooltip和Popover數據API是可選的，這意味着您必須本身初始化它們。
初始化頁面上全部工具提示的一種方法是經過數據切換屬性選擇它們：
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
舉例：
<!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"> <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-8"> <!--面板--> <!--panel-success顯示綠色--> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title">panel-title</h3> </div> <div class="panel-body"> <!--提示工具--> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button> </div> </div> </div> </div> </div> <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript"> $(function () { //初始化 $('[data-toggle="tooltip"]').tooltip() }) </script> </body> </html>
訪問網頁：
Collapse(摺疊)
靈活的插件，利用少許的類，方便切換行爲。
舉例：手風琴效果
<!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"> <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> </style> </head> <body> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div> </div> </div> </div> <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
訪問網頁：
說明：
data-toggle="collapse" 添加到您想要展開或摺疊的組件的連接上。
href 或 data-target 屬性添加到父組件，它的值是子組件的 id。
data-parent 屬性把摺疊面板（accordion）的 id 添加到要展開或摺疊的組件的連接2
carousel(輪播)
循環播放元素的幻燈片組件，如旋轉木馬。嵌套轉盤不受支持。
舉例：
<!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"> <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> </style> </head> <body> <div id="myCarousel" class="carousel slide"> <!-- 輪播（Carousel）指標 --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="3"></li> </ol> <!-- 輪播（Carousel）項目 --> <div class="carousel-inner"> <div class="item active"> <!--img-responsive 將圖片設置爲響應式,center-block表示居中顯示--> <img src="../javascript/images/chun.jpg" class="img-responsive center-block" alt="First slide"> <!--圖片說明--> <div class="carousel-caption">春天</div> </div> <div class="item"> <img src="../javascript/images/xia.jpg" class="img-responsive center-block" alt="Second slide"> <div class="carousel-caption">夏天</div> </div> <div class="item"> <img src="../javascript/images/qiu.jpg" class="img-responsive center-block" alt="Third slide"> <div class="carousel-caption">秋天</div> </div> <div class="item"> <img src="../javascript/images/dong.jpg" class="img-responsive center-block" alt="Third slide"> <div class="carousel-caption">冬天</div> </div> </div> <!-- 輪播（Carousel）導航 --> <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript"> $(function(){ //設置3秒切換一次 $('#myCarousel').carousel({ interval: 3000 }); }); </script> </body> </html>
訪問網頁：
說明：
經過 data 屬性：使用 data 屬性能夠很容易控制輪播（Carousel）的位置。
屬性data-slide接受關鍵字prev或next，用來改變幻燈片相對於當前位置的位置
使用data-slide-to來向輪播傳遞一個原始滑動索引，data-slide-to="2" 將把滑塊移動到一個特定的索引，索引從 0 開始計數。
data-ride="carousel"屬性用於標記輪播在頁面加載時就開始動畫播放
JavaScript 插件裏， 比較重要的有模態框，Collapsel
3、後臺模板網頁
AdminLTE 2 一個基於 bootstrap 的輕量級後臺模板
訪問網頁：
這裏面有不少圖表
之後作後臺，能夠參考這個模板來作。
4、圖表插件
ECharts
ECharts是一款由百度前端技術部開發的,基於Javascript的數據可視化圖表庫,提供直觀,生動,可交互,可個性化定製的數據可視化圖表。
官方地址：
裏面有不少圖表
打開教程，連接以下：
http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
獲取 ECharts
bootcdn下載連接：
https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js
引入 ECharts
ECharts 3 開始再也不強制使用 AMD 的方式按需引入，代碼裏也再也不內置 AMD 加載器。所以引入方式簡單了不少，只須要像普通的 JavaScript 庫同樣用 script 標籤引入。
繪製一個簡單的圖表
在繪圖前咱們須要爲 ECharts 準備一個具有高寬的 DOM 容器。
而後就能夠經過 echarts.init 方法初始化一個 echarts 實例並經過 setOption 方法生成一個簡單的柱狀圖，下面是完整代碼。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js"></script> </head> <body> <!-- 爲ECharts準備一個具有大小（寬高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基於準備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數據 var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); </script> </body> </html>
Chart.js
Chart.js是一個基於HTML5的簡單的面向對象的JavaScript圖表庫，支持包括IE7和8的全部現代瀏覽器。
官方地址：
中文文檔太少了，這裏很少介紹
Highcharts
Highcharts 是一個用純JavaScript編寫的一個圖表庫， 可以很簡單便捷的在web網站或是web應用程序添加有交互性的圖表，而且免費提供給我的學習、我的網站和非商業用途使用。
中文文檔，很是全。這是許多網站用的最多的一個圖表庫。好比金融，證券，互聯網企業等等。
官方地址：
查看demo
https://www.hcharts.cn/demo/highcharts
bootcdn下載地址
https://cdn.bootcss.com/highcharts/6.0.7/highcharts.js
舉例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>highcharts</title> <!--引入highcharts--> <script src="js/highcharts.js"></script> <!--主題文件--> <script src="https://img.hcharts.cn/highcharts/themes/dark-unica.js"></script> </head> <body> <div id="container" style="max-width:800px;height:400px"></div> <script> var chart = Highcharts.chart('container', { title: { text: '2010 ~ 2016 年太陽能行業就業人員發展狀況' }, subtitle: { text: '數據來源：thesolarfoundation.com' }, yAxis: { title: { text: '就業人數' } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle' }, plotOptions: { series: { label: { connectorAllowed: false }, pointStart: 2010 } }, series: [{ name: '安裝，實施人員', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175] }, { name: '工人', data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434] }, { name: '銷售', data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387] }, { name: '項目開發', data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227] }, { name: '其餘', data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111] }], responsive: { rules: [{ condition: { maxWidth: 500 }, chartOptions: { legend: { layout: 'horizontal', align: 'center', verticalAlign: 'bottom' } } }] } }); </script> </body> </html>
訪問網頁：
5、jQuery插件庫
jQuery插件庫-收集最全最新最好的jQuery插件
官方地址：
這裏有不少插件，好比輪播圖，看下面這個連接
http://www.jq22.com/jquery-info18345
查看演示
http://www.jq22.com/yanshi18345
查看網頁代碼，它真正的效果圖是在iframe裏面的，打開裏面的連接。就是真正的效果網頁。
若是有前端技術的，能夠模仿copy一下。
ps： 右鍵-->另存爲，就能夠將網頁保持到桌面了。
6、Animate.css
Animate.css 一款強大的預設css3動畫庫
官方地址：
https://daneden.github.io/animate.css/
選擇Specials下的hinge，它會有墜落的效果
打開github地址
https://github.com/daneden/animate.css
這裏面有詳細說明。
bootcdn下載地址：
https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css
舉例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Animate</title> <!--引入Animate.css--> <link rel="stylesheet" href="css/animate.min.css"> </head> <body> <h1 class="animated hinge">Example</h1> </body> </html>
網頁訪問：
注意：若是class添加infinite，它會循環顯示效果。不然，只展現一次動畫效果。
7、swiper
Swiper(Swiper master)是目前應用較普遍的移動端網頁觸摸內容滑動js插件。
官方網址：
它能夠很快速作出一個輪播圖
查看demo演示
http://www.swiper.com.cn/demo/index.html
bootcdn下載地址：
css文件
https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.min.css
js文件
https://cdn.bootcss.com/Swiper/4.3.0/js/swiper.min.js
舉例：
<!DOCTYPE html> <!-- saved from url=(0047)http://www.swiper.com.cn/demo/280-autoplay.html --> <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Swiper demo</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> <!-- Link Swiper's CSS --> <link rel="stylesheet" href="css/swiper.min.css"> <!-- Demo styles --> <style> html, body { position: relative; height: 100%; } body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color:#000; margin: 0; padding: 0; } .swiper-container { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } </style> <style type="text/css" abt="234"></style></head> <body> <!-- Swiper --> <div class="swiper-container swiper-container-horizontal"> <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-3132px, 0px, 0px);"> <div class="swiper-slide" style="width: 1536px; margin-right: 30px;"> <img src="images/chun.jpg" alt=""> </div> <div class="swiper-slide swiper-slide-prev" style="width: 1536px; margin-right: 30px;"> <img src="images/xia.jpg" alt=""> </div> <div class="swiper-slide swiper-slide-active" style="width: 1536px; margin-right: 30px;"> <img src="images/qiu.jpg" alt=""> </div> <div class="swiper-slide swiper-slide-next" style="width: 1536px; margin-right: 30px;"> <img src="images/dong.jpg" alt=""> </div> </div> <!-- Add Pagination --> <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 1"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 3"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 4"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 5"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 6"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 7"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 8"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 9"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 10"></span></div> <!-- Add Arrows --> <div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide" aria-disabled="false"></div> <div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide" aria-disabled="false"></div> <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div> <!-- Swiper JS --> <script src="js/swiper.min.js"></script> <!-- Initialize Swiper --> <script> var swiper = new Swiper('.swiper-container', { spaceBetween: 30, centeredSlides: true, autoplay: { delay: 2500, disableOnInteraction: false, }, pagination: { el: '.swiper-pagination', clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); </script> </body> </html>
訪問網頁，分別展現春，夏，秋，冬的圖片，自動切換
注意，在第一張的時候，點擊上一張，是沒法點擊的。
若是須要實現無縫輪播，須要加一個參數
Loop模式 / 無限循環(200)
loop: true,
js代碼以下：
<script> var swiper = new Swiper('.swiper-container', { spaceBetween: 30, centeredSlides: true, //無限循環模式 loop: true, autoplay: { delay: 2500, disableOnInteraction: false, }, pagination: { el: '.swiper-pagination', clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); </script>
Flex 佈局
佈局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對於那些特殊佈局很是不方便，好比，垂直居中就不容易實現。
2009年，W3C 提出了一種新的方案----Flex 佈局，能夠簡便、完整、響應式地實現各類頁面佈局。目前，它已經獲得了全部瀏覽器的支持，這意味着，如今就能很安全地使用這項功能。
簡單來講，它能將盒子等比例一排顯示，不須要使用float
詳細說明，請參考文章
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$
8、運行vue項目
打開github，下面一個入門項目，連接地址以下：
https://github.com/bailicangdu/vue2-happyfri
下載zip文件，進行解壓。
打開cmd建立，切換到解壓的目錄，執行如下命令：
它會根據package.json文件，自動安裝依賴包
dependencies 記錄了項目依賴
devDependencies 記錄了開發依賴
使用命令npm run dev 運行項目
出現如下信息，表示成功
訪問網頁：
http://localhost:8088
默認打開的網頁，圖片看起來很大。它是針對移動端開發的，須要切換到手機模式。
使用谷歌瀏覽器訪問，按f12，點擊下面的手機圖標，選擇ipone 5
點擊開始，答題，效果以下：
相關文章
- 1. python全棧學習--day58(bootstrap組件,bootstrap JavaScript 插件)
- 2. JQuery插件開發 - 模板
- 3. JQuery插件開發 + 插件
- 4. JQuery插件——flash圖表組件
- 5. vue-awesome-swiper插件
- 6. vue-awesome-swiper 插件
- 7. jQuery插件開發模式
- 8. jQuery插件開發
- 9. jquery插件開發
- 10. Flutter插件開發-電子白板插件-開源項目
- 更多相關文章...
- • Maven 插件 - Maven教程
- • Eclipse 安裝插件 - Eclipse 教程
- • IntelliJ IDEA安裝代碼格式化插件
- • PHP開發工具
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 在windows下的虛擬機中,安裝華爲電腦的deepin操作系統
- 2. 強烈推薦款下載不限速解析神器
- 3. 【區塊鏈技術】孫宇晨：區塊鏈技術帶來金融服務的信任變革
- 4. 搜索引起的鏈接分析-計算網頁的重要性
- 5. TiDB x 微衆銀行 | 耗時降低 58%，分佈式架構助力實現普惠金融
- 6. 《數字孿生體技術白皮書》重磅發佈（附完整版下載）
- 7. 雙十一「避坑」指南：區塊鏈電子合同爲電商交易保駕護航！
- 8. 區塊鏈產業，怎樣「鏈」住未來？
- 9. OpenglRipper使用教程
- 10. springcloud請求一次好用一次不好用zuul Name or service not known
歡迎關注本站公眾號,獲取更多信息
