网站首页 - 导航条和轮播图的实现(bootstrap)

最新推荐文章于 2025-05-16 12:58:59 发布

原创最新推荐文章于 2025-05-16 12:58:59 发布 · 6.7k 阅读

29 ·

CC 4.0 BY-SA版权

本文介绍如何使用Bootstrap创建反色导航条和轮播图，通过简单的代码示例，展示如何修改文字内容和图片路径，实现网页的基本布局设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图:
在这里插入图片描述
Bootstrap:

组件 (静态CSS)
JS插件(动态JS)

反色导航条:

基本都是去bootstrap官网(组件-导航条)复制过来, 改一改文字內容即可.
bootstrap可参考: https://blog.youkuaiyun.com/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>