Bulma CSS框架教程

Bulma CSS – 简介

Bulma CSS – 开始

Bulma CSS – CSS类

Bulma CSS – 模块化

Bulma CSS – 响应式

Bulma是一个支持响应式的框架，在电脑、手机、平板各种尺寸的屏幕上都可以完美呈现网页。

手机显示

Bulma对于手机显示作了优化：

  • columns、level等水平布局在手机上将会垂直排列显示
  • nav导航菜单在手机上将被折叠

如果想在手机上强制水平布局显示，可以给columns、level加is-mobile修饰符。

屏幕界线

Bulma规定了5个屏幕宽度界线，区分不同类型的屏幕：

  • mobile/手机: <= 768px
  • tablet/平板: 769px ~ 1023px
  • desktop/桌面: 1024px ~ 1215px
  • widescreen/宽屏: 1216px ~ 1407px
  • fullhd/全屏高清: >= 1408px

禁用某些屏幕界线

默认情况下，sass源代码中$widescreen-enabled和$fullhd屏幕界线是启用的，可以通过如下修改禁用:

// Disable the widescreen breakpoint

$widescreen-enabled: false

// Disable the fullhd breakpoint

$fullhd-enabled: false

SASS变量

在SASS源代码中，响应式支持相关的一些变量定义如下：

变量名 类型 默认真 计算值
$gap size 64px
$tablet size 769px
$desktop computed 960px + (2 * $gap)
$widescreen computed 1152px + (2 * $gap)
$fullhd computed 1344px + (2 * $gap)

Bulma CSS - 响应式的更多相关文章

  1. html响应式布局，css响应式布局，响应式布局入门

    html响应式布局,css响应式布局,响应式布局入门 >>>>>>>>>>>>>>>>>>& ...

  2. CSS响应式布局到底是什么？

    响应式布局是最近几年在前端开发中非常火热的词,它是相对于固定像素大小的网页而言的,那么CSS响应式布局到底是什么?顾名思义,响应式布局就是网页能够响应各种各样不同分辨率大小的设备,能够将网页很好的呈献 ...

  3. css - 响应式

    css - 响应式 移动设备尺寸 移动设备的尺寸各不相同,大体上可以做如下划分: 768px以下的是手机屏幕 768px-991px是平板ipad屏幕 992px-1199是大平板屏幕 1200极其以 ...

  4. css响应式布局RWD

    响应式布局结合了三大理念: 1)用于布局的弹性网络(百分比定义宽度) 2)用于图片和视频的弹性媒体 3)媒体查询 在布局中,需要注意的点有: 1)尽量用min-width/max-width,max- ...

  5. CSS 响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...

  6. CSS响应式web设计

    参考 1. 响应式web设计之CSS3 Media Queries http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html 2. 用 ...

  7. css响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...

  8. JS/CSS 响应式样式实例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. css 响应式（媒介查询）

    1.CSS 来实现响应式 CSS实现响应式网站的布局要用到的就是CSS中的媒体查询接下来来简单介绍一下: @media 类型 and (条件1) and (条件二){css样式} <link r ...

随机推荐

  1. Spring注解@ConfigurationPropertie

    @ConfigurationPropertie作用 参考的博客 springboot中@ConfigurationProperties注解的工作原理 @ConfigurationProperties是 ...

  2. Python学习第三课——运算符

    # 运算符 + - * / **(幂) %(取余) //(取整) num=9%2 print("余数为"+(str)(num)) #运算结果为 1 num1=9//2 print( ...

  3. python2中新式类和经典类的多重继承调用顺序

    class A: def foo(self): print('called A.foo()') class B(A): pass class C(A): def foo(self): print('c ...

  4. 【LOJ2513】「BJOI2018」治疗之雨

    题意 你现在有 \(m+1\) 个数:第一个为 \(p\) ,最小值为 \(0\) ,最大值为 \(n\) :剩下 \(m\) 个都是无穷,没有最小值或最大值.你可以进行任意多轮操作,每轮操作如下: ...

  5. 三 进制、精度，Java的类型转换

    进制的表示: 0b010 :  二进制表示形式:前面+0n 0100  : 八进制表示形式: 前面+0 0x001 : 16进制表示形式:前面+0x 计算机以补码的方式进行运算 进制的转换: 10进制 ...

  6. LR、SVM、RF、GBDT、XGBoost和LightGbm比较

    正则化 L1范数 蓝色的是范数的解空间,红色的是损失函数的解空间.L2范数和损失函数的交点处一般在坐标轴上,会使\(\beta=0\),当然并不一定保证交于坐标轴,但是通过实验发现大部分可以得到稀疏解 ...

  7. mysql 子查询问题

    今天在做子查询的时候发现运行报错, 我的代码是select* from (....) device des ,我一直以为的是device是表名,然后dec是别名,后面问了同事才知道from(...)这 ...

  8. linux终端出现＂-bash-2.05b$＂现象的解决方法

    参考:http://blog.chinaunix.net/uid-22823163-id-3295220.html

  9. P10891089 狼人杀-简单版

    1089 狼人杀-简单版 (20分)   以下文字摘自<灵机一动·好玩的数学>:“狼人杀”游戏分为狼人.好人两大阵营.在一局“狼人杀”游戏中,1 号玩家说:“2 号是狼人”,2 号玩家说: ...

  10. Rabbitmq与spring整合之重要组件介绍——AMQP声明式配置&RabbitTemplate组件

    上一节是使用rabbitAdmin的管理组件进行声明队列,交换器,绑定等操作,本节则是采用AMQP声明式配置来声明这些东西.AMQP声明主要是通过@Bean注解进行的. 配置: package com ...