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 ...
随机推荐
- 【小技巧】9针USB转串口简易连通性测试,附25针转9针
Part 1 前言 最近用SecureCRT连接串口,因为是笔记本用的USB转串口,好多次出现安装驱动OK,连接上了,但是没有串口打印.无法进行控制的问题:所以不清楚是USB串口的驱动问题,还是转接用 ...
- Type InvokeMember()用法简介
举例: Type tDate = typeof(System.DateTime); Object result = tDate.InvokeMember("Now", Bindin ...
- H264码流打包分析
转自:http://www.360doc.com/content/13/0124/08/9008018_262076786.shtml SODB 数据比特串-->最原始的编码数据 RBSP ...
- Android常用布局
FrameLayout(框架布局):从屏幕的左上角开始显示对象,一个覆盖一个,主要用于选项卡视图和图像切换器.# 所有的组件都放在屏幕的左上角,并且以层叠进行显示. LinearLayout(线性布局 ...
- 电赛总结(二)——AD芯片总结之AD7705
1.特性参数 (1)16位无丢失代码性AD转化器 (2)只需要3.3V供电(即只需要单片机即可供电) (3)双通道差分输入 (4)基准电压为2.5V时,在单极性信号下,输入范围是0到2.5V,在双极性 ...
- SQL SERVER 与ACCESS、EXCEL的数据转换
--Excel导入到SQL的一个新思路: /*比如Excel有两列,A列和B列需要导入到SQL表中,反正我已经有几年不用DTS之类的工具了. 在Excel中的新的一列中,直接写公式 =CONCATEN ...
- WPF的Presenter(ContentPresenter)(转)
这是2年前写了一篇文章 http://www.cnblogs.com/Clingingboy/archive/2008/07/03/wpfcustomcontrolpart-1.html 我们先来看M ...
- SpringBoot相关
快速构建项目 第 1 步:将这个 Spring Boot 项目的打包方式设置为 war. <packaging>war</packaging> SpringBoot 默认有内嵌 ...
- A jubeat
Time Limit:1000MS Memory Limit:65535K 题型: 编程题 语言: 无限制 描述 jubeat是一款由日本KONAMI倾心打造的体感音乐游戏,该作在日韩.香港等地 ...
- POJ2226 Muddy Fields(二分图最小点覆盖集)
题目给张R×C的地图,地图上*表示泥地..表示草地,问最少要几块宽1长任意木板才能盖住所有泥地,木板可以重合但不能盖住草地. 把所有行和列连续的泥地(可以放一块木板铺满的)看作点且行和列连续泥地分别作 ...