网站首页 - 导航条和轮播图的实现(bootstrap)
效果图:
Bootstrap:
- 组件 (静态CSS)
- JS插件(动态JS)
反色导航条:
基本都是去bootstrap官网(组件-导航条)复制过来, 改一改文字內容即可.
bootstrap可参考: https://blog.****.net/qq_42986107/article/details/82929465
<!-- 反色导航条组件 -->
<nav class="navbar navbar-inverse" style="margin-top: 20px;">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#">首页</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
// 修改导航条的文字內容 .
<li>
<a href="#">手机数码 </a>
</li>
<li>
<a href="#">电脑办公</a>
</li>
<li>
<a href="#">大型家电</a>
</li>
<li>
<a href="#">日用百货</a>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
轮播图:
JS插件 - - > 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>
</ol>
<!-- 修改图片路径和要轮播的图片个数. -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/1.jpg" alt="图片已丢失">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="img/2.jpg" alt="图片已丢失">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="img/3.jpg" alt="图片已丢失">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="img/4.jpg" alt="图片已丢失">
<div class="carousel-caption">
</div>
</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>