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 相关文章推荐
一些技巧性实用js代码小结
Oct 14 Javascript
JavaScript 对话框和状态栏使用说明
Oct 25 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
Jan 23 Javascript
详谈js原型继承的一些问题
Sep 06 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
解决layui轮播图有数据不显示的情况
Sep 16 Javascript
vue基于better-scroll实现左右联动滑动页面
Jun 30 Javascript
详解vue路由
Aug 05 Javascript
Postman参数化实现过程及原理解析
Aug 13 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
php 使用post,get的一种简洁方式
2010/04/25 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
php代码架构的八点注意事项
2016/01/25 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
js表格分页实现代码
2009/09/18 Javascript
kmock javascript 单元测试代码
2011/02/06 Javascript
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
javascript实现密码验证
2015/11/10 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
Python处理JSON时的值报错及编码报错的两则解决实录
2016/06/26 Python
python url 参数修改方法
2018/12/26 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
Python如何实现强制数据类型转换
2019/11/22 Python
python selenium操作cookie的实现
2020/03/18 Python
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
儿科护士实习自我鉴定
2013/10/17 职场文书
老公给老婆的道歉信
2014/01/10 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
学校周年庆活动方案
2014/08/22 职场文书
建设工程授权委托书
2014/09/22 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
《鲁滨逊漂流记》之六读后感(4篇)
2019/09/29 职场文书
导游词之无锡梅园
2019/11/28 职场文书
python基于机器学习预测股票交易信号
2021/05/25 Python
python析构函数用法及注意事项
2021/06/22 Python
Python 绘制多因子柱状图
2022/05/11 Python