【練習】bootstrap輪播圖
1.格式化程式碼
command+shift+p，然後選擇Install Package.
在外掛列表查詢並安裝格式化css程式碼需要的外掛，css format
開啟任意一個css檔案，command+a全選所有程式碼，然後右鍵選擇css format。
command+a全選所有程式碼，然後右鍵選擇css format。
https://www.jianshu.com/p/37b649a87e4a Sublime Text3(mac版)上好用的外掛
2.輪播圖
<!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>輪播圖</title>
<!-- Bootstrap -->
<link href="lib/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/base.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
javascript carousel 複製程式碼
<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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<!-- 桌面端用背景包裹放圖片，當hidden-xs時隱藏 -->
<a href="#" class="hidden-xs table-image img01 ">
<!-- <img src="images/slide_01_2000x410.jpg" alt="..."> --> 按理來說用img也可以，但是改了img的 height:410px;仍然短一截高度
</a>
<!-- 移動端用a包裹放圖片，當hidden-lg hidden-md hidden-sm時隱藏 -->
<a href="#" class="hidden-lg hidden-md hidden-sm move-image">
<img src="images/slide_01_640x340.jpg" alt="...">
</a>
<!-- <div class="carousel-caption">
這是對圖片的敘述
</div> -->
</div>
<div class="item">
<a href="#" class="hidden-xs table-image img02 ">
</a>
<a href="#" class="hidden-lg hidden-md hidden-sm move-image">
<img src="images/slide_02_640x340.jpg" alt="...">
</a>
</div>
<div class="item">
<a href="#" class="hidden-xs table-image img03 ">
</a>
<a href="#" class="hidden-lg hidden-md hidden-sm move-image">
<img src="images/slide_03_640x340.jpg" alt="...">
</a>
</div>
<div class="item">
<a href="#" class="hidden-xs table-image img04 ">
</a>
<a href="#" class="hidden-lg hidden-md hidden-sm move-image">
<img src="images/slide_04_640x340.jpg" alt="...">
</a>
</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>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="lib/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="lib/js/bootstrap.min.js"></script>
</body>
</html>
index.css
/*輪播圖桌面端*/
/*為了讓中間內容顯示，多餘的部分自動被切割，螢幕縮小，圖片等比例縮小*/
.table-image{
height: 410px;
display: block;
background-repeat: no-repeat;
background-position: center;
/* 背景圖 跟著 父盒子 縮放 */
background-size: cover;
}
/*.table-image img{
height: 410px;
display: block; 不知道為什麼沒用
}*/
.img01{
background-image: url(../images/slide_01_2000x410.jpg);
}
.img02{
background-image: url(../images/slide_02_2000x410.jpg);
}
.img03{
background-image: url(../images/slide_03_2000x410.jpg);
}
.img04{
background-image: url(../images/slide_04_2000x410.jpg);
}
/*移動端以下程式碼必須寫，否則寬度就會出現問題*/
.move-image{
display: block;
width: 100%;
}
.move-image img{
display: block;
width: 100%;
}