Bulma 按钮
说明
按钮元素为用户提供自定义按钮样式的交互，可以用作表单、对话框中的操作，并支持不同类型的大小、颜色、状态等。按钮可以通过使用
.button
<包含在页面中 i>
锚链接、输入标签等的类
颜色和尺寸
以下示例通过使用颜色修饰符来描述颜色，例如
is-primary、
is-info、
is-link、
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 Buttons 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">
Buttons
</span>
<br>
<br>
<span class = "is-size-5">
Basic Buttons
</span>
<br>
<a class = "button">Anchor</a>
<button class = "button">Button</button>
<input class = "button" type = "submit" value = "Submit">
<br>
<br>
<span class = "is-size-5">
Button Colors
</span>
<br>
<a class = "button is-white">White</a>
<a class = "button is-light">Light</a>
<a class = "button is-dark">Dark</a>
<a class = "button is-black">Black</a>
<a class = "button is-text">Text</a>
<br>
<br>
<a class = "button is-primary">Primary</a>
<a class = "button is-link">Link</a>
<a class = "button is-info">Info</a>
<a class = "button is-success">Success</a>
<a class = "button is-warning">Warning</a>
<a class = "button is-danger">Danger</a>
<br>
<br>
<span class = "is-size-5">
Button Sizes
</span>
<br>
<a class = "button is-small">Small Button</a>
<a class = "button">Normal Button</a>
<a class = "button is-medium">Medium Button</a>
<a class = "button is-large">Large Button</a>
</div>
</section>
</body>
</html>
它显示以下输出-
样式
下面的示例通过使用诸如
is-outlined、
is-inverted、
is-rounded 等类来描述不同类型的样式以及按钮的颜色修饰符-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Buttons 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">
Buttons Styles
</span>
<br>
<br>
<span class = "is-size-5">
Outlined Buttons
</span>
<br>
<a class = "button is-outlined">Outlined</a>
<a class = "button is-primary is-outlined">Outlined</a>
<a class = "button is-link is-outlined">Outlined</a>
<a class = "button is-info is-outlined">Outlined</a>
<a class = "button is-success is-outlined">Outlined</a>
<a class = "button is-danger is-outlined">Outlined</a>
<br>
<br>
<span class = "is-size-5">
Inverted Buttons (text color becomes background color, and vice-versa)
</span>
<br>
<div class = "columns">
<div class = "column is-narrow ">
<div class = "box has-background-info" >
<a class = "button is-primary is-inverted">Inverted</a>
<a class = "button is-link is-inverted">Inverted</a>
<a class = "button is-info is-inverted">Inverted</a>
<a class = "button is-success is-inverted">Inverted</a>
<a class = "button is-danger is-inverted">Inverted</a>
</div>
</div>
</div>
<span class = "is-size-5">
Inverted Outlined Buttons (
invert color becomes the text and border colors)
</span>
<br>
<div class = "columns">
<div class = "column is-narrow ">
<div class = "box has-background-info" >
<a class = "button is-primary is-inverted is-outlined">Invert Outlined</a>
<a class = "button is-link is-inverted is-outlined">Invert Outlined</a>
<a class = "button is-info is-inverted is-outlined">Invert Outlined</a>
<a class = "button is-success is-inverted is-outlined">Invert Outlined</a>
<a class = "button is-danger is-inverted is-outlined">Invert Outlined</a>
</div>
</div>
</div>
<span class = "is-size-5">
Rounded buttons
</span>
<br>
<br>
<a class = "button is-rounded">Rounded</a>
<a class = "button is-primary is-rounded">Rounded</a>
<a class = "button is-link is-rounded">Rounded</a>
<a class = "button is-info is-rounded">Rounded</a>
<a class = "button is-success is-rounded">Rounded</a>
<a class = "button is-danger is-rounded">Rounded</a>
</div>
</section>
</body>
</html>
它显示以下输出-
状态
按钮可以通过使用
is-focused、
is-active、
is-loading等类以不同类型的状态显示> 和带有图标的按钮，如下例所述-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Buttons 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">
Buttons States
</span>
<br>
<br>
<span class = "is-size-5">
Normal Buttons
</span>
<br>
<a class = "button">Normal</a>
<a class = "button is-primary">Normal</a>
<a class = "button is-link">Normal</a>
<br>
<br>
<span class = "is-size-5">
Focus Buttons
</span>
<br>
<a class = "button is-focused">Focus</a>
<a class = "button is-primary is-focused">Focus</a>
<a class = "button is-link is-focused">Focus</a>
<br>
<br>
<span class = "is-size-5">
Active Buttons
</span>
<br>
<a class = "button is-active">Active</a>
<a class = "button is-primary is-active">Active</a>
<a class = "button is-link is-active">Active</a>
<br>
<br>
<span class = "is-size-5">
Loading buttons
</span>
<br>
<br>
<a class = "button is-loading">Loading</a>
<a class = "button is-primary is-loading">Loading</a>
<a class = "button is-link is-loading">Loading</a>
<br>
<br>
<span class = "is-size-5">
Disabled buttons
</span>
<br>
<br>
<a class = "button" title = "Disabled button" disabled>Disabled</a>
<a class = "button is-primary" title = "Disabled button" disabled>Disabled</a>
<a class = "button is-link" title = "Disabled button" disabled>Disabled</a>
<br>
<br>
<span class = "is-size-5">
Buttons with Icons
</span>
<br>
<br>
<p class = "buttons">
<a class = "button is-primary">
<span class = "icon">
<i class = "fab fa-youtube"></i>
</span>
<span>Youtube</span>
</a>
<a class = "button is-success">
<span class = "icon is-small">
<i class = "fas fa-bookmark"></i>
</span>
<span>Bookmark</span>
</a>
<a class = "button is-danger is-outlined">
<span>Delete</span>
<span class = "icon is-small">
<i class = "fas fa-trash"></i>
</span>
</a>
</p>
<span class = "is-size-5">
Buttons group with addons
</span>
<br>
<br>
<div class = "field has-addons">
<p class = "control">
<a class = "button">
<span class = "icon is-small">
<i class = "fas fa-bold"></i>
</span>
<span>Bold</span>
</a>
</p>
<p class = "control">
<a class = "button">
<span class = "icon is-small">
<i class = "fas fa-italic"></i>
</span>
<span>Italic</span>
</a>
</p>
<p class = "control">
<a class = "button">
<span class = "icon is-small">
<i class = "fas fa-underline"></i>
</span>
<span>Underline</span>
</a>
</p>
</div>
</div>
</section>
</body>
</html>
它显示以下输出-
