Bulma 源码解析之 .container 类
Bulma 的 .container
类是这样实现的。
.container
position: relative
// 不设置桌面以下设备的 container
+desktop
margin: 0 auto
width: $desktop - 40px
// 修饰类
// .container.is-fluid 不固定长度、左右两边保留 20px 的外边距,在桌面+设备上有效
&.is-fluid
margin: 0 20px
max-width: none
width: auto
+widescreen
width: $widescreen - 40px
+fullhd
width: $fullhd - 40px
- 在桌面设备中,
.container
的宽度固定为“$desktop - 40px”,也就是960px
,然后居中显示。 - 在宽屏设备中,
.container
的宽度固定为“$widescreen - 40px”,也就是1152px
,然后居中显示。 - 在大屏设备中,
.container
的宽度固定为“$fullhd - 40px”,也就是1344px
,然后居中显示。 - 除此之外,在桌面设备中,如果
.container
还额外指定了.is-fluid
类,那么宽度就不再固定,不过左右两边各有了20px
的外边距。
{提示} 关于
$desktop
、$widescreen
和$fullhd
的变量定义可以在 这里 看到。
(完)
Bulma 源码解析之 .container 类的更多相关文章
- Bulma 源码解析之 .columns 类
{说明} 这一部分的源码内容被我简化了,另外我还额外添加了一个辅助类 is-grow. .columns // 修饰类 &.is-centered justify-content: cente ...
- Mybatis源码解析3——核心类SqlSessionFactory,看完我悟了
这是昨晚的武汉,晚上九点钟拍的,疫情又一次来袭,曾经熙熙攘攘的夜市也变得冷冷清清,但比前几周要好很多了.希望大家都能保护好自己,保护好身边的人,生活不可能像你想象的那么好,但也不会像你想象的那么糟. ...
- AOP源码解析:AspectJAwareAdvisorAutoProxyCreator类的介绍
AspectJAwareAdvisorAutoProxyCreator 的类图 上图中一些 类/接口 的介绍: AspectJAwareAdvisorAutoProxyCreator : 公开了Asp ...
- Netty源码解析 -- 内存对齐类SizeClasses
在学习Netty内存池之前,我们先了解一下Netty的内存对齐类SizeClasses,它为Netty内存池中的内存块提供大小对齐,索引计算等服务方法. 源码分析基于Netty 4.1.52 Nett ...
- AOP源码解析:AspectJExpressionPointcutAdvisor类
先看看 AspectJExpressionPointcutAdvisor 的类图 再了解一下切点(Pointcut)表达式,它指定触发advice的方法,可以精确到返回参数,参数类型,方法名 1 pa ...
- java源码解析之Object类
一.Object类概述 Object类是java中类层次的根,是所有类的基类.在编译时会自动导入.Object中的方法如下: 二.方法详解 Object的方法可以分成两类,一类是被关键字fin ...
- java源码解析之String类(二)
上一节主要介绍了String类的一些构造方法,主要分为四类 无参构造器:String(),创建一个空字符串"",区别于null字符串,""已经初始化,null并 ...
- java源码解析之String类(一)
String是我们接触最多的类,无论是学习中还是工作中,基本每天都会和字符串打交道,从字符串本身的各种拼接.切片.变形,再到和其他基本数据类型的转换,几乎无时无刻都在使用它,今天就让我们揭开Strin ...
- Spring源码解析 – @Configuration配置类及注解Bean的解析
在分析Spring 容器创建过程时,我们知道容器默认会加载一些后置处理器PostPRocessor,以AnnotationConfigApplicationContext为例,在构造函数中初始化rea ...
随机推荐
- /dev/root: No such file or directory
/*************************************************************************** * /dev/root: No such fi ...
- JSplitPane的简单实现
import java.awt.Color; import javax.swing.ImageIcon; import javax.swing.JFrame; import javax.swing.J ...
- rabbitmq的vhost与用户管理
当我们在创建用户时,会指定用户能访问一个虚拟机,并且该用户只能访问该虚拟机下的队列和交换机,如果没有指定,默认的是”/”;一个rabbitmq服务器上可以运行多个vhost,以便于适用不同的业务需要, ...
- Pix mesa 自动化测试
最近在准备PIX的认证, 需要进行mesa测试. 但是Mesa的标准测试工具中没有针对PIX的TestCase, 只是提到NIST的web测试.路径为:http://pixpdqtests.nist. ...
- (二 )结构ztree的 ajax交互的简单使用
在第一篇的基础上更改,在实际项目中的使用. 一:HTML 代码: <SCRIPT type="text/javascript"> var setting = { asy ...
- ORA-28547:connection to server failed, probable Oracle Net admin error错误,解决方法
当用navicat连接oralce数据库时报ORA-28547错误时,直接懵逼了,上网查了资料说是navicat自带的oci.dll文件的版本和服务器端的oralce数据库的版本不一致造成的. 修改O ...
- 蓝桥杯 算法训练 ALGO-140 P1101
算法训练 P1101 时间限制:1.0s 内存限制:256.0MB 有一份提货单,其数据项目有:商品名(MC).单价(DJ).数量(SL).定义一个结构体prut,其成员是上面的三项数据.在主函 ...
- Linux应用程序调用其他程序执行
一.system 1.作用 在Linux应用程序中调用另一个程序: 2.用法 system("/sbin/ifconfig"): 二.popen 1.作用 调用另一个程序执行,同时 ...
- 使用Asset Pipeline管理rails生产环境静态资源实现步骤
1. 修改项目中指向静态资源文件的链接 a) 访问静态资源文件 <%= stylesheet_link_tag "application", media: &q ...
- 第十章 Executor框架
在Java中,使用线程来异步执行任务.Java线程的创建与销毁需要一定的开销,如果我们为每一个任务创建一个新线程来执行,这些线程的创建与销毁将消耗大量的计算资源.同时,为每一个任务创建一个新线程来执行 ...