Bulma 的 input CSS 类用于 <input> HTML 元素。支持以下 type 属性
type="text"type="password"type="email"type="tel"
支持几种影响以下内容的 修饰符
赞助
输入框
文本输入框及其变体
<input class="input" type="text" placeholder="Text input" />颜色 #
示例
HTML
<input
class="input is-link"
type="text"
placeholder="Link input"
/>示例
HTML
<input
class="input is-primary"
type="text"
placeholder="Primary input"
/>示例
HTML
<input
class="input is-info"
type="text"
placeholder="Info input"
/>示例
HTML
<input
class="input is-success"
type="text"
placeholder="Success input"
/>示例
HTML
<input
class="input is-warning"
type="text"
placeholder="Warning input"
/>示例
HTML
<input
class="input is-danger"
type="text"
placeholder="Danger input"
/>尺寸 #
示例
HTML
<input
class="input is-small"
type="text"
placeholder="Small input"
/>示例
HTML
<input
class="input is-normal"
type="text"
placeholder="Normal input"
/>示例
HTML
<input
class="input is-medium"
type="text"
placeholder="Medium input"
/>示例
HTML
<input
class="input is-large"
type="text"
placeholder="Large input"
/>样式 #
<input class="input is-rounded" type="text" placeholder="Rounded input" />状态 #
正常
<div class="control">
<input class="input" type="text" placeholder="Normal input" />
</div>悬停
<div class="control">
<input class="input is-hovered" type="text" placeholder="Hovered input" />
</div>聚焦
<div class="control">
<input class="input is-focused" type="text" placeholder="Focused input" />
</div>加载中
<div class="control is-loading">
<input class="input" type="text" placeholder="Loading input" />
</div>您可以通过将 is-small、is-medium 或 is-large 附加到 control 容器来调整加载微调器的大小。
<div class="field">
<div class="control is-small is-loading">
<input
class="input is-small"
type="text"
placeholder="Small loading input"
/>
</div>
</div>
<div class="field">
<div class="control is-loading">
<input class="input" type="text" placeholder="Normal loading input" />
</div>
</div>
<div class="field">
<div class="control is-medium is-loading">
<input
class="input is-medium"
type="text"
placeholder="Medium loading input"
/>
</div>
</div>
<div class="field">
<div class="control is-large is-loading">
<input
class="input is-large"
type="text"
placeholder="Large loading input"
/>
</div>
</div>禁用
<div class="control">
<input class="input" type="text" placeholder="Disabled input" disabled />
</div>只读和静态输入框
如果您使用 readonly HTML 属性，输入框看起来会与普通输入框相似，但不可编辑且没有阴影。
<div class="control">
<input class="input" type="text" value="This text is readonly" readonly />
</div>如果您还附加 is-static 修饰符，它会移除背景、边框、阴影和水平内边距，同时保持垂直间距，因此您可以轻松地在任何上下文中对齐输入框，例如水平表单。
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">From</label>
</div>
<div class="field-body">
<div class="field">
<p class="control">
<input
class="input is-static"
type="email"
value="[email protected]"
readonly
/>
</p>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">To</label>
</div>
<div class="field-body">
<div class="field">
<p class="control">
<input class="input" type="email" placeholder="Recipient email" />
</p>
</div>
</div>
</div>使用 Font Awesome 图标 #
您可以在控件上附加以下 2 个 修饰符之一
-
has-icons-left - 和/或
has-icons-right
您还需要在 图标 上添加一个修饰符
- 如果使用
has-icons-left，则为icon is-left - 如果使用
has-icons-right，则为icon is-right
输入框 的大小将定义图标容器的大小。
<div class="field">
<p class="control has-icons-left has-icons-right">
<input class="input" type="email" placeholder="Email" />
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
<span class="icon is-small is-right">
<i class="fas fa-check"></i>
</span>
</p>
</div>
<div class="field">
<p class="control has-icons-left">
<input class="input" type="password" placeholder="Password" />
<span class="icon is-small is-left">
<i class="fas fa-lock"></i>
</span>
</p>
</div>如果控件包含图标，Bulma 将确保图标保持居中，无论输入框或图标的大小如何。
<div class="control has-icons-left has-icons-right">
<input class="input is-small" type="email" placeholder="Email" />
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
<span class="icon is-small is-right">
<i class="fas fa-check"></i>
</span>
</div><div class="control has-icons-left has-icons-right">
<input class="input" type="email" placeholder="Email" />
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
<span class="icon is-small is-right">
<i class="fas fa-check"></i>
</span>
</div><div class="control has-icons-left has-icons-right">
<input class="input is-medium" type="email" placeholder="Email" />
<span class="icon is-left">
<i class="fas fa-envelope"></i>
</span>
<span class="icon is-right">
<i class="fas fa-check"></i>
</span>
</div><div class="control has-icons-left has-icons-right">
<input class="input is-large" type="email" placeholder="Email" />
<span class="icon is-medium is-left">
<i class="fas fa-envelope"></i>
</span>
<span class="icon is-medium is-right">
<i class="fas fa-check"></i>
</span>
</div>Sass 和 CSS 变量 #
|
Sass 变量
|
CSS 变量
|
值
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
