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

 更新时间:2016年12月08日 09:13:44   投稿:mrr  
这篇文章主要介绍了BootStrap中role="form"及role作用角色介绍,以及bootstrap栅栏系统css中的col-xs-*,col-sm-*,col-md-* 的意义简单介绍,需要的朋友参考下

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; 这样我们就可以控制我们自己想要的什么排版了。

相关文章

  • 如何理解JS函数防抖和函数节流

    如何理解JS函数防抖和函数节流

    函数防抖和函数节流都是对函数进行特殊的设置,减少该函数在某一时间段内频繁触发带来的副作用。二者只是采用的设置方式和原理不一样,其最终的目的是一样的。
    2021-05-05
  • 在JavaScript中使用for循环的方法

    在JavaScript中使用for循环的方法

    这篇文章主要介绍了如何在JavaScript中使用for循环,通过使用JavaScript for...in循环,我们可以循环对象的键或属性,在迭代对象属性或进行调试时,它可能很有用,但在迭代数组或对对象进行修改时,应该避免使用for...in循环,需要的朋友可以参考下
    2022-11-11
  • JavaScript 编写枚举的最有效方法分享

    JavaScript 编写枚举的最有效方法分享

    这篇文章主要介绍了JavaScript 编写枚举的最有效方法分享,JavaScript语言本身不支持枚举。如果我们想模拟枚举,我们可以使用一个对象。更多相关内容感兴趣的小伙伴可以参考一下
    2022-06-06
  • cocos2dx+lua实现橡皮擦功能

    cocos2dx+lua实现橡皮擦功能

    这篇文章主要为大家详细介绍了cocos2dx+lua实现橡皮擦功能,类似刮刮乐效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • 基于BootStrap的前端分页带省略号和上下页效果

    基于BootStrap的前端分页带省略号和上下页效果

    这篇文章主要介绍了基于BootStrap的前端分页带省略号和上下页效果,需要的朋友可以参考下
    2017-05-05
  • javascript系统时间设置操作示例

    javascript系统时间设置操作示例

    这篇文章主要介绍了javascript系统时间设置操作,涉及javascript时间运算与判断相关操作技巧,需要的朋友可以参考下
    2019-06-06
  • 完美实现js选项卡切换效果(二)

    完美实现js选项卡切换效果(二)

    这篇文章主要为大家详细介绍如何完美实现js选项卡切换效果,通过设置定时器实现延时0.5s切换选项卡,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • javascript 从if else 到 switch case 再到抽象

    javascript 从if else 到 switch case 再到抽象

    大家觉得在接手遗留代码时,见到什么东东是最让人感到不耐烦的?复杂无比的 UML ?我觉得不是。
    2010-07-07
  • JavaScript时间转换处理函数

    JavaScript时间转换处理函数

    这篇文章主要介绍了JavaScript时间转换处理函数的方法的相关资料,需要的朋友可以参考下
    2015-04-04
  • JS实现单例模式的6种方案汇总

    JS实现单例模式的6种方案汇总

    单例模式的定义是保证一个类仅有一个实例,下面这篇文章主要给大家介绍了关于JS实现单例模式的6种方案,需要的朋友可以参考下
    2021-05-05

最新评论