Bootstrap响应式网站开发任务式教程课件 任务6 使用Bootstrap表单

任务6使用Bootstrap表单Bootstrap响应式网站开发使用Bootstrap表单1

表单是HTML的一个重要组成部分，一般来说，网页通常会通过“表单”形式收集来自用户的信息，然后将表单数据返回服务器，被登录或查询之用，从而实现web搜索、注册、登录、问卷调查等功能。

在网页制作中，默认的表单样式过于单调，所以在网页中插入表单后可以使用Bootstrap快速地对表单进行优化，Bootstrap的表单样式简洁灵活，通过一些简单的HTML标签和扩展的类即可创建出不同样式的表单，使得网页中表单的设计与制作变得更加快捷。Bootstrap表单--表单布局的类型表单布局的类型堆叠表单是将标签放置在输入框上方，垂直方向排列，其中<lable>标签应用.form-label类，而表单元素<input>,<textarea>和<select>在应用.form-control类下，宽度都是设置为100%。Bootstrap表单--表单布局的类型堆叠表单演示内联表单是网页水平并排排列的表单样式。需要使用

.row

和

.col-auto，或者.row

和

.col结合。<label>标签使用.col-form-label类；<input>,<textarea>和<select>使用.form-control类。Bootstrap表单--表单布局的类型内联表单演示从外观上看，简单的水平表单和内联表单比较相似，但是两者不仅标记的数量上不同，而且在宽度的设置上也不同，水平排列表单可以使用栅格系统完成标签和表单空间的宽度设置。Bootstrap表单--表单布局的类型水平排列表单演示<divclass="rowmy-2"><divclass="col-3text-end"> <labelfor="name"class="col-form-label">昵称:</label></div><divclass="col-9"> <inputtype="text"class="form-control"id="name”"placeholder="昵称"name="nn"></div></div>表单中控件的分类2Bootstrap表单--按钮按钮Bootstrap为按钮提供了一个基本样式类.btn，所有按钮元素都使用它。Bootstrap为按钮提供了用来定义不同风格按钮的预定义样式类如表所示。类说明类说明.btn为按钮添加基本样式.btn-info该样式可用于要弹出信息的按钮，显示浅蓝色.btn-default默认/标准按钮.btn-warning表示需要谨慎操作的按钮，显示橙色.btn-primary主要按钮，显示蓝色.btn-danger表示一个危险动作的按钮操作，显示后红色.btn-success表示成功的动作，显示绿色.btn-link让按钮看起来像个链接(仍然保留按钮行为)btn-dark显示为黑色btn-light显示为浅色演示Bootstrap表单--按钮轮廓按钮如果一个按钮不需要有厚重的背景色，则可以将默认修饰符类替换为.btn-outline-*类。演示Bootstrap表单--按钮按钮尺寸Bootstrap通过为<button>元素应用.btn-lg、.btn-sm两个样式类来获得不同尺寸的按钮，.btn-lg表示大按钮，.btn-sm表示小按钮。按钮激活与禁用状态按钮可设置为激活或者禁止点击的状态。.active

类可以设置按钮是可用的，

disabled

属性可以设置按钮是不可点击的。当按钮处于禁用状态时，它表现为颜色会变淡50%，并失去渐变，呈现出无法单击的效果。加载按钮加载按钮通过在<button>元素中放置一个<spanclass="spinner-border"></span>元素，或者放一个<spanclass="spinner-grow"></span>元素。块按钮Bootstrap实现块元素是通过添加.btn-block类可以设置块级按钮，.d-grid类设置在父级元素中。Bootstrap表单--按钮分辨率小于768像素时的效果分辨率大于等于768像素时的效果演示Bootstrap表单—常见表单元素输入框（input控件）在HTML表单中，input控件是最常用的控件标签。用户可以在其中输入大多数必要的表单数据。Bootstrap提供了对所有原生的HTML5的input类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel

和

color。复选框（Checkbox）、单选框（Radio）和切换开关复选框主要是input元素的type属性设置为checkbox，通过使用class="form-check"来确保标签和复选框有适当边距。.form-check-label类添加到标签元素，.form-check容器内添加.form-check-input类来设置复选框的样式。checked属性用于设置默认选中的选项。单选框主要是input元素的type属性设置为radio。切换开关是把把复选框变成一个可切换的开关，可以在

.form-check

容器内使用

.form-switch

类。当需要进行多行文字输入的时，则可以使用文本框textarea控件。这里可以通过修改

rows的属性值来设置文本框的初始行数。textarea文本框（textarea控件）Bootstrap表单—常见表单元素演示Bootstrap表单—常见表单元素选择框（Select）选择框（Select）属于菜单列表类表单控件，这类控件往往可选择的项目较多，使用单选按钮比较浪费控件。可以说选择框控件主要是为了节省页面空间而设计使用的。选择框使用.form-select类进行样式设置。下拉菜单通过.form-select-lg或.form-select-sm类来修改大小。选择框通过disabled

属性可以禁止下拉菜单被选择。演示Bootstrap表单—常见表单元素范围使用.form-range创建自定义<inputtype="range">控件。在输入上添加disabled布尔属性，使其显示为灰色，并删除指针事件。范围输入分别具有min和max，0和100的隐式值。可以使用min和max属性为这些值指定新值。演示输入框组3Bootstrap表单--输入框组认识输入框组通过在文本输入、自定义选择和自定义文件输入的任一侧添加文本、按钮或按钮组，可以轻松扩展表单控件。使用.input-group类来向表单输入框中添加更多的样式，如图标、文本或者按钮。.input-group-text类来设置文本的样式。演示Bootstrap表单--输入框组输入框组的形态1.输入框大小使用输入框组时，在添加了.input-group类后，通过添加

.input-group-sm

类来设置小的输入框，添加

.input-group-lg

类设置大的输入框。2.多个输入框和文本应用输入框组时，支持多个<input>，也支持多个包含.input-group-text类的span元素。3.复选框和单选按钮应用输入框组时，如果需要使用复选框和单选按钮，则需要将任何复选框或单选选项放置在输入组的加载项中，而不是文本中。4.输入框添加按钮使用输入框组时，只需要在添加了.input-group类后，直接添加<button>即可。5.带下拉列表的按钮使用输入框组时，只需要在添加了.input-group类后，直接添加<button>即可。Bootstrap表单--输入框组输入框组的形态演示Bootstrap表单--输入框组输入框组的形态6.分段按钮使用输入框组时，既添加按钮<button>，又连续添加带下拉列表的按钮，即可实现分段按钮。7.自定义下拉列表框表单输入组包括对自定义选择和自定义文件输入的支持，不支持这些浏览器的默认版本。8.自定义文件（file）输入框输入框组包括<inputtype="file">即可实现自定义文件（file）输入框。演示表单浮动标签与表单验证4Bootstrap表单--表单浮动标签表单浮动标签1.<input>输入框浮动标签默认情况下，标签<lable>内容一般显示在<input>输入框的上方，使用浮动标签，可以在input输入框内插入标签，在单击input输入框时使它们浮动到上方。在.form-floating中包装一对<inputclass="form-control">

和

<label>元素，以使用Bootstrap的文本表单字段启用浮动标签。由于CSS-only浮动标签的方法使用:placeholder-shown伪元素，因此在每个<input>上都需要一个placeholder。还要注意<input>必须放在第一位，这样就可以使用同级选择器。2.<textarea>文本框浮动效果默认情况下，标签<lable>内容一般显示在<input>输入框的上方，使用浮动标签，可以在textarea文本框内插入标签，在单击textarea输入框时使它们浮动到上方。在文本框浮动效果时<textarea>需要自定义高度，不要使用rows属性，而是设置一个显式

height。3.<select>选择菜单浮动效果在选择菜单上使用浮动标签，它将始终显示在选择菜单的左上角，不会有点击浮动效果。Bootstrap表单--表单浮动标签表单浮动标签分辨率小于768像素时呈现的效果

分辨率大于等于768像素时呈现的效果演示Bootstrap表单--表单验证表单验证Bootstrap实现表单验证时，主要使用.was-validated类或.needs-validation类添加到<form>元素中，input输入字段将具有绿色（有效）或红色（无效）边框效果，用于说明表单是否需要输入内容。表单中使用.was-validated类时，表单在提交之前需要填写的内容，