BootStrap中<li role=

最近在学习bootstrap3.3.5，遇到一个问题搞不清楚<li role="presentation">到底什么含义？

网上到处查国内资料很少，没有表达最贴切含义，在GitHub 查到了相关资料结合“图灵计算机词汇”
在图灵计算机词汇里也可以查询其含义：

presentation 

n. 【Web】表现层；[计] 简报，列表单；【通用软件】演示（来源：图灵计算机词汇表）；
n.  赠与，赠送，描述，简述，介绍，陈述，表达；[医] 先露，表象(心理)；[经] 提示, 交单；

由此可以推断：presentation在bootstrap<li role="presentation">中意为：【列表单】最为恰当合适。

无序 HTML 列表：

<ul>
 <li>Coffee</li>
 <li>Tea</li>
 <li>Milk</li>
</ul>

注：<ul> 标签定义无序列表，li标签定义无序列表单/项。

同：<li role="presentation">与<a role="menuitem" ></a>中role扮演角色是大同小异，即菜单列表单/项。

以下列举【案例】:

<div class="dropdown">
 <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
 选择你喜欢的品种
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
 <li role="presentation" class="dropdown-header">选择你喜欢的水果</li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">苹果</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">香蕉</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">菠萝</a></li>
 <li role="presentation" class="divider"></li>
 <li role="presentation" class="dropdown-header">选择你喜欢的树木</li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">松树</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">白杨</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">柳树</a></li>
 <li role="presentation" class="divider"></li>
 <li role="presentation" class="dropdown-header">选择你喜欢的蔬菜</li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">芹菜</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">萝卜</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">白菜</a></li>
 <li role="presentation" class="divider"></li>
 </ul>
</div>

以上所述是小编给大家介绍的BootStrap中<li role="presentation">真实含义解析，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合

    在上篇给大家介绍了基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串.list集合. 这种方式其实还是利用list集合的方式传给前台,只不过在前台做了一些小小的变化,而控制器代码也进行了部分的优化,值的一提的是:没用的ajax前后台交互舍弃掉了. 控制器代码如下: //实例化公共静态字典表集合 public static List<TC_DictionaryInfo> DInfo = new List<TC_DictionaryInfo

  • BootStrap Validator使用注意事项(必看篇)

    BootStrap Validator使用注意事项(必看篇)

    如果你使用的前端框架是bootstrap,那么前端验证框架就不必考虑了,bootstrapvalidator是最好的选择,它和bootstrap的结合最完美,不过要注意版本的问题,针对bootstrap2和bootstrap3有不同的版本. 下面是我遇到的两个注意事项,自己做个笔记: 1.为每个要验证的表单元素添加name属性 例如: <div class="form-group"> <input type="text" placeholder=&

  • 概述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

  • 使用BootStrapValidator完成前端输入验证

    使用BootStrapValidator完成前端输入验证

    BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证,由于本插件完全基于BootStrap因此可以和UI完美的融合在一起.下面直接上图,看看完成后的结果: 怎么样,还比较和谐把,当然你也可以修改默认样式,让它的显示方式更加美观. 下面来说说他的用法: 1.下载BootStrapValidator 你可以点击BootStrapValidator官方下载地址来下载它. 2.下载后的目录结构 下载完成后,如果是全部文件的化,目录结构如下: 其中可以直接在项目

  • BootStrap中<li role=

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

  • 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中的 form表单属性role="form"的作用详解

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

  • 针对BootStrap中tabs控件的美化和完善(推荐)

    针对BootStrap中tabs控件的美化和完善(推荐)

    BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎.但是,它的样式比较单一,如何才能在其原有的基础上做出更加美观的效果呢,我一直在考虑这个问题.另外,Bootstrap中的tabs必须要单击每个选项卡才能实现切换,能否使用Jquery来控制其自动切换,让它过一段时间(如5秒钟)从一个选项卡切换到另一个呢?下面是我的实现过程,首先是tabs部分的html代码: <div class="tab" role="tabpanel"> <!

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

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

  • Bootstrap中的Panel和Table全面解析

    Bootstrap中的Panel和Table全面解析

    在我们对一个页面进行设计时,分块是必须的,没有一个网站是一栏而下的,除非你是在看小说,否则你的页面设计一定是分块的,即它由于多个panel组件,在bootstrap里叫到栅格系统,而在每行每列进行宏观的布局后,就是在每一个大块里建立小块,而小块可以使用Panel来实现,下面看个例子 <div class="panel panel-default"> <div class="panel-heading">Panel heading withou

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

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

  • BootStrap中的表单大全

    表单 基础表单 对于表单中的input.textarea.select,一般我都会加上类"form-control",它设置元素的默认宽度为100%(并不是绝对,比如下述的内联表单).并且每个元素(包括label和待输入元素)都会加上"form-group".它的样式只有一个.margin-bottom:15px. <form action=""> <div class="form-group"> &l

随机推荐