BootStrap-表单--乐字节前端

最新推荐文章于 2020-07-11 14:22:07 发布

dirft_din

最新推荐文章于 2020-07-11 14:22:07 发布

阅读量200

点赞数

分类专栏： java jQuery

本文链接：https://blog.csdn.net/dirft_din/article/details/106943539

版权

本文详细介绍了BootStrap中的表单控件，包括输入框、下拉选择框、文本域、复选框、单选框和按钮的使用方法。还探讨了表单布局，如水平表单和内联表单。此外，提到了BootStrap的缩略图、面板、导航、分页、下拉菜单和模态框等UI组件的应用。

摘要由CSDN通过智能技术生成

表单

表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

表单控件

.form-control .input-lg（较大） .input-sm（较小）

输入框 text

.form-control

<div class="col-sm-3">
    <input type="text" name="" id="" class="form-control" />
    <input type="text" name="" id="" class="form-control input-lg" />
    <input type="text" name="" id="" class="form-control input-sm" />
</div>

下拉选择框 select

多行选择设置：multiple=“multiple”

<div class="col-sm-3">
    <select class="form-control">
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
    </select>
    <select class="form-control" multiple="multiple">
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
    </select>
</div>

文本域 textarea

<div class="col-sm-3">
    <textarea class="form-control" rows="3"></textarea>
</div>

复选框 checkbox

垂直显示： .checkbox

水平显示： .checkbox-inline

<!-- 垂直显示 -->
<div>
    <div class="checkbox">
        <label><input type="checkbox" >游戏</label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox" >学习</label>
    </div>
</div>
<!-- 水平显示 -->
<div>
    <label class="checkbox-inline">
        <input type="checkbox" >游戏
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" >学习
    </label>
</div>

单选框 radio

垂直显示： .radio

水平显示： .radio-inline

<!-- 垂直显示 -->
<div>
    <div class="radio">
        <label><input type="radio" >男</label>
    </div>
    <div class="radio">
        <label><input type="radio" >女</label>
    </div>
</div>
<!-- 水平显示 -->
<div>
    <label class="radio-inline">
        <input type="radio" >男
    </label>
    <label class="radio-inline">
        <input type="radio" >女
    </label>
</div>