bootstrap製作輪播圖,水平導航欄,垂直導航欄
阿新 • • 發佈:2018-12-05
1.官網下載bootstrap
2.引入js和相應的css
此處引用的是themeleaf寫法
<link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet">
<script th:src="@{/jquery/jquery-1.11.1.min.js}" ></script>
<script th:src="@{/bootstrap/js/bootstrap.js}" ></script>
3.製作輪播圖
<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> </ol> <!-- 輪播(Carousel)專案 --> <div class="carousel-inner"> <div class="item active"> <img style="width: 100%; height: 120px" src="https://static.runoob.com/images/mix/img_fjords_wide.jpg" alt="First slide"> </div> <div class="item"> <img style="width: 100%; height: 120px" class="cc" src="https://static.runoob.com/images/mix/img_nature_wide.jpg" alt="Second slide"> </div> <div class="item"> <img style="width: 100%; height: 120px" class="cc" src="https://static.runoob.com/images/mix/img_mountains_wide.jpg" alt="Third slide"> </div> </div> <!– 輪播(Carousel)導航 –> <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div>
4.製作水平導航欄
<div class="container"> <h1>Select the system you want to operate!</h1> <nav class="navbar navbar-inverse"> <div class="navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">list1</a></li> <li><a href="javascript: void(0)">list2</a></li> <li><a href="javascript: void(0)">list3</a></li> <li><a href="javascript: void(0)">list4</a></li> <li><a href="javascript: void(0)">list5</a></li> </ul> </div> </nav> </div>
5.製作垂直導航欄
<!--左側導航欄--> <div id="leftNav"> <ul class="nav nav-pills nav-stacked"> <li id="fis" class="active"><a href="#">系統管理</a></li> <!-- 這裡的active屬性就是使得所在的li的背景色變為藍色--> <li><a href="javascript: void(0)">nav1</a></li> <li><a href="javascript: void(0)">nav2</a></li> <li><a href="javascript: void(0)">nav3</a></li> <li><a href="javascript: void(0)">nav4</a></li> <li><a href="javascript: void(0)">nav5</a></li> </ul> </div>