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类包含的内容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>