Bootstrap表单的使用

news2024/11/14 20:33:46

文章目录

  • 前言
  • 一、创建基础表单
      • 垂直表单(默认)
      • 内联表单(水平显示)
  • 表单控制尺寸大小
  • 给表单控件添加帮助文本
  • 禁用/只读表单
  • 无边框的控件
  • 取色器
  • 选择菜单(默认宽度100%)
      • 调整下拉菜单的大小
  • 表单开关
  • 滑块
  • 表单组
      • 多个输入
      • 带复选框与单选框的表单组
      • 带按钮的表单组


前言

HTML中表单是网页和应用程序不可缺少的一部分,Bootstrap通过预定义的类极大的简化了表单组件的样式及使用方式

一、创建基础表单

Bootstrap提供了三种不同的表单布局

垂直表单(默认)

  • .form-label 类来确保标签元素有一定的内边距。
  • 复选框与单选框使用 .form-check 包裹容器来保证有间距
  • 复选框和单选按钮使用 .form-check-input,包裹它的标签可以使用 .form-check-label 类。
  • checked 默认选中(复选框或者单选框在class类之外加)
<div class="container mt-3">
  <h2>垂直表单</h2>
	<form action="">
	  <div class="mb-3 mt-3">
		<label for="email" class="form-label">Email:</label>
		<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
	  </div>
	  <div class="mb-3">
		<label for="pwd" class="form-label">Password:</label>
		<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
	  </div>
	  <div class="form-check mb-3">
		<label class="form-check-label" >
		  <input class="form-check-input" type="checkbox" name="remember"  checked> Remember me
		</label>
	  </div>
	  <button type="submit" class="btn btn-primary">Submit</button>
	</form>
</div>

在这里插入图片描述

内联表单(水平显示)

  • .row 代表一行
  • .col代表一列
<div class="container mt-3">
  <h2>内联表单</h2>
  <p>如果您希望表单元素并排显示,请使用 .row 和 .col:</p>
  <form>
    <div class="row">
      <div class="col">
        <input type="text" class="form-control" placeholder="Enter email" name="email">
      </div>
      <div class="col">
        <input type="password" class="form-control" placeholder="Enter password" name="pswd">
      </div>
    </div>
  </form>
</div>

在这里插入图片描述

表单控制尺寸大小

  • form-control-lg 大型控件
  • form-control-sm 小型控件
  <div class="container mt-3">
	<form action="">
	  <div class="mb-3 mt-3">
		<label for="email" class="form-label">Email:</label>
		<input type="email" class="form-control form-control-lg" id="email" placeholder="大型控件" name="email">
	  </div>
	  <div class="mb-3">
		<label for="pwd" class="form-label">Password:</label>
		<input type="password" class="form-control form-control-sm" id="pwd" placeholder="小型控件" name="pswd">
	  </div>
	</form>
</div>

在这里插入图片描述

给表单控件添加帮助文本

  <div class="container mt-3">
	  <form action="">
	  <div class="row">
        <div  class="col col-auto mt-1" >
        <label for="pwd" class="form-label">密码:</label>
        </div>
        <div class="col col-auto" >
        <input type="password" class="form-control" id="pwd" placeholder="请输入密码" name="pswd">
        </div>
        <div class="col-auto  mt-1">
          <span class="form-text">字符必须6-20之间</span>
        </div>
    </div>
	</form>
</div>

在这里插入图片描述

禁用/只读表单

  • disabled属性设置输入框禁用
  • readonly 属性设置输入框只读
<input type="text" class="form-control" placeholder="Normal input">
<input type="text" class="form-control" placeholder="Disabled input" disabled>
<input type="text" class="form-control" placeholder="Readonly input" readonly>

在这里插入图片描述

无边框的控件

  • .form-control-plaintext 类可以删除输入框的边框
 <form>
    <input type="text" class="form-control-plaintext" placeholder="无边框的输入框">
	<input type="text" class="form-control" placeholder="正常输入框">
  </form>

在这里插入图片描述

取色器

  • .form-control-color 类可以创建一个取色器
 <form>
      <input type="color" class="form-control-color ">
    </form>

在这里插入图片描述

选择菜单(默认宽度100%)

  • form-select 创建一个下拉列表
 <form action="">
      <select class="form-select">
        <option value="">选项一</option>
        <option value="">选项二</option>
        <option value="">选项三</option>
      </select>
    </form>

在这里插入图片描述

调整下拉菜单的大小

  • form-select-lg 大控件
  • form-select-sm 小控件
<form action="">
      <select class="form-select form-select-lg">
        <option value="">选项一</option>
        <option value="">选项二</option>
        <option value="">选项三</option>
      </select>
      <select class="form-select form-select-sm">
        <option value="">选项一</option>
        <option value="">选项二</option>
        <option value="">选项三</option>
      </select>
    </form>

在这里插入图片描述

表单开关

.form-check以及form-switch配置复选框实现滑块开关

<div class="form-check form-switch">
      <input type="checkbox" class="form-check-input" checked>
      <label type="text" class="form-check-label ">开关</label>
 </div>

在这里插入图片描述

滑块

  • form-range 使input更改为滑块效果

在这里插入图片描述

 <input type="range" class="form-range">

表单组

  • input-group是容器,通过在输入字段的前面或后面添加图标,文本或按钮用作于加强输入
  • input-group-text 指定帮助文本样式(会添加背景及边框)
  • input-group-sm将控件设置为小型控件
  • input-group-lg将控件设置为大型控件
    在这里插入图片描述
<div class="input-group">
       <span class="input-group-text">用户名:
       </span>
       <input type="text" class="form-control">
     </div>
     <div class="input-group">
      <span class="input-group-text">密码:
      </span>
      <input type="text" class="form-control">
    </div>

多个输入

  <div class="input-group">
       <span class="input-group-text">输入姓名
       </span>
       <input type="text" class="form-control" placeholder="请输入您的姓氏">
      <input type="text" class="form-control" placeholder="请输入您的名字">
     </div>

在这里插入图片描述

带复选框与单选框的表单组

加了input-group-text之后的控件都带有边框与样式

 <div class="input-group">
       <div class="input-group-text">
         <input type="checkbox" checked>
         <!-- <input type="radio" > -->
       </div>
       <input type="text" class="form-control" placeholder="请输入内容">
     </div>

在这里插入图片描述

带按钮的表单组

  • btn 指定按钮类
  • btn-success 添加对应背景颜色
  • btn-info
  • btn-primary
<div class="input-group">
       <div class="input-group-text">
         <!-- <input type="checkbox" checked> -->
         <!-- <input type="radio" > -->
         <button type="submit" class="btn btn-success">按钮</button>
       </div>
       <input type="text" class="form-control" placeholder="请输入内容">
     </div>

在这里插入图片描述


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/372831.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

LabVIEW网络服务安全

LabVIEW网络服务安全如何保护Web服务&#xff1f;当许多人考虑安全性时&#xff0c;他们会考虑加密、用户ID和密码。用户ID和密码用于授权&#xff08;告诉目标谁在发出请求&#xff09;。加密保护客户端和服务器之间的通信流量&#xff0c;以便未经授权的个人无法拦截和读取发…

【架构师】零基础到精通——康威定律

博客昵称&#xff1a;架构师Cool 最喜欢的座右铭&#xff1a;一以贯之的努力&#xff0c;不得懈怠的人生。 作者简介&#xff1a;一名Coder&#xff0c;软件设计师/鸿蒙高级工程师认证&#xff0c;在备战高级架构师/系统分析师&#xff0c;欢迎关注小弟&#xff01; 博主小留言…

20_FreeRTOS低功耗模式

目录 低功耗模式简介 STM32低功耗模式 Tickless模式详解 Tickless模式相关配置 实验源码 低功耗模式简介 很多应用场合对于功耗的要求很严格,比如可穿戴低功耗产品、物联网低功耗产品等。 一般MCU都有相应的低功耗模式,裸机开发时可以使用MCU的低功耗模式。 FreeRTOS也…

Linux学习(8.7)命令与文件的搜寻

目录 命令与文件的搜寻 which 文件档名的搜寻&#xff1a; whereis (寻找特定文件) locate find 以下内容转载自鸟哥的Linux私房菜 命令与文件的搜寻 which 这个命令是根据『PATH』这个环境变量所规范的路径&#xff0c;去搜寻『运行档』的档名&#xff5e; 所以&am…

计算机组成原理——运算方法续集(浮点数表示法)

浮点表示法把一个数字的有效数字和数的范围在计算机的一个存储单元中分别予以表示。这种精度分别表示的方法&#xff0c;相当于数的小数点位置随比例因子的不同而在一定范围内可以浮点&#xff0c;所以称为浮点表示法。在计算机中一个任意二进制数N可以写成N 2^e.M其中M称为浮…

Overleaf推广奖励:增加合作者的数量、解锁Dropbox同步和项目修改历史

Overleaf推广奖励 Overleaf是一个LaTeX\LaTeXLATE​X在线编译器&#xff0c;它可以让你与合作者共同在线编辑文档。但是默认的免费账号仅能邀请一个合作者。那么如何增加合作者的数量呢&#xff1f; Overleaf推出了一个奖励计划&#xff0c;你邀请其他人注册Overleaf&#xf…

使用MavenCentral发布Kotlin多平台库的远程依赖(KMM,KMP)

前言 开发者可能都会做自己的开源库,像我以前只做一些单平台的,如Android或JVM平台,这时候直接使用jitpack即可,很简单就能发布远程依赖 jitpack参考: 发布开源库的踩坑经历:jitpack.io_李小白lt的博客 而现在Kotlin可以通过expect来实现原生多平台项目(或库),这时我们开发…

【计算机三级网络技术】 第二篇 中小型系统总体规划与设计

文章目录一、基于网络的信息系统基本结构二、划分网络系统组建工程阶段三、网络需求调研与系统设计原则四、网络用户调查与网络工程需求分析1.网络用户调查2.网络节点的地理位置分布3.应用概要分析4.网络需求详细分析五、网络总体设计基本方法1.网络工程建设总体目标与设计原则…

C++---线性dp---传纸条(每日一道算法2023.2.26)

注意事项&#xff1a; 本题dp思路与 “线性dp–方格取数” 一致&#xff0c;下方思路仅证明为什么使用方格取数的思路是正确的。 题目&#xff1a; 小渊和小轩是好朋友也是同班同学&#xff0c;他们在一起总有谈不完的话题。 一次素质拓展活动中&#xff0c;班上同学安排坐成…

3.7寸按键翻页工牌

产品参数 产品型号 ESL_BWR3.7_BLE 产品尺寸 (mm) 62.51066.5 显示技术 E ink 显示区域 (mm) 47.32(H)81.12(V) 分辨率 (像素) 280480 像素尺寸(mm) 0.1690.169 150dpi 显示颜色 黑/白 视觉角度 180 工作温度 0℃ - 50℃ 电池 500mAh ( Type-C 充电…

黑盒测试用例设计方法-等价类划分法

目录 一、等价类的作用 二、等价类的分类 三、等价类的方法 四、等价类的原则 五、按照测试用例的完整性划分等价类 六、等价类步骤 七、案例 一、等价类的作用 为穷举测试设计测试点。 穷举&#xff1a;列出所有的可能情况&#xff0c;对其一一判断。 测试点&#x…

JasperReports studio相关操作

1.2 JasperReports JasperReports是一个强大、灵活的报表生成工具&#xff0c;能够展示丰富的页面内容&#xff0c;并将之转换成PDF&#xff0c;HTML&#xff0c;或者XML格式。该库完全由Java写成&#xff0c;可以用于在各种Java应用程序&#xff0c;包括J2EE&#xff0c;Web应…

【数据挖掘】1、综述:背景、数据的特征、数据挖掘的六大应用方向、有趣的案例

目录一、背景1.1 学习资料1.2 数据的特征1.3 数据挖掘的应用案例1.4 获取数据集1.5 数据挖掘的定义二、分类三、聚类四、关联分析五、回归六、可视化七、数据预处理八、有趣的案例8.1 隐私保护8.2 云计算的弹性资源8.3 并行计算九、总结一、背景 1.1 学习资料 推荐书籍如下&a…

C语言刷题(3)——“C”

各位CSDN的uu们你们好呀&#xff0c;今天小雅兰的内容还是做几道题噢&#xff0c;好好复习一下之前的知识点&#xff0c;现在&#xff0c;就让我们开始复习吧 牛客网在线编程_编程学习|练习题_数据结构|系统设计题库 倒置字符串_牛客题霸_牛客网 BC40 竞选社长 BC41 你是天才…

vitepress 就这几步操作,博客就搭好啦?

Ⅰ、什么是vitepress &#x1f48e; vitepress 使用场景 简单的说 &#xff0c;只要 会用 markdown 语法&#xff0c;就能构建自己的 「博客、笔记、使用文档」等系统 &#xff1b; ✨ vitepress 优势 优势介绍傻瓜式操作只需要配置 菜单 和 对应的 markdown 就能实现博客、笔…

OKR 与 KPI有何异同?各部门OKR实例【小bu】

OKR 与 KPI&#xff0c;如何本土化是关键 近期公司计划对去年实施的绩效考核方案进行优化&#xff0c;公司以往采用 KPI 绩效考核方式&#xff0c;产生了一些争议。一方面&#xff0c;执行期间部分部门一度忽略指标设置的真实目的&#xff0c;导致出现短视思维和行为&#xff1…

Vision Transformer学习了什么-WHAT DO VISION TRANSFORMERS LEARN? A VISUAL EXPLORATION

WHAT DO VISION TRANSFORMERS LEARN? A VISUAL EXPLORATION 文章地址 代码地址 摘要 视觉转换器( Vision Transformers&#xff0c;ViTs )正在迅速成为计算机视觉的事实上的架构&#xff0c;但我们对它们为什么工作和学习什么知之甚少。虽然现有研究对卷积神经网络的机制进…

LabVIEW控制DO通道输出一个精确定时的数字波形

LabVIEW控制DO通道输出一个精确定时的数字波形如何使用数据采集板卡的DO通道输出一个精确定时的数字波形&#xff1f;解答:产生一个数字波形首先需要创建一个布尔数组&#xff0c;把波形序列信息放到该布尔数组中&#xff0c;然后通过一个布尔数组至数字转换vi来产生数字波形。…

【C++】仿函数、lambda表达式、包装器

1.仿函数 仿函数是什么&#xff1f;仿函数就是类中的成员函数&#xff0c;这个成员函数可以让对象模仿函数调用的行为。 函数调用的行为&#xff1a;函数名(函数参数)C中可以让类实现&#xff1a;函数名(函数参数)调用函数 自己写一个仿函数&#xff1a; 重载()运算符 cla…

chatgpt的原理 第四部分

五、ChatGPT 终于说到了主角&#xff0c;能看到这里的&#xff0c;可以关注一下 JioNLP 公众号吗&#xff1f;我写的也够累的。 ChatGPT 模型上基本上和之前 GPT-3 都没有太大变化&#xff0c;主要变化的是训练策略变了&#xff0c;用上了强化学习。 强化学习 几年前&#xf…