Bulma CSS框架教程

Bulma CSS – 简介

Bulma CSS – 开始

Bulma CSS – CSS类

Bulma CSS – 模块化

Bulma CSS – 响应式


Bulma是一个纯粹的CSS框架,没有任何JavaScript代码,最终生成的只是一个简单的.css文件:

https://github.com/jgthms/bulma/blob/master/css/bulma.css

Bulma的原则是不直接对标签设置样式,而是通过css类,让开发人员选择是否应用Bulma样式。例如 <input type="text">,如果不设置css类,是没有Bulma的样式效果的,只有当设置.input css类后才有:<input type="text" class="input">

Bulma只在2种特殊情况下,直接对标签设置样式:

  • 重置页面样式:generic.sass
  • 文本内容的样式(如所见即所得):.contentcss类包含的内容

主要的CSS类

Bulma中主要包含了以下几大类的css定义

  • 修饰符
  • 分列
  • 布局
  • 表单
  • 元素
  • 组件

修饰符

可以方便地设置元素的颜色、大小等。

如下面定义了一个按钮,is-primary就是修饰符

<a class="button is-primary">
Button
</a>

分列

水平分列相关的css类。

示例:

<div class="columns">
<div class="column">
First column
</div>
<div class="column">
Second column
</div>
<div class="column">
Third column
</div>
<div class="column">
Fourth column
</div>
</div>

布局

布局相关的CSS

布局css类 container示例:

<div class="container">
<div class="notification">
This container is <strong>centered</strong> on desktop.
</div>
</div>

表单

表单相关css

input 示例:

<input class="input" type="text" placeholder="Text input">

元素

html元素相关css

<a class="button">Anchor</a>
<button class="button">Button</button>
<input class="button" type="submit" value="Submit input">
<input class="button" type="reset" value="Reset input">

组件

组件是指由多个元素组成的常用UI单元,如面包屑

面包屑示例:

<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li><a href="#">Bulma</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Components</a></li>
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
</ul>
</nav>

Bulma CSS - CSS类的更多相关文章

  1. CSS伪类和伪元素

    一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...

  2. CSS 伪类 (Pseudo-classes)

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...

  3. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

  4. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  5. CSS 伪类

    Link The :link CSS pseudo-class lets you select links inside elements. This will select any link whi ...

  6. CSS伪类

    CSS伪类:控制元素的某种状态 语法:元素名称:伪类名称{属性:值} CSS伪类控制链接状态 状态 语法 未访问的链接 a:link{color:#ff00ff} 已访问的链接 a:visited{c ...

  7. 应用越来越广泛的css伪类

    说起css伪类,学习web前端网页设计的同学们应该对此应该不是很陌生,以前很多的网页的特效大多是通过js来实现的.但是随着CSS3不断开发,利用css实现网页的特效不仅响应不错,而且还减少了很多的代码 ...

  8. (五)CSS伪类(Pseudo-class)

    CSS伪类用于向某些选择器添加特殊的效果.伪类的语法如下: selector : pseudo-class {property: value} CSS类也可以与伪类搭配使用: selector.cla ...

  9. 关于CSS伪类选择器

    #CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...

随机推荐

  1. primecoin 全节点日常维护操作

    primecoin 全节点日常维护操作: 一.关于primecoin维护,每天检查这6个地址是否能正常访问: http://api.primecoin.org/rest/pcoin/syncblock ...

  2. layer弹出框包含页面

    参考:http://www.cnblogs.com/zhengchenhui/p/6038865.html

  3. 通过python 构建一个简单的聊天服务器

    构建一个 Python 聊天服务器 一个简单的聊天服务器 现在您已经了解了 Python 中基本的网络 API:接下来可以在一个简单的应用程序中应用这些知识了.在本节中,将构建一个简单的聊天服务器.使 ...

  4. 《Java周边》IDEA 创建Gradle子项目

    1. 创建Gradle项目 新建项目选择左侧gradle,右侧选择自己jdk版本,勾选java项目,点击Next 写上GroupId组名ArtifactId项目名后点击Next 这里选择使用本地gra ...

  5. day12-Python运维开发基础(推导式、生成器与生成器函数)

    1. 推导式(列表推导式.集合推导式.字典推导式) # ### 推导式 : 通过一行循环判断,遍历出一系列数据的方式是推导式 """ 推导式一共三种: 列表推导式,集合推 ...

  6. SQL 笔记1,left join,group by,having

    表:XS,XK,CJ left join 表1 on 表1.字段=表2.字段 group by 分组条件 order by 排序条件 asc正序(小到大),desc倒序 having 跟条件类似whe ...

  7. Python django 安装 mysqlclient 失败

    使用命令安装失败: C:\Program Files (x86)\Python\Python37-\Scripts>pip3..exe install mysqlclient Collectin ...

  8. 4专题总结-图论和DFS、BFS

    1图论: 1.1  133. Clone Graph https://leetcode.com/problems/clone-graph/#/description 思路:这题可以对照拷贝随机链表那道 ...

  9. luogu P2766 最长不下降子序列问题

    第一问可以直接DP来做,联想上一题,线性规划都可以化为网络流?我们可以借助第一问的DP数组,来建立第二问第三问的网络流图,考虑每一种可能,都是dp数组中满足num[i]>=num[j]& ...

  10. Day 1:思考

    干游戏这行从实习到工作算起来也有快7年的时间了, 7年的时间~上学了.毕业了.工作了.结婚了.孩子要出生了~ 也算是经历了不少的事情了,自己觉得生活过的是越来越好了, 自己做过的游戏也不算少了,不过真 ...