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 相关文章推荐
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
详解Node.js中的事件机制
Sep 22 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
微信小程序之购物车功能
Sep 23 Javascript
vue实现通讯录功能
Jul 14 Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 Javascript
Vue中图片Src使用变量的方法
Oct 30 Javascript
基于vue的video播放器的实现示例
Feb 19 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
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
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
JS常见算法详解
2017/02/28 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
python 中split 和 strip的实例详解
2017/07/12 Python
python 正确保留多位小数的实例
2018/07/16 Python
python 同时运行多个程序的实例
2019/01/07 Python
Django ModelForm操作及验证方式
2020/03/30 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
银行实习自我鉴定
2013/10/12 职场文书
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
大型营销活动计划书
2014/04/28 职场文书
舞蹈专业求职信
2014/06/13 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
劳资员岗位职责
2015/02/13 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle