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浮动的深入研究.详解及拓展(二)”似乎就在不久前,然而相隔差 ...
随机推荐
- CodeIgniter - 集成七牛云存储
最近有一个项目需要集成七牛云存储的图片存储和调用功能,程序是基于CodeIgniter2.1.3的PHP框架.刚拿到手完全无从下手的感觉,因为像框架这种东西,想从官方的PHPSDK集成进去,需要改动很 ...
- GDUT 校赛02 dp回文串
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABSkAAAIhCAIAAAAtmainAAAgAElEQVR4nOzdfaxkd33n+ZJacstqa3 ...
- CodeChef DISTNUM2 Easy Queries 节点数组线段树
Description You are given an array A consisting of N positive integers. You have to answer Q queries ...
- PHPExcel 类
//引入工具类 require_once 'PHPExcel.php'; //HandleExcel.class.php 文件 class HandleExcel extends PHPExcel{ ...
- Centos 6.4 32位 gcc 升级(已验证)
具体需要升级成什么版本自行下载https://gcc.gnu.org/ 本文升级为4.8.5 1.下载编译所需依赖库 cd gcc-4.8.5 ./contrib/download_prerequis ...
- 用SQL语句添加删除修改字段
1.增加字段 alter table docdsp add dspcodechar(200)2.删除字段 ALTER TABLE table_NAME DROP COLUMNc ...
- ASP.NET MVC 模型和数据对象映射实践
在使用 MVC 开发项目的过程中遇到了个问题,就是模型和数据实体之间的如何快捷的转换?是不是可以像 Entity Framework 的那样 EntityTypeConfiguration,或者只需要 ...
- NOI2012 : 迷失游乐园
终于补完NOI2012了好开心~ 题目大意:给定一棵树或者环套外向树,求出从中随机选一条简单路径的期望长度,环上点数不超过20. 设 d[x]表示x的度数,ch[x]表示x孩子个数 up[x]表示x向 ...
- BZOJ1401 : Hexagon
这题显然是一个最小斯坦纳树的模型,直接上模板即可,就是正六边形比较恶心. #include<cstdio> #include<cstring> #include<algo ...
- 【BZOJ】3053: The Closest M Points(kdtree)
http://www.lydsy.com/JudgeOnline/problem.php?id=3053 本来是1a的QAQ.... 没看到有多组数据啊.....斯巴达!!!!!!!!!!!!!!!! ...