Bootstrap实现网站首页（Bootstrap概述）

最新推荐文章于 2022-05-06 16:32:56 发布
最新推荐文章于 2022-05-06 16:32:56 发布
阅读量1.6k 收藏 4
点赞数 2
分类专栏： JAVAWEB学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cuterabbitbaby/article/details/78050416
版权

<span style="font-size:14px;"><!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">


<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">


<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>


<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script></span> 

<!DOCTYPE html>
<html>
<head>
<title>网上商城的首页</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">

</style>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-4">
				<img alt="" src="../imag/head1.png">
			</div>
			<div class="col-md-4">
				<img alt="" src="../imag/head2.png">
			</div>
			<div class="col-md-4" style="padding-left: 100px ;padding-top: 20px">
				<a href="#">登陆</a> <a href="zhuce.html">注册</a> <a href="#">购物车</a>
			</div>
		</div>
		<div class="rows">
			<nav class="navbar navbar-default">
				<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 class="active"><a href="#">手机数码 <span
									class="sr-only">(current)</span> </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-haspopup="true"
								aria-expanded="false">更多 <span class="caret"></span> </a>
								<ul class="dropdown-menu">
									<li><a href="#">母婴</a></li>
									<li><a href="#">家具</a></li>
									<li><a href="#">饮品</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#">其他</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#">还需更多</a></li>
								</ul>
							</li>
						</ul>
						<form class="navbar-form navbar-right">
							<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>
		</div>
		<div class="row">
			<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>

				<!-- Wrapper for slides -->
				<div class="carousel-inner" role="listbox">
					<div class="item active">
						<img src="../imag/dianzi.png" alt="...">
						<div class="carousel-caption"></div>
					</div>
					<div class="item">
						<img src="../imag/dianzi2.jpg" alt="...">
						<div class="carousel-caption">你好，中国</div>
					</div>
					<div class="item">
						<img src="../imag/dianzi3.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>
		<div class="row">
			<h3>
				热门商品<img alt="" src="../imag/sign.png">
			</h3>
		</div>
		<div class="row">
			<div class="col-md-2" style="padding: 0px;">
				<img alt="" src="../imag/11.png" width=100% height=100% style="padding: 0px;">
			</div>
			<div class="col-md-10">
				<div class="row">
					<div class="col-md-6" style="padding: 0px;"><img alt="" src="../imag/12.png" width=100% height=100% ></div>
					<div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/13.png" width=100% height=100%></div>
					<div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/14.png" width=100% height=100%></div>
					<div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/15.png" width=100% height=100%></div>
				</div>
				<div class="row">
					<div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/13.png" width=100% height=100%></div>
					<div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/14.png" width=100% height=100%></div>
					<div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/15.png" width=100% height=100%></div>
					<div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/13.png" width=100% height=100%></div>
					<div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/14.png" width=100% height=100%></div>
					<div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/15.png" width=100% height=100%></div>
				</div>
			</div>
		</div>
		<div class="row"><img alt="" src="../imag/ad.png" width="100%"></div>
		<div class="row">
			<h3>
				最新商品<img alt="" src="../imag/sign.png">
			</h3>
		</div>
		<div class="row">
			<div class="col-md-2" style="padding: 0px;">
				<img alt="" src="../imag/11.png" width=100% height=100% style="padding: 0px;">
			</div>
			<div class="col-md-10">
				<div class="row">
					<div class="col-md-6" style="padding: 0px;"><img alt="" src="../imag/12.png" width=100% height=100% ></div>
					<div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/13.png" width=100% height=100%></div>
					<div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/14.png" width=100% height=100%></div>
					<div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/15.png" width=100% height=100%></div>
				</div>
				<div class="row">
					<div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/13.png" width=100% height=100%></div>
					<div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/14.png" width=100% height=100%></div>
					<div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/15.png" width=100% height=100%></div>
					<div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/13.png" width=100% height=100%></div>
					<div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/14.png" width=100% height=100%></div>
					<div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/15.png" width=100% height=100%></div>
				</div>
			</div>
		</div>
		<div class="row"><img alt="" src="../imag/q.png" width="100%"></div>
		<div style="text-align: center;">
		<a href="html.html">关于我们</a>  公司简介  招贤纳士  广告服务  联系方式  合作伙伴  论坛反馈<br>版权声明：Copyright
		© 1999-2016,赵瑾的网站 , All Rights Reserved
	</div>
	</div>
</body>
</html>


cuterabbitbaby
关注
专栏目录
bootstrap实现网站首页
qq_44063001的博客
02-28 3372
&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;title&gt;&lt;/title&gt; &lt;s
Bootstrap概述
藜笙的博客
06-27 727
Bootstrap是世界最受欢迎的Wed框架之一 ，用于开发响应式布局、移动设备优先的Wed项目。在其中，你将发现高质量的HTML、CSS以及JavaScript，使您的WEB工程项目变得无比简单，包括官方的CDN和启动器服务。 Container容器 Container容器是窗口布局的最基本元素，我们推荐所有样式都定义在.container或.container-fluid容器之中--这是启用整个栅格系统必不可少的前置条件，它们分别对应选择一个响应式的、固定宽度的容...
超漂亮的bootstrap网站首页模板
05-03
一款非常好看的基于bootstrap的首页模板
bootstrap网站首页
weixin_44043233的博客
09-09 764
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="styles...
使用Bootstrap开发网站首页
liaowenxiong的博客
12-09 1077
视频1：https://live.csdn.net/v/182207 视频2：https://live.csdn.net/v/182208 视频3：https://live.csdn.net/v/182209
Bootstrap布局的网站首页DEMO
10-03
用bootstrap前端框架搭建的简洁风格网站首页。框架首页：http://www.bootcss.com/
【 HTML资源】基于HTML、BootStrap实现的demo
最新发布
04-02
一、项目概述 本Demo是基于HTML和Bootstrap框架开发的一个前端展示项目。通过利用HTML构建网页的基本结构，结合Bootstrap的样式和组件，实现了一个简洁、美观且功能丰富的网页界面。该项目适用于初学者快速了解并...
概述BootStrap中role="form"及role作用角色
09-01
通过调整这些类，开发者可以实现元素在不同屏幕尺寸下的自适应布局。例如，`<div class="col-xs-6 col-md-3">`会使得在超小屏幕设备上占据半屏（6/12），而在中等屏幕设备上占据四分之一屏（3/12）。反之，如果希望...
JS组件Bootstrap Table表格多行拖拽效果实现代码
10-23
1. 概述：Bootstrap Table是基于Bootstrap框架开发的一个JavaScript表格插件，提供丰富的表格功能，如排序、分页、搜索等。但是，Bootstrap Table默认不提供拖拽行的交互效果。所以本文的目的是通过JavaScript扩展...
个人技能简历bootstrap网站模板
04-02
Bootstrap是世界上最受欢迎的前端开发框架之一，由Twitter的开发者创建，用于快速构建响应式和移动优先的网站。这个“个人技能简历bootstrap网站模板”旨在帮助那些想要展示自己技能和经验的个人，特别是IT专业人士...
基于bootstrap的网站首页
04-25
运用bootstrap框架排版的企业网站首页
基于bootstrap的网站导航页
07-04
基于bootstrap框架的网站导航页实现，包括巨幕、导航栏、下拉菜单以及内嵌页面实现
炫酷的官网页面（bootstrap）
08-07
这是一套完整的官网页面，手机端和pc端都可精美显示，页面很有科技感，主要用bootstrap写的；
基于bootstrap开发的电子商城首页项目
05-06
基于bootstrap开发的电子商城首页项目，其使用的技术HTML+css3，
Bootstrap02.制作主页
github_67177094的博客
05-06 269
回顾：https://blog.csdn.net/github_67177094/article/details/124573594?spm=1001.2014.3001.5501 目录 top.jsp index.jsp insert.jsp 首先导入bootstrap的css和js <link href="bootstrap5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="bootst.
bootstrap导航条
weixin_30266885的博客
06-13 91
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>我的bootstrap网页</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <me...
bootstrap首页案例
dianchamian8747的博客
03-04 395
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>bootstrap项目实战</title> <meta http-equiv="X-UA-Compatible" content="...
Bootstrap-实现简单的网站首页
diaoweisang7683的博客
06-27 1758
html： 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt...
Bootstrap做简单的网站首页
weixin_34006468的博客
04-12 903
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE-edge"><meta name="viewport" content="width=device-width,initi...
Bootstrap企业级网站模板源码完整套件
知识点一：Bootstrap框架概述 Bootstrap是一个开源的前端框架，它主要用于网页和Web应用程序的响应式设计。Bootstrap允许开发者使用HTML、CSS和JavaScript来开发可快速响应多种设备的交云界面。它是目前最流行的前端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值