bootstrap-表单控件

最新推荐文章于 2023-10-12 09:59:34 发布

wendZzz

最新推荐文章于 2023-10-12 09:59:34 发布

阅读量344

点赞数

分类专栏： Bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/bertZuo/article/details/85156648

版权

Bootstrap 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

表单控件还是嵌入在表单格式中使用

输入框

<input type="email" class="form-control" placeholder="Enter email">

下拉选择框

<select class="form-control" style="width: 333px;">     <!--多行选择 增加一个属性multiple-->
    <option>《奖励的恶果》--艾尔菲·科恩</option>
    <option>《全新思维：决胜未来的6大能力》--丹尼尔·平克</option>
    <option>《稀缺》--穆来纳森/沙菲尔</option>
    <option>《思想本质》--斯蒂芬·平克</option>
    <option>《健全的社会》--艾里希·弗洛姆</option>
</select>

文本域

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

复选框/单选按钮

原本它们与label标签配合使用时会有无法对齐的问题，bootstrap很好的解决了这样的问题。bootstrap中:，不管是checkbox还是radio都使用label单独包起来了；checkbox连同label标签放置在一个名为“.checkbox”的容器内；radio连同label标签放置在一个名为“.radio”的容器内。

<div class="checkbox">
    <label>
        <input type="checkbox" value="forget">
        忘记烦恼
    </label>
</div>
<div class="radio">
    <label>
        <input type="radio" name="optionsRadios" value="love" checked>
        喜欢
    </label>
</div>
<div class="radio">
    <label>
        <input type="radio" name="optionsRadios" value="hate">
        不喜欢
    </label>
</div>

复选框/单选按钮水平排列

如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”
如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”

<div class="form-group">
    <label class="checkbox-inline">
        <input type="checkbox"  value="option1">vue
    </label>
    <label class="checkbox-inline">
        <input type="checkbox"  value="option2">angualr
    </label>
    <label class="checkbox-inline">
        <input type="checkbox"  value="option3">react
    </label>
</div>
<div class="form-group">
    <label class="radio-inline">
        <input type="radio"  value="option1" name="sex">男性
    </label>
    <label class="radio-inline">
        <input type="radio"  value="option2" name="sex">女性
    </label>
    <label class="radio-inline">
        <input type="radio"  value="option3" name="sex">其他
    </label>
</div>

焦点状态

<form role="form" class="form-horizontal">
    <div class="form-group">
        <div class="col-xs-4">
            <input class="form-control input-lg" type="text" placeholder="不是焦点状态下效果">
        </div>
        <div class="col-xs-4">
            <input class="form-control input-lg" type="text" placeholder="焦点点状态下效果">
        </div>
        <div class="col-xs-4">
            <input class="form-control input-lg" type="text" placeholder="禁用状态下效果" disabled>
        </div>
    </div>
</form>