位置: 编程技术 - 正文

Bootstrap入门书籍之(三)栅格系统(bootstrap入门教程)

编辑:rootadmin

推荐整理分享Bootstrap入门书籍之(三)栅格系统(bootstrap入门教程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:bootstrap书籍推荐,bootstrap教材,bootstrap教程 pdf,bootstrap电子书,bootstrap学习,bootstrap教程 pdf,bootstrap教程 pdf,bootstrap基础教程书籍,内容如对您有帮助,希望把文章链接给更多的朋友!

实现原理

栅格系统是Bootstrap中的核心,正是因为栅格系统的存在,Bootstrap才能有着如此强大的响应式布局方案。下面是官方文档中的解说:

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多列。它包含了易于使用的预定义classe,还有强大的mixin用于生成更具语义的布局。

我们来理解一下这一段话,可以发现其中最重要的部分就是 移动设备优先 ,那么什么是移动设备优先呢?

Bootstrap的基础CSS代码 默认从小屏幕设备 (比如移动设备、平板电脑)开始,然后使用 媒体查询扩展到大屏幕设备 (比如笔记本电脑、台式电脑)上的组件和网格。

有着如下策略:

内容:决定什么是最重要的。布局:优先设计更小的宽度。渐进增强:随着屏幕大小增加而添加元素。

工作原理

数据行( .row )必须包含在容器 .container (固定宽度)或 .container-fluid (%宽度)中,以便为其赋予合适的排列(aligment)和内填充(padding)。如:

在数据行( .row )中可以添加列(column),但列数之和不能超过平分的总列数(在超过时,多余部分会换行显示),默认。(使用Less或者Sass可以进行自定义设置)如:

页面上的 具体内容 应当放置于列(column)内,并且 只有列 (column)可以作为数据行 .row 容器的 直接子元素 。

预定义的网格类,比如 .row 和 .col-xs-4 ,可用于快速创建网格布局。

栅格系统中的列是通过指定 1到 的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。

注意事项:

正如上面在注释部分所展现的一样的 .container (固定宽度)是固定宽度的布局方式。通过查看源码,在查看 .container 类的时候我们会发现,它的宽度是响应式的:(如下)

从上面的css代码可以看到,该类默认为整个父元素的宽度(最小屏幕),但是在大屏幕下有着不同的宽度,并且在不同宽度下左右margin会同时增加或减少(水平居中)。

.container-fluid 类就和 .container 的默认情况一样,为%宽度。 (CSS代码一样)

除此之外

从源码中我们还可以发现,除了有左右margin外,还可以看到该类是有着左右填充(padding)存在的。

如果我们继续查看源码,可以发现数据行 .row 中的每一个列也有着左右填充(padding)的存在,如下:

看到这里,大家应该都能想到会有什么样的情况出现!我们在第一个和最后一个列因为 双填充 的存在, 实际上对于内容的隔离 已经到了 px 。我们需要怎么消除影响呢?

Bootstrap是通过 .rows 上的外边距(margin)取负 margin-left: -px;margin-right: -px; ,表示第一列和最后一列的行偏移,用来抵消第一个列的左内距和最后一列的右内距。

基本用法

bootstrap3.x使用了四种栅格选项来形成栅格系统,这四种选项在官网上的介绍如下图,很多人不理解,这里跟大家详解一下四种栅格选项之间的区别,其实区别只有一条就是适合不同尺寸的屏幕设备。我们看class前缀这一项,我们姑且以前缀命名这四种栅格选项,他们分别是col-xs、col-sm、col-md、col-lg,我们懂英文的就知道,lg是large的缩写,md是mid的缩写,sm是small的缩写,xs是***的缩写。这样命名就体现了这几种class适应的屏幕宽度不同。下面我们分别介绍这几种class的特点。

通过下表可以详细查看Bootstrap的栅格系统如何在多种屏幕设备上工作的。

通过源码可以发现,如下:

从这些CSS代码也就不难发现,Bootstrap中每一列所占的宽度,以及为何在列数设置超过时,超过部分会换行显示了。

在下面所有的示例中每一列的背景颜色与边框的效果由如下CSS代码控制:

Bootstrap入门书籍之(三)栅格系统(bootstrap入门教程)

基础

那么我们就来看看一些示例吧,下面这种方式是最基本的用法:

实现的效果如下:

Bootstrap作为一个响应式框架当然不会只有那么简单的功能,我们继续往下走吧!

列偏移

在某些情况下,我们不希望相邻的列紧靠在一起,如果你希望不通过额外的margin或其他的手段来实现的话,Bootstrap内置为我们提供了列偏移(offset),这一系列的类来帮助我们实现想要的效果。

只需要给需要偏移的列元素上添加类名 col-md-offset-* ( 星号代表要偏移的列组合数 ),那么具有这个类名的列就会向右偏移。

这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。例如:在列元素中添加 .col-md-offset-6 类将 .col-md-6 元素向右侧偏移了6个列(column)的宽度。

现在我们的代码是这样的:

可以实现的效果如下:

从实现的效果我们就能发现一些东西,注意 第二段的显示效果与代码 ,从那里我们可以发现:使用 col-md-offset-* 对列进行向右偏移时,要保证列与偏移列的总数不超过,不然会致列断行显示。

其实原因也很简单:因为该类是对于列设置 margin-left ,并且我们在上面的源码展示中,也可以看有每一列都有着 float:left 的属性,从这些地方我们就不难发现在(偏移+列宽)超过时,为何会换行显示了

列排序

列排序其实就是改变列的方向(顺序),就是改变左右浮动,并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名 col-md-push-* 和 col-md-pull-* (和上面一样,星号代表移动的列组合数)。

Bootstrap仅通过设置left和right来实现定位效果。通过查看源码,我们可以看到基本设置比较简单,如下:

还是继续看看我们的实际效果吧!代码如下

我们可以发现列的位置已经发生了改变

列嵌套

Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行( .row )容器,然后在这个行容器中插入列(像前面介绍的一样使用列)。但在列容器中的行容器( .row ),宽度为%时,就是当前外部列的宽度。(其实就是在列中嵌套多个列,下面会有实际效果展示)

注意:被嵌套的行( .row )所包含的列(column)的个数不能超过(其实,没有要求你必须占满列 -_- )。

我们现在有这样一个需求:

创建一个8-4列网格。(备注:以中屏md(px)为例)。在第一个8列网格中插入8-4列网格。在第二个4列网格中插入9-3列网格。

效果如下:

该如何实现呢?

是不是很简单呢?当然为了完全实现和效果图一样的展示,我们还需要对CSS进行一些添加:

以上所述是小编给大家分享的Bootstrap入门书籍之(三)栅格系统,希望对大家有所帮助!

Bootstrap入门书籍之(四)菜单、按钮及导航 我们接下来要学习的东西呢,是Bootstrap为我们提供的一些组件,这些组件的使用非常简单,可以方便快捷帮助我们搭建网站,并且能达到一个不错的显

Bootstrap入门书籍之(五)导航条、分页导航 导航条导航条(navbar)和上一节介绍的Bootstrap入门书籍之(四)菜单、按钮及导航。导航(nav),就相差一个字,多了一个条字。其实在Bootstrap框架中

JavaScipt中栈的实现方法 接下来就是数据结构的第一部分,栈。栈是一种遵从后进先出原则(LIFO,全称为LastInFirstOut)的有序集合。栈顶永远是最新的元素。举个例子就是:栈就像放

标签: bootstrap入门教程

本文链接地址:https://www.jiuchutong.com/biancheng/380369.html 转载请保留说明!

上一篇:Bootstrap入门书籍之(一)排版(bootstrap基础教程书籍)

下一篇:Bootstrap入门书籍之(四)菜单、按钮及导航(bootstrap教材)

  • 金税盘入账的会计分录
  • 农产品税率9%还是免税
  • 税务师考试税法一章节
  • 以前多计提的税款怎么办
  • 所得税申报表收入
  • 加油充值卡发票能入账吗
  • 设备配件定义
  • 管家婆未开账可以录入单据吗
  • 应收账款占用资金的应计利息公式
  • 企业怎样才能做好信用信息修复?
  • 坏账准备期末应有余额怎么算
  • 金税三期申报代扣代缴增值税流程步骤分析
  • 财产转让所得税计算方法
  • 增值税普通发票查询真伪
  • 营业外收入做多了怎么办
  • 安家费要还吗
  • 没有道路许可证的车子怎么处罚
  • 小规模免增值税印花税用交吗
  • 企业的不征税收入用于支出所形成的资产,其计算的折旧
  • 移动电子发票显示无法开具怎么获取发票
  • 收据怎么写比较规范
  • 如何解决心脏供血不足
  • php declare函数
  • elccest.exe是间谍广告程序吗 elccest进程有什么作用
  • 单位银行结算账户属于活期存款账户
  • 库存现金清点怎么做
  • 微信小程序不方便
  • php正则替换字符串
  • framework core
  • 头歌HTML基础第一关初识HTML
  • php单例模式的简写是什么
  • Thinkphp 中 distinct 的用法解析
  • 如何使用php给图片命名
  • push添加对象
  • 进料核销应调整哪些项目
  • 开办费新会计准则
  • 数据库管理中负责数据模式定义的数据库语言是
  • 企业转让商品取得的税收
  • 工资走公账和私账哪个好
  • 将自产产品用于赠送
  • sql将一个表中的值赋给另一个表
  • 计提工资和发放工资可以在一张凭证上吗
  • 公司名下的车怎样领免检标志
  • 房产契税一般什么时间交
  • 出让价格不得低于基准地价
  • 软件开发公司一般薪水多少
  • 印花税计提金额怎么算
  • 长期合同价格怎么定
  • 网络使用费属于办公费吗为什么
  • 应付账款的主要风险点
  • 保险公司收车船税返还手续费犯罪
  • 纳税申报怎么查
  • 会计错账的更正方法
  • mysql数据库操作题
  • win10 rs5
  • 索尼vpcea200c笔记本
  • mac邮件应用规则
  • macxi
  • linux系统中软件包分类
  • dell power manager是什么
  • centos 安装7z
  • searchnav.exe - searchnav是什么进程 有什么用
  • linux php教程
  • win10可以关闭的功能
  • WIN10安装网络打印机
  • 一个监控网卡流量够用吗
  • node js php
  • html页面头部
  • AngularJS中controller控制器继承的使用方法
  • JavaScript获取网址之后跳转
  • js限制输入字符长度
  • shell脚本配置环境
  • Python工程师面试题 与Python Web相关
  • 安卓模拟器比手机快吗
  • 推荐javascript教程
  • jquery修改css
  • 河北发票查询真伪查询
  • 广东省电子税务局app
  • 天津环保网站官网
  • 电子专票在哪里接收
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设