Bootstrap中的表单是什么-梓潼大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

Bootstrap中的表单是什么

这篇文章将为大家详细讲解有关Bootstrap中的表单是什么，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

图们网站制作公司哪家好，找创新互联建站！从网页设计、网站建设、微信开发、APP开发、响应式网站设计等网站项目制作，到程序开发，运营维护。创新互联建站2013年至今到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站。

表单是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。其中每个控件所起的作用都各不相同，而且不同的浏览器对表单控件渲染的风格都各有不同。

同样，表单也是Bootstrap框架中的核心内容，本文将详细介绍Bootstrap的表单

基础表单

对于基础表单，Bootstrap并未对其做太多的定制性效果设计，仅仅对表单内的fieldset、legend、label标签进行了定制

fieldset {
　　min-width: 0;
　　padding: 0;
　　margin: 0;
　　border: 0;
}
legend {
　　display: block;
　　width: 100%;
　　padding: 0;
　　margin-bottom: 20px;
　　font-size: 21px;
　　line-height: inherit;
　　color: #333;
　　border: 0;
　　border-bottom: 1px solid #e5e5e5;
}

label {
　　display: inline-block;
　　margin-bottom: 5px;
　　font-weight: bold;
}

主要将这些元素的margin、padding和border等进行了细化设置

当然表单除了这几个元素之外，还有input、select、textarea等元素，在Bootstrap框架中，通过定制了一个类名`form-control`，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果

1、宽度变成了100%

2、设置了一个浅灰色（#ccc）的边框

3、具有4px的圆角

4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化

5、设置了placeholder的颜色为#999


  
    Email address

Password

File input

Example block-level help text here.

Check me out

Submit

Bootstrap中的表单是什么

水平表单

Bootstrap框架默认的表单是垂直显示风格，但很多时候我们需要的水平表单风格

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了

在

元素上使用类名“form-horizontal”主要有以下几个作用：

1、设置表单控件padding和margin值

2、改变“form-group”的表现形式，类似于网格系统的“row”


  
    Email

Password

Remember me

Option one is this and that—be sure to include why it's great Option two is disabled Option one is this and that—be sure to include why it's great Option two can be something else and selecting it will deselect option one Option three is disabled