概述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 相关文章推荐
XHTML下,JS浮动代码失效的问题
Nov 12 Javascript
关于js遍历表格的实例
Jul 10 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
javascript连续赋值问题
Jul 08 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
element-ui中的select下拉列表设置默认值方法
Aug 24 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
JS获取当前时间戳方法解析
Aug 29 Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 01 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
PHP基础学习小结
2011/04/17 PHP
php+mysql实现无限级分类
2015/11/11 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
Django实现图片文字同时提交的方法
2015/05/26 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
公立医院改革实施方案
2014/03/14 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
竞聘演讲稿
2014/04/24 职场文书
先进班集体申报材料
2014/12/26 职场文书
捐助感谢信
2015/01/22 职场文书
大学生求职意向书
2015/05/11 职场文书
新员工辞职信范文
2015/05/12 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
Python保存并浏览用户的历史记录
2022/04/29 Python