JavaWeb_day7_BootStrap

最新推荐文章于 2023-08-27 16:56:24 发布
最新推荐文章于 2023-08-27 16:56:24 发布
阅读量166 收藏
点赞数
文章标签： bootStrap 响应式 栅格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42062397/article/details/82867447
版权

1.导入bootStrap

2.导入jQuery

3.bootstrap的完整模板

<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->
		<!--视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，会将页面缩放到设备这么大来展示-->	
		<!--width 	设置layout viewport  的宽度，为一个正整数，或字符串"width-device"(表示采用设备的宽度)
			initial-scale 	设置页面的初始缩放值，为一个数字，可以带小数
			minimum-scale 	允许用户的最小缩放值，为一个数字，可以带小数
			maximum-scale 	允许用户的最大缩放值，为一个数字，可以带小数
			height 	设置layout viewport  的高度，这个属性对我们并不重要，很少使用
			user-scalable 	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
			如果设置"user-scalable=no",那么"minimum-scale"和"maximum-scale"无效
		-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Bootstrap完整模板</title>

		<!-- 引入Bootstrap核心样式文件 -->
		<link href="css/bootstrap.min.css" rel="stylesheet">

		<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      	<!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果，必须放置到web服务器中，暂时不必掌握 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
	</head>

	<body>
		<!--正文从此处开始-->
		<h1>你好，世界！</h1>

		<!--前端开发建议：网站优化时，除了立即需要工作的js存放在head外，将大部分JS文件放在页面的末尾-->

		<!-- 引入jQuery核心js文件，必须放置在bootStrap.js前面！ -->
		<script src="js/jquery-1.11.3.min.js"></script>
		<!-- 引入BootStrap核心js文件 -->
		<script src="js/bootstrap.min.js"></script>
	</body>

</html>

4.bootstrap网址

http://www.bootcss.com/

5.布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

6.栅格参数

加起来等于12，若超过12单独放一行

7.响应式工具

8.

<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->
		<!--视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，会将页面缩放到设备这么大来展示-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>利用bootstrap对oppo商城首页进行重构</title>
		<!-- 引入Bootstrap核心样式文件 -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<style>
			.col-lg-1 a {
				text-decoration: none;
				color: black;
				font-size: 17px;
				float: right;
				margin-top: 15px;
			}
		</style>
	</head>

	<body>
		<!--正文从此处开始-->
		<!--logo头部-->
		<div class="container">
			<div class="row">
				<div class="col-lg-2 col-md-2 col-sm-1">
					<img src="img/oppologo.png" style="float: left;" />
				</div>
				<div class="col-lg-1 col-md-1 col-sm-1 hidden-xs">
					<a href="#">手机</a>
				</div>
				<div class="col-lg-1 col-md-1 col-sm-1 hidden-xs">
					<a href="#">品牌</a>
				</div>
				<div class="col-lg-1 col-md-1 col-sm-1 hidden-xs">
					<a href="#">商城</a>
				</div>
				<div class="col-lg-1 col-md-1 col-sm-1 hidden-xs">
					<a href="#">体验店</a>
				</div>
				<div class="col-lg-1 col-md-1 col-sm-1 hidden-xs">
					<a href="#">服务</a>
				</div>
				<div class="col-lg-1 col-md-1 col-sm-1 hidden-xs">
					<a href="#">社区</a>
				</div>
				<div class="col-lg-1 col-md-1 col-sm-1 hidden-xs">
					<a href="#">ColorOS</a>
				</div>
				<div class="col-lg-1 col-md-1 col-sm-1 hidden-xs">
					<a href="#">云服务</a>
				</div>
				<div class="col-lg-2 col-md-2 col-sm-1">
					<a href="#"><img src="img/应用商店.png" style="float: right;" /></a>
				</div>
			</div>
		</div>
		<!--轮播图-->
		<div class="container">
			<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>
					<li data-target="#carousel-example-generic" data-slide-to="3"></li>
				</ol>

				<!-- Wrapper for slides -->
				<div class="carousel-inner" role="listbox">
					<div class="item active">
						<img src="img/oppo01.jpg">
						<div class="carousel-caption">
							
						</div>
					</div>
					<div class="item">
						<img src="img/oppo02.jpg" style="width:79.5%; height: 50%;">
						<div class="carousel-caption">
							
						</div>
					</div>
					<div class="item">
						<img src="img/oppo03.jpg" >
						<div class="carousel-caption">
							
						</div>
					</div>
					<div class="item">
						<img src="img/oppo04.jpg"  style="width: 41%; height: 50%;">
						<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="container" style="margin-top: 10px;">
			<div class="row">
				<div class="col-lg-6">
					<img src="img/邀月邀国庆.jpg"style="width: 100%;"/>
				</div>
				<div class="col-lg-6" >
					<img src="img/以旧换新.jpg" style="width: 100%;"/>
				</div>
			</div>
			
			<div class="row" style="margin-top: 10px;">
				<div class="col-lg-6" style="width: 50%;">
					<img src="img/旅行的意义.jpg" style="width: 100%;"/>
				</div>
				<div class="col-lg-6" style="width: 50%;">
					<img src="img/ColorOS5.2.png" style="width: 100%;"/>
				</div>
			</div>
		</div>
		
		
		<!--友情链接-->
		<div class="container">
			
		</div>

		<!-- 引入jQuery核心js文件，必须放置在bootStrap.js前面！ -->
		<script src="js/jquery-1.11.3.min.js"></script>
		<!-- 引入BootStrap核心js文件 -->
		<script src="js/bootstrap.min.js"></script>
	</body>

</html>

 

零零猪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
（27）-- 用Bootstrap写的OPPO官网商城
Fredreck1919的博客
01-23 2175
#用Bootstrap写的OPPO官网商城首页 Document body,ul,li{ padding: 0px; margin: 0px; list-style: none; } body{ height: 3000px; padding-top:20px; } .item1,
JavaWeb_BootStrap_黑马网页.zip
08-02
【JavaWeb_BootStrap_黑马网页.zip】这个压缩包文件包含了学习和实践JavaWeb开发以及Bootstrap框架的资源。Bootstrap是Twitter推出的一个开源的用于前端网页开发的工具，它基于HTML5、CSS3和JavaScript，提供了丰富...
基于bootstrap开发的电子商城首页项目
05-06
基于bootstrap开发的电子商城首页项目，其使用的技术HTML+css3，
bootstrap媒体对象&表格&模态框&图标&分页
m0_67771087的博客
05-03 361
案例介绍 案例一.搜索书籍页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /...
Javaweb_day01
要学就学灰太狼的博客
02-04 157
1. B/S 软件开发架构简述 1.1 Java Web 技术体系图-一图胜千言 1.2 B/S 软件开发架构简述 1.2.1 B/S架构 B/S框架，意思是前端(Browser 浏览器)和服务器端(Server)组成的系统的框架结构。 B/S架构也可理解为web架构，包含前端、后端、数据库三大组成部分。 示意图 ， 看前面的图即可 1.2.2 前端 前端开发技术工具包括三要素：HTML、CSS 和 JavaScript，还有很多高级的前端框架，如 bootstrap、jquery，VUE 等。 1.
JavaWeb_day19_ JSP_
weixin_42062397的博客
10-29 131
1.jsp技术：在html中嵌入Java代码   servlet技术：在Java代码中嵌套html   servlet技术：擅长编写java代码  jsp技术：擅长页面显示 2.jsp脚本 &lt;% java代码 %&gt;---- 内部的java代码翻译到service方法的内部 &lt;%= java变量或表达式%&gt;---- 会被翻译成service方法内部out.prin...
JavaWeb——BootStrap_7/14
weixin_46335196的博客
07-15 110
day11_Bootstra代码&资料: 提取码：54th 前面学习的前端知识： html css JavaScript 今日内容1. Bootstrap响应式布局CSS样式和JS插件案例：黑马旅游网_首页 1. Bootstrap 1. 概念：一个前端开发的框架，Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。 * 框架：一个半成品软件，开发人员可以
JavaWeb_LeadNews_Day8-后台管理系统实战
Y_cen的博客
08-27 257
JavaWeb_LeadNews_Day8-后台管理系统实战
Java03-Javaweb-day11_BootStrap
鹏鹏的博客
02-07 145
今日内容 1. Bootstrap Bootstrap： 1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 2. 响应式布局。 * 同一套
JavaWeb_LeadNews_Day1-接口测试, app端登录, 网关, 前端集成
Y_cen的博客
07-16 248
JavaWeb_LeadNews_Day1-接口测试, app端登录, 网关, 前端集成
项目源码_javaweb_java_人事管理_bootstrap_
10-03
《基于JavaWeb与Bootstrap的人事管理系统详解》 在IT领域，JavaWeb技术是构建Web应用程序的常用工具，而Bootstrap则是前端开发的利器。本项目源码是一个使用JavaWeb技术和Bootstrap框架开发的人事管理系统，旨在...
day12_javaweb_javascript_day12-xml_energy7fo_
10-03
【标题】"day12_javaweb_javascript_day12-xml_energy7fo_" 提供的资源包主要涵盖了JavaWeb开发中的JavaScript和XML技术，是作者个人学习过程中的一个阶段性的总结，虽然标注为“day2”，但可以推测整个系列应该包含...
JavaWeb笔记_javaweb_javaweb_
09-29
JavaWeb是Java技术在Web应用开发中的应用，涵盖了从服务器端到客户端的多个技术领域。以下是一些关于JavaWeb编程的基础知识点，旨在帮助初学者理解并掌握这一领域： 1. **Servlet**: Servlet是JavaEE规范中的一部分...
OA.zip_javaweb_javaweb OA_javaweb下载_javaweb课程设计
09-14
【OA.zip_javaweb_javaweb OA_javaweb下载_javaweb课程设计】这个压缩包文件主要涉及的是JavaWeb技术的学习与实践，特别是一个基于JavaWeb的办公自动化（OA）系统的设计和实现。JavaWeb是Java技术在Web开发领域的...
javaWeb-day05-Bootstrap
xingxing_LM的博客
02-16 166
Bootstrap： 1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 2. 响应式布局。 * 同一套页面可以兼容不同分辨率的设备。 2
2024年公关服务行业分析报告.pptx
07-09
行业报告
惠州市建筑物矢量数据（Shp格式+带高度）.txt
最新发布
07-09
因文件较多，数据存放网盘，txt文件内包含下载链接及提取码，永久有效。失效会第一时间进行补充。
Matlab语言教程及案例
07-09
项目总结 本文详细介绍了Matlab的基础知识和一个完整的数据分析与可视化案例。内容包括： 1. **基本操作**：基本算术运算和矩阵操作。 2. **绘图**：二维和三维绘图。 3. **函数和脚本**：编写和运行Matlab函数和脚本。 4. **案例分析**：生成模拟数据，进行数据预处理、绘图和统计分析。 通过这个项目，读者可以掌握Matlab的基本使用方法，并了解如何在Matlab中进行数据分析和可视化。这对于初学者入门Matlab编程、提升数据处理和分析能力非常有帮助。希望本文能为读者提供有价值的参考，提升其Matlab编程和数据分析技能。
javaweb_cloud_elevue_pro微服务框架旗舰版源码
07-07
### 回答1： javaweb_cloud_elevue_pro微服务框架旗舰版源码是一套针对Java开发的微服务框架，该框架提供了一系列功能和组件，用于帮助开发者更轻松地构建和管理微服务架构。 该框架的源码是指该框架的具体实现代码，通过阅读源码，开发者可以深入了解框架的设计思想和实现细节，有助于更好地理解和使用该框架。 javaweb_cloud_elevue_pro微服务框架旗舰版源码的特点主要包括以下几点： 1. 模块化设计：源码采用模块化设计，将整个框架拆分成多个独立的模块，每个模块负责不同的功能，有利于代码的组织和维护。 2. 弹性扩展：框架采用了微服务架构，可以很方便地进行系统扩展，支持动态添加和移除服务实例，以适应不同的业务需求。 3. 高可用性：框架提供了集群和负载均衡的支持，可以提高系统的可用性和性能。 4. 分布式事务管理：源码包含了分布式事务管理的实现，可以保证系统在多节点环境下的数据一致性。 5. 可靠消息传递：框架提供了消息队列和分布式任务调度的功能，可以确保消息的可靠传递和任务的可靠执行。 6. 监控和管理：框架提供了丰富的监控和管理功能，可以对系统进行实时监控和管理，方便开发者进行故障排查和性能调优。 总之，javaweb_cloud_elevue_pro微服务框架旗舰版源码是一套成熟的微服务框架实现代码，通过研究源码，开发者可以更好地理解和使用该框架，提高开发效率和系统稳定性。 ### 回答2： javaweb_cloud_elevue_pro微服务框架是一款功能强大的微服务开发框架，是javaweb_cloud_elevue_pro产品家族中的旗舰版。 该框架的源码提供了一套完整的微服务解决方案，包含了丰富的功能模块和技术组件，可用于构建高性能、稳定可靠的分布式系统。 源码中包含了一系列核心组件，如服务注册与发现、负载均衡、熔断降级、分布式配置中心等，这些组件可以快速搭建起一个具有高可用性和可伸缩性的微服务架构。 此外，框架的源码还提供了一套易用的开发工具和开发规范，使开发者能够快速上手并高效地开发微服务应用。开发者可以根据自己的业务需求，选择合适的组件和模块进行使用，从而实现个性化的定制和扩展。 与其他微服务框架相比，javaweb_cloud_elevue_pro微服务框架的源码具有以下特点： 1. 高性能：框架使用了一系列优化的算法和技术，能够实现高效的请求处理和资源利用，保证系统的稳定和可靠。 2. 可扩展：源码提供了丰富的扩展接口和插件机制，开发者可以根据自己的需求进行个性化的扩展和定制。 3. 易用性：框架的源码结构清晰，文档详细，附带了示例和教程，使开发者能够快速理解和掌握框架的使用方法。 4. 社区支持：javaweb_cloud_elevue_pro框架拥有一个活跃的社区，开发者可以在社区中获取帮助、交流经验，并参与框架的改进和贡献。 总之，javaweb_cloud_elevue_pro微服务框架旗舰版源码提供了一个完整的微服务解决方案和一套易用的开发工具，可帮助开发者快速构建高性能、稳定可靠的分布式系统。它是微服务领域中的佼佼者，值得开发者深入研究和使用。 ### 回答3： javaweb_cloud_elevue_pro微服务框架旗舰版源码是一套用于构建微服务架构的开源代码。该框架旨在提供一种简单、高效的方式来搭建和管理分布式系统。 该框架基于Java语言，采用了云计算、分布式计算和微服务架构的设计理念，提供了一套完整的解决方案来构建和管理分布式应用。 该框架具有以下特点： 1. 架构灵活：框架提供了一套灵活的架构设计，可以根据业务需求进行扩展和定制。 2. 模块化设计：框架采用模块化设计，各个微服务模块之间可以独立部署和调用，实现了高内聚、低耦合的分布式系统。 3. 高可用性：框架支持负载均衡、容错和故障恢复等机制，保证了系统的高可用性和容错性。 4. 弹性扩展：框架支持水平扩展，可以根据需求动态增加或减少服务实例，实现了系统的弹性扩展和负载均衡。 5. 服务治理：框架提供了服务注册与发现、负载均衡、熔断器等功能，实现了对微服务的有效治理和管理。 6. 高性能：框架采用了高性能、高并发的设计和优化策略，提升了系统的性能和扩展能力。 总体而言，javaweb_cloud_elevue_pro微服务框架旗舰版源码是一套功能强大、灵活可扩展的微服务架构代码，可帮助开发人员快速构建和管理分布式系统。无论是在企业级应用程序还是在云计算环境中，该框架都能提供优秀的支持，并具有较高的性能和可靠性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值