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
文本内容的样式(如所见即所得)：.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类

Bulma CSS框架教程

主要的CSS类

修饰符

分列

布局

表单

元素

组件

最新文章

热门文章