Bulma CSS框架教程

Bulma CSS – 简介

Bulma CSS – 开始

Bulma CSS – CSS类

Bulma CSS – 模块化

Bulma CSS – 响应式


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

手机显示

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

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

如果想在手机上强制水平布局显示,可以给columnslevelis-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. KMP(模板)

    kmp算法是解决单模匹配问题的算法,难点在于求next[]数组 求next[]数组:对于模板串的所有前缀子串的最长公共前后缀的长度,就是next[]数组的值 eg:主串为cbbbaababac  子串 ...

  2. Pycharm设置默认HTML模板

    Pycharm设置默认HTML模板 Bootstrap导入链接 <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/ ...

  3. 四、java基础-面向过程_对象_类中可出现的因素

    1.面向过程和面向对象区别: 1)面向过程:开发一个应用程序.一个项目,必须先了解整个过程,了解各个步骤.模块间的因果关系,使的面向过程方式去开发程序时,代码和代码之间的关联程度是非常强.所以其中任何 ...

  4. 使用Linux命令修改数据库密码

    通过登录mysql系统,# mysql -uroot -pEnter password: [输入原来的密码]mysql>use mysql;mysql> update user set p ...

  5. Metasploit学习笔记——移动环境渗透测试

    书364页配置假冒AP步骤,因为没有无线网卡,先跳过这个实验.

  6. unity3d Asset Store下载的资源在哪?

    win7 C:\Users\(用户名)\AppData\Roaming\Unity\Asset Store\ 用户名为中文的时候,是不能直接在unity3d中打开的.

  7. 2017 北京网络赛 E Cats and Fish

    Cats and Fish 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 There are many homeless cats in PKU campus. They ...

  8. Python学习笔记之基础篇(-)python介绍与安装

    Python学习笔记之基础篇(-)初识python Python的理念:崇尚优美.清晰.简单,是一个优秀并广泛使用的语言. python的历史: 1989年,为了打发圣诞节假期,作者Guido开始写P ...

  9. docker-jenkins SSH Publishers时踩的坑

    source相对路径问题,不是 /var/jenkins_home/workspace/build-renren/target/renren-fast.war  或环境变量,而是  target/re ...

  10. ZCGL项目解析——概述

    模块清单 微服务模块:routeservice.eurekaservice.configservice 数据服务模块:fdfsservice.hbaseservice 工具服务模块:common 系统 ...