如何使用Bootstrap创建表单布局

清浅

发布时间：2019-01-16 10:09:59

4850人浏览过

来源于php中文网

原创

Bootstrap中提供了三种类型的表单布局：垂直表单、横向表单以及内联表单；它们通过外部引入Bootstrap中的JavaScript和CSS文件以及在元素中添加类名来设置表单控件

HTML表单是网页和应用程序中不可或缺的一部分，但是仅使用CSS来逐个手动设置表单控件的方式通常很麻烦且枯燥乏味。如今随着bootstrap的出现大大简化了表单控件比如表单中的标签，输入字段，选择框以及提交框等样式和对齐过程。接下来在文章中将为大家详细介绍Bootstrap中的表单布局样式

如何使用Bootstrap创建表单布局

【推荐课程：Bootstrap课程】

在Bootstrap中提供了三种不同类型的表单布局：

垂直表单（默认表格布局）
横向表单
内联表单

接下来在文章中将和大家逐一详细介绍这些表单布局以及各种与表单相关的Bootstrap组件

外部引入Bootstrap

创建垂直表单布局

这是默认的Bootstrap表单布局，其中样式应用于表单控件，而不向

元素添加任何基类或标记中的任何大的更改。

此布局中的表单控件在顶部堆叠有左对齐标签

例：

效果图：

如何使用Bootstrap创建表单布局

科威旅游管理系统

该软件是以php+MySQL进行开发的旅游管理网站系统。系统前端采用可视化布局，能自动适应不同尺寸屏幕，一起建站，不同设备使用，免去兼容性烦恼。系统提供列表、表格、地图三种列表显示方式，让用户以最快的速度找到所需行程，大幅提高效率。系统可设置推荐、优惠行程，可将相应行程高亮显示，对重点行程有效推广，可实现网站盈利。系统支持中文、英文，您还可以在后台添加新的语言，关键字单独列出，在后台即可快速翻译。

下载

创建横向表格布局

在横向格式中，布局标签右对齐并向左浮动，使它们与表单控件显示在同一行上。横向表单布局需要在默认表单布局中进行各种标记更改。以下就是实现横向表单布局的具体操作步骤：

（1）为form元素添加.form-horizontal类

（2）在div元素中实现包装标签和表单控件并添加.form-group类

（3）使用Bootstrap的预定义网格类来对齐标签和表单控件

（4）在lable元素中添加.control-label到类

效果图：

如何使用Bootstrap创建表单布局

创建内联表单布局

有时候在创建表单时需要并排放置表单控件用来压缩布局。如果你想实现这个效果可以向form元素中添加form-inline类。

效果图：

未标题-1.jpg

总结：以上就是本篇文章的全部内容了，希望对大家学习Bootstrap中的表单布局样式有所帮助。

Bootstrap 5 瀑布流布局中保持滚动位置的完整解决方案

Bootstrap 中实现 Masonry 布局并持久化滚动位置的完整方案

Bootstrap 5 中 Masonry 布局下保持滚动位置的完整解决方案

如何让 React + Bootstrap 下拉菜单始终显示在最上层？

如何让点击触发的 Bootstrap 5 弹出框在点击外部区域时自动关闭

相关标签:

bootstrap

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：如何使用es6实现去重（代码示例）下一篇：如何修改DOM中的属性，类和样式

作者最新文章

如何理解面向对象

2019-05-14 13:06

C#中default什么意思

2019-05-14 13:34

Java中continue是什么意思

2019-05-14 13:53

什么是javabean

2019-05-14 14:20

什么是矢量图

2019-05-14 14:54

css的继承性是什么

2019-05-14 15:26

什么是css盒子模型

2019-05-14 16:05

windows中update是什么意思

2019-05-14 16:22

user-select如何使用？默认值是什么？

2019-05-14 17:04

操作系统有哪些

2019-05-14 17:44

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI大模型

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

PS使用蒙版相关教程

本专题整合了ps使用蒙版相关教程，阅读专题下面的文章了解更多详细内容。

2026.01.19

java用途介绍

本专题整合了java用途功能相关介绍，阅读专题下面的文章了解更多详细内容。

2026.01.19

java输出数组相关教程

本专题整合了java输出数组相关教程，阅读专题下面的文章了解更多详细内容。

2026.01.19

java接口相关教程

本专题整合了java接口相关内容，阅读专题下面的文章了解更多详细内容。

2026.01.19

xml格式相关教程

本专题整合了xml格式相关教程汇总，阅读专题下面的文章了解更多详细内容。

2026.01.19

PHP WebSocket 实时通信开发

本专题系统讲解 PHP 在实时通信与长连接场景中的应用实践，涵盖 WebSocket 协议原理、服务端连接管理、消息推送机制、心跳检测、断线重连以及与前端的实时交互实现。通过聊天系统、实时通知等案例，帮助开发者掌握使用 PHP 构建实时通信与推送服务的完整开发流程，适用于即时消息与高互动性应用场景。

2026.01.19