Bootstrap页面布局3 - BS布局以及流动布局
1、
<h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1>
得到如图所示:
2、给需要的元素添加一个容器,使其居中显示
<div class='container'>
<h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1>
</div>
得到如图所示:如果需要更确切的效果请自行给上面的div设置border查看,是否是.container容器使其中间的元素居中了
3、设置3段文字,让这三段文字在同一行显示
<div class='container'>
<h1>布局 <small>bootstrap 布局</small></h1>
<h2>栏目一</h2>
<p>段落1</p>
<h2>栏目二</h2>
<p>段落2</p>
<h2>栏目三</h2>
<p>段落3</p>
</div>
以上标签显示效果如图:
首先请了解bs的栅格系统:http://wrongwaycn.github.io/bootstrap/docs/scaffolding.html
<div class='container'>
<h1>布局 <small>bootstrap 布局</small></h1>
<!--在需要调整的元素外包围一个class位'row'的div-->
<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>
</div>
</div>
说明:注意查看class='span4', 这里的例子是将“栏目一”,‘栏目二’,‘栏目三’这三个段落显示在1行中,那么首先在这三个元素外围包围一个div且class='row',其次 每个"栏目"设定一个合适的值,作为每个段落外围包围的div的class中 spanN 中N,但是要保证 N+N+N = 12 ;这里的即是4+4+4 = 12;
效果如图:(将每个栏目的布局平均分成了4份,所以给的class='span4')你也可以根据需求或偏好自行设定,但要保证在一行中,所设定的所有spanN中的N相加之和等于12;
固定布局:不会随着浏览器窗口大小的改变而改变布局
应用的class是上面用到的class='container',class='row'
流动布局:会随着浏览器窗口的大小改变布局
应用到class是则应该为class='container-fluid', class='row-fluid'
Bootstrap页面布局3 - BS布局以及流动布局的更多相关文章
- Bootstrap页面布局4 - 嵌套布局
嵌套布局: 在一行中,有三列,每一列都有对应的BS栅格系统中的格子,以下例中因为 .row中的div对应的class分别是span4,span4,span4,所以其每一列对应的格子数是 4,4,4 现 ...
- 2017年最新基于Bootstrap 4 的专业、多用途响应式布局的系统模板
本文分享一款2017年最新的2017年最新基于Bootstrap 4 的专业.多用途响应式布局的系统模板,该模板是一款强大并且非常灵活的后台管理系统模板:能适应绝大多数的web应用程序开发,比如:AP ...
- 关于JAVA的FlowLayout流动布局的换行问题--图形界面
我在网上寻找Java流动布局换行的方法,看了好久,也没有找到满意的答案. FlowLayout是流式布局,所以如果需要让换行有意义,就得锁定窗口的大小,否则随着窗口的伸缩,布局将被彻底打乱. 网上的方 ...
- Android布局管理器-使用TableLayout表格布局管理器实现简单的用户登录页面
场景 Android布局管理器-使用FrameLayout帧布局管理器显示层叠的正方形以及前景照片: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article ...
- 响应式布局(Responsive Layout)/流式布局(Fluid Layout)/自适应布局(Adaptive)
1.使用媒体查询来适应不同视口的固定宽度设计,例如bootstrap的container类. 2.将固定像素布局转换成灵活的百分比布局,才能让页面元素根据视口大小在一个又一个媒体查询间伸缩修正样式. ...
- 你不知道的css各类布局(二)之流体布局、液体布局、栅格布局
流体布局 什么是流 在谈论流体布局之前我们需要知道一件事情就是何为“流”,所谓“流”就是“文档流”,是css中的一种基本定位和布局 概念 流体布局(Liquid/Fluid Layout)指的是利用元 ...
- css经典布局——头尾固定高度中间高度自适应布局
转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...
- jqm的多列布局demo,html5的多列布局demo,多列布局的具体解说,html5开发实例具体解释
因为移动设备屏幕宽度较小,所以一般不建议使用多列布局.但有时你可能须要并排放置一些元素(如button之类的). jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局 ...
- 拜拜了,浮动布局-基于display:inline-block的列表布局——张鑫旭
一.一抹前言 没有爱的日子,时间如指尖细沙,不知不觉就流逝了.写“CSS float浮动的深入研究.详解及拓展(一)”和“CSS float浮动的深入研究.详解及拓展(二)”似乎就在不久前,然而相隔差 ...
随机推荐
- JS图片延迟加载分析及简单的demo
JS图片延迟加载 图片延迟加载也称 "懒加载",通常应用于图片比较多的网页,比如 "美丽说首页","蘑菇街"等一些导购网站上用的比较多,或者 ...
- 比较StringBuffer字符串内容是否相等?
为什么会有这个问题呢?首先得看看String和StringBuffer的比较区别: ==只能比较两个字符串的内存地址是否一样,不能比较字符串内容: String的equals方法因为重写了Object ...
- java抽象类的使用
当多个类中出现相同功能,但是功能主体不同,这是可以进行向上抽取.这时,只抽取功能定义,而不抽取功能主体. 抽象:看不懂. 抽象类的特点:1,抽象方法一定在抽象类中.2,抽象方法和抽象类都必须被abst ...
- 把Chrome浏览器变成文本编辑器
CoderWall 分享的一个小技巧. 在浏览器地址栏中输入一行代码:data:text/html, <html contenteditable> ,回车即可把浏览器变临时编辑器. 按f1 ...
- python 类访问控制
访问限制 我们可以给一个实例绑定很多属性,如果有些属性不希望被外部访问到怎么办? Python对属性权限的控制是通过属性名来实现的,如果一个属性由双下划线开头(__),该属性就无法被外部访问.看例子: ...
- include、include_once与require、require_once区别
include与require的区别 include在引入不存文件时产生一个警告且脚本还会继续执行,而require则会导致一个致命性错误且脚本停止执行. <?php include 'no.p ...
- jquery一些方法
1.重置表单 $('.window-form')[0].reset(); 2.序列化表单 params = $('.window-form').serialize(); $.trim()是jQuery ...
- 模拟退火算法-[HDU1109]
模拟退火算法的原理模拟退火算法来源于固体退火原理,将固体加温至充分高,再让其徐徐冷却,加温时,固体内部粒子随温升变为无序状,内能增大,而徐徐冷却时粒子渐趋有序,在每个温度都达到平衡态,最后在常温时达到 ...
- #region 自适应屏幕分辨率
#region 自适应屏幕分辨率 [StructLayout(LayoutKind.Sequential, CharSet = CharSet.Auto)] public ...
- SQLServer触发器创建、删除、修改、查看示例代码
一: 触发器是一种特殊的存储过程﹐它不能被显式地调用﹐而是在往表中插入记录﹑更新记录或者删除记录时被自动地激活.所以触发器可以用来实现对表实施复杂的完整性约束. 二: SQL Server为每个触发 ...