Bootstrap-表单控件

本文介绍如何使用Bootstrap美化HTML表单,包括单行输入框、下拉选择框、文本域、复选框、单选按钮及按钮等元素,并提供具体用法示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、单行输入框(input的type属性值为text)

用法:

<form>
    <div class="form-group">
        <input type="text" class="form-control" placeholder="请输入用户名" />   
    </div> 
</form>

注:bootatrap中input值必须添加type类型,因为样式是通过type属性来定义,为了让控件(select、input、textarea)在各种表单风格中样式不出错,需要添加类名“form-control”

2、下拉选者框(select)

用法:

<form>
    <div class="form-group">
        <select  class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
        </select>
    </div> 
</form>
注:用法和原始一致,多行选择设置multiple的值为multiple

<form>
    <div class="form-group">
        <select multiple class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
        </select>
    </div> 
</form>
3、文本域textarea

用法:和原始相同,rows和cols分别定义高度和宽度,但是添加类名“form-control”后无需设置cols值,因为在bootstrap中其宽度设置为auto或者100%

<form>
    <div class="form-group" >
        <textarea class="form-control" rows="4">    
        </textarea>
    </div> 
</form>

总结:input 、select、textarea和原来使用方法相同,增加了类名“form-control”来维持基本的样式

4、复选框checkbox和单选按钮radio

源码:

.radio,
.checkbox {display: block;min-height: 20px;padding-left: 20px;margin-top: 10px;margin-bottom: 10px;}
.radio label,
.checkbox label {display: inline;font-weight: normal;cursor: pointer;}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {float: left;margin-left: -20px;}
.radio + .radio,
.checkbox + .checkbox {margin-top: -5px;}
用法:

<form>
    <div class="checkbox">
        <label>
            <input type="checkbox" value="">记住密码
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" value="like" checked="checked" />喜欢
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" value="hate" />不喜欢
        </label>
    </div>
</form>
       说明checkbox和radio均用label标签包起来;

                  checkbox和label标签一起放在了“.checkbox”容器内(垂直方向排列);

                  radio和label标签一起放在了".radio"容器内(垂直方向排列)。

5、复选框和单选按钮水平排列

源码:

.radio-inline,
.checkbox-inline {display: inline-block;padding-left: 20px;margin-bottom: 0;font-weight: normal;vertical-align: middle;cursor: pointer;}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {margin-top: 0;margin-left: 10px;}
用法:

<form role="form">
<div class="form-group">
        <label class="radio-inline">
            <input type="radio" value="option1" name="sex" />男性
        </label> 
        <label class="radio-inline">
            <input type="radio" value="option1" name="sex" />女性
        </label>  
        <label class="radio-inline">
            <input type="radio" value="option1" name="sex" />中性
        </label>    
</div>
</form>

   说明如果checkbox需要水平排列,只需在label标签添加类名“.checkbox-inline”;

              如果radio需要水平排列,只需在label标签添加类名".radio-inline";

              不需要在label标签外包裹有“radio“或者”checkbox”的容器;

              radio需要 type、value、name齐全才能有单选效果。

6、按钮

制作按钮的常用方式:

 ☑  input[type=submit”]

 ☑  input[type=“button”]

 ☑  input[type=reset”]

 ☑  <button>

在bootstrap中采用button来实现:


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值