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

本文介绍如何使用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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值