Bootstrap CSS布局之表单


Posted in Javascript onDecember 17, 2016

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于BootStarp的Dailog
Apr 28 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
Web 开发中Ajax的Session 超时处理方法
Jan 19 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
JS实现倒计时图文效果
Nov 17 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
微信小程序实现Swiper轮播图效果
Nov 22 Javascript
VUE中使用HTTP库Axios方法详解
Feb 05 Javascript
JavaScript实现点击自制菜单效果
Feb 02 Javascript
Bootstrap CSS布局之表格
Dec 17 #Javascript
Bootstrap CSS布局之代码
Dec 17 #Javascript
基于js实现二级下拉联动
Dec 17 #Javascript
文件上传的几个示例分享【推荐】
Dec 16 #Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 #Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 #Javascript
JS搜狐面试题分析
Dec 16 #Javascript
You might like
织梦模板标记简介
2007/03/11 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
PHP实现的浏览器检查类
2016/04/11 PHP
PHP单链表的实现代码
2016/07/05 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
fullCalendar中文API官方文档
2017/02/07 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
python学习 流程控制语句详解
2016/06/01 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
python网络爬虫之如何伪装逃过反爬虫程序的方法
2017/11/23 Python
Python中return self的用法详解
2018/07/27 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
亚马逊中国官方网站:amazon.cn
2017/05/25 全球购物
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
秋季红领巾广播稿
2014/01/27 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
超越自我演讲稿
2014/05/21 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android
golang为什么要统一错误处理
2022/04/03 Golang
MySQL数据库Innodb 引擎实现mvcc锁
2022/05/06 MySQL