Bootstrap表单控件水平排列方法

Bootstrap 是一款出色的前端框架，广泛应用于响应式布局网站。本文以登录表单为例，讲解如何利用 Bootstrap 实现表单的水平排列布局，提升页面美观性与用户体验。

1、 创建一个名为index.html的文件用于测试，其代码内容如下所示。

2、 在index.html的head标签中，引入bootstrap.min.css样式文件，同时添加jquery-1.8.3.min.js和bootstrap.min.js两个JavaScript文件，以确保页面具备所需的样式和交互功能。

3、 在页面主体中编写表单代码，为form标签添加class=form-horizontal属性，该类为Bootstrap提供的用于实现表单水平布局的样式类，可使表单元素按横向排列，提升界面美观性与响应式表现。

4、 使用 Bootstrap 的 form-control 类创建一个文本类型的输入框，用于用户登录时填写用户名。

5、 使用Bootstrap的form-control类创建一个密码输入框，用于登录时输入密码，确保信息隐藏并提升表单样式统一性。

6、 添加一个提交表单的按钮，采用Bootstrap提供的默认按钮样式btn-default进行外观设置。

7、 执行代码后生成水平排列的表单，效果所示。