Bulma CSS - CSS类
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
- 文本内容的样式(如所见即所得):
.content
css类包含的内容
主要的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类的更多相关文章
- CSS伪类和伪元素
一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...
- CSS 伪类 (Pseudo-classes)
CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...
- CSS伪类选择器
一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...
- CSS伪类与CSS伪元素的区别及由来
关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...
- CSS 伪类
Link The :link CSS pseudo-class lets you select links inside elements. This will select any link whi ...
- CSS伪类
CSS伪类:控制元素的某种状态 语法:元素名称:伪类名称{属性:值} CSS伪类控制链接状态 状态 语法 未访问的链接 a:link{color:#ff00ff} 已访问的链接 a:visited{c ...
- 应用越来越广泛的css伪类
说起css伪类,学习web前端网页设计的同学们应该对此应该不是很陌生,以前很多的网页的特效大多是通过js来实现的.但是随着CSS3不断开发,利用css实现网页的特效不仅响应不错,而且还减少了很多的代码 ...
- (五)CSS伪类(Pseudo-class)
CSS伪类用于向某些选择器添加特殊的效果.伪类的语法如下: selector : pseudo-class {property: value} CSS类也可以与伪类搭配使用: selector.cla ...
- 关于CSS伪类选择器
#CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...
随机推荐
- primecoin 全节点日常维护操作
primecoin 全节点日常维护操作: 一.关于primecoin维护,每天检查这6个地址是否能正常访问: http://api.primecoin.org/rest/pcoin/syncblock ...
- layer弹出框包含页面
参考:http://www.cnblogs.com/zhengchenhui/p/6038865.html
- 通过python 构建一个简单的聊天服务器
构建一个 Python 聊天服务器 一个简单的聊天服务器 现在您已经了解了 Python 中基本的网络 API:接下来可以在一个简单的应用程序中应用这些知识了.在本节中,将构建一个简单的聊天服务器.使 ...
- 《Java周边》IDEA 创建Gradle子项目
1. 创建Gradle项目 新建项目选择左侧gradle,右侧选择自己jdk版本,勾选java项目,点击Next 写上GroupId组名ArtifactId项目名后点击Next 这里选择使用本地gra ...
- day12-Python运维开发基础(推导式、生成器与生成器函数)
1. 推导式(列表推导式.集合推导式.字典推导式) # ### 推导式 : 通过一行循环判断,遍历出一系列数据的方式是推导式 """ 推导式一共三种: 列表推导式,集合推 ...
- SQL 笔记1,left join,group by,having
表:XS,XK,CJ left join 表1 on 表1.字段=表2.字段 group by 分组条件 order by 排序条件 asc正序(小到大),desc倒序 having 跟条件类似whe ...
- Python django 安装 mysqlclient 失败
使用命令安装失败: C:\Program Files (x86)\Python\Python37-\Scripts>pip3..exe install mysqlclient Collectin ...
- 4专题总结-图论和DFS、BFS
1图论: 1.1 133. Clone Graph https://leetcode.com/problems/clone-graph/#/description 思路:这题可以对照拷贝随机链表那道 ...
- luogu P2766 最长不下降子序列问题
第一问可以直接DP来做,联想上一题,线性规划都可以化为网络流?我们可以借助第一问的DP数组,来建立第二问第三问的网络流图,考虑每一种可能,都是dp数组中满足num[i]>=num[j]& ...
- Day 1:思考
干游戏这行从实习到工作算起来也有快7年的时间了, 7年的时间~上学了.毕业了.工作了.结婚了.孩子要出生了~ 也算是经历了不少的事情了,自己觉得生活过的是越来越好了, 自己做过的游戏也不算少了,不过真 ...