1. 表单

表单是html网页交互很重要的部分，同时也是BootSTrap框架中的核心内容，表单提供了丰富的样式(基础、内联、横向)

表单的元素
input textarea select checkbox radio(checkbox和radio是input的特殊类型)
其他标签
form fieldset legend

1.1.基础表单

<!--基础表单：
1.向父 <form> 元素添加 role="form"。
2.把标签label和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。因为form-group提供了margin
3.向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。-->

<form role="form">
 <fieldset>
  <legend>用户登录</legend>
  <div class="form-group">
   <label for="name">姓名</label>
   <input type="text" class="form-control" id="name" placeholder="请输入名称">
  </div>

  <div class="form-group">
   <label for="psd">密码</label>
   <input type="text" class="form-control" id="psd" placeholder="请输入密码">
  </div>

  <div class="checkbox">
   <label><input type="checkbox">记住密码</label>
  </div>
  <button type="submit" class="btn btn-default">登录</button>
 </fieldset>
</form>

1.2.内联表单

<!-- 内联表单：
  如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline -->
 <form role="form" class="form-inline">
  <fieldset>
   <legend>用户登录</legend>
   <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" class="form-control" id="name" placeholder="请输入名称">
   </div>

   <div class="form-group">
    <label for="psd">密码</label>
    <input type="text" class="form-control" id="psd" placeholder="请输入密码">
   </div>

   <div class="checkbox">
    <label><input type="checkbox">记住密码</label>
   </div>
   <button type="submit" class="btn btn-default">登录</button>
  </fieldset>
 </form>

1.3.横向表单

<!-- 横向表单：
  1.向父 <form> 元素添加 class .form-horizontal。
  2.把标签和控件放在一个带有 class .form-group 的 <div> 中。
  3.向标签添加 class .control-label。
  4.要实现横向表单，还要用栅格类-->
 <form role="form" class="form-horizontal">
  <fieldset>
   <legend>用户登录</legend>
   <div class="form-group">
    <label class="control-label col-lg-1" for="name">姓名</label>
    <div class="col-lg-10">
     <input type="text" class="form-control" id="name" placeholder="请输入名称">
    </div>
   </div>

   <div class="form-group">
    <label class="control-label col-lg-1" for="psd">密码</label>
    <div class="col-lg-10">
     <input type="text" class="form-control" id="psd" placeholder="请输入密码">
    </div>
   </div>
  </fieldset>
 </form>

1.4.表单控件

input元素：
使用input元素的时候，必须声明type类型，否则可能引起问题。

select元素：
多行选择设置multiple=”multiple”

textarea元素：
textarea元素定义了rows数字即可定义大文本框的高度，cols宽度。但是textarea应用了form-control央视，则cols无效。

checkbox和radio(是两个特殊的type)
注意使用的时候，每个input外部用label包住，并且在最外层用容器元素宝珠，并应用相应的.checkbox和.radio样式。

//使用
<div class="checkbox">
 <label><input type="checkbox">学习前端</label>
</div>
<div class="radio">
 <label><input type="radio" name="optionsRadios" value="male">男生</label>
</div>
<div class="radio">
 <label><input type="radio" name="optionsRadios" value="female">女生</label>
</div>

//源码
//让单选框和复选框都能左右和上下居中
.radio,
.checkbox {
 position: relative;
 display: block;
 margin-top: 10px;
 margin-bottom: 10px;
}
//内部有label的话，内联显示
.radio label,
.checkbox label {
 min-height: 20px;
 padding-left: 20px;
 margin-bottom: 0;
 font-weight: normal;
 cursor: pointer;
}

同时可以内联显示，在labelshang添加checkbox-inline或者radio-inline

1.5.空间状态

焦点状态、禁用状态、验证提示状态

焦点状态：
当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。

禁用状态：
对 添加 disabled 属性来禁用 内的所有控件。

验证提示状态：
Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。
–对文字、边框和阴影设置的颜色不同

<div class="form-group has-warning">
 <label for="inputWarning" class="control-label">输入长度不够!</label>
 <input type="text" class="form-control">
</div>
<div class="form-group has-error">
 <label for="inputError" class="control-label">输入不符合要求！</label>
 <input type="text" class="form-control">
</div>
<div class="form-group has-success has-feedback">
 <label for="inputSuccess" class="control-label">输入文本符合要求！</label>
 <input type="text" class="form-control" id="inputSuccess">
 <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

//相对定位，用于设置input元素的父容器的定位方式
.has-feedback {
 position: relative;
}
//右内边距的设置，以便可以显示小图标
.has-feedback .form-control {
 padding-right: 42.5px;
}
//设置小图标的显示方式
.form-control-feedback {
 position: absolute;//绝对定位
 top: 0;
 right: 0;//右对齐
 z-index: 2;
 display: block;
 width: 34px;
 height: 34px;
 line-height: 34px;
 text-align: center;
 pointer-events: none;
}
.input-lg + .form-control-feedback,
.input-group-lg + .form-control-feedback,
.form-group-lg .form-control + .form-control-feedback {
 width: 46px;
 height: 46px;
 line-height: 46px;
}
.input-sm + .form-control-feedback,
.input-group-sm + .form-control-feedback,
.form-group-sm .form-control + .form-control-feedback {
 width: 30px;
 height: 30px;
 line-height: 30px;
}
.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline,
.has-success.radio label,
.has-success.checkbox label,
.has-success.radio-inline label,
.has-success.checkbox-inline label {
 color: #3c763d;
}
.has-success .form-control {
 border-color: #3c763d;
 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.has-success .form-control:focus {
 border-color: #2b542c;
 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
}
.has-success .input-group-addon {
 color: #3c763d;
 background-color: #dff0d8;
 border-color: #3c763d;
}
.has-success .form-control-feedback {
 color: #3c763d;
}

1.6.空间大小

input-lg/input-sm

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Bootstrap  # CSS布局  # 表单  # 基于Bootstrap+jQuery.validate实现Form表单验证  # JS组件Form表单验证神器BootstrapValidator  # 全面解析Bootstrap表单使用方法（表单按钮）  # Bootstrap实现登录校验表单(带验证码)  # 全面解析Bootstrap表单使用方法（表单样式）  # 实用又漂亮的BootstrapValidator表单验证插件  # 基于bootstrap插件实现autocomplete自动完成表单  # Bootstrap每天必学之表单  # 基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路  # Bootstrap导航栏各元素操作方法(表单、按钮、文本)  # 请输入  # 用户登录  # 放在  # 输入框  # 这是  # 都能  # 只需  # 用了  # 要用  # 很重要  # 不符合  # 要对  # 创建一个  # 请向  # 大家多多  # 移除  # 文本框  # 所必需  # 复选框 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 安克发布新款氮化镓充电宝：体积缩小 30%，支持 200W 输出  Midjourney怎样加参数调细节_Midjourney参数调整技巧【指南】  Windows Hello人脸识别突然无法使用  如何在Ubuntu系统下快速搭建WordPress个人网站？  Laravel Debugbar怎么安装_Laravel调试工具栏配置指南  Win11怎么开启自动HDR画质_Windows11显示设置HDR选项  详解MySQL数据库的安装与密码配置  php中::能调用final静态方法吗_final修饰静态方法调用规则【解答】  如何在阿里云通过域名搭建网站？  Laravel怎么在Controller之外的地方验证数据  Laravel如何监控和管理失败的队列任务_Laravel失败任务处理与监控  Laravel如何使用Scope本地作用域_Laravel模型常用查询逻辑封装技巧【手册】  如何选择PHP开源工具快速搭建网站？  Laravel如何使用Eloquent ORM进行数据库操作？（CRUD示例）  Laravel如何实现数据导出到CSV文件_Laravel原生流式输出大数据量CSV【方案】  如何用搬瓦工VPS快速搭建个人网站？  通义万相免费版怎么用_通义万相免费版使用方法详细指南【教程】  HTML5空格和margin有啥区别_空格与外边距的使用场景【说明】  如何快速打造个性化非模板自助建站？  详解Nginx + Tomcat 反向代理 如何在高效的在一台服务器部署多个站点  黑客入侵网站服务器的常见手法有哪些？  如何快速生成凡客建站的专业级图册？  Laravel用户认证怎么做_Laravel Breeze脚手架快速实现登录注册功能  Laravel项目结构怎么组织_大型Laravel应用的最佳目录结构实践  laravel怎么配置和使用PHP-FPM来优化性能_laravel PHP-FPM配置与性能优化方法  百度输入法ai组件怎么删除 百度输入法ai组件移除工具  Laravel如何发送邮件和通知_Laravel邮件与通知系统发送步骤  三星网站视频制作教程下载,三星w23网页如何全屏？  iOS正则表达式验证手机号、邮箱、身份证号等  Win11关机界面怎么改_Win11自定义关机画面设置【工具】  Edge浏览器如何截图和滚动截图_微软Edge网页捕获功能使用教程【技巧】  jquery插件bootstrapValidator表单验证详解  如何在阿里云域名上完成建站全流程？  微博html5版本怎么弄发超话_超话进入入口及发帖格式要求【教程】  如何在阿里云服务器自主搭建网站？  如何在腾讯云服务器快速搭建个人网站？  Laravel怎么使用Markdown渲染文档_Laravel将Markdown内容转HTML页面展示【实战】  Python并发异常传播_错误处理解析【教程】  大连企业网站制作公司,大连2025企业社保缴费网上缴费流程？  如何快速搭建虚拟主机网站？新手必看指南  Laravel如何使用Telescope进行调试？（安装和使用教程）  Laravel怎么做缓存_Laravel Cache系统提升应用速度的策略与技巧  Laravel如何配置Horizon来管理队列？（安装和使用）  C#如何调用原生C++ COM对象详解  黑客如何利用漏洞与弱口令入侵网站服务器？  如何在IIS服务器上快速部署高效网站？  googleplay官方入口在哪里_Google Play官方商店快速入口指南  韩国服务器如何优化跨境访问实现高效连接？  如何挑选优质建站一级代理提升网站排名？  canvas 画布在主流浏览器中的尺寸限制详细介绍