Bootstrap入门笔记之（二）表单_html/css

<form role="form">    <div class="form-group"><!-- form-group这个类在在这里用于控制表单之间的间隔，之后会有另外介绍 -->        <label for="exampleInputEmail1">邮箱：</label>        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">    </div>    <div class="form-group">        <label for="exampleInputPassword1">密码</label>        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">    </div></form>

Copy after login

一般来说效果是这样的：

内联表单

还是上面那一段代码：我们只需要给 form加上下面 .form-inline这个类就可以实现表单元素在一行排列：

它的实现原理很简单，其实就是在添加了这个类后，将内部的表单元素设置为了内联块（inline-block）。

我们继续改变屏幕大小会发现小到一定层度之后又变成了原来的样式，那是因为这个类是处于媒体查询中的！这样是为了更好的在移动设备上体验，Bootstrap本来就是一个响应式框架不是吗？

如果你想更简洁一点还可以对于 label添加一个 .sr-only类，把label标签进行隐藏。（注意是隐藏，而不是人为删除，设置label标签有助于屏幕阅读器理解此处的含义）

水平表单

Bootstrap框架默认的表单是 垂直显示风格，除了上面的内联表达之外，很多时候我们需要的是 水平表单风格。在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：

在
元素是使用类名 .form-horizontal，作用如下：
- 设置表单控件padding和margin值。
- 改变“form-group”的表现形式，类似于栅格系统的“row”。
配合Bootstrap框架的栅格系统。（栅格布局会在以后的章节中详细讲解）
- 例如：使用
  将我们的input进行包裹，具体情况到栅格布局的时候再说

可以实现下面的效果，（同样处于媒体查询中）

二. 表单控件

输入框input

单行文本框在html编写时，我们都需要设置 type属性为 text，在Bootstrap中也必须正确的添加type的类型，因为在这里是使用CSS的属性选择器如： input[type="text"]来进行样式设置的！

为了让控件在各种表单风格中样式不出错，需要添加类名“form-control”，如：

下拉选择框select

Bootstrap框架中的下拉选择框使用和原始的一致，但是Bootstrap框架为这些元素提供统一的样式风格。如：

<form role="form">    <div class="form-group">        <select class="form-control">             <option>踢足球</option>             <option>游泳</option>             <option>慢跑</option>             <option>跳舞</option>        </select>    </div></form>

Copy after login

想要实现多行选择，只需要在 select中设置multiple属性的值为multiple。

复选框checkbox和单选按钮radio

Bootstrap对于这两个按钮进行了一些优化，要想达到最佳显示效果，有着如下说明：

不管是 checkbox还是 radio都使用 label包起来了。
checkbox按钮连同 label标签放置在一个名为 .checkbox的容器内， radio连同 label标签放置在一个名为 .radio的容器内。
在Bootstrap框架中，主要借助 .checkbox和 .radio样式，来处理复选框、单选按钮与标签的对齐方式。
只需要将 checkbox换成 checkbox-inline就可以了，你可以添加在label上也可以添加在外部的容器上。

表单控件大小

在Bootstrap中除了使用传统的控制大小（height，padding等等）方式外，还特意定制了两个类名用来控制大小，如下：

input-sm：让控件比正常大小更小
input-lg：让控件比正常大小更大

这两个类适用于表单中的 input，textarea和select控件

表单控件状态

焦点状态

焦点状态是通过伪类 :focus来实现。在Bootstrap框架中表单控件的焦点状态删除了 outline的默认样式，重新添加阴影效果。.

禁用状态

Bootstrap实现禁用和普通的表单禁用状态的实现方法一样的，就是在相应的表单控件上添加属性 disabled，只不过Bootstrap做了一些样式风格的处理：

其次，除了单独给相应的表单控件添加disabled外，还可以直接添加到域中

，在这种情况，整个域中的表单全部都将会被禁用，此外还有一个 小bug：如果该域中存在 (域标题)，在其内的表单控件，虽然有禁用的样式，但是实际上可以进行输入，点击等操作！

验证状态

在前面我们说过，Bootstrap有着大量的对于特定的情景内容的颜色设置，表单当然也不例外！在制作表单时，不免要做表单验证。同样也需要提供验证状态样式，那么Bootstrap框架中就提供了这几种效果：

.has-warning：警告状态（黄色）
.has-error：错误状态（红色）
.has-success：成功状态（绿色）

除此之外，Bootstrap还实现了在不同的状态提示不同的 icon，如果你想让表单在对应的状态下显示这样的效果，只需要在对应的状态下添加类名 has-feedback。请注意，此类名要与 has-error、 has-warning和 has-success在一起，代码如下：

<form role="form">    <div class="form-group has-success has-feedback"><!-- 最后一个class控制图标显示 -->        <label class="control-label" for="inputSuccess1">成功状态</label>        <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >        <span class="glyphicon glyphicon-ok form-control-feedback"></span><!-- 图标显示！选取显示图标 -->    </div>    <!-- ...... 还有不同的图标显示例如glyphicon-warning-sign glyphicon-remove等等 --></form>

Copy after login

在 Bootstrap 的小图标都是使用 @font-face来制作，只要有一个容器，就可以通过不同的类名来控制显示的图标。具体内容后面再详细介绍。

显示效果如下：

表单提示信息

在表单验证的过程，未免会要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。提供了一个 help-block类，例如：您输入的信息是错误的只要将其插入到input之后，提示信息将以块状显示，并且显示在控件底部。

三. 按钮

众所周知，我们创建的按钮通常通过下面这几种形式：:

input[type="submit"]：提交按钮
input[type="button"]：普通按钮
input[type="reset"]：重置按钮
：按钮元素，（默认行为是提交）

在Bootstrap框架中的按钮都是采用

1. 情景按钮

也正如我们前面所说，Bootstrop对于按钮也做了不同情景下的类，用不同的颜色展示很好的描述了当前的状态。一下图片来自慕课网

记住一点！Bootstrap中的按钮， 第一前提是必须添加 btn这个类 ，其他的各种类，都只能添加到其后。所以一个按钮应该是这个样子的：，若还有其他的样式，往 btn-info后添加，充分利用css的层叠特性。

2. 按钮大小

Bootstrap有着很对相似的类（学习完后总结一下吧颜色，大小等等），比如现在要说的，改变按钮的大小，当然你可以自定义，但是Bootstrap默认为我们提供了一些，添加到 btn类后就行！

3. 块状按钮

Bootstrap框架中提供了一个类名 btn-block。使用这个类名就可以让按钮 充满整个容器，并且这个按钮不会有任何的padding和margin值。在实际当中，常把这种按钮称为块状按钮。同样添加到 btn类后即可生效

4. 活动与禁用状态

Bootstrap框架针对按钮的状态做了一些特殊处理。主要分为两种：活动状态和禁用状态。

活动状态

Bootstrap按钮的活动状态主要包括按钮的悬浮状态( :hover)，点击状态( :active)和焦点状态（ :focus）几种。

通过在源码中我们可以看到，Bootstrap对于每一种风格的按钮都做了单独的定制。需要进行修改的话可以参考源码！

禁用状态

在Bootstrap框架中，要禁用按钮有两种实现方式：

在标签中添加 disabled属性
在元素标签中添加类名 .disabled

<a href="http://guowenfh.github.io/" class="btn btn-danger disabled" type="button">添加disabled类</a><a href="http://guowenfh.github.io/" class="btn btn-danger " type="button" disabled>添加disabled属性</a>

Copy after login

这两个方式除了样式上的改变之外，还存在是否阻止默认行为上的区别。（此处有大坑，暂时不能跳，以后在详细了解吧。不同浏览器，对于实现阻止默认行为的方式不同，IE11：两个方式都阻止默认行为，IE10-通过属性可以阻止，FF、Chrome通过类可以阻止默认行为。。我已经醉了）

从这里我们也可以看到，Bootstrap只需要在制作按钮的标签元素比如

,等等，上添加类名 btn就可以为其加上按钮风格，但是，并不建议这样使用，为了避免浏览器兼容性问题，个人强烈建议使用button或a标签来制作按钮。

四. 图像

在Bootstrap框架中对于图像的样式风格提供以下几种风格：

.img-responsive：响应式图片，主要针对于响应式设计
.img-rounded：圆角图片
.img-circle：圆形图片
.img-thumbnail：缩略图片，相框效果

直接把类名添加到img标签上就行了！

注意：

设置图片大小时，由于样式没有对图片做大小上的样式限制，所以在实际使用的时候，需要通过其他的方式来处理图片大小。比如说控制图片容器大小。（注意不可以通过css样式直接修改img图片的大小，这样操作就不响应了）

图标

这里说的图标就是Web制作中常看到的小icon图标，包括250多个来自 Glyphicon Halflings 的字体图标，Bootstrap框架中图标都是 glyphicons.com这个商业网站提供的，并且 免费授权给Bootstrap框架使用。

可以在 Glyphicons 字体图标，看到全部图标的样式，您可以根据你的需求进行设置

在网页中使用图标也非常的简单，在任何 内联元素上应用所对应的样式即可：

<span class="glyphicon glyphicon-cloud"></span><span class="glyphicon glyphicon-chevron-left"></span>

Copy after login

这里第一个类是 所有字体图标所必需的，第二个类用来自定义显示的图标。

从源码中我们可以看到 glyphicon这个类,最主要的部分有着如下样式设置：

.glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: normal; line-height: 1;}

Copy after login

从这里，也就不难发现为什么是必须的了，它控制了标签的显示方式，和引入了字体图标库；而第二个类，仅仅是调用对应字体的编码而已

表单的部分呢，学到这里也就基本高一段落了，下面就要开始进行，Bootstrap的核心栅格系统的学习了，继续加油！

参考：

慕课网：玩转Bootstrap
Bootstrap中文官网：全局 CSS 样式

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

3 weeks ago By DDD

Saving in R.E.P.O. Explained (And Save Files)

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation

4 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7572

CakePHP Tutorial

1386

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

110

Related knowledge

What is the purpose of the <progress> element? Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

Is HTML easy to learn for beginners? Apr 07, 2025 am 12:11 AM

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

What is the purpose of the <datalist> element? Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <meter> element? Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

What is the viewport meta tag? Why is it important for responsive design? Mar 20, 2025 pm 05:56 PM

The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

What is the purpose of the <iframe> tag? What are the security considerations when using it? Mar 20, 2025 pm 06:05 PM

The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

What is an example of a starting tag in HTML? Apr 06, 2025 am 12:04 AM

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

See all articles

Bootstrap入门笔记之（二）表单_html/css_WEB-ITnose

一. 基础表单

内联表单

水平表单

二. 表单控件

输入框input

下拉选择框select

复选框checkbox和单选按钮radio

表单控件大小

表单控件状态

焦点状态

禁用状态

验证状态

表单提示信息

三. 按钮

在Bootstrap框架中的按钮都是采用 来实现。

1. 情景按钮

2. 按钮大小

3. 块状按钮

4. 活动与禁用状态

活动状态

禁用状态

四. 图像

图标

Hot AI Tools

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

Hot Article

Hot Tools

Notepad++7.3.1

SublimeText3 Chinese version

Zend Studio 13.0.1

Dreamweaver CS6

SublimeText3 Mac version

Hot Topics

在Bootstrap框架中的按钮都是采用