Boostrap技能点整理之【网格系统】

今天我们来串串bootstrap总的网格系统,说到网格系统,依稀记得当时教程上不叫网格,而叫栅格,我总觉得这个栅(shān )读起来不得劲,就读他的另一个音,栅(zhà)格,每次遇到就读栅(zhà)格系统栅(zhà)格系统

好了,闲言少叙,接下来我们看看bootstrap中的网(栅)格系统。

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列,这12列也是可以随便拆分与组合的,即:

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的:

  • 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。

  • 使用行来创建列的水平组。

  • 内容应该放置在列内,且唯有列可以是行的直接子元素。

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

    LESS 混合类可用于更多语义布局。

  • 列通过内边距(padding)来创建列内容之间的间隙。

    该内边距是通过 .rows 上的外边距(margin)取负,表示第一列和最后一列的行偏移。

  • 网格系统是通过指定您想要横跨的十二个可用的列来创建的。

    例如,要创建三个相等的列,则使用三个 .col-xs-4

下面我们可以来写一个基本的网格结构:

<div class="container"><div class="row"><div class="col-md-1">1等分</div><div class="col-md-1">1等分</div><div class="col-md-1">1等分</div><div class="col-md-1">1等分</div><div class="col-md-1">1等分</div><div class="col-md-1">1等分</div><div class="col-md-1">1等分</div><div class="col-md-1">1等分</div><div class="col-md-1">1等分</div><div class="col-md-1">1等分</div><div class="col-md-1">1等分</div><div class="col-md-1">1等分</div></div>
</div>

运行结果是这样的:

我们从图中不难看出,整个网格系统将会浏览器的宽度分为了12等分,那么这12个等分可不可以进行随便组合或者随便嵌套呢?答案是肯定的。

列组合

比如我们可以这样:

<div class="row"><div class="col-md-3">3等分</div><div class="col-md-3">3等分</div><div class="col-md-3">3等分</div><div class="col-md-3">3等分</div></div>

也可以这样:

<div class="row"><div class="col-md-5">5等分</div><div class="col-md-7">7等分</div></div>

列偏移

或者这样:

<div class="row"><div class="col-md-3">3等分</div><div class="col-md-3 col-md-offset-6">3等分</div></div>

上面这段代码中有个新知识点,即:col-md-offset表示列偏移,偏移多少取决于后面的数字,例如本段代码就是向右偏移6等分。(中间的空格部分为6等分,大家可以自行算算)

下面再来一个关于列偏移的案例,加深一下理解:

<div class="row"><div class="col-md-2">2等分</div><div class="col-md-2 col-md-offset-1">2等分</div><div class="col-md-2 col-md-offset-2">2等分</div><div class="col-md-2 col-md-offset-1">2等分</div></div>

(空格部分已经标注明白)

除了组合之外,我们还可以进行对网格的嵌套:

列嵌套

<div class="row"><div class="col-md-6">6等分<div class="col-md-12" style="background: mediumpurple;">12等分</div><div class="col-md-6" style="background: green;">6等分</div><div class="col-md-6" style="background: red;">6等分</div><div class="col-md-4" style="background: yellow;">4等分</div><div class="col-md-4" style="background: greenyellow;">4等分</div><div class="col-md-4" style="background: darkgoldenrod;">4等分</div></div><div class="col-md-6" style="background: red;">6等分</div></div>

说明一下:最外面的大的是两个6等分,左边的6等分里面:

  • 第一行分为1个12等分

  • 第二行分为2个6等分

  • 第三行分为3个4等分

  • 下面我相信大家会往下接了,例如4个3等分,6个2等分以及12个1等分

列排序

还可以对网格进行排序(稍微复杂点)

<div class="row"><div class="col-md-1">1等分</div><div class="col-md-1 col-md-offset-1">3等分</div><div class="col-md-1 col-md-offset-1">5等分</div><div class="col-md-1 col-md-offset-1">7等分</div><div class="col-md-1 col-md-offset-1">9等分</div><div class="col-md-1 col-md-offset-1">11等分</div></div><div class="row"><div class="col-md-1 col-md-push-6">右推6等分</div><div class="col-md-1">1等分</div><div class="col-md-1">1等分</div><div class="col-md-1">1等分</div><div class="col-md-1 col-md-pull-2" style="background: red;">左拉2等分</div></div>

在分析运行结果之前,先看两个陌生词:

  • push

    推的意思,向右推,后面的数字代表拉的量

  • pull

    拉的意思,向左拉,后面的数字代表拉的量

上面这段代码就是:

  • 将第一个网格向右推6等分,于是就到了7等分的位置;

  • 将第5个等分向左拉2个网格,于是就到了3等分的位置

这样就好理解了吧。

以上就是今天整理的内容,有想法的可以留言至文章下面哦~

往期推荐

Boostrap技能点整理之【bootstrap简介】

2020-05-25

C#基础知识详解之【字段与属性】

2020-05-24

C#基础知识详解之【文件的输入与输出】

2020-05-23

C#基础知识详解之【值类型和引用类型】

2020-05-21

C#基础知识详解之【异常处理】

2020-05-22

公众号:雄雄的小课堂

CSDN:穆雄雄的博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/325070.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaFX UI控件教程(十四)之Tree View

翻译自 Tree View 在本章中&#xff0c;您将学习如何在JavaFX应用程序中构建树结构&#xff0c;向树视图添加项&#xff0c;处理事件以及通过实现和应用单元工厂来自定义树单元。 包的TreeView类javafx.scene.control提供了层次结构的视图。在每个树中&#xff0c;层次结构…

MyBatis中多表查询(多表查询语句实现)重点

–查询所有学生所在班级的信息&#xff08;一对一&#xff09; –班级查询学生的操作&#xff08;一对多&#xff09; –遇到的问题&#xff1a; 查询的SQL语句非常的简单&#xff0c;但是如何把查询的数据接受这个就是一个问题 [1]把每一个实体中的字段拿出来组建成一个新的实…

ASP.NET Core 指定环境发布(hosting environment)

ASP.NET Core 应用程序发布命令&#xff1a; dotnet publish [<PROJECT>] [-f|--framework] [-r|--runtime] [-o|--output] [-c|--configuration] [--version-suffix] [-v|--verbosity] [-h|--help] 发布示例命令&#xff08;生成在bin/release/netcoreapp1.1/publish目…

ssl1626-花店橱窗布置【日常dp】

Description 假设你想以最美观的方式布置花店的橱窗。你有F束花&#xff0c;每束花的品种都不一样&#xff0c;同时&#xff0c;你至少有同样数量的花瓶&#xff0c;被按顺序摆成一行。花瓶的位置是固定的&#xff0c;并从左至右&#xff0c;从1至V顺序编号&#xff0c;V是花瓶…

求素数为什么到平方根就行了

package com.wdl.day05;/* 100000以内的所有质数的输出。实现方式一 质数&#xff1a;素数&#xff0c;只能被1和它本身整除的自然数。-->从2开始&#xff0c;到这个数-1结束为止&#xff0c;都不能被这个数本身整除。对PrimeNumberTest.java文件中质数输出问题的优化 */ pu…

JavaFX UI控件教程(十五)之Combo Box

翻译自 Combo Box 本章介绍如何在JavaFX应用程序中使用组合框。它讨论了可编辑和不可编辑的组合框&#xff0c;教您如何跟踪可编辑组合框中的更改并处理它们上的事件&#xff0c;并解释如何使用单元工厂来更改组合框的默认实现。 组合框是用户界面的典型元素&#xff0c;使…

Boostrap技能点整理之【按钮样式】

昨天我们看了看bootstrap的网&#xff08;栅&#xff09;格系统&#xff0c;想必都对bootstrap网格系统有个大致的了解&#xff0c;今天我们再来看看bootstrap的按钮组合。按钮的样式在boostrap中&#xff0c;任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 …

MyBatis中的缓存

01 Mybatis中的缓存简介 缓存的好处&#xff1a;只是查询才有缓存 &#xff08;增删改没有缓存的&#xff09;&#xff0c;可以增块访问的速度 sqlsession级缓存 &#xff08;一级缓存&#xff09; 默认开启的 所有的操作是公用同一个SQLsession对象并且执行的是同一条SQL语句的…

基于VS2017的Docker Support体检ASP.NET Core站点的Docker部署

最近在学习如何用 Docker 部署生产环境中的 ASP.NET Core 站点&#xff0c;作为一个 Docer 新手&#xff0c;从何处下手更容易入门呢&#xff1f;一开始就手写 Docker 配置文件&#xff08;Docfile, docker-compose.yml&#xff09;容易让人产生挫败感&#xff0c;想到 Visual …

ssl1202-滑雪【记忆化搜索法】

Description Michael喜欢滑雪百这并不奇怪&#xff0c; 因为滑雪的确很刺激。可是为了获得速度&#xff0c;滑的区域必须向下倾斜&#xff0c;而且当你滑到坡底&#xff0c;你不得不再次走上坡或者等待升降机来载你。Michael想知道载一个区域中最长底滑坡。区域由一个二维数组…

break VS continue

使用范围 循环中使用的作用(不同点) 相同点 break: 循环结构中 结束当前循环 关键字后面不能声明执行语句 continue: 循环结构中 结束当次循环 关键字后面不能声明执行语句

JavaFX UI控件教程(十六)之Separator

翻译自 Separator 本章介绍如何使用分隔符组织JavaFX应用程序的UI组件。 SeparatorJavaFX API中可用的类表示水平或垂直分隔线。它用于划分应用程序用户界面的元素&#xff0c;不会产生任何操作。但是&#xff0c;您可以设置样式&#xff0c;对其应用视觉效果&#xff0c;甚…

eclipse下载与安装步骤详解,包含解决错误(最全最详细,多图)

以前一直用的是myeclipse,今天有幸接触eclipse,那我们就先来安装的配置一下&#xff0c;下载地址&#xff1a;公众号中回复常用软件下载&#xff0c;下载完成以后就可以安装了&#xff0c;首先我们来先安装jdk1.7,打开jdk的安装包双击即可&#xff0c;直接点击下一步&#xff1…

微软中国Azure开源开发者(深圳)研讨会

时间&#xff1a;2017年6月28日 地点&#xff1a;深圳福田香格里拉大酒店 微软开发技术与云平台自从迈向开放、开源、跨平台的转型以来&#xff0c;已经受到全球开源社区们的关注。从Github 上高居世界首位的开源项目贡献数量&#xff0c;可以看到微软贯彻开源战略的实际行动。…

MyBatis中ThreadLocal

01 遇到的问题 –如果我们做一个请求时候多次使用sqlsession对象这样就会造成sqlsession 浪费&#xff0c;也就是资源浪费&#xff0c;效率也会降低 –我们需要达到的目的就是用户发出的一个请求中实现sqlsession的共享 –请求没有改变&#xff0c;线程就不会改变 –最终的目的…

洛谷P1434-滑雪【线性化Dp】

Description Michael喜欢滑雪百这并不奇怪&#xff0c; 因为滑雪的确很刺激。可是为了获得速度&#xff0c;滑的区域必须向下倾斜&#xff0c;而且当你滑到坡底&#xff0c;你不得不再次走上坡或者等待升降机来载你。Michael想知道载一个区域中最长底滑坡。区域由一个二维数组…

JavaFX UI控件教程(十七)之Slider

翻译自 Slider 在本章中&#xff0c;您将学习如何在JavaFX应用程序中使用滑块来显示和与一系列数值进行交互。 该Slider控件由一个轨道和一个可拖动的拇指组成。它还可以包括刻度线和刻度标签&#xff0c;用于指示范围的数值。图16-1显示了一个典型的滑块并指出了它的主要元…

Photoshop中将图片拖不进软件的编辑区的解决方法,超详细

今天在学习ps的过程中&#xff0c;发现我的ps怎么和人家老师的不一样&#xff0c;怎么不一样呢&#xff1f;人家老师的ps5中&#xff0c;鼠标可以直接拖到ps的编辑栏中&#xff0c;可是我的死活拖不进去。怎么办&#xff1f;怎么办&#xff1f;经过自己瞎鼓捣和上网查&#xff…

IdentityServer4 指定角色授权(Authorize(Roles=amp;quot;adminamp;quot;))

1. 业务场景 IdentityServer4 授权配置Client中的AllowedScopes&#xff0c;设置的是具体的 API 站点名字&#xff0c;也就是使用方设置的ApiName&#xff0c;示例代码&#xff1a; //授权中心配置new Client{ ClientId "client_id_1", AllowedGrantTypes G…

MyBatis中的注解

代码实现 1. Select("select * from student") 2. List<Student> selectAll(); 3. 4. Select("select * from student where sid#{param1}") 5. Student selectOne(int id); 6. 7. Insert("insert into student value…