python全棧學習--day58(bootstrap組件,bootstrap JavaScript 插件)
1、bootstrap組件
無數可複用的組件，包括字體圖標、下拉菜單、導航、警告框、彈出框等更多功能。javascript
組件和插件的區別？
插件：一個功能，好比js文件css
組件：html css jshtml
組件包含插件前端
面版
雖然不老是必須，可是某些時候你可能須要將某些 DOM 內容放到一個盒子裏。對於這種狀況，能夠試試面板組件。java
基本實例
默認的 .panel 組件所作的只是設置基本的邊框（border）和內補（padding）來包含內容。python
帶標題的面版
經過 .panel-heading 能夠很簡單地爲面板加入一個標題容器。你也能夠經過添加設置了 .panel-title 類的 <h1>-<h6> 標籤，添加一個預約義樣式的標題。不過，<h1>-<h6> 標籤的字體大小將被 .panel-heading 的樣式所覆蓋。jquery
爲了給連接設置合適的顏色，務必將連接放到帶有 .panel-title 類的標題標籤內。css3
舉例：git
<!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>
下拉菜單
用於顯示連接列表的可切換、有上下文的菜單。下拉菜單的 JavaScript 插件讓它具備了交互性。github
實例
將下拉菜單觸發器和下拉菜單都包裹在 .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='./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/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>
網頁訪問：
標籤
舉例：
<!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='./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/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-title">
<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>
</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">
<!-- Bootstrap -->
<script src='./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/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="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='./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/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>
網頁訪問：
根據情境變化效果
進度條組件使用與按鈕和警告框相同的類，根據不一樣情境展示相應的效果。
舉例：
<!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 字體圖標
下拉菜單
按鈕式下拉菜單
導航條
徽章
面板
警告框
進度條
最重要的是面板和導航
後臺模板網頁
AdminLTE 2 一個基於 bootstrap 的輕量級後臺模板
訪問網頁：
這裏面有不少圖表
之後作後臺，能夠參考這個模板來作。
圖表插件
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>
訪問網頁：
jQuery插件庫
jQuery插件庫-收集最全最新最好的jQuery插件
官方地址：
這裏有不少插件，好比輪播圖，看下面這個連接
http://www.jq22.com/jquery-info18345
查看演示
http://www.jq22.com/yanshi18345
查看網頁代碼，它真正的效果圖是在iframe裏面的，打開裏面的連接。就是真正的效果網頁。
若是有前端技術的，能夠模仿copy一下。
ps： 右鍵-->另存爲，就能夠將網頁保持到桌面了。
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，它會循環顯示效果。不然，只展現一次動畫效果。
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>
訪問網頁，分別展現春，夏，秋，冬的圖片，自動切換
Flex 佈局
佈局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對於那些特殊佈局很是不方便，好比，垂直居中就不容易實現。
2009年，W3C 提出了一種新的方案----Flex 佈局，能夠簡便、完整、響應式地實現各類頁面佈局。目前，它已經獲得了全部瀏覽器的支持，這意味着，如今就能很安全地使用這項功能。
簡單來講，它能將盒子等比例一排顯示，不須要使用float
詳細說明，請參考文章
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$
相關文章
- 1. BootStrap複習之JavaScript組件
- 2. python 全棧開發，Day58(bootstrap組件,bootstrap JavaScript 插件,後臺模板,圖表插件,jQuery插件庫,Animate.css,swiper,運行vue項目
- 3. bootstrap組件和插件
- 4. bootstrap插件學習-bootstrap.alert.js
- 5. bootstrap插件學習-bootstrap.dropdown.js
- 6. Bootstrap導入JavaScript插件
- 7. Bootstrap支持的JavaScript插件
- 8. [Bootstrap]7天深刻Bootstrap(5)JavaScript插件
- 9. BootStrap複習之BootStrap組件
- 10. Bootstrap 中的插件的學習
- 更多相關文章...
- • Maven 插件 - Maven教程
- • Eclipse 安裝插件 - Eclipse 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • IntelliJ IDEA安裝代碼格式化插件
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 「插件」Runner更新Pro版，幫助設計師遠離996
- 2. 錯誤 707 Could not load file or assembly ‘Newtonsoft.Json, Version=12.0.0.0, Culture=neutral, PublicKe
- 3. Jenkins 2018 報告速覽，Kubernetes使用率躍升235%！
- 4. TVI-Android技術篇之註解Annotation
- 5. android studio啓動項目
- 6. Android的ADIL
- 7. Android卡頓的檢測及優化方法彙總（線下+線上）
- 8. 登錄註冊的業務邏輯流程梳理
- 9. NDK(1)創建自己的C/C++文件
- 10. 小菜的系統框架界面設計-你的評估是我的決策
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. BootStrap複習之JavaScript組件
- 2. python 全棧開發，Day58(bootstrap組件,bootstrap JavaScript 插件,後臺模板,圖表插件,jQuery插件庫,Animate.css,swiper,運行vue項目
- 3. bootstrap組件和插件
- 4. bootstrap插件學習-bootstrap.alert.js
- 5. bootstrap插件學習-bootstrap.dropdown.js
- 6. Bootstrap導入JavaScript插件
- 7. Bootstrap支持的JavaScript插件
- 8. [Bootstrap]7天深刻Bootstrap(5)JavaScript插件
- 9. BootStrap複習之BootStrap組件
- 10. Bootstrap 中的插件的學習