Overview of role='form' and role roles in BootStrap

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在屏幕中占的位置是： .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； 这样我们就可以控制我们自己想要的什么排版了。

更多概述BootStrap中role="form"及role作用角色相关文章请关注PHP中文网！

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn