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 相关文章推荐
用jQuery技术实现Tab页界面之二
Sep 21 Javascript
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
将string解析为json的几种方式小结
Nov 11 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
jQuery中prev()方法用法实例
Jan 08 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
JS解决移动web开发手机输入框弹出的问题
Mar 31 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
Aug 12 Javascript
js滚轮事件 js自定义滚动条的实现
Jan 18 Javascript
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
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
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
PHP GD库生成图像的几个函数总结
2014/11/19 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
浅谈PHP之ThinkPHP框架使用详解
2020/07/21 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
Vue表单实例代码
2016/09/05 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
2017/01/20 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
python三元运算符实现方法
2013/12/17 Python
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
Python中getpass模块无回显输入源码解析
2018/01/11 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
python 自动重连wifi windows的方法
2018/12/18 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
keras多显卡训练方式
2020/06/10 Python
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
运动会四百米广播稿
2014/01/19 职场文书
法人委托书范本
2014/04/04 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
建筑工程造价专业自荐信
2014/07/08 职场文书
甜品店创业计划书
2014/08/14 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
MySQL派生表联表查询实战过程
2022/03/20 MySQL