Bulma - Box 和 Icon
描述
.box 类定义一个包含边框、半径和填充的容器。
以下示例描述了如何显示页面中元素的框和图标 −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements 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">
Box Element
</span>
<br>
<br>
<div class = "box">
<article class = "media">
<figure class = "media-left">
<p class = "image is-64x64">
<img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
</p>
</figure>
<div class = "media-content">
<div class = "content">
<p>
<strong>Will Smith</strong>
<small>@wsmith</small>
<small>45m</small>
<br>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</p>
</div>
<nav class = "level is-mobile">
<div class = "level-left">
<a class = "level-item">
<span class = "icon is-small"><i class = "fas fa-reply"></i></span>
</a>
<a class = "level-item">
<span class = "icon is-small"><i class = "fas fa-retweet"></i></span>
</a>
<a class = "level-item">
<span class = "icon is-small"><i class = "fas fa-heart"></i></span>
</a>
</div>
</nav>
</div>
</article>
</div>
</div>
</section>
</body>
</html>
执行上述代码，您将得到以下输出 −
图标
.icon 类为元素提供图标字体库，例如 Font Awesome 图标、Material Design 图标、Ionicons 等。可以使用文本颜色修饰符更改图标的颜色，可以使用 is-small、is-medium 和 is-large 类以及 icon 容器更改图标的大小。
以下示例描述了简单图标的显示、更改图标颜色(使用 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 Elements 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">
Icon Element
</span>
<br>
<br>
<span class = "is-size-5">Simple Icon</span>
<br>
<span class = "icon">
<i class = "fas fa-user"></i>
</span>
<br>
<br>
<span class = "is-size-5">Icon Colors</span>
<br>
<span class = "icon has-text-info">
<i class = "fas fa-user"></i>
</span>
<span class = "icon has-text-success">
<i class = "fas fa-user"></i>
</span>
<span class = "icon has-text-warning">
<i class = "fas fa-user"></i>
</span>
<span class = "icon has-text-danger">
<i class = "fas fa-user"></i>
</span>
<br>
<br>
<span class = "is-size-5">Icon Sizes</span>
<br>
<span class = "icon is-small">
<i class = "fas fa-user"></i>
</span>
<span class = "icon is-medium">
<i class = "fas fa-2x fa-user"></i>
</span>
<span class = "icon is-large">
<i class = "fas fa-3x fa-user"></i>
</span>
</div>
</section>
</body>
</html>
它显示以下输出 −
图标变体
Font Awesome 变体提供不同类型的修饰符类，用于在页面中显示固定宽度的图标、带边框的图标、动画图标等。Material Design 图标允许用户根据需要显示图标的颜色和大小。Ionicons 图标是开源图标，可用于 Web、iOS、Android 和桌面应用程序。
让我们创建一个示例来演示上述图标变体在页面中的用法−
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<link href = "https://unpkg.com/ionicons@4.3.0/dist/css/ionicons.min.css" rel = "stylesheet">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://unpkg.com/ionicons@4.3.0/dist/ionicons.js"></script>
<link rel = "stylesheet" href = "https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css">
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Icon Variations
</span>
<br>
<br>
<span class = "is-size-5">Font Awesome Icons</span>
<br>
<br>
<span class = "icon is-medium">
<i class = "fas fa-2x fa-spinner fa-pulse"></i>
</span>
<span class = "icon is-medium">
<i class = "fas fa-2x fa-fw fa-user"></i>
</span>
<span class = "icon is-medium">
<i class = "fas fa-2x fa-border fa-user"></i>
</span>
<span class = "icon is-medium">
<span class = "fa-stack">
<i class = "fas fa-circle fa-stack-2x"></i>
<i class = "fas fa-user fa-stack-1x fa-inverse"></i>
</span>
</span>
<br>
<br>
<span class = "is-size-5">Material Design Icons</span>
<br>
<br>
<span class = "icon is-small">
<i class = "mdi mdi-18px mdi-account-box"></i>
</span>
<span class = "icon is-medium">
<i class = "mdi mdi-24px mdi-account-box"></i>
</span>
<span class = "icon is-large">
<i class = "mdi mdi-36px mdi-account-box"></i>
</span>
<br>
<br>
<span class = "is-size-5">Ionicons</span>
<br>
<br>
<span class = "icon is-small">
<ion-icon size = "small" name = "person"></ion-icon>
</span>
<span class = "icon is-large">
<ion-icon size = "large" name = "person"></ion-icon>
</span>
</div>
</section>
</body>
</html>
它显示以下输出 −
bulma_elements.html
