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柵欄系統(tǒng)css中的col-xs-*,col-sm-*,col-md-* 的意義

摘要: bootstrap柵欄系統(tǒng)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列柵格系統(tǒng)比；

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

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

.col-md-*中等屏幕 桌面顯示器 (≥992px)(柵格參數(shù)).

5、不管在哪種屏幕上，柵格系統(tǒng)都會自動的分12列 col-xs-*和col-sm-* 和col-md-*后面跟的參數(shù)表示在當前的屏幕中 div占所占列數(shù)。例如 <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； 這樣我們就可以控制我們自己想要的什么排版了。

最新評論