响应式前端框架Bootstrap系列（5）表单

淩亂°似流年 2021-09-14 14:04 621阅读 0赞

本篇介绍几种常用的表单组件：输入框、文本框、选择框、单选框和多选框。

**输入框**代码演示：

<div style="width: 200px;">
    	<input type="text" class="form-control" />
    </div>

当输入框需要配合标识符或按钮组合使用时，可以使用输入框组，用.input-group表示输入框组的样式，.input-group-addon表示标识符样式，input-group-btn表示按钮样式。代码演示：

<div class="input-group" style="width: 200px;">
    	<span class="input-group-addon">@</span>
    	<input type="text" class="form-control" />
    </div>
    <div class="input-group" style="width: 200px;">
    	<input type="text" class="form-control" />
    	<span class="input-group-btn">
    		<button class="btn btn-primary">搜索</button>
    	</span>
    </div>

效果图：

![SouthEast][]

**文本框**常用于博客留言或评价等功能，代码演示：

<div class="form-group">
    	<label for="name">文本框</label>
    	<textarea class="form-control" rows="3" style="resize: none; width: 500px;"></textarea>
    </div>

效果图：

![SouthEast 1][]

**选择框**，用于分类选择，演示代码：

<div>
    	<select class="form-control" style="width: 100px;font-size: 16px;">
    		<option>请选择</option>
    		<option>选项1</option>
    		<option>选项2</option>
    		<option>选项3</option>
    		<option>选项4</option>
    	</select>
    </div>

效果图：

![SouthEast 2][]  
如果想更换选择框的指向箭头，可以通过修改样式实现，演示代码：

<style>
    	select {
    		width: 75px;
    		height: 32px;
    		font-size: 16px;
    		border: solid 1px #DDDDDD;
    		/*很关键：将默认的select选择框样式清除*/
    		appearance: none;
    		-moz-appearance: none;
    		-webkit-appearance: none;
    		/*在选择框的最右侧中间显示小箭头图片*/
    		background: url("./arrow.png") no-repeat scroll right center transparent;
    		/*为下拉小箭头留出一点位置，避免被文字覆盖*/
    		padding-right: 20px;
    	}
    	/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
    	
    	select::-ms-expand {
    		display: none;
    	}
    </style>
    
    <div>
    	<select title="">
    		<option value="0" disabled="disabled" selected="selected">请选择</option>
    		<option value="1">选项1</option>
    		<option value="2">选项2</option>
    		<option value="3">选项3</option>
    	</select>
    </div>

效果图：

![SouthEast 3][]

**单选框**演示代码：

<p>垂直方向：</p>
    <div class="radio">
    	<label>
            <input type="radio" name="radiosbox" id="radiosbox1" value="option1" checked> 选项 1
        </label>
    </div>
    <div class="radio">
    	<label>
            <input type="radio" name="radiosbox" id="radiosbox2" value="option2">选项 2
        </label>
    </div>
    
    <p>水平方向：</p>
    <div>
    	<label class="radio-inline">
            <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 选项 1
        </label>
    	<label class="radio-inline">
            <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 选项 2
        </label>
    </div>

效果图：

![SouthEast 4][]

**复选框**演示代码：

<p>垂直方向：</p>
    <div class="checkbox">
    	<label><input type="checkbox" value="option1">选项 1</label>
    </div>
    <div class="checkbox">
    	<label><input type="checkbox" value="option2">选项 2</label>
    </div>
    
    <p>水平方向：</p>
    <div>
    	<label class="checkbox-inline">
            <input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
        </label>
    	<label class="checkbox-inline">
            <input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2
        </label>
    	<label class="checkbox-inline">
            <input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3
        </label>
    </div>

效果图：

![SouthEast 5][]

[SouthEast]: /images/20210813/68dddaa681fa43d9a586efde6c144732.png
[SouthEast 1]: /images/20210813/7c70f7ca06d4454981bac319ca2e7ed0.png
[SouthEast 2]: /images/20210813/074da0326a1f439192892f7179107e34.png
[SouthEast 3]: /images/20210813/67268f67f2f04939b6182f1bbe4ec90f.png
[SouthEast 4]: /images/20210813/423feae13a7641f0ab33aeb3913a65d6.png
[SouthEast 5]: /images/20210813/da4b3b6757c544b697cbc629cc0cf571.png

发表评论取消回复

表情：

评论列表（有 0 条评论，621人围观）

还没有评论，来说两句吧...

相关阅读

相关 [前端]-Bootstrap响应式框架

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发

客官°小女子只卖身不卖艺/ 2023年09月24日 14:42/ 0 赞/ 65 阅读

相关响应式前端框架Bootstrap系列（15）面板

面板组件用于把 DOM 组件插入到一个盒子中，比如组件表格或者列表组。面板的主要界面效果用于如超市的物价面板、动车进出站实时信息面板等。有关面板的样式有以下几种： .pane

待我称王封你为后i/ 2021年09月14日 14:20/ 0 赞/ 470 阅读

相关响应式前端框架Bootstrap系列（13）进度条

进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性，Opera 12 不支持动画。进度条的

不念不忘少年蓝@/ 2021年09月14日 14:18/ 0 赞/ 462 阅读

相关响应式前端框架Bootstrap系列（14）列表组

列表组件用于以列表形式呈现复杂的和自定义的内容。比如说可以用于制作API列表界面，列表组样式有以下几种： .list-group：列表组样式定义 .list-group-

亦凉/ 2021年09月14日 14:18/ 0 赞/ 384 阅读

相关响应式前端框架Bootstrap系列（11）分页

分页功能已经封装成一个独立的js文件，也是用bs完成的，名称为bootstrap-paginator.js。使用前先导入文件： <script src="../

亦凉/ 2021年09月14日 14:14/ 0 赞/ 357 阅读

相关响应式前端框架Bootstrap系列（8）图片处理

bs对图片的处理只有简单的遮罩功能，如把一张图片变为圆形、正方形等。 .img-rounded：为图片添加圆角 .img-circle：将图片变为圆形 .img-t

以你之姓@/ 2021年09月14日 14:10/ 0 赞/ 406 阅读

相关响应式前端框架Bootstrap系列（7）按钮

按钮是前端最常用到的组件，bs提供有关按钮的样式有分为独立按钮、按钮组和按钮插件三种。独立按钮，可用于<a>, <button>, 或 <input> 元素上。（1）颜

墨蓝/ 2021年09月14日 14:10/ 0 赞/ 455 阅读

相关响应式前端框架Bootstrap系列（5）表单

本篇介绍几种常用的表单组件：输入框、文本框、选择框、单选框和多选框。输入框代码演示： <div style="width: 200px;"> <inpu

淩亂°似流年/ 2021年09月14日 14:04/ 0 赞/ 622 阅读

相关响应式前端框架Bootstrap系列（4）表格

通过bs，可以很轻松地建出一个表格组件。以下是建表格组件必须认识的一些标签。 <table style="border-width:0px; margin:4px 0px;

骑猪看日落/ 2021年09月14日 14:00/ 0 赞/ 458 阅读

相关响应式前端框架Bootstrap系列（1）浅谈Bootstrap

有一段时间没写博客了，在忙着公司的项目上线。最近终于有了点空闲时间，打算写一些关于前端响应式框架，头脑中第一时间就冒出了Bootstrap，毕竟它是Github上Star数最多

今天药忘吃喽~/ 2021年09月14日 13:52/ 0 赞/ 588 阅读