Bootstrap 流式布局

同理，将Bootstrap的流式栅格放到 class="container-ﬂuid" 的流式容器中，即可创建流式布局。流式布局将填满整个视口宽度。如：

<div class="container-fluid">
<div class="row-fluid">
<div class="span2">

</div>
<div class="span10">

</div>
</div>
</div>

布局效果如图 2‑9所示：

图2-9 Bootstrap流式布局

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》，并全部在 GitHub 上开源。

Bootstrap 流式布局相关推荐

移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
移动端常见布局方式(流式布局、flex弹性布局、less+rem+媒体查询、Bootstrap)
目录一:移动端页面 1.流式布局(百分比布局) 2.flex弹性布局(重点♥) flex布局初体验: flex布局原理: flex布局父项常见属性 flex-direction 设置主轴的方向 ♥ ...
HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)
文章目录 (1)Flex弹性盒子布局一: 父容器上的属性 1. display:flex 设置为弹性盒子(写在父容器上) 2.flex-direction值设置子项的布局方向(写在父容器上) 3. ...
从上往下流式布局_教大家怎么写前端布局
一.静态布局(Static Layout) 1. 布局概念最传统.原始的Web布局设计.网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow: ...
Bootstrap 流式栅格系统
Bootstrap的默认栅格系统没有启用响应式布局,如果加入响应式布局的CSS文件bootstrap-responsive.css,栅格系统会自动根据视口(viewport)宽度,在 724px 到 ...
bootstrap响应式布局之阿里百秀
响应式布局移动端布局技术选型 -流式布局(百分比布局) -flex弹性布局 -rem适配布局 -响应式布局响应式就是页面布局会随着屏幕大小变化响应,做出不同的布局模式. 相应不同设备(手机,PAD ...
移动WEB开发之流式布局
第一章:移动端: 1.1 移动端基础 1.2 视口 1.2.1布局视口layout viewport 1.2.2 视觉视口visual viewport 1.2.3 理想视口ideal viewpo ...
Web前端学习笔记10：移动web开发流式布局_flex布局
文章目录移动web开发之rem布局 1 rem基础 1.1 rem单位 2 媒体查询 2.1 什么是媒体查询 2.2 媒体查询语法规范 3 less 基础 3.1 维护css弊端 3.2 Less ...
html流式布局怎么用,css 流式布局什么意思？
流式布局,也叫百分比布局,是移动端开发中经常使用的布局方式之一.流式布局在CSS2时代就有,主要是靠百分比进行排版,可以在不同分辨率下显示相同的版式. 流式布局:网页中主要的划分区域的尺寸使用百分数( ...

Bootstrap 流式布局

Bootstrap 流式布局相关推荐

最新文章

热门文章