Bootstrap:

• 元件 (靜態CSS)
• JS外掛(動態JS)

元件

反色導航條:

<!-- 反色導航條元件  -->
<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>