boostrap网站代码首页实现

最新推荐文章于 2022-04-17 14:29:39 发布
原创 最新推荐文章于 2022-04-17 14:29:39 发布 · 1.7k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何使用Bootstrap创建一个自动轮播效果的网站首页。通过设置特定时间，轮播图片能够自动切换，提供良好的用户体验。

代码如下:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>

	<!--最新版本的Bootstrap核心css文件-->
	<link rel="stylesheet" href="css/bootstrap.css" />

	<!--最新的Bootstrap核心JavaScript文件-->
	<script type="text/javascript" src="js/jquery-1.11.0.js"></script>

	<!--需要引入JQuery-->
	<script type="text/javascript" src="js/bootstrap.js"></script>

	<meta name="viewport" content="width=device-width,initial-scale=1" />

	<!--
		引入bootstrap相关的头文件
		1.div布局容器 class = " container"
		2.放8行 row
	-->
</head>
<body>
	<!--最外层的布局容器-->
	<div class="container">
		<!--LOGO部分-->
		<div class="row">
			<div class="col-md-4">
				<img src="img/logo2.png">
			</div>
			<div class="col-md-4">
				<img src="img/header.png">
			</div>

			<div class="col-md-4" style="line-height: 50px;height: 50px;">
				<a href="#">登录</a>
				<a href="#">注册</a>
				<a href="#">购物车</a>
			</div>
		</div>



		<!--导航栏部分-->
		<nav class="navbar navbar-inverse">
			<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">
						<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 class="active">
							<a href="#">手机数码<span class="sr-only">(current)</span></a>
						</li>
						<li>
							<a href="#">电脑办公</a>
						</li>
						<li>
							<a href="#">鞋靴箱包</a>
						</li>
						<li>
							<a href="#">香烟酒水</a>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">全部分类<span class="caret"></span></a>
							<ul class="dropdown-menu" role="menu">
								<li>
									<a href="#">手机数码<</a> </li> <li>
											<a href="#">电脑办公</a>
								</li>
								<li>
									<a href="#">鞋靴箱包</a>
								</li>
								<li>
									<a href="#">香烟酒水</a>
								</li>
								<li class="divider"></li>
								<li>
									<a href="#">花生瓜子</a>
								</li>
							</ul>
						</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="sumbit" class="btn btn-default">Submit</button>
					</form>
				</div>
			</div>
		</nav>
		<!--轮播图-->
		<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000">
			<!--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>

			<!--Wrapper for slides-->
			<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>


			<!--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>

		<!--最新商品-->
		<div class="row">
			<div class="col-md-12">
				<h3>最新商品<img src="img/title2.jpg"></h3>
			</div>
		</div>
		<!--商品部分-->
		<div class="row">
			<!--左边大图部分-->
			<div class="col-md-2" style="height: 480px;">
				<img src="img/big01.jpg" />
			</div>
			<!--右边商品项部分-->
			<div class="col-md-10">
				<!--投影神券来袭-->
				<div class="col-md-6" style="height: 240px;">
					<img src="img/middle01.jpg" />
				</div>

				<div class="col-md-2" style="text-align: center;height: 240px;">
					<img src="img/small03.jpg" />
					<p>新款锅</p>
					<p style="color: red;">$998</p>
				</div>
				<div class="col-md-2" style="text-align: center;height: 240px;">
					<img src="img/small03.jpg" />
					<p>新款锅</p>
					<p style="color: red;">$998</p>
				</div>
				<div class="col-md-2" style="text-align: center;height: 240px;">
					<img src="img/small03.jpg" />
					<p>新款锅</p>
					<p style="color: red;">$998</p>
				</div>
				<div class="col-md-2" style="text-align: center;height: 240px;">
					<img src="img/small03.jpg" />
					<p>新款锅</p>
					<p style="color: red;">$998</p>
				</div>
				<div class="col-md-2" style="text-align: center;height: 240px;">
					<img src="img/small03.jpg" />
					<p>新款锅</p>
					<p style="color: red;">$998</p>
				</div>
				<div class="col-md-2" style="text-align: center;height: 240px;">
					<img src="img/small03.jpg" />
					<p>新款锅</p>
					<p style="color: red;">$998</p>
				</div>
				<div class="col-md-2" style="text-align: center;height: 240px;">
					<img src="img/small03.jpg" />
					<p>新款锅</p>
					<p style="color: red;">$998</p>
				</div>
				<div class="col-md-2" style="text-align: center;height: 240px;">
					<img src="img/small03.jpg" />
					<p>新款锅</p>
					<p style="color: red;">$998</p>
				</div>
				<div class="col-md-2" style="text-align: center;height: 240px;">
					<img src="img/small03.jpg" />
					<p>新款锅</p>
					<p style="color: red;">$998</p>
				</div>

			</div>
		</div>
		<!---->
		<div class="row">
			<div class="col-md-12">
				<img src="img/ad.jpg" width="100%" />
			</div>
		</div>

		<!--最新商品-->
		<div class="row">
			<div class="col-md-12">
				<h3>最新商品<img src="img/title2.jpg"></h3>
			</div>
		</div>
		<!--商品部分-->
		<div class="row">
			<!--左边大图部分-->
			<div class="col-md-2" style="height: 480px;">
				<img src="img/big01.jpg" />
			</div>
			<!--右边商品项部分-->
			<div class="col-md-10">
				<!--投影神券来袭-->
				<div class="col-md-6" style="height: 240px;">
					<img src="img/middle01.jpg" />
				</div>

				<div class="col-md-2" style="text-align: center;height: 240px;">
					<img src="img/small03.jpg" />
					<p>新款锅</p>
					<p style="color: red;">$998</p>
				</div>
				<div class="col-md-2" style="text-align: center;height: 240px;">
					<img src="img/small03.jpg" />
					<p>新款锅</p>
					<p style="color: red;">$998</p>
				</div>
				<div class="col-md-2" style="text-align: center;height: 240px;">
					<img src="img/small03.jpg" />
					<p>新款锅</p>
					<p style="color: red;">$998</p>
				</div>
				<div class="col-md-2" style="text-align: center;height: 240px;">
					<img src="img/small03.jpg" />
					<p>新款锅</p>
					<p style="color: red;">$998</p>
				</div>
				<div class="col-md-2" style="text-align: center;height: 240px;">
					<img src="img/small03.jpg" />
					<p>新款锅</p>
					<p style="color: red;">$998</p>
				</div>
				<div class="col-md-2" style="text-align: center;height: 240px;">
					<img src="img/small03.jpg" />
					<p>新款锅</p>
					<p style="color: red;">$998</p>
				</div>
				<div class="col-md-2" style="text-align: center;height: 240px;">
					<img src="img/small03.jpg" />
					<p>新款锅</p>
					<p style="color: red;">$998</p>
				</div>
				<div class="col-md-2" style="text-align: center;height: 240px;">
					<img src="img/small03.jpg" />
					<p>新款锅</p>
					<p style="color: red;">$998</p>
				</div>
				<div class="col-md-2" style="text-align: center;height: 240px;">
					<img src="img/small03.jpg" />
					<p>新款锅</p>
					<p style="color: red;">$998</p>
				</div>

			</div>
		</div>

		<!--footer-->
		<div class="row">
			<div class="col-md-12">
				<img src="img/footer.jpg" width="100%" />
			</div>
		</div>

		<div style="text-align: center;">
			<a href="#">关于我们</a>
			<a href="#">联系我们</a>
			<a href="#">招贤纳士</a>
			<a href="#">法律声明</a>
			<a href="#">友情链接</a>
			<a href="#">支付方式</a>
			<a href="#">配送方式</a>
			<a href="#">服务声明</a>
			<a href="#">广告声明</a>

			<br />
			Copyright © 2005-2016 传智商城 版权所有
		</div>
	</div>
</body>
</html>

运行效果如图所示:
在这里插入图片描述在这里插入图片描述
在这里插入图片描述轮播效果是随着设置的时间而自动播放

Bootstrap
sh2001824的博客
08-19 1016
项目
html+css+bootstrap实现电商-在线网站商城源代码，商城网站html模板Martup.zip
最新发布
03-16
jQuery，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互； Bootstrap 是快速开发 Web 应用程序的前端工具包。它是一个 CSS，HTML 和 JS 的集合，它使用了最新的浏览器...
bootstrap响应式web开发课程的潮流穿搭网站手敲代码
11-16
bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的
流行男女服饰bootstrap网站模板
03-31
流行男女服饰bootstrap网站模板
几种设为首页的代码
a38679的博客
06-21 518
加入收藏夹,设为首页代码 把以下代码加入<Body>相应位置： <a target=_top href="javascript:window.external.addFavorite('http://www.webjx.com','网页教学网');">加入收藏</a><a href='#' onClick="this.style.behav...
Bootstrap源码
12-07
Bootstrap源码，用于移动前端开发，解压后可以直接导入到项目中
Bootstrap多级菜单的实现代码
08-30
Bootstrap多级菜单的实现代码 Bootstrap多级菜单是 Bootstrap 框架中一个非常重要的组件，它可以帮助开发者快速构建多级菜单，提高用户体验。但是，Bootstrap 官方文档中只提供了二级菜单的实现方法，对于三级及...
Bootstrap按钮组简单实现代码
08-31
然后，我们可以使用HTML代码实现按钮组的基本结构，例如： <!-- 按钮组 --> <button type="button" class="btn btn-default">left <button type="button" class="btn btn-default">center ...
精选资源
bootstrap4实现购物商城
06-18
Bootstrap 4 是一款流行的前端开发框架，用于快速构建响应式和移动优先的网站。在"bootstrap4实现购物商城"这个项目中，我们将会探讨如何利用Bootstrap 4的强大功能来创建一个功能完备、视觉吸引人的在线购物平台。 ...
Bootstrap超大屏幕的实现代码
08-31
Bootstrap超大屏幕的实现代码 Bootstrap超大屏幕的实现代码是一种基于Bootstrap框架的实现方法，能够帮助开发者快速创建超大屏幕页面。本文将详细介绍Bootstrap超大屏幕的实现代码，包括HTML、CSS和JavaScript代码...
html5+bootstrap网页源码
03-30
html5+bootstrap网页源码，分享大家学习，Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。
网站首页的源码
05-22
网站首页的源码
宣传网站首页设计代码
12-13
web初学者设计开发web网站这些项目里边有个别项目可能无法运行，有些问题，但是项目是可以运行，都是我亲身试验过得
bootstrap微网站源代码
06-20
响应式ui，栅格布局，基于bootstrap实现
bootstrap 国外开源网站源码
06-20
响应式电商网站
利用Bootstrap快速搭建个人响应式主页（附演示+源码）
weixin_34107955的博客
04-24 2164
1.前言 我们每个程序员都渴望搭建自己的技术博客平台与他人进行交流分享,但使用别人的博客模板没有创意。做网站后台的开发人员可能了解前端，可是自己写一个不错的前端还是很费事的。幸好我们有Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。我以后端程序员的角度讲一下...
bootstrap源代码
08-28
bootstrap的css，fonts和javascript资源文件包括less代码可以很容易调试自定义样式
H5+Bootstrap网页模板源码
03-30
html5+bootstrap网页源码，分享大家学习，Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。
用bootstrap实现的，三种风格的登录界面网页源码
mazai5080的博客
04-17 4752
大家好，今天给大家介绍一款，用bootstrap实现的，三种风格的登录界面网页源码（图1）。送给大家哦，获取方式在本文末尾。 ​ 图1 包含三种样式（图2） ​ 图2 ​ 图2 部分源码：（下载请看文末） <!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7
bootstrap网站导航页实现与HTML5代码详解
它通常用于网站的主页，作为焦点内容区域。巨幕组件在视觉上区别于常规内容，从而吸引用户的注意力。 4. 导航栏（Navbar）组件的实现 导航栏是网站中非常关键的导航元素，它为用户在网站内的不同页面间移动提供了...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值