概述BootStrap中role="form"及role作用角色


Posted in Javascript onDecember 08, 2016

1、在英汉图灵计算机大词典里:

role

n.角色(任务);

2、在Bootstrap框架中,role="form";

form表单属性,类似与辅助工具,转换角色使用;

role="form"定义form表单元素为form功能角色使用;

3、下面有其他案例:

Eg1:<div role="button"></div> ,把div元素转换为button按钮功能使用;
Eg2:<div role="navigation"></div>,把div元素转换为navigation导航功能使用;
Eg3:<div role="checkbox" aria-checked="checked"></div>,把div元素转换为checkbox复选框功能使用;
Eg4:<a role="button" class="btn btn-default" href="#" >链接</a>,把a链接元素转换为button按钮功能使用。

PS:bootstrap栅栏系统css中的col-xs-*,col-sm-*,col-md-* 的意义

摘要: bootstrap栅栏系统css中的col-xs-*,col-sm-*,col-md-* 的意义:.col-xs-*超小屏幕手机(768px),.col-sm-*小屏幕平板(≥768px),.col-md-*中等屏幕桌面显示器

首先说明:

1、col-列;

2、xs-maxsmall,超小;sm-small,小;md-medium,中等;

3、-*表示占列,即占自动12列栅格系统比;

4、col-xs-*超小屏幕 手机 (<768px),

.col-sm-*小屏幕 平板 (≥768px),

.col-md-*中等屏幕 桌面显示器 (≥992px)(栅格参数).

5、不管在哪种屏幕上,栅格系统都会自动的分12列 col-xs-*和col-sm-* 和col-md-*后面跟的参数表示在当前的屏幕中 div占所占列数。例如 <div class="col-xs-6 col-md-3"> 这个div在屏幕中占的位置是: .col-xs-6 在超小屏幕中占6列 也就是屏幕的一半(6/12) ,.col-md-3 在中单屏幕中占3列也就是1/4(3/12)。

6、反推,如果我们要在小屏幕上并排显示3个div(12/3个=4 列 ),则col-xs-4;在大屏幕上显示6个div(12/6个=2列 ) ,则 col-md-2; 这样我们就可以控制我们自己想要的什么排版了。

Javascript 相关文章推荐
fix-ie5.js扩展在IE5下不能使用的几个方法
Aug 20 Javascript
javascript 冒号 使用说明
Jun 06 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
JS设计模式之惰性模式(二)
Sep 29 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
浅谈layui 表单元素的选中问题
Oct 25 Javascript
layui form表单提交后实现自动刷新
Oct 25 Javascript
JavaScript经典案例之简易计算器
Aug 24 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 #Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
Dec 08 #Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 #Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 #Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 #Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 #Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 #Javascript
You might like
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
实现“上一页”和“下一页按钮
2006/10/09 PHP
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
那些年一起学习的PHP(二)
2012/03/21 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
jQuery操作cookie
2016/08/08 Javascript
layui导航栏实现代码
2017/05/19 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
基于VUE实现判断设备是PC还是移动端
2020/07/03 Javascript
在HTML中使用JavaScript的两种方法
2020/12/24 Javascript
python3学习笔记之多进程分布式小例子
2018/02/13 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
Python使用Matlab命令过程解析
2020/06/04 Python
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
How TDD works
2012/09/30 面试题
元旦获奖感言
2014/03/08 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
职工宿舍管理制度
2015/08/05 职场文书
《穷人》教学反思
2016/02/19 职场文书
Python实现照片卡通化
2021/12/06 Python
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫