Bootstrap页面布局4 - 嵌套布局
嵌套布局:
在一行中,有三列,每一列都有对应的BS栅格系统中的格子,以下例中因为 .row中的div对应的class分别是span4,span4,span4,所以其每一列对应的格子数是
4,4,4
现在有一个需求,要在第三列中另外再布局出2列,且这2列宽度相同那么操作如下:看彩色部分
<div class='row'>
<div class='span4'>
<h2>栏目一</h2>
<p>段落1</p>
</div>
<div class='span4'>
<h2>栏目二</h2>
<p>段落2</p>
</div>
<div class='span4'>
<h2>栏目三</h2>
<p>段落3</p>
<!--这里是嵌套布局-->
<div class='row'>
<div class='span2'>嵌套3.1</div>
<div class='span2'>嵌套3.2</div>
</div>
</div>
</div>
注意:
固定布局下的嵌套布局(求格子和)
第三列的格子数是4,那么在其中的列的格子数的总和不能大于4
流动布局下的嵌套布局(按百分比计算12/6)
第三列的格子数是4,但是流动布局下按照百分比计算,要平均分配的话,因该是12/6才可以所以以上的嵌套部分在流动布局下为
<div class='row'>
<div class='span6'>嵌套3.1</div>
<div class='span6'>嵌套3.2</div>
</div>
Bootstrap页面布局4 - 嵌套布局的更多相关文章
- Bootstrap~页面的布局
回到目录 Bootstrap作为支持响应式布局的一个前端插件,确实发挥着重要的作用,无论你是在手机,平板还是PC上浏览网页,都能达到不错的效果,这一切一切,都是bootstrap带给我们的! 今天主要 ...
- bootstrap学习总结-02 网格布局
1 网格布局 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. <!DOCTYPE html> ...
- 转:Bootstrap研究 精巧的网格布局系统
本网格布局系统属于Scaffolding(框架,布局)部分.在Scaffolding里面有(固定)网格布局(Grid System)和流式网格布局(Fluid Grid System).本文讨论第一种 ...
- 前端开发工程师 - 04.页面架构 - CSS Reset & 布局解决方案 & 响应式 & 页面优化 &规范与模块化
04.页面架构 第1章--CSS Reset 第2章--布局解决方案 居中布局 课堂交流区 水平列表的底部对齐 如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...
- web页面之响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...
- QDockWidget嵌套布局详解-实现Visual Studio布局
概述 许多工程软件,如Qt Creator,VS,matlab等,都是使用dock布局窗口,这样用户可以自定义界面,自由组合窗口. Qt的嵌套布局由QDockWidget完成,用Qt Creator拖 ...
- 移动端页面开发适配 rem布局原理
主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...
- 手机端页面自适应解决方案—rem布局进阶版
手机端页面自适应解决方案—rem布局进阶版 https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...
- 从零開始学android<使用嵌套布局实现计算器界面.十七.>
所谓的嵌套布局就是在一个文件里嵌套多个布局文件 <span style="font-size:18px;"> <LinearLayout android:layo ...
随机推荐
- CodeIgniter - 数据库的增删改查
数据库操作无非是CRUD,用非装逼的语言来说就是增删改查.也许这一节会讲的很泛泛,或者很多人看不懂,没关系,大致的看看,知道是这么回事就好,继续往后看,后面会讲实例,这些枯燥而又抽象的东西可以先跳过, ...
- 使用ASP.NET Web API自带的类库实现对CORS的支持(在开发中使用这种方式)(转载)
在<通过扩展让ASP.NET Web API支持W3C的CORS规范>中我们通过自定义的HttpMessageHandler为ASP.NET Web API赋予了跨域资源共享的能力,具体来 ...
- poj 3253:Fence Repair(堆排序应用)
Fence Repair Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 23913 Accepted: 7595 Des ...
- C# Winform 文件编码批量转换工具
在发布产品程序包时,往往需要对程序文件进行编码检查,写了一个可以批量修改文件编码格式的辅助工具,希望对有同样需求的童鞋有帮助. 1.程序界面: 2.核心代码: /// <summary> ...
- Windows下64位Apache服务器的安装
转自:http://www.blogjava.net/greatyuqing/archive/2013/02/13/395308.html 首先需要说明的是,Apaceh服务器没有官方的64位版本,只 ...
- struts2框架——从后台取得数据集,并在前台页面循环显示
1.CourseBean.java public class CourseBean { private String f_courseId = ""; private String ...
- 面试整理之DOM事件阶段
因为快面试了,打开<JavaScript高级程序设计>,对DOM事件进行整理了下 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可 ...
- 【codevs1191】数轴染色 线段树 区间修改+固定区间查询
[codevs1191]数轴染色 2014年2月15日4317 题目描述 Description 在一条数轴上有N个点,分别是1-N.一开始所有的点都被染成黑色.接着我们进行M次操作,第i次操作将[L ...
- 安装完最小化 RHEL/CentOS 7 后需要做的 30 件事情(二)转载自码农网
7. 安装 PHP PHP 是用于 web 基础服务的服务器端脚本语言.它也经常被用作通用编程语言.在最小化安装的 CentOS 中安装 PHP: # yum install php 安装完 php ...
- 设置session失效的几种方法
转自:http://www.cnblogs.com/linjiqin/archive/2011/06/15/2081673.html 在系统登录后,都会设置一个当前session失效的时间,以确保在用 ...