概述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在屏幕中占的位置是： .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中文网！

Label berkaitan：

bootstrap form role

Artikel sebelumnya：使用BootStrapValidator完成前端输入验证 Artikel seterusnya：assert()函数用法总结

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

• html设置加粗、倾斜、下划线、删除线等字体效果示例介绍
  1970-01-01 08:00:00
• 实现一个 Java 版的 Redis
  1970-01-01 08:00:00
• 最简单的微信小程序Demo
  1970-01-01 08:00:00
• python中pandas.DataFrame（创建、索引、增添与删除）的简单操作方法介绍
  1970-01-01 08:00:00
• 微信小程序：如何实现tabs选项卡效果示例
  1970-01-01 08:00:00
• Python构造自定义方法来美化字典结构输出
  1970-01-01 08:00:00
• HTML5:使用Canvas实时处理Video
  1970-01-01 08:00:00
• Asp.net使用SignalR实现发送图片
  1970-01-01 08:00:00
• 微信小程序开发教程-App()和Page()函数概述
  1970-01-01 08:00:00
• 详解python redis使用方法
  1970-01-01 08:00:00

Isu terkini

Topik-topik yang berkaitan

Lagi>

• Windows 10 menjalankan pengenalan lokasi pembukaan
• Bagaimana untuk mencipta folder baharu dalam pycharm
• ikon Ali
• Tutorial konfigurasi pembolehubah persekitaran Java
• lokasi.cari
• Apakah maksud pelayan web?
• apa itu dandelion
• Adakah kelajuan php8.0 dipertingkatkan?
• Semak status port yang diduduki dalam tingkap