bootstrpa嵌套式布局

最近在做一个网页,正好需要用到一个嵌套事布局,也就是如果说我要一个分类,在上边填写上简介,下边列出我需要的内容,这样的一个嵌套式布局,这里就把这个例子先引用上。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Bootstrap</title>
<link href="file:///E|/视频/09项目知识/界面设置/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="container-fluid">
<h1 class="page-header">布局<small>使用BootStrap网格系统布局网页</small></h1>
<p>昨日兮昨日,昨日何其好?

春去秋来间,年华终老去。

春去秋来,秋天来了,绿树枯了,来年有再青的时候;冬天来了,燕子去了,有再来的时候;春天去了,梅花谢了,有再开的时候。而流年情薄凉,容易把人抛…</p>
<div class="row-fluid">
	<div class="span4">
		<h2 class="page-header">区块1</h2>
		<p>昨日兮昨日,昨日何其好?
		春去秋来间,年华终老去。春去秋来,秋天来了,绿树枯了,来年有再青的时候;冬天来了,燕子去了,有再来的
		时候;春天去了,梅花谢了,有再开的时候。而流年情薄凉,容易把人抛…</P>
	</div>

	<div class="span4">
		<h2 class="page-header">区块2</h2>
		<p>昨日兮昨日,昨日何其好?
		春去秋来间,年华终老去。春去秋来,秋天来了,绿树枯了,来年有再青的时候;冬天来了,燕子去了,
		有再来的时候;春天去了,梅花谢了,有再开的时候。而流年情薄凉,容易把人抛…</P>
	</div>

	<div class="span4">
		<h2 class="page-header">区块3</h2>
		<p>昨日兮昨日,昨日何其好?
		春去秋来间,年华终老去。春去秋来,秋天来了,绿树枯了,来年有再青的时候;
		冬天来了,燕子去了,有再来的时候;春天去了,梅花谢了,有再开的时候。而流年情薄凉,容易把人抛…</P>
		<div class="row-fluid">
			<div class="span6">昨日兮昨日,昨日何其好?</div>
			<div class="span6">昨日兮昨日,昨日何其好?</div>
		</div>
	</div>
	</div>
</div>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../bootstrap/js/jquery-1.11.2.min.js"></script>
</body>
</html>

时间: 2024-10-05 06:52:24

bootstrpa嵌套式布局的相关文章

新手进行响应式布局设计的9个知识点分享

from:http://www.25xt.com/html5css3/7051.html 不管是web和webAPP开发,目前响应式布局设计越来越重要啦!因为响应式布局是一个解决多类型屏幕问题的最优方案. 因此,今天25学堂来跟大家分享9个响应式布局设计的知识点或是概念. 第一点:响应式设计 vs 适应式设计 看似相同实则不然.这两种设计方式彼此相辅相成,所以说也没有对错之分.具体情况要依内容而定.2者解决的问题就是自适应的问题.确保可以在各个不同尺寸的终端显示效果一样. 第二点:内容流和信息纵

响应式布局及bootstrap

bootstrap:移动端有限.没有ID选择器,就算有也是 通过class名称来的容器 container ,row要放在容器container中,且一个网页只允许有一个container 禁止响应式布局:1,写一个宽度:2,去掉<meta·······>.col-xs:禁用超小模式 所有JavaScript插件都依赖于jQuery 基本模板[移动端上写代码,都要写mate viewport] 定制Bootstrap js放在body结束标签之前 HTML5文档类型<htmmml lan

响应式布局由来和剖析

随着移动互联网的发展盛行,各种移动设备不断备涌现,因此不同尺寸不同分辨率的终端纷纷面市,这为网络应用的前端设计提出了新的要求.如何使页面在不同端显示符合用户的浏览习惯,优化用户体验,是前端开发人员要研究的必备课题.响应式布局的概念应运而生. 什么叫响应式: 响应式布局是EthanMarcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 响应式布局可以为不同终端的用户提供更加舒适的界面和更

流式布局的实现-1

流式布局可以实现逐行填满的布局效果:适用于关键词搜索和热门展示,可以动态的添加标签,用起来十分方便与快捷 源码下载(由慕课网的老师提供,谢谢) 之后说说主要的安排: 第一篇:创建类,确定继承关系,实现构造函数,确定成员函数: 第二篇:实现FlowLayout(流式布局)主要函数的方法: 第一篇:创建类,确定继承关系,实现构造函数,确定成员函数: 第二篇与之后几篇:实现各函数,并说明成员变量的作用; 和用listView实现下拉刷新一样,还是先分析文件结构: 包括了两个类: public clas

推荐12个创建响应式布局的优秀网格框架

在这篇文章中,我们为大家推荐12个创建响应式布局的优秀网格框架.如果网页设计和开人员采用了正确的工具集,并基于一个灵活的网格架构,以及能够把响应图像应用到到设计之中,那么创建一个具备响应式的网站并不一定是一项艰巨的任务.enjoy! 您可能感兴趣的相关文章 Web 前端开发人员和设计师必读文章集锦 十个拥有丰富 UI 组件的 JavaScript 框架 十款精心挑选的在线 CSS3 代码生成工具 开发者必备的八个最佳云端集成开发环境 2012年度最佳 Web 前端开发工具和框架 Pure Pur

新手进行响应式布局的9大知识点

不管是web和webAPP开发,目前响应式布局设计越来越重要啦!因为响应式布局是一个解决多类型屏幕问题的最优方案. 因此,今天25学堂来跟大家分享9个响应式布局设计的知识点或是概念. 第一点:响应式设计 vs 适应式设计 看似相同实则不然.这两种设计方式彼此相辅相成,所以说也没有对错之分.具体情况要依内容而定.2者解决的问题就是自适应的问题.确保可以在各个不同尺寸的终端显示效果一样. 第二点:内容流和信息纵向展示 随着移动屏幕尺寸越来越小,内容所占的垂直空间也越来越多,也就是说,内容会向下方延伸

响应式布局详细介绍

一.响应式布局 定宽布局的局限:屏幕越来越宽,而定宽的宽度是固定的,看定宽的网页不美观 屏幕也在一直往小变,定宽也不合适,看不到完整的网页内容 在这种情况之下,就出现了一种自适应布局,分别是早起的流动式布局(根据浮动,基本淘汰)和百分比宽度布局(还有一些应用). 百分比布局的局限:不够完美,没法得到一个很好的显示效果. 屏幕太大,撑满整个屏幕,不好,屏幕太小,画面太过拘谨也不好. 屏幕尺寸过于碎片化,我们到底要设计什么样的网页才能满足所有人呢?  可以采取一个网站有多个尺寸的适配,两套设计方案,

HTML5 respond.js 解决IE6~8的响应式布局问题

响应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然占据了比较大量的市场份额,使我们不得不进行IE低端浏览器的考虑. 那么如何在IE6~8浏览器中兼容响应式布局呢?这里我们需要借助这样一个文件:respond.js.文件下载地址:https://github.com/scottjehl/Respond. 友情提示各位朋友,关于respond.js的使用,有一些需要注意的地方,一旦不注意,在IE6-8中就无法显示出来. 一

网站布局--瀑布流式布局

瀑布流式布局简介 现在越来越流行一种瀑布流式布局的页面布局方式,希望你没有对这个名字陌生,看张图相信你就知道它是什么了. 怎么样,是不是很熟悉,越来越多的网站采用这种布局,比如 Pinterest (貌似是最早使用这种布局的网站了),Mark之,蘑菇街,点点网,哇哦等等. 瀑布式流式布局,这个名字是很形象的,这种布局适合于小数据块,每个数据块内容相近且没有侧重.通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.这种布局可以说是扩展了原始的格子布局,给用户更加自由,灵活的感