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

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

赞 (0)

相关推荐

  • Bootstrap表单Form全面解析

    Bootstrap表单Form全面解析

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 在进行自己的后台改版时,大体布局都使用了bootstrap,剩下的表单部分没理由不去使用它,对于表单的美化和布局,bootstrap做的也是很不错的,有大气的边框,多功能的按钮及宏观的表单布局,一切都是那么的完整与完美! 普通表单 我们需要将表单元素包裹到form-group类里,一般以<div class="

  • JS组件Form表单验证神器BootstrapValidator

    JS组件Form表单验证神器BootstrapValidator

    本文为大家分享了JS组件Form表单验证神器BootstrapValidator,供大家参考,具体内容如下 1.初级用法 来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3.从描述中我们就可以知道它至少需要jQuery.bootstrap的支持.我们首先引入需要的js组件: <script src="~/Scripts/jquery-1.10.2.js"></script> <sc

  • 基于Bootstrap+jQuery.validate实现Form表单验证

    基于Bootstrap+jQuery.validate实现Form表单验证

    基于Bootstrap jQuery.validate Form表单验证实践项目结构 : github 上源码地址:https://github.com/starzou/front-end-example 1.form 表单代码[html] 复制代码 代码如下: <!DOCTYPE html>  <html>      <head>          <title>Bootstrap Form Template</title>         

  • bootstrap中的 form表单属性role="form"的作用详解

    html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性. role的作用是描述一个非标准的tag的实际作用.比如用div做button,那么设置div 的 role="button",辅助工具就可以认出这实际上是个button 比如, <div role="checkbox" aria-checked="c

  • bootstrap中的 form表单属性role="form"的作用详解

    html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性. role的作用是描述一个非标准的tag的实际作用.比如用div做button,那么设置div 的 role="button",辅助工具就可以认出这实际上是个button 比如, <div role="checkbox" aria-checked="c

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

    1.在英汉图灵计算机大词典里: role n.角色(任务): 2.在Bootstrap框架中,role="form": form表单属性,类似与辅助工具,转换角色使用: role="form"定义form表单元素为form功能角色使用: 3.下面有其他案例: Eg1:<div role="button"></div> ,把div元素转换为button按钮功能使用: Eg2:<div role="naviga

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

    1.在英汉图灵计算机大词典里: role n.角色(任务): 2.在Bootstrap框架中,role="form": form表单属性,类似与辅助工具,转换角色使用: role="form"定义form表单元素为form功能角色使用: 3.下面有其他案例: Eg1:<div role="button"></div> ,把div元素转换为button按钮功能使用: Eg2:<div role="naviga

  • BootStrap中<li role=

    最近在学习bootstrap3.3.5,遇到一个问题搞不清楚<li role="presentation">到底什么含义? 网上到处查国内资料很少,没有表达最贴切含义,在GitHub 查到了相关资料结合"图灵计算机词汇" 在图灵计算机词汇里也可以查询其含义: presentation  n. [Web]表现层:[计] 简报,列表单:[通用软件]演示(来源:图灵计算机词汇表): n.  赠与,赠送,描述,简述,介绍,陈述,表达:[医] 先露,表象(心理):

  • BootStrap中的模态框（modal，弹出层）功能示例代码

    BootStrap中的模态框（modal，弹出层）功能示例代码

    bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集.务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组件影响模态框的展现或功能. 默认的modal示例: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8">

  • Bootstrap中CSS的使用方法

    Bootstrap中CSS的使用方法

    Bootstrap 使用了一些 HTML5 元素和 CSS 属性,所以需要使用 HTML5 文档类型. <!DOCTYPE html> <html lang="zh-CN"> ... </html> 为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示: <meta name="viewport" content=&quo

  • 在bootstrap中实现轮播图实例代码

    Bootstrap中轮播图插件叫作Carousel 以下容器就是整个轮播图组件的整体, 注意该盒子必须加上 class="carousel slide" data-ride="carousel" 表示当 前是一个轮播图 bootstrap.js会自动为当前元素添加图片轮播的特效 <div id="轮播图的ID" class="carousel slide" data-ride="carousel"&g

  • bootstrap中的导航条实例代码详解

    一.和导航的区别 1.导航条比导航多了一个条字 2.直接上图 导航: 导航条: 简单文字描述: 由两张图看出,导航内容比较简单,而导航条可以包含导航及其他元素,如表单,搜索框等,并且通常导航条会有一个区别于页面的背景色. 二.在页面中定义导航条 方法: 为父容器添加类名navbar navbar-default.navbar-default类用来规定导航条的颜色,可以更改为navbar-inverse来让导航条反色显示.bootstrap官网建议使用nav元素.但也常用div元素,建议用div元

  • Bootstrap 中data-[*] 属性的整理

    [1 data-属性] data属性是HTML5的新属性.允许开发者自由为其标签添加属性.存储数据,这种自定义属性一般用"data-"开头. 存储的(自定义)数据能够被页面的 JavaScript 中利用. data-* 属性包括两部分: * 属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符. * 属性值可以是任意字符串. 说直白点就是data属性的应用,让HTML标签可以隐式的附带一些数据,而javascript就可以对这些属性数据

随机推荐