bootstrap-表单

最新推荐文章于 2025-05-09 19:52:15 发布

原创最新推荐文章于 2025-05-09 19:52:15 发布 · 363 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了表单与表格在功能方面的区别，表单用于提交数据，有多种输入控件；表格用于布局。还阐述了表单的基本结构、内联表单、左右排列表单、表单尺寸、控件组、搜索控件组等内容，包括相关代码和效果，以及搜索的其他用法和图标样式修改。

在这里插入图片描述

表单与表格的区别，功能面

提交数据向目标发起请求

form，表单
有输入框，按钮，单选框，复选框，下拉框，文件，图片，大块的文本编辑等等

布局功能

table，表格
div，布局
ul>li，无序列表
ol>li，有序列表
dl>dt>dd，自定义列表

先导相关文件

在这里插入图片描述

从官方文档当中查看一下表单的一些情况

每一个表单基本上都包括一个文字说明以及一个表单的表单的控制原件

在框架当中，基本上是把这两个东西包裹在一个分组当中 from-group

在这里插入图片描述

完成基本的结果
在这里插入图片描述

代码
在这里插入图片描述

效果
在这里插入图片描述

新的目标就是期望点击文字，能够让对应的表单控件获得焦点

给表单控件一个ID，然后让我们的标签指向这个ID

在这里插入图片描述

内联表单

在这里插入图片描述

直接在表单的标签里面添加这个样式就可以
在这里插入图片描述
看一看效果

在这里插入图片描述

效果就是他们都排在了一行

左右排列的表单

在这里插入图片描述

在这里插入图片描述
霍锐脏头

水平排列的表单需要需要用到栅格

比较使用栅格前后的代码差别

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

使用xs确保一定不会出现独占一行的情况

在这里插入图片描述

表单的尺寸

在这里插入图片描述

大中小

在这里插入图片描述

在这里插入图片描述

控件组 input-group

重要

例子代码

在这里插入图片描述

效果是，可以把表单的元素合在一块

例如，让一个span标签与input标签融合在一起
在这里插入图片描述

搜索控件组

一般输入框后有带搜索的情况

在这里插入图片描述

在这里插入图片描述

当前的搜索效果出来了，但是，点击搜索，没有反应。。。

因此，需要把搜索这里，变为按钮的形态

变为按钮形态，要稍麻烦一点，结构。。。

在这里插入图片描述

代码

在这里插入图片描述

主要关注一下，两种写法的格式区别

如果是框与信息展示，写法简单

如果是框与按钮的展示，按钮要被包一层

在这里插入图片描述

搜索的其它用法

使用button标签

在这里插入图片描述

在这里插入图片描述

使用小图标

用图标代替文字

在官网组件中搜索

在这里插入图片描述

例，用户名那里，改为一个人的图标

在控件组中找到小人图标的样式名称
在这里插入图片描述

使用一个内联标签，加上这个样式，就可以实现图象的效果

在这里插入图片描述

以前排版的文字内容是

用户名，密码

在这里插入图片描述

对图标的样式进行修改

在这里插入图片描述

颜色变化

在这里插入图片描述

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

鲸鱼编程pyhui 你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。