前端框架和库：Bootstrap：Bootstrap表单元素与实践.docxVIP

PAGE1

PAGE1

前端框架和库：Bootstrap：Bootstrap表单元素与实践

1Bootstrap表单基础

1.1表单控件和标签

在Bootstrap中，表单控件和标签是构建交互式表单的基础。Bootstrap通过添加特定的类来样式化HTML表单元素，使其在不同设备上保持一致的外观和响应式布局。

1.1.1文本输入框

文本输入框是最常见的表单元素之一。Bootstrap通过.form-control类来样式化输入框，使其在不同屏幕尺寸下保持一致的宽度和高度。

!--文本输入框示例--

form

divclass=mb-3

labelfor=exampleInputEmail1class=form-label邮箱地址/label

inputtype=emailclass=form-controlid=exampleInputEmail1aria-describedby=emailHelp

divid=emailHelpclass=form-text我们绝不会泄露你的邮箱。/div

/div

/form

1.1.2选择框

选择框（select）同样可以通过添加.form-control类来样式化。

!--选择框示例--

form

divclass=mb-3

labelfor=exampleSelect1class=form-label选择框/label

selectclass=form-controlid=exampleSelect1

option1/option

option2/option

option3/option

option4/option

option5/option

/select

/div

/form

1.1.3文本区域

文本区域（textarea）可以通过添加.form-control类来扩展其高度和宽度。

!--文本区域示例--

form

divclass=mb-3

labelfor=exampleTextareaclass=form-label文本区域/label

textareaclass=form-controlid=exampleTextarearows=3/textarea

/div

/form

1.1.4按钮

按钮在表单中用于提交或重置表单。Bootstrap提供了多种按钮样式，如.btn-primary、.btn-secondary等。

!--按钮示例--

form

buttontype=submitclass=btnbtn-primary提交/button

buttontype=resetclass=btnbtn-secondary重置/button

/form

1.2表单布局类

Bootstrap提供了多种布局类来帮助你创建响应式和美观的表单布局。

1.2.1水平布局

水平布局的表单将标签和控件并排显示。使用.row和.col类来实现。

!--水平布局示例--

form

divclass=rowmb-3

labelfor=inputEmail3class=col-sm-2col-form-label邮箱/label

divclass=col-sm-10

inputtype=emailclass=form-controlid=inputEmail3

/div

/div

/form

1.2.2内联布局

内联布局将表单控件并排显示，适用于简单的表单。

!--内联布局示例--

form

divclass=mb-3

labelfor=inlineFormInputName2class=visually-hidden姓名/label

inputtype=textclass=form-controlid=inlineFormInputName2placeholder=姓名

labelfor=inlineFormInputGroupUsername2class=visually-hidden用户名/label

divclass=input-group

divclass=input-group-text@/div

inputtype=textclass=form-controlid=inlineFormInputGroupUsername2placeholder=用户名

/di