responsive-layout.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>把已有固定宽度布局转换成响应式布局</title>
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="../bootstrap/js/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1 class="page-header">响应式布局<small> 使用Bootstrap网格系统布局网页</small></h1>
<p>bootstrap-responsive.css这个样式表已经为我们针对常用的上网设备做好了响应式的设计，分辨率在1200像素的屏幕上，网格的宽度就会由原来的60像素变成70像素。并且网格与网格之间的距离由原来的20像素变成30像素。</p>
<p>在平板电脑的垂直状态下每个网格的宽度由原来的60像素变为42像素，如果再小的浏览窗口所有的网格类就会变成流动的宽度，并且网格所在的元素会堆积在一起。</p>
<div class="row">
<div class="span4">
<h2 class="page-header">区块一</h2>
<p>consectetur adipiscing elit,Lorem ipsum dolor sit amet. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p>
</div>
<div class="span4">
<h2 class="page-header">区块二</h2>
<p>Lorem ipsum dolor sit amet, quam accumsan vestibulum，consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget . </p>
</div>
<div class="span4">
<h2 class="page-header">区块三</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p>
</div>
</div>
<div class="row">
<div class="span8">
<h2 class="page-header">主内容</h2>
<p>Lorem ipsum dolor sit amet, quam accumsan vestibulum，consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget .，consectetur adipiscing elit,Lorem ipsum dolor sit amet. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p>
</div>
<div class="span4">
<h2 class="page-header">边栏</h2>
<p>Lorem ipsum dolor sit amet, quam accumsan vestibulum，consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget . </p>
</div>
</div>
</div>
<script src="../bootstrap/js/jquery-1.7.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>
分享到：
相关推荐
总结起来，响应式布局涉及多个方面，包括理解不同设备的特性、使用媒体查询进行条件判断、设置合适的viewport以及利用rem实现动态单位转换。这些知识点构成了构建适应各种屏幕尺寸和设备的网页的基础。
"bootstrap-02-04-把已有的固定宽度布局转换成响应式布局.mp4"可能涵盖了将传统固定宽度网站转变为响应式设计的技术，这包括使用媒体查询（Media Queries）和Bootstrap的响应式栅格系统来确保内容在各种设备上都能...
`bootstrap-02-04-把已有的固定宽度布局转换成响应式布局.mp4` 解释了如何将传统的固定宽度设计转变为适应各种设备屏幕大小的响应式布局。Bootstrap提供了一系列断点（如 `.col-sm-`, `.col-md-`, `.col-lg-` 等）来...
与固定宽度布局不同，自适应布局会根据设备的可用空间来调整元素的大小和排列，确保内容在任何屏幕上都能清晰、有效地显示。 4. **移动前端开发**: 移动前端开发是指针对移动设备进行的网页开发，通常包括iOS、...
在传统CSS布局中，页面布局往往依赖于盒模型、display属性、position属性和float属性的组合使用，这些方式在实现复杂的布局结构时，尤其是实现响应式设计时，可能会变得非常繁琐和困难。Flex布局提供了更加高效和...
它可以控制字体、颜色、间距、布局等样式属性，为不同设备和视窗尺寸提供响应式设计。 **3. 块级元素与行内元素** 在CSS布局中，了解块级元素和行内元素的概念至关重要。块级元素如`<div>`默认占据一整行，可以设置...
本主题将深入探讨“CSS网站布局与开发技巧”，帮助你掌握创建美观、响应式的网站布局的关键技术。 一、盒模型与流体布局 CSS盒模型是理解布局的基础，它包括内容(content)、内边距(padding)、边框(border)和外边距...
例如，有的新闻可能需要包含标题、图片、日期，而有的可能只有标题和摘要。我们可以通过if-else语句或者switch-case结构来判断并设置不同布局。 2. PopupWindow的运用： PopupWindow是一个可以浮动在Activity之上...
在响应式设计中，CSS起着核心作用，通过定义断点和布局规则来实现不同设备上的视觉转换。例如，`@media`规则允许我们为特定的设备条件编写样式。 5. JavaScript： JavaScript是一种广泛用于网页和服务器端的编程...
如果你的应用不采用响应式布局，你可以通过为表格（table）设置固定宽度来解决这个问题。例如，可以添加CSS样式： ``` table { width: 1400px !important; } ``` 这将强制表格保持固定的宽度，不受窗口大小...
4. **响应式布局**：考虑屏幕方向变化，以及不同设备的屏幕尺寸，确保FlowLayout在横屏和竖屏模式下都能正常工作。 最后，为了更好地理解并实践FlowLayout，可以下载提供的“UIDemo”项目进行学习和调试。这个Demo...
该压缩包文件包含的是一款专为旅游酒店预定行业设计的网站整站模板，适用于商务移动端前端，采用H5技术，并且具有自适应响应式布局。这个模板的特点是简洁、红色调，给人以时尚且专业的视觉体验，非常适合用于展示...
7. **响应式布局**：关键在于适应不同设备的屏幕尺寸，确保内容清晰可读，导航易用。 在压缩包中，"ReadMe.txt"可能是安装或使用模板的指南，"下载PPT模板.url"、"下载字体.url"和"下载网页特效.url"可能是与模板...
1. **布局设计**：CSS模板中的布局设计多样，有传统的固定宽度布局，也有更现代的流式布局和网格系统。学习如何使用CSS Grid或Flexbox创建灵活且响应式的布局是提升网页设计技能的关键。 2. **响应式设计**：随着...
响应式布局通过CSS3的媒体查询@media，根据设备的视口宽度调整布局样式，确保在PC、手机、平板等不同设备上都能呈现良好的视觉效果。此外，还可以利用Bootstrap等前端框架，简化响应式设计的过程。 在PHP源码中，...
6. **响应式布局**：瀑布流布局需要在屏幕尺寸变化时，如横竖屏切换，能够自适应地调整布局。这需要我们在布局文件中使用百分比宽度或高度，或者在代码中动态计算尺寸。 7. **测量与布局**：在自定义LayoutManager...
Flexbox适用于一维布局，如导航栏、响应式布局，而Grid则更适合二维布局，如网页的主内容区和侧边栏。学习如何灵活使用这两个布局系统是现代web开发者的必备技能。 CSS3还引入了转换（Transform）、过渡...
Bootstrap Ace后台模板是一款基于Bootstrap框架和Ace前端UI库的高效、响应式的后台管理界面模板。Bootstrap是Twitter开发的一款流行的开源前端框架，它提供了一系列预先设计的CSS、JS组件和HTML5模板，使得开发者...