Bulma 修饰符语法和响应式助手
说明
您可以使用修饰符类为元素创建替代样式，并使用响应类来更改样式。修饰符类以
is-ClassName 或
has-ClassName 开头，使用这些类，您可以为元素提供不同类型的样式。
示例
让我们创建一个简单的按钮以及诸如
is-primary、
is-info、
is-success、
等修饰符类is-warning、
is-danger 和使用
is-small、
is-medium 和
的不同类型的按钮大小>is-large 类如下所示-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Modifiers Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Simple Button
</span>
<br>
<br>
<a class = "button">
Button
</a>
</div>
<br>
<div class = "container">
<span class = "title">
Using Modifier Classes
</span>
<br>
<br>
<a class = "button is-primary">is-primary</a>
<a class = "button is-link">is-link</a>
<a class = "button is-info">is-info</a>
<a class = "button is-success">is-success</a>
<a class = "button is-warning">is-warning</a>
<a class = "button is-danger">is-danger</a>
</div>
<br>
<div class = "container">
<span class = "title">
Resized Button
</span>
<br>
<br>
<a class = "button is-small">is-small</a>
<a class = "button is-medium">is-medium</a>
<a class = "button is-large">is-large</a>
</div>
</section>
</body>
</html>
将上述代码保存在 HTML 文件中并在浏览器中打开。它将显示如下所示的输出-
您还可以使用
is-primary、
is-outlined 更改按钮的
style 或
state ,
is-loading,
is-large 类如下所示-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Modifiers Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
State of Button
</span>
<br>
<br>
<a class = "button is-primary is-outlined">
is-outlined
</a>
<a class = "button is-info is-loading">
is-loading
</a>
<a class = "button" disabled>
disabled
</a>
<a class = "button is-danger is-outlined is-large">
is-outlined & is-large
</a>
</div>
</section>
</body>
</html>
执行上面的代码，你会得到如下所示的输出-
帮手
你可以使用下面的辅助类来改变元素的样式-
| Helper |
描述 |
| is-clearfix |
清除容器内的浮动内容 |
| is-pulled-left |
将元素移动到左侧。 |
| is-pulled-right |
将元素移动到右侧。 |
| is-marginless |
它删除了边距。 |
| is-paddingless |
它删除了填充。 |
| is-overlay |
它通过使背景透明来创建元素的叠加效果。 |
| is-clipped |
它添加了隐藏的溢出。 |
| is-radiusless |
它删除了半径。 |
| is-shadowless |
它消除了阴影。 |
| is-unselectable |
它使元素在点击时不可选择。 |
| is-invisible |
它隐藏了可见性功能。 |
| is-sr-only |
它在视觉上隐藏元素，但可供屏幕阅读器使用。 |
响应式助手
您可以使用以下显示类根据视口的宽度
显示内容-
block
flex
inline
inline-block
inline-flex
在这里，我们使用
is-flex 助手来表示不同类型的类。您可以使用其他选项，通过将
is-flex 类替换为
is-block、
is-inline、
is-inline-block 和
is-inline-flex。
| Class |
移动设备（直到 768px） |
平板电脑（769px 到 1023px） |
桌面（1024px 到 1215px） |
宽屏（1216px 到 1407px） |
全高清（1408px 以上） |
| is-flex-mobile |
flex |
未改变 |
未改变 |
未改变 |
未更改 |
| is-flex-tablet-only |
未改变 |
flex |
未改变 |
未更改 |
未更改 |
| is-flex-desktop-only |
未改变 |
未改变 |
flex |
未改变 |
未更改 |
| is-flex-widescreen-only |
未改变 |
未改变 |
未改变 |
flex |
未改变 |
您可以使用以下类显示到达或离开特定断点的元素-
| Class |
移动设备（直到 768px） |
平板电脑（从 769px 到 1023px） |
桌面（从 1024px 到 1215px） |
宽屏（从 1216px 到 1407px） |
全高清（1408px 以上） |
| is-flex-touch |
flex |
flex |
未改变 |
未改变 |
未改变 |
| is-flex-tablet |
未改变 |
flex |
flex |
flex |
flex |
| is-flex-desktop |
未改变 |
未改变 |
flex |
flex |
flex |
| is-flex-widescreen |
未改变 |
未改变 |
未改变 |
flex |
flex |
| is-flex-fullhd |
未改变 |
未改变 |
未改变 |
未改变 |
flex |
您可以使用以下类根据视口的宽度
隐藏内容-
| Class |
移动设备（直到 768px） |
平板电脑（从 769px 到 1023px） |
桌面（从 1024px 到 1215px） |
宽屏（从 1216px 到 1407px） |
全高清（1408px 以上） |
| is-hidden-mobile |
hidden |
visible |
visible |
visible |
visible |
| is-hidden-tablet-only |
visible |
hidden |
visible |
visible |
visible |
| is-hidden-desktop-only |
visible |
visible |
hidden |
visible |
visible |
| is-hidden-widescreen-only |
visible |
visible |
visible |
hidden |
visible |
您可以通过使用以下类来隐藏特定断点之前或之后的元素-
| Class |
移动设备（直到 768px） |
平板电脑（从 769px 到 1023px） |
桌面（从 1024px 到 1215px） |
宽屏（从 1216px 到 1407px） |
全高清（1408px 以上） |
| is-hidden-touch |
hidden |
hidden |
visible |
visible |
visible |
| is-hidden-tablet |
visible |
hidden |
hidden |
hidden |
hidden |
| 是隐藏桌面 |
visible |
visible |
hidden |
hidden |
hidden |
| is-hidden-widescreen |
visible |
visible |
visible |
hidden |
hidden |
| is-hidden-fullhd |
visible |
visible |
visible |
visible |
hidden |
