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;层次结构…

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目…

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

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 …

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;可以看到微软贯彻开源战略的实际行动。…

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…

JavaFX UI控件教程(十八)之Progress Bar和Progress Indicator

翻译自 Progress Bar and Progress Indicator 在本章中&#xff0c;您将了解进度指示器和进度条&#xff0c;以及可视化JavaFX应用程序中任何操作进度的UI控件。 本ProgressIndicator类及其直接子类ProgressBar所提供的功能&#xff0c;以表明特定的任务是处理和检测是如何工…

你不知道ADo.Net中操作数据库的步骤【超详细整理】

1.先创建数据库连接字符串&#xff1a; string strcon "Data Source.;Initial CatalogschoolDB;Integrated SecurityTrue";2.创建SqlConnection对象&#xff0c;需要注意的是SqlConnection对象在using System.Data.SqlClient;命名空间中。 SqlConnection conn new…

C# 7.2和8.0路线图

C# 7.2和8.0的许多新功能已经列入了计划&#xff0c;其中包括空引用类型和有限形式的多重继承。 只读引用和只读结构体 [7.2原型] 首先提到的是只读引用和结构体。简单来讲&#xff0c;这项特性使得C#能够使用类似const的参数来提高性能。像我们所知道的“ref只读参数”和简单…

MyBatis中的原理

01Mybatis的运行原理 运行过程中涉及到的类 1.1 Resources MyBatis中IO流的工具类 1.1 加载配置文件 1.2 SqlSessionFactoryBuilder() 构建器 1.2.1 作用:创建SqlSessionFactory接口的实现类 1.3 XMLConfigBuilder MyBatis全局配置文件内容构建器类 1.3.1 作用负责读取流内容并…

JavaFX UI控件教程(十九)之Hyperlink

翻译自 Hyperlink 本章介绍Hyperlink用于将文本格式化为超链接的控件。 所述Hyperlink类表示另一种类型的Labeled控制。图18-1演示了默认超链接实现的三种状态。 图18-1超链接控制的三种状态 创建超链接 示例18-1中显示了生成超链接的代码片段。 例18-1典型的超链接 Hype…

杨辉三角形

package com.wdl.day07;/*** 创建人 wdl* 创建时间 2021/8/8* 描述*/ public class YangHuiTest {public static void main(String[] args) {int[][] yanghui new int[10][];for (int i 0; i < yanghui.length; i) {yanghui[i] new int[i 1];yanghui[i][0] 1;yanghui[i…

致我们最最最最最最最最最最最最最优秀的班主任——王老师

今天不说java&#xff0c;也不表C#&#xff0c;只来叙叙我们最最最最最最最最最最最最最优秀的班主任————王老师。亲爱的王老师&#xff0c;一起为3班孩子们的学业共同努力而使我倍感荣幸。回想从我们班报道以来&#xff0c;大大小小的各种奖状铺满那墨绿黑板的右侧&#x…