位置: 编程技术 - 正文

Bootstrap每天必学之栅格系统(布局)(bootstrap要学到什么程度)

编辑:rootadmin

推荐整理分享Bootstrap每天必学之栅格系统(布局)(bootstrap要学到什么程度),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:bootstrap基础教程,bootstrap入门,bootstrap学习,bootstrap要学多久,bootstrap学习,bootstrap学习,bootstrap学习,bootstrap学习,内容如对您有帮助,希望把文章链接给更多的朋友!

1、栅格系统(布局)Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多列。

我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理:

网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分份(也有平分成份或份,但份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成份。

在使用的时候大家可以根据实际情况重新编译LESS(或Sass)源码来修改这个数值(也就是换成或,当然你也可以分成更多,但不建议这样使用)。

2、使用规则Bootstrap内置了一套响应式、移动设备。

1、数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。如:

2、在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如。如:

3、具体内容应当放置在列容器(column)之内,而且只有列(column)才可以作为行容器(.row)的直接子元素

4、通过设置内距(padding)从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距(margin)来抵消内距(padding)的影响

为了更好的理解Bootstrap框架的网格系统工作原理,我们来看一张草图:

简单对图解释一下:

1、最外边框,带有一大片白色区域,就是相当于浏览器的可视区域。在Bootstrap框架的网格系统中带有响应式效果,其带有四种类型的浏览器(超小屏,小屏,中屏和大屏),其断点(像素的分界点)是px、px和px。

2、第二个边框(1)相当于容器(.container)。针对不同的浏览器分辨率,其宽度也不一样:自动、px、px和px。在bootstrap.css的第行~第行进行设置:

3、2号横条阐述的是,将容器的行(.row)平分了等份,也就是列。每个列都有一个“padding-left:px”(图中粉红色部分)和一个“padding-right:px”(图中紫色部分)。这样也导致了第一个列的padding-left和最后一列的padding-right占据了总宽度的px,从而致使页面不美观,当然,如果你需要留有一定的间距,这个做法是不错的。如bootstrap.css中第行~第行所示:

4、3号横条就是行容器(.row),其定义了“margin-left”和”margin-right”值为”-px”,用来抵消第一个列的左内距和最后一列的右内距。在bootstrap.css的第行~第行可以看到:

5、将行与列给合在一起就能看到横条4的效果。也就是我们期望看到的效果,第一列和最后一列与容器(.container)之间没有间距。

横条5只是想向大家展示,你可以根据需要,任意组合列与列,只是他们的组合数之和不要超过总列数。

3、栅格选项   通过下面的截图可以比较清楚的来查看Bootstrap的栅格系统是如何在多种不同的移动设备上面进行工作的。

从上面的截图可以看出来,Bootstrap针对不同尺寸的屏幕(包括手机、平板、PC等等)设置了不同的样式类,这样让开发人员在开发时可以有更多的选择。根据我的理解:如果在一个元素上使用多个不同的上面的样式类,那么元素会根据在不同尺寸选择最合适(匹配最理想的)的样式类。简单的举例进行说明:比如在一个元素上我们使用了两个样式类:.col-md-和.col-lg。可以对照上面的截图来看

第一种情况:尺寸》=px;那么会选择.col-lg。

第二种情况:尺寸》=px 并且尺寸《=px;那么会选择.col-md。

第三种情况:如果尺寸《px;那么这两个样式类都将不会作用于元素上。

4、基本用法  网格系统用来布局,其实就是列的组合。Bootstrap框架的网格系统中有四种基本的用法。由于Bootstrap框架在不同屏幕尺寸使用了不同的网格样式,在这一节中所涉及到的示例,我们都以中屏(px)为例进行介绍,其他屏幕的使用也类似这一种。

1)、列组合

Bootstrap每天必学之栅格系统(布局)(bootstrap要学到什么程度)

列组合简单理解就是更改数字来合并列(原则:列总和数不能超),有点类似于表格的colspan属性,例如:

使用上面的结构,你将看到下图的效果:

实现列组合方式非常简单,只涉及两个CSS两个特性:浮动与宽度百分比。在bootstrap.css文件的第行~行:

5、列偏移有的时候,我们不希望相邻的两个列紧靠在一起,但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移(offset)功能来实现。使用列偏移也非常简单,只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。例如,你在列元素上添加“col-md-offset-4”,表示该列向右移动4个列的宽度。

如上面的示例代码,得到的效果如下

实现原理非常简单,就是利用十二分之一(1/)的margin-left。然后有多少个offset,就有多少个margin-left。在bootstrap.css中第行~行所示:

注意:

不过有一个细节需要注意,使用”col-md-offset-*”对列进行向右偏移时,要保证列与偏移列的总数不超过,不然会致列断行显示,如:

<div class="row"> <div class="col-md-3">.col-md-3</div> <div class="col-md-3 col-md-offset-3">col-md-offset-3</div> <div class="col-md-4">col-md-4</div></div>上面代码中列和偏移列总数为3+3+3+4 = >,所以发生了列断行。

如上面的示例代码,得到的效果如下

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

我们来看一个简单的示例:

默认情况之下,上面的代码效果如下:

“col-md-4”居左,“col-md-8”居右,如果要互换位置,需要将“col-md-4”向右移动8个列的距离,也就是8个offset ,也就是在“<div class=“col-md-4”>”添加类名“col-md-push-8”,调用其样式。

也要将“col-md-8”向左移动4个列的距离,也就是4个offset,在“<div class=”col-md-8”>”上添加类名“col-md-pull-4”:

Bootstrap仅通过设置left和right来实现定位效果。在boostrap.css文件的第行~第行可以看到具体的代码:

7、列的嵌套Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行(row)容器,然后在这个行容器中插入列(像前面介绍的一样使用列)。但在列容器中的行容器(row),宽度为%时,就是当前外部列的宽度。来看一个简单示例:

效果如下:

注意:嵌套的列总数也需要遵循不超过列。不然会造成末位列换行显示。

本文系列教程整理到:Bootstrap基础教程 专题中,欢迎点击学习。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

本文都是通过最简单的案例,来剖析案例中涉及到的布局要点,希望对大家的学习有所帮助。

使用Javascript写的小游戏 最近心血来潮,项目结束了,使用javascript写个小游戏,练练收吧,写的不好还请各位大侠给出批评建议。HTML代码如下!DOCTYPEhtmlhtmlheadtitle/titlemetacharset="u

Bootstrap每天必学之下拉菜单 一、下拉菜单(基本用法)小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,它对应的文件:LESS版本:对应的源码

谈谈js中的prototype及prototype属性解释和常用方法 prototype是javascript中笔记难理解的一部分内容,下面通过几个关键知识点给大家讲解js中的prototype。具体内容请看下文详情。1原型法设计模式在.Net中可以

标签: bootstrap要学到什么程度

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

上一篇:谈谈encodeURI和encodeURIComponent以及escape的区别与应用(code encode的区别)

下一篇:使用Javascript写的2048小游戏(javascript编写程序)

  • 包装运杂费结转生产成本会计分录
  • 结转本月销售材料实际成本分录
  • 差旅费包括哪些费用
  • 资产负债表固定资产项目包括哪些
  • 原材料暂估入库的账务处理有哪些
  • 企业如何实现合理利润
  • 房地产企业所得税汇算清缴
  • 增值税建筑业税率几次调整
  • 固定资产的折旧费用计入什么科目
  • 企业固定资产没提折旧怎么办
  • 收到海外商务退税如何做账?
  • 公司造成损失要员工承担吗
  • 建筑业企业所得税2%
  • 增值税怎么转
  • 滴滴出行电子发票备注怎么写
  • 出口免税金额
  • 无法收回的款项摘要怎么写
  • Win11 Build 10.0.22000.51 预览版ISO镜像下载汇总(苹果M1也可用)
  • 记账凭证的摘要怎么填写
  • Proxmox ve(PVE) 显示CPU和硬盘温度、UPS信息
  • 如何给电脑重装系统教程
  • 深度学习和日常代码中遇到的报错汇总及解决方案,持续更新中。。。。
  • 公司转让债务债权协议
  • php如何调用接口
  • 红字发票负数要怎么抵掉
  • 银行转来委托收款
  • 用银行存款支付前欠货款
  • php 随机数
  • 最优化模型的优点
  • php连接数据库的基本步骤是什么
  • 城建税减征50%
  • 深度学习知识点简单概述【更新中】
  • php源码抓取工具
  • 利润表主营业务成本怎么算
  • 卖出周转材料的分录怎么做
  • 全年累计个税扣除公式
  • 航天信息服务费的会计分录
  • mysql联合索引使用规则
  • 阿里云安装centos8
  • 季度利息收入分录
  • 电子汇票提示付款申请
  • win2008iis安装
  • 使用SQL查询学生的姓名
  • 信用减值损失会影响营业利润吗
  • sql去除重复项
  • 分组 sql
  • 固定资产计入管理费用就不用折旧了吗
  • 固定资产盘盈为何要交所得税
  • 外企可以申请高新技术
  • 超市购物小票可以入账吗
  • mssqlserver怎么用
  • 取得虚开增值税专用发票罪量刑标准
  • 行政事业单位核销固定资产的账务处理
  • 商标权的入账价值有哪些
  • 增值税进项税额抵扣期限最新
  • 分月摊销怎么处理
  • 跨年做进项税额转出
  • 企业外购的固定资产应该怎样进行会计核算
  • mysql数据库简单介绍
  • mysql2002解决办法
  • 如何快速找到注册的软件
  • ubuntu源代码
  • 苹果MAC电脑如何设置开机密码
  • win8 cmd在哪
  • windows8设置自动关机
  • lowleverfatal error怎么解决
  • win7桌面没有了怎么办
  • windows10运用
  • Cocos2d-JS中JavaScript继承
  • js移动到指定位置
  • python用于读取文本文件内容的方法
  • jquery显示div
  • 通过jquery实现页面的动画效果(实例代码)
  • sqlyog使用
  • 平谷大集时间表2022
  • 股权转让怎么计算个人所得税
  • 收到虚开增值税专用发票怎么处理
  • 税务局登记是什么
  • 土地买卖谈判开场陈述
  • 关于船舶吨税的最新法律规范
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设