Bulma CSS - CSS类

2019/09/16 09:59
阅读数 83

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>
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部