Bulma 颜色和排版助手
说明
您可以使用
color 助手来更改文本或背景的颜色。
文字颜色
| S.No. |
Class |
Color |
| 1 |
has-text-white |
hsl(0, 0%, 100%) |
| 2 |
has-text-black |
hsl(0, 0%, 4%) |
| 3 |
has-text-light |
hsl(0, 0%, 96%) |
| 4 |
has-text-dark |
hsl(0, 0%, 21%) |
| 5 |
has-text-primary |
hsl(171, 100%, 41%) |
| 6 |
has-text-info |
hsl(204, 86%, 53%) |
| 7 |
has-text-link |
hsl(217, 71%, 53%) |
| 8 |
has-text-success |
hsl(141, 71%, 48%) |
| 9 |
has-text-warning |
hsl(48, 100%, 67%) |
| 10 |
has-text-danger |
hsl(348, 100%, 61%) |
| 11 |
has-text-black-bis |
hsl(0, 0%, 7%) |
| 12 |
has-text-black-ter |
hsl(0, 0%, 14%) |
| 13 |
has-text-grey-darker |
hsl(0, 0%, 21%) |
| 14 |
has-text-grey-dark |
hsl(0, 0%, 29%) |
| 15 |
has-text-grey |
hsl(0, 0%, 48%) |
| 16 |
has-text-grey-light |
hsl(0, 0%, 71%) |
| 17 |
has-text-grey-lighter |
hsl(0, 0%, 86%) |
| 18 |
has-text-white-ter |
hsl(0, 0%, 96%) |
| 19 |
has-text-white-bis |
hsl(0, 0%, 98%) |
Background Color
| S.No. |
Class |
Color |
| 1 |
has-background-white |
hsl(0, 0%, 100%) |
| 2 |
has-background-black |
hsl(0, 0%, 4%) |
| 3 |
has-background-light |
hsl(0, 0%, 96%) |
| 4 |
has-background-dark |
hsl(0, 0%, 21%) |
| 5 |
has-background-primary |
hsl(171, 100%, 41%) |
| 6 |
has-background-info |
hsl(204, 86%, 53%) |
| 7 |
has-background-link |
hsl(217, 71%, 53%) |
| 8 |
has-background-success |
hsl(141, 71%, 48%) |
| 9 |
has-background-warning |
hsl(48, 100%, 67%) |
| 10 |
has-background-danger |
hsl(348, 100%, 61%) |
| 11 |
has-background-black-bis |
hsl(0, 0%, 7%) |
| 12 |
has-background-black-ter |
hsl(0, 0%, 14%) |
| 13 |
has-background-grey-darker |
hsl(0, 0%, 21%) |
| 14 |
has-background-grey-dark |
hsl(0, 0%, 29%) |
| 15 |
has-background-grey |
hsl(0, 0%, 48%) |
| 16 |
has-background-grey-light |
hsl(0, 0%, 71%) |
| 17 |
has-background-grey-lighter |
hsl(0, 0%, 86%) |
| 18 |
has-background-white-ter |
hsl(0, 0%, 96%) |
| 19 |
has-background-white-bis |
hsl(0, 0%, 98%) |
排版助手
排版助手用于更改文本的大小和颜色。 Bulma 包含 7 种尺寸，如下表所示-
| S.No. |
Class |
Font Size |
| 1 |
is-size-1 |
3rem |
| 2 |
is-size-2 |
2.5rem |
| 3 |
is-size-3 |
2rem |
| 4 |
is-size-4 |
1.5rem |
| 5 |
is-size-5 |
1.25rem |
| 6 |
is-size-6 |
1rem |
| 7 |
is-size-7 |
0.75rem |
让我们使用上述尺寸创建一个简单的例子-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Typography Helpers 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 = "is-size-1">
7 types of sizes
</span><br><br>
<span class = "is-size-1">
Tutorialspoint
</span><br>
<span class = "is-size-2">
Tutorialspoint
</span><br>
<span class = "is-size-3">
Tutorialspoint
</span><br>
<span class = "is-size-4">
Tutorialspoint
</span><br>
<span class = "is-size-5">
Tutorialspoint
</span><br>
<span class = "is-size-6">
Tutorialspoint
</span><br>
<span class = "is-size-7">
Tutorialspoint
</span><br>
</div>
</section>
</body>
</html>
它将显示如下所示的输出-
颜色
Bulma 提供了不同类型的颜色类来设置容器中的元素。参考上面的
Text Color 部分，使用如下所示的颜色类创建一个示例-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Typography Helpers 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">
Text color using color classes
</span>
<br>
<span class = "has-text-primary">
Tutorialspoint
</span><br>
<span class = "has-text-link">
Tutorialspoint
</span><br>
<span class = "has-text-black-bis">
Tutorialspoint
</span><br>
<span class = "has-text-grey">
Tutorialspoint
</span><br>
<span class = "has-text-grey-lighter">
Tutorialspoint
</span><br>
<span class = "has-text-danger">
Tutorialspoint
</span>
</div>
</section>
</body>
</html>
它显示如下所示的输出-
对齐
Bulma 提供了 4 种类型的对齐助手来对齐容器中的文本。
| Class |
对齐 |
| 以文本为中心 |
在中心显示文本。 |
| 有文本对齐 |
将文本显示为两端对齐。 |
| 有文本左 |
在左侧显示文本。 |
| has-text-right |
在右侧显示文本。 |
让我们使用上面的对齐类创建一个简单的例子-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Alignment Helpers 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">
Alignment
</span>
<br>
<br>
<div class = "columns">
<div class = "column is-5">
<p class = "has-text-black has-background-info has-text-centered"> has-text-centered</p>
</div>
</div>
<div class = "columns">
<div class = "column is-5">
<p class = "has-text-black has-background-info has-text-justified"> has-text-justified</p>
</div>
</div>
<div class = "columns">
<div class = "column is-5">
<p class = "has-text-black has-background-info has-text-left"> has-text-left</p>
</div>
</div>
<div class = "columns">
<div class = "column is-5">
<p class = "has-text-black has-background-info has-text-right"> has-text-right</p>
</div>
</div>
</div>
</section>
</body>
</html>
它显示如下所示的输出-
文本转换
Bulma 提供了 4 种类型的文本转换助手来转换容器中的文本。
| Class |
变换 |
| 大写 |
它将每个单词的第一个字符转换为大写。 |
| is-小写 |
它将所有字符定义为小写。 |
| 是大写 |
它将所有字符定义为大写。 |
| 是斜体 |
它将所有字符定义为斜体。 |
让我们使用上述文本转换类创建一个简单的示例-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Typography Helpers 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 = "is-size-1">
7 types of sizes
</span><br><br>
<span class = "is-size-1">
Tutorialspoint
</span><br>
<span class = "is-size-2">
Tutorialspoint
</span><br>
<span class = "is-size-3">
Tutorialspoint
</span><br>
<span class = "is-size-4">
Tutorialspoint
</span><br>
<span class = "is-size-5">
Tutorialspoint
</span><br>
<span class = "is-size-6">
Tutorialspoint
</span><br>
<span class = "is-size-7">
Tutorialspoint
</span><br>
</div>
</section>
</body>
</html>
它将显示如下所示的输出-
颜色
Bulma 提供了不同类型的颜色类来设置容器中的元素。参考上面的
Text Color 部分，使用如下所示的颜色类创建一个示例-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Typography Helpers 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">
Text color using color classes
</span>
<br>
<span class = "has-text-primary">
Tutorialspoint
</span><br>
<span class = "has-text-link">
Tutorialspoint
</span><br>
<span class = "has-text-black-bis">
Tutorialspoint
</span><br>
<span class = "has-text-grey">
Tutorialspoint
</span><br>
<span class = "has-text-grey-lighter">
Tutorialspoint
</span><br>
<span class = "has-text-danger">
Tutorialspoint
</span>
</div>
</section>
</body>
</html>
它显示如下所示的输出-
对齐
Bulma 提供了 4 种类型的对齐助手来对齐容器中的文本。
| Class |
对齐 |
| 以文本为中心 |
在中心显示文本。 |
| 有文本对齐 |
将文本显示为两端对齐。 |
| 有文本左 |
在左侧显示文本。 |
| has-text-right |
在右侧显示文本。 |
让我们使用上面的对齐类创建一个简单的例子-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Alignment Helpers 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">
Alignment
</span>
<br>
<br>
<div class = "columns">
<div class = "column is-5">
<p class = "has-text-black has-background-info has-text-centered"> has-text-centered</p>
</div>
</div>
<div class = "columns">
<div class = "column is-5">
<p class = "has-text-black has-background-info has-text-justified"> has-text-justified</p>
</div>
</div>
<div class = "columns">
<div class = "column is-5">
<p class = "has-text-black has-background-info has-text-left"> has-text-left</p>
</div>
</div>
<div class = "columns">
<div class = "column is-5">
<p class = "has-text-black has-background-info has-text-right"> has-text-right</p>
</div>
</div>
</div>
</section>
</body>
</html>
它显示如下所示的输出-
文本转换
Bulma 提供了 4 种类型的文本转换助手来转换容器中的文本。
| Class |
变换 |
| 大写 |
它将每个单词的第一个字符转换为大写。 |
| is-小写 |
它将所有字符定义为小写。 |
| 是大写 |
它将所有字符定义为大写。 |
| 是斜体 |
它将所有字符定义为斜体。 |
让我们使用上述文本转换类创建一个简单的示例-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Text Transformation Helpers 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">
Text Transformation
</span><br><br>
<div class = "columns">
<div class = "column is-5">
<p class = "has-text-black has-background-info is-capitalized"> is-capitalized</p>
</div>
</div>
<div class = "columns">
<div class = "column is-5">
<p class = "has-text-black has-background-info is-lowercase"> is-lowercase</p>
</div>
</div>
<div class = "columns">
<div class = "column is-5">
<p class = "has-text-black has-background-info is-uppercase"> is-uppercase</p>
</div>
</div>
<div class = "columns">
<div class = "column is-5">
<p class = "has-text-black has-background-info is-italic"> has-is-italic</p>
</div>
</div>
</div>
</section>
</body>
</html>
它显示如下所示的输出-
文字粗细
Bulma 提供了 4 种类型的文本权重帮助器来转换容器中的文本权重。
| Class |
对齐 |
| 有文本重量轻 |
它显示的文本重量很轻。 |
| has-text-weight-normal |
它正常显示文本粗细。 |
| has-text-weight-semibold |
它将文本粗细显示为半粗体（粗体不是粗体）。 |
| has-text-weight-bold |
它将文本粗细显示为粗体。 |
让我们使用上述文本权重类创建一个简单的示例-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Text Weight Helpers 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">
Text Weight
</span>
<br>
<br>
<div class = "columns">
<div class = "column is-5">
<p class = "has-text-black has-background-info has-text-weight-light"> has-text-weight-light</p>
</div>
</div>
<div class = "columns">
<div class = "column is-5">
<p class = "has-text-black has-background-info has-text-weight-normal"> has-text-weight-normal</p>
</div>
</div>
<div class = "columns">
<div class = "column is-5">
<p class = "has-text-black has-background-info has-text-weight-semibold"> has-text-weight-semibold</p>
</div>
</div>
<div class = "columns">
<div class = "column is-5">
<p class = "has-text-black has-background-info has-text-weight-bold"> has-text-weight-bold</p>
</div>
</div>
</div>
</section>
</body>
</html>
它显示如下所示的输出-
