Bootstrap页面布局基础知识全面解析


Posted in Javascript onJune 13, 2016

Bootstrap作为支持响应式布局的一个前端插件,确实发挥着重要的作用,无论你是在手机,平板还是PC上浏览网页,都能达到不错的效果,这一切一切,都是bootstrap带给我们的!

今天主要说下页面的布局,这是最基础的东西了,当我们设计一个站点时,应该为它设计一个全局性的统一的规范页面,这种页面我们叫它布局页,而在页面上体现出来的东西,就是布局的元素,在bootstrap里当然也是不可缺少的东西。

Bootstrap的布局是一种栅格系统,即它由行和列组成,在使用时需要为页面内容和栅格系统包裹一个 .container 容器。

一 .container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
...
</div> 
.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

<div class="container-fluid">
...
</div>

二 栅格系统的行和列,在bootstrap里,行和列使用row和col表示,而一行中最多有12个列单元组成,col-md-1表示占用1个单元的宽度,而col-md-7表示占用7个单元的宽度,它们加在一起最多为12个单元

<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>

第二和第三行显示出来的效果类似这样

Bootstrap页面布局基础知识全面解析

三 嵌套列,列中还可以有列,这种嵌套我们需要把md改为sm

<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>

效果类似于这样

Bootstrap页面布局基础知识全面解析

以上所述是小编给大家介绍的Bootstrap页面布局基础知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript之对系统的toFixed()方法的修正
May 08 Javascript
在Python中使用glob模块查找文件路径的方法
Jun 17 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 Javascript
基于javascript实现九九乘法表
Mar 27 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
Jun 07 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
jQuery实现 上升、下降、删除、添加一行代码
Mar 06 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 Javascript
jquery制做精致的倒计时特效
Jun 13 #Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 #Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 #Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 #Javascript
Bootstrap表单Form全面解析
Jun 13 #Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 #Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 #Javascript
You might like
PHP中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
jQuery 使用手册(三)
2009/09/23 Javascript
extjs之去除s.gif的影响
2010/12/25 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
js clearInterval()方法的定义和用法
2015/11/11 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
Python运算符重载用法实例
2015/05/28 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
Django的models模型的具体使用
2019/07/15 Python
python中tab键是什么意思
2020/06/18 Python
python为什么要安装到c盘
2020/07/20 Python
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
个人自荐信
2013/12/05 职场文书
小学毕业典礼主持词
2014/03/27 职场文书
中餐厅经理岗位职责
2014/04/11 职场文书
年终奖发放方案
2014/06/02 职场文书
可怜妈妈观后感
2015/06/09 职场文书
师范生见习自我总结
2015/06/23 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书
Python torch.flatten()函数案例详解
2021/08/30 Python
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
Go并发4种方法简明讲解
2022/04/06 Golang
springboot实现string转json json里面带数组
2022/06/16 Java/Android