表单

轻松创建拥有不同样式与布局的漂亮表单。

标准表单

示例

表单标题

输入提示文字

代码

<form class="form">
    <fieldset>
        <legend>表单标题</legend>
        <div class="form-group">
            <label class="control-label">电子邮件</label>
            <input type="email" placeholder="输入电子邮件" class="control-input">
        </div>
        <div class="form-group">
            <label class="control-label">密码</label>
            <input type="password" placeholder="密码" class="control-input">
        </div>
        <div class="form-group">
            <label class="control-label">性别</label>
            <label class="control-label-item"><input type="radio"> 男</label>
            <label class="control-label-item"><input type="radio"> 女</label>
        </div>
        <div class="form-group">
            <label class="control-label">选择文件</label>
            <input type="file">
            <p class="control-help">输入提示文字</p>
        </div>
        <div class="form-group">
            <label><input type="checkbox"> 记住密码</label>
        </div>
        <button class="btn btn-default" type="submit">提交t</button>
    </fieldset>
</form>

行内表单

示例

表单标题

代码

<form class="form form-inline">
    <fieldset>
        ...
    </fieldset>
</form>

水平排序的表单

示例

表单标题

代码

<form class="form form-horizontal">
    <fieldset>
        <legend>表单标题</legend>
        <div class="form-group">
            <label class="control-label">电子邮件</label>
            <div class="control-content">
                <input type="email" placeholder="输入电子邮件" class="control-input">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label">类型</label>
            <div class="control-content">
                <select class="control-input">
                    <option>1</option>
                    <option selected="selected">2</option>
                    ...
                </select>
            </div>
        </div>
        ...
    </fieldset>
</form>

禁用字段

示例

表单标题

代码

<form class="form">
    <fieldset disabled>
        <legend>表单标题</legend>
        <div class="form-group">
            <label for="disabledTextInput">禁止输入</label>
            <input type="text" placeholder="禁止输入" class="control-input" id="disabledTextInput">
        </div>
        ...
        <button class="btn btn-info" type="submit">Submit</button>
    </fieldset>
</form>

表单其他元素

示例

文本框
下拉选择
多项下拉选择

代码

<textarea class="control-input" style="height:90px;"></textarea>
<select class="control-input">
    <option selected="selected">1</option>
    <option>2</option>
    ...
</select>
<select class="control-input" multiple="multiple" size="4">
    <option>1</option>
    <option>2</option>
    ...
</select>

表单输入框尺寸

示例

代码

<input type="text" placeholder="" class="control-input input-sm">
<input type="text" placeholder="" class="control-input">
<input type="text" placeholder="" class="control-input input-lg">

输入框状态

示例

代码

<input type="text" placeholder="" class="control-input" disabled="disabled">
<input type="text" placeholder="" class="control-input input-success">
<input type="text" placeholder="" class="control-input input-warning">
<input type="text" placeholder="" class="control-input input-danger">
<input type="text" placeholder="" class="control-input input-blank">

图标输入框

示例

代码

<div class="input-icon">
    <i class="icon-asthis"></i><input type="text" placeholder="" class="control-input">
</div>
<div class="input-icon input-icon-flip">
    <i class="icon-asthis"></i><input type="text" placeholder="" class="control-input">
</div>
<div class="input-icon input-icon-sm">
    <i class="icon-asthis"></i><input type="text" placeholder="" class="control-input input-sm">
</div>
<div class="input-icon input-icon-lg">
    <i class="icon-asthis"></i><input type="text" placeholder="" class="control-input input-lg">
</div>

图标输入框状态

示例

代码

<div class="input-icon input-icon-info">
    <i class="icon-asthis"></i><input type="text" placeholder="" class="control-input">
</div>
<div class="input-icon input-icon-success">
    <i class="icon-asthis"></i><input type="text" placeholder="" class="control-input input-success">
</div>
<div class="input-icon input-icon-warning">
    <i class="icon-asthis"></i><input type="text" placeholder="" class="control-input input-warning">
</div>
<div class="input-icon input-icon-danger">
    <i class="icon-asthis"></i><input type="text" placeholder="" class="control-input input-danger">
</div>

密码输入框

创建一个可以切换是否显示密码的输入框。注意 IE8 及以下不支持该功能

用法

为输入框创建一个 input-password 类的父级元素 <div>,并且为其父级元素添加 data-input-password 属性。

示例

代码

<div class="input-password input-password-sm" data-input-password>
    <input type="password" class="control-input input-sm">
</div>
<div class="input-password" data-input-password>
    <input type="password" class="control-input">
</div>
<div class="input-password input-password-lg" data-input-password>
    <input type="password" class="control-input input-lg">
</div>
<div class="input-password" data-input-password="{txtShow: '显示', txtHide: '隐藏'}">
    <input type="password" class="control-input">
</div>

文件输入框

用自定义内容替换文件输入框。

用法

为输入框创建一个 input-file 类的父级元素 <div>

示例

选择文件
也可以使用
文字

代码

<div class="input-file">
	<span class="btn">选择文件</span>
	<input type="file">
</div>
<div class="input-file text-info">
	文字<input type="file">
</div>

下拉框

用自定义内容替换文件输入框。

用法

为输入框创建一个 input-file 类的父级元素 <div>

示例

代码

<div class="btn input-select" data-input-select>
	<span></span>
	<select>...</select>
</div>
<div class="btn input-select" data-input-select="{target: 'a'}">
	<a></a>
	<select>...</select>
</div>
<div class="btn input-select" data-input-select="{target: 'input'}">
	<input class="control-input">
	<select>...</select>
</div>