响应式页面

最新推荐文章于 2024-02-19 21:38:32 发布
最新推荐文章于 2024-02-19 21:38:32 发布
阅读量186 收藏
点赞数
分类专栏： 响应式页面 文章标签： html bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SHI_LUO_DE_YI_JI/article/details/108913078
版权 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="../../css/bootstrap.css" />

		<!--引入需要的JQ-->
		<script src="../../js/jquery-1.11.3.min.js" type="text/javascript"></script>
		<!--最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="../../js/bootstrap.js" type="text/javascript"></script>

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

	<body>

		<div>
			<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">
				<!-- 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">
							<h3>盛大销售</h3>
							<p>快来抢购吧</p>
						</div>
					</div>
					<div class="item">
						<img src="../../img/2.jpg" alt="...">
						<div class="carousel-caption">
							<h3>盛大销售</h3>
							<p>快来抢购吧</p>
						</div>
					</div>
					<div class="item">
						<img src="../../img/3.jpg" alt="...">
						<div class="carousel-caption">
							<h3>盛大销售</h3>
							<p>快来抢购吧</p>
						</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">
			<div class="col-md-4">
				<h3>标题一</h3>
				<p>内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一</p>
				<div align="center"><a href="../../一阶后台/QQ注册后台.html" class="btn btn-danger">了解更多</a></div>
			</div>
			<div class="col-md-4">
				<h3>标题二</h3>
				<p>内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二</p>
				<div align="center"><a href="../../一阶后台/QQ注册后台.html" class="btn btn-danger">提出问题</a></div>
			</div>
			<div class="col-md-4">
				<h3>标题三</h3>
				<p>内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三</p>
				<div align="center"><a href="../../一阶后台/QQ注册后台.html" class="btn btn-danger">赞助我们</a></div>
			</div>
		</div>
	</body>

</html>

在这里插入图片描述

SHI_LUO_DE_YI_JI
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
响应式网页
12-27
资源内容用了HTML5和css3,开发了简单的响应式网页，里面有最基本的一级导航
APP前端响应式页面
04-03
响应式页面设计是一种现代网页开发技术，旨在提供跨设备、跨屏幕尺寸的无缝用户体验。在“蓝莓小镇APP前端响应式页面”项目中，我们关注的是如何为移动应用（APP）构建一个既能适应手机小屏幕，又能适应平板电脑或...
什么是响应式网页？
qfguan的博客
11-27 4427
进入移动互联网时代，各种不同的移动智能设备层出不穷，比如说智能手机、平板电脑、可穿戴式设备等。据2017年8月第40次《中国互联网络发展状况统计报告》的统计结果，截至2017年6月，我国网民规模达到7.51亿，其中手机网民达7.24亿，占比达96.3%，较2016年底增长了1.2个百分点，与此同时，使用台式电脑、笔记本电脑等终端上网的比例却有所下滑。这意味着网民的上网设备进一步向移动端集中，移动互联网主导地位进一步强化。但各种不同的移动智能终端设备的屏幕大小和分辨率都是不尽相同的，而且即使是同一个设备，当用
响应式 页面
ee_Andy的博客
11-27 322
响应式布局  Media 1.什么事响应式      http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html   Media Queries ：响应式     -->其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确
响应式页面案例
03-29
响应式页面设计是一种现代网页开发技术，旨在提供跨设备、跨屏幕尺寸的无缝用户体验。Bootstrap框架是实现响应式设计的热门工具，它由Twitter开发并开源，提供了丰富的预定义CSS样式、JavaScript组件以及HTML模板，...
html5/css3响应式页面开发总结
09-22
在本文中，我们将探讨响应式页面开发的核心概念、自适应与响应式之间的区别，以及实现响应式设计的一些关键技术。 首先，我们需要理解自适应布局和响应式布局的区别。自适应布局（Adaptive Layout）主要是通过设定...
页面布局（2）
文摘资讯
12-19 234
(1)、流式布局固定布局和流式布局在网页设计中最常用的两种布局方式。固定布局能呈现网页的原始设计效果，流式布局则不受窗口宽度影响，流式布局使用百分比宽度来限定布局元素，这样可以根据客户端分辨率的大小来进行合理的显示。 (2)、响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解
响应式页面设计
weixin_43476677的博客
03-23 1852
文章目录前言一、响应式的基本概念二、@media媒体查询1.是什么2.使用方式3.一个例子三、flex布局1.是什么1.怎么用四、Bootstrap总结 前言 随着移动互联网的使用越来越广泛，移动端浏览器的使用越来越多，因此开发网站必须考虑到在移动设备上访问的问题。那如何让PC端和移动端都可以很好的让网页内容显示呢？这就需要采取响应式页面设计了，响应式页面设计也是前端开发需要掌握的众多能力之一 一、响应式的基本概念 1.响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念
页面响应式设计
newbie_ling的博客
09-20 2851
1.响应式布局 一个网站能够兼容多个终端(指不同分辨率，不同 Dpi 的显示设备)，而不是为每一个终端做一个特定的版本，这样的网站布局方式即称为响应式布局。 响应式布局结合多种布局方式，从而确保一个页面能够适应不同终端的显示。 常见的动态布局方式： （1）自适应布局是指当视口分辨率改变时，页面的元素位置会自动调整以适应视口的布局方式。 （2）流式布局是指当视口分辨率改变时，页面元素的宽度...
简述响应式页面
张兴锐的博客
12-14 384
个人理解 响应式页面的核心就是在不同的分辨率下改变内容宽度。 实现响应式页面四大要点 在html头部加上 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> viewport代表视图，width=d
响应式网页开发(自适应页面)
最新发布
桃之夭夭的博客
02-19 1634
1 响应式的概念(自适应页面)随着移动终端的兴起，多种页面规格出现，用户各种需求增加，我们需要通过响应式让用户在不同的终端看到接近相同的内容。响应式也叫作”自适应页面”，可以根据浏览设备的不同，改变不同的布局 文本 图片等的效果特点：使用一套html结构，根据终端检查变化(宽度),同时使用”媒体查询”,将不同宽度的CSS加入到不同的媒体查询中，随着页面宽度的变化，改变布局样式2. 设备的宽度。
响应式页面练习
weixin_53519274的博客
12-21 287
这个小页面是大一暑假学习html+css做的小案例——响应式页面布局，使用了bootstrap框架这个小案例是前年暑假练习写的，记录一下。响应式页面布局，比较适合刚入门前端的小伙伴。系列文章目录前言一、页面效果？二、具体实现代码1.引入bootstrap总结。
响应式页面及rem单位
pro1822的博客
04-06 175
响应式页面及rem单位
页面布局（6）：响应式布局
tuzi007a的博客
05-25 808
大家好，我是梅巴哥er。本篇介绍响应式布局，用js+rem来解决。响应式的介绍，在页面布局（2）：腾讯首页中简单聊过，但是说的不够完善，所以本篇中，将会更具体的做介绍，并能实际应用。 响应式和自适应的区别 响应式是不管页面宽度怎么变化，主要布局不会变化，体现的内容主题也不会变化。 自适应是随着页面宽度的变化，布局也会有一定变化。 其实在腾讯首页中，是做的自适应。 详情可以查看这篇文章：响应式网站自适应网站的区别以及利与弊 响应式的具体做法 直接上代码来展示吧 <!--demo.html--
什么是响应式界面
weixin_34152820的博客
05-28 642
什么是响应式界面 根据维基百科及其参考文献，理论上，响应式界面能够适应不同的设备。描述响应式界面最著名的一句话就是“Content is like water”，翻译成中文便是“如果将屏幕看作容器，那么内容就像水一样”。 转载于:https://www.cnblogs.com/wangge001/p/9100272.html...
什么是响应式设计（Responsive Design）？如何实现一个响应式网页？
官方推荐
08-23 8359
什么是响应式设计（Responsive Design）？如何实现一个响应式网页？
bootstrap响应式页面设计
11-16
Bootstrap是一个流行的前端框架，它提供了许多响应式设计的组件和工具，可以帮助开发人员快速构建适应不同设备的网站和应用程序。以下是使用Bootstrap进行响应式页面设计的步骤： 1. 在HTML文件中引入Bootstrap的CSS和JavaScript文件。可以从官方网站下载或使用CDN链接。 2. 使用Bootstrap的网格系统来布局页面。网格系统是一种基于栅格的布局方式，可以将页面分成12列，并根据需要将内容放置在不同的列中。例如，以下代码将创建一个具有两个相等列的行： ```html <div class="row"> <div class="col-md-6">Column 1</div> <div class="col-md-6">Column 2</div> </div> ``` 在这个例子中，`col-md-6`表示每个列占据6个栅格，总共12个栅格。在较小的屏幕上，列将自动堆叠在一起，以适应较小的屏幕宽度。 3. 使用Bootstrap的响应式工具来隐藏、显示或重新排列内容。例如，以下代码将在较小的屏幕上隐藏一个元素： ```html <div class="hidden-sm">This element is hidden on small screens.</div> ``` 在这个例子中，`hidden-sm`表示在小屏幕上隐藏元素。 4. 使用Bootstrap的组件来创建响应式导航栏、表单、按钮等。例如，以下代码将创建一个响应式导航栏： ```html <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> <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="#">Brand</a> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> </div> </nav> ``` 在这个例子中，`navbar`和`navbar-default`类用于创建导航栏，`navbar-header`类用于包含导航栏的标题和折叠按钮，`navbar-toggle`类用于创建折叠按钮，`navbar-collapse`类用于包含导航栏的链接，`nav`和`navbar-nav`类用于创建链接列表。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值