【BootStrap】表单 案例
时间:2019-08-22
本文章向大家介绍【BootStrap】表单 案例,主要包括【BootStrap】表单 案例使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
BootStrap表单组件
详细文档请查看BootStrap中文网,这里只列举几种效果供参考
效果1:
<form action="" class="form-horizontal"> <div class="form-group"> <label for="" class="col-sm-2 control-label">name</label> <div class="col-sm-4 input-group"> <span class="input-group-addon"> <span class="glyphicon glyphicon-user"></span> </span> <input type="text" class="form-control"> </div> </div> <div class="form-group"> <label for="" class="col-sm-2 control-label">education</label> <div class="col-sm-4 input-group"> <span class="input-group-addon"> <span class="glyphicon glyphicon-education "></span> </span> <input type="text" class="form-control"> </div> </div> <div class="form-group"> <label for="" class="col-sm-2 control-label">hobby</label> <div class="col-sm-4 input-group"> <span class="input-group-addon"> <span class="glyphicon glyphicon-heart"></span> </span> <input type="text" class="form-control"> </div> </div> </form>
效果2:
<div class="formBox" style="border: 1px solid red;padding: 10px;width: 600px;"> <div class="h1" style="margin: 20px auto;text-align: center">用户注册</div> <div class="row" style="margin:0 auto"> <div class="col-md-12"> <form class="form-horizontal"> <div class="form-group"> <label for="exampleInputName2" class="col-sm-2 control-label">用户名</label> <div class="col-sm-8"> <input type="text" class="form-control" id="exampleInputName2" placeholder="用户名"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">密码</label> <div class="col-sm-8"> <input type="password" class="form-control" id="inputPassword3" placeholder="密码"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">确认密码</label> <div class="col-sm-8"> <input type="password" class="form-control" id="inputPassword3" placeholder="确认密码"> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label> <div class="col-sm-8"> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="邮箱"> </div> </div> <div class="form-group"> <label for="exampleInputName3" class="col-sm-2 control-label">手机号</label> <div class="col-sm-8"> <input type="text" class="form-control" id="exampleInputName3" placeholder="手机号"> </div> <div class="col-sm-2" style="margin-left: -22px"> <button type="submit" class="btn btn-default">发送</button> </div> </div> <div class="form-group"> <label for="exampleInputName4" class="col-sm-2 control-label">验证码</label> <div class="col-sm-6"> <input type="text" class="form-control" id="exampleInputName4"> </div> <img src="static/uploadImgs/1.png" alt="" class="col-sm-2"> </div> <div class="form-group"> <div class="col-sm-offset-7 col-sm-1"> <button type="submit" class="btn btn-default">取消</button> </div> <div class="col-sm-offset-1 col-sm-1"> <button type="submit" class="btn btn-success">提交</button> </div> </div> </form> </div> </div>
原文地址:https://www.cnblogs.com/XJT2018/p/11395068.html
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- rxjs里的Observable对象的pipe方法
- rxjs里的Observable对象和map配合的一个用法
- rxjs里的Observable对象subscribe方法的执行原理
- Java正则表达式
- kubernetes 二进制安装部署手册
- 接口
- Redis的各种数据类型实践--String字符串
- 必应API接口node.js版 - 极客玩家大白
- FFmpeg--简介
- 推荐系统中的常用算法——DeepWalk算法
- TypeError: cannot unpack non-iterable NoneType object
- 原型模式
- Spring 整合 Mybatis
- 数据库PostrageSQL-关闭服务器
- 快速配置Azure DevOps代理服务器