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 相关文章推荐
JavaScript QueryString解析类代码
Jan 17 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
javascript作用域问题实例分析
Jul 13 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
JavaScript检测原始值、引用值、属性
Jun 20 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 Javascript
vue实现表单录入小案例
Sep 27 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
重置版战役片段
2020/04/09 魔兽争霸
让PHP开发者事半功倍的十大技巧小结
2010/04/20 PHP
php设计模式 Visitor 访问者模式
2011/06/28 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
My Desktop :) 桌面式代码
2008/12/29 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
vue 扩展现有组件的操作
2020/08/14 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
一个基于flask的web应用诞生 bootstrap框架美化(3)
2017/04/11 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
python中装饰器级连的使用方法示例
2017/09/29 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
kafka-python批量发送数据的实例
2018/12/27 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
Python实现EM算法实例代码
2020/10/04 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
请介绍一下WSDL的文档结构
2013/03/17 面试题
优秀的毕业生的自我评价
2013/12/12 职场文书
工商管理实习生自我鉴定范文
2013/12/18 职场文书
教导处工作制度
2014/01/18 职场文书
史上最牛辞职信
2015/05/13 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
Pandas 稀疏数据结构的实现
2021/07/25 Python