我的学习心得:
1.label的for的意义
在用户注册的时候，常常用户点击文字就需要将光标聚焦到对应的表单上面显式的联系：
<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSn" />
隐式的联系：
<label>Date of Birth: <input type="text" name="DofB" /></label> 2.sr-only属性的理解screen reader only
屏幕阅读器，这个 class 主要用于增强 accessbility（可访问性）我们还要写上这些元素的文本说明，但是又不需要展示给普通用户看到，于是加上 sr-only3.bootstrap中 <div class="col-sm-10 col-md-8"> 表示：在中等屏幕设备上该div占用8列的宽度；在小屏幕上该div占用10列的宽度
Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。
使用 Bootstrap 的排版特性，您可以创建标题、段落、列表及其他内联元素。
| 类 | 描述 | 实例 |
|---|---|---|
| .lead | 使段落突出显示 | 尝试一下 |
| .small | 设定小文本 (设置为父文本的 85% 大小) | 尝试一下 |
| .text-left | 设定文本左对齐 | 尝试一下 |
| .text-center | 设定文本居中对齐 | 尝试一下 |
| .text-right | 设定文本右对齐 | 尝试一下 |
| .text-justify | 设定文本对齐,段落中超出屏幕部分文字自动换行 | 尝试一下 |
| .text-nowrap | 段落中超出屏幕部分不换行 | 尝试一下 |
| .text-lowercase | 设定文本小写 | 尝试一下 |
| .text-uppercase | 设定文本大写 | 尝试一下 |
| .text-capitalize | 设定单词首字母大写 | 尝试一下 |
| .initialism | 显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母 | 尝试一下 |
| .blockquote-reverse | 设定引用右对齐 | 尝试一下 |
| .list-unstyled | 移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式) | 尝试一下 |
| .list-inline | 将所有列表项放置同一行 | 尝试一下 |
| .dl-horizontal | 该类设置了浮动和偏移，应用于 <dl> 元素和 <dt> 元素中，具体实现可以查看实例 | 尝试一下 |
| .pre-scrollable | 使 <pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条 |
更多
1.代码
第一种是 <code> 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。
第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre> 标签。
2.表格类型
| 类 | 描述 | 实例 |
|---|---|---|
| .table | 为任意 <table> 添加基本样式 (只有横向分隔线) | 尝试一下 |
| .table-striped | 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) | 尝试一下 |
| .table-bordered | 为所有表格的单元格添加边框 | 尝试一下 |
| .table-hover | 在 <tbody> 内的任一行启用鼠标悬停状态 | 尝试一下 |
| .table-condensed | 让表格更加紧凑 | 尝试一下 |
3.图片
<img src="11.jpg" class="img-responsive" alt="响应式图像"><%@ page contentType="text/html;charset=UTF-8" language="java"%>
<!DOCTYPE html>
<html>
<head>
<title>11</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="static/vendors/bootstrapvalidator/css/bootstrapValidator.css">
<link type="text/css" rel="stylesheet" href="static/vendors/bootstrap/css/bootstrap.css">
</head>
<body>
<div class="container">
<h3>图片</h3>
<img src="11.jpg" class="img-responsive" alt="响应式图像">
<div class="jumbotron">
<h1>jumbotron</h1>
<p>大屏幕大屏幕大屏幕</p>
</div>
<div class="row">
<div class="row-sm-4 col-sm-offset-1">
<h2>网格布局</h2>
<p>某某人某天在哪里干了什么什么，然后发生了什么什么</p>
</div>
</div>
<h3>垂直表单</h3>
<form action="" method="POST" role="form" id="form-test">
<legend>表格标题</legend>
<div class="form-group">
<label for="">姓名</label>
<input type="text" class="form-control" id="" name="username" placeholder="用户名">
</div>
<div class="form-group">
<label for="inputPassword">密码</label>
<input type="password" class="form-control" id="inputPassword" placeholder="请输入密码">
</div>
<div class="checkbox">
<label>
<input type="checkbox">请打勾
</label>
</div>
<div class="form-group">
<label for="inputfile">文件</label>
<input type="file" id="inputfile">
</div>
<div class="form-group">
<label for="name">文本框</label>
<textarea class="form-control" rows="3"></textarea>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 选项 1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">选项 2 - 选择它将会取消选择选项 1
</label>
</div>
<div class="form-group">
<label for="name">选择列表</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label for="name">可多选的选择列表</label>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<button id="btn-test" class="btn btn-primary">Submit</button>
</form>
<h3>内联表单</h3>
<form role="form" class="form-inline">
<div class="form-group">
<label class="sr-only" for="name">姓名</label>
<input type="text" id="name" class="form-control" placeholder="用户名"/>
</div>
<div class="checkbox">
<label>
<input type="checkbox">请打勾
</label>
</div>
<div class="form-group">
<label class="sr-only" for="inputfile1">文件</label>
<input type="file" id="inputfile1">
</div>
</form>
<h3>水平表单</h3>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-1 control-label">名字</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname" placeholder="请输入名字">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-1 control-label">姓</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastname" placeholder="请输入姓">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">请记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
<div class="form-group">
<input class="form-control input-lg" type="text" placeholder=".input-lg">
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="默认输入">
</div>
<div class="form-group">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
</div>
<div class="form-group">
</div>
<div class="form-group">
<select class="form-control input-lg">
<option value="">.input-lg</option>
</select>
</div>
</form>
</div>
</body>
<script src="static/vendors/jquery/js/jquery.min.js"></script>
<script src="static/vendors/bootstrapvalidator/js/bootstrapValidator.js"></script>
<script src="static/vendors/bootstrap/js/bootstrap.js"></script>
<script>
$(function () {
$("#form-test").bootstrapValidator({
live: 'disabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
excluded: [':disabled', ':hidden', ':not(:visible)'],//排除无需验证的控件，比如被禁用的或者被隐藏的
submitButtons: '#btn-test',//指定提交按钮，如果验证失败则变成disabled，但我没试成功，反而加了这句话非submit按钮也会提交到action指定页面
message: '通用的验证失败消息',//好像从来没出现过
feedbackIcons: {//根据验证结果显示的各种图标
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
validators: {
notEmpty: {//检测非空,radio也可用
message: '文本框必须输入'
},
stringLength: {//检测长度
min: 6,
max: 30,
message: '长度必须在6-30之间'
},
regexp: {//正则验证
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '所输入的字符不符要求'
},
remote: {//将内容发送至指定页面验证，返回验证结果，比如查询用户名是否存在
url: '指定页面',
message: 'The username is not available'
},
different: {//与指定文本框比较内容相同
field: '指定文本框name',
message: '不能与指定文本框内容相同'
},
emailAddress: {//验证email地址
message: '不是正确的email地址'
},
identical: {//与指定控件内容比较是否相同，比如两次密码不一致
field: 'confirmPassword',//指定控件name
message: '输入的内容不一致'
},
date: {//验证指定的日期格式
format: 'YYYY/MM/DD',
message: '日期格式不正确'
},
choice: {//check控件选择的数量
min: 2,
max: 4,
message: '必须选择2-4个选项'
}
}
}
}
});
$("#btn-test").click(function () {//非submit按钮点击后进行验证，如果是submit则无需此句直接验证
$("#form-test").bootstrapValidator('validate');//提交验证
if ($("#form-test").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
alert("yes");//验证成功后的操作，如ajax
}
});
});
</script>
</html>
扫一扫
1074
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
