role="navigation"

HTML5的标签属性,可以用于标识一个普通的标签,使之语义化,方便浏览器对其具体功能进行识别. 例如div容器制作的导航栏,加上role="navigation",就可以让浏览器知晓这是一个导航容器而不是一个普通的容器,从而在面对一些特殊人群的时候可以做出正确的反应(例如盲人)……当然,针对题目中的这种用法,其实用<nav>标签会更好. ---------from 知乎 <nav> 标签定义导航链接的部分. <nav> 标签是 HTML 5…

Bootstrap学习记录-1.Navigation

Bootstrap中的导航栏功能需要添加bootstrap.css.jquery.js.bootstrap.js,其中,jquery.js文件是bootstrap.js文件中必须的,否则就会抛出异常信息:Bootstrap\'s JavaScript requires jQuery. 1. 工作原理学习Navbar之前,学习知道以下知识点: nav标签必须使用.navbar..navbar-expand{-sm|-md|-lg|-xl}.颜色主题类进行装饰. 导航栏内容默认是流动布局,可以使用…

[UI] 04 - Bootstrap: layout & navigation

前言一.资源 From: http://www.imooc.com/code/2881 Ref: http://www.runoob.com/try/bootstrap/layoutit/[拖拽布局] 本篇讲得是:布局组件. 菜单.按钮及导航组件一.菜单综合示范 <body> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type=&q…

HTNL5-ARIA role属性

WAI-ARIA Web Accessibility Initiative’s Accessible Rich Internet Applications 无障碍网页倡议–无障碍的富互联网应用,也简称ARIA 是一种技术规范,自称“有桥梁作用的技术” . 所以这样说,是因为在HTML提供相应的语义功能之前,它会使用属性来填补一些语义上的空白. 地标角色(landmark role) 地标角色可以帮助用户识别页面区域,从而让屏幕阅读器用户可以直接跳到这些区域.通常,对这些区域指定role属性就可以…

旺财速啃H5框架之Bootstrap（四）

上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面.... 对于这样的网站,要做成自适应,那你得多花点精力了,当然我不讲这个... 所以这里肯定是对那种"列很规律"的网站,例如cnblogs首页的版式,分左,中,右由于中国传统艺术版本,或习惯什么的,很多东西都讲对称性,所以几乎所有网站都是很规律的,说多了,直接上(这里我只写主要CSS)…

旺财速啃H5框架之Bootstrap（三）

好多天没有写了,继续走起在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学bootstrap? 流行?写网页快?还是其它什么的?说实话,如果写页面很熟练的人(牛人),根本不会用任何框架写,为什么呢,它们太臃肿了,谁写一个页面能把它所有的CSS都应该用上,所有的类都定义上呢?所以很多代码对于页面来说都是多余的,还好上线后,引入的都是资源库,如果你有代码精简强迫症,那估计你要重写(覆盖)一些东…

基于jsp+servlet图书管理系统之后台万能模板

前奏: 刚开始接触博客园写博客,就是写写平时学的基础知识,慢慢发现大神写的博客思路很清晰,知识很丰富,非常又价值,反思自己写的,顿时感觉非常low,有相当长一段时间没有分享自己的知识.于是静下心来钻研知识,趁着这学期的结束(马上就要放寒假了),写写最近练习的基于jsp+servlet+前台模板写的图书管理系统,一点一点写吧,详细的注释已经在代码上说明,希望对学习基于java开发的web方向的童鞋有所帮助.今天先把写的用户信息管理的添加(插入)操作分享一下,使用了一些特殊的知识,也会做一下说明.更…

spring boot(四)：thymeleaf使用详解

在上篇文章springboot(二):web综合开发中简单介绍了一下thymeleaf,这篇文章将更加全面详细的介绍thymeleaf的使用.thymeleaf 是新一代的模板引擎,在spring4.0中推荐使用thymeleaf来做前端模版引擎. thymeleaf介绍简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下三个极吸引人的特点: 1.Thymeleaf 在有网络和无网络的环境下皆可…

Bootstrap框架的学习（二）

一.下载Bootstrap Bootstrap (当前版本 v3.3.0)提供以下几种方式帮你快速上手,每一种方式针对具有不同技能等级的开发者和不同的使用场景. 下载地址:http://v3.bootcss.com/getting-started/#download PS:其实我们不用下载bootstrap也可以使用它: Bootstrap 中文网为 Bootstrap 专门构建了自己的免费 CDN 加速服务.基于国内云厂商的 CDN 服务,访问速度更快.加速效果更明显.没有速度和带宽限制.永…

bootstrap杂记

http://v3.bootcss.com/ 这个国内的中文站点资料很全如下看个页面的大体框架 http://www.cnblogs.com/sunhaoyu/p/4275190.html <!-- bootstarp 的导航栏默认高度为 50px class="nav navbar-inverse" 设置导航的条样式(当前北京为黑色) 还可以写成class="nav navbar-default" role="navigation" 表…

struts2+hibernate整合-实现登录功能

最近一直学习struts2+hibernate框架,于是想把两个框架整合到一起,做一个小的登录项目.其他不多说,直接看例子. 1).Struts2 和hibernate的环境配置包括jar包.web.xml以及hibernate.cfg.xml的配置,前面的文章有详细的讲述,这里就不在一一叙述. 2).登录界面实现(使用了bootstrap自适应框架,详细内容见官网http://www.bootcss.com/) <!doctype html> <html lang="en&…

bootstrap-监听滚动实现头部跟随滚动

实现案例 <body data-spy="scroll" data-target="#bs-example-navbar-collapse-1"> <div id='menu_wrap'> <div class='menu'> <nav class="navbar navbar-default" role="navigation"> <div class="con…

web前端基础知识-（六）jQuery-补

一.JS正则 1.定义正则表达式 JavaScript种正则表达式有两种定义方式,定义一个匹配类似 <%XXX%> 的字符串: 1)构造函数 var reg=new RegExp('<%[^%>]+%>','g'); 2)字面量 var reg=/<%[^%>]%>/g; /.../ 用于定义正则表达式 /.../g 表示全局匹配 /.../i 表示不区分大小写 /.../m 表示多行匹配预定义类: 字符等价类含义 . [^\n\r] 除了回车符和换…

bootstrap开发一个简单网页。

CSS代码: body{ padding-top: 50px; padding-bottom: 50px; overflow: auto!important; } .modal{ overflow: auto!important } .carousel{ height: 395px; background-color: #000; margin-bottom: 40px; …

SB Admin 2 学习笔记1

需要掌握能够搭建起一个 dashboard 的能力, 因为很少有运维开发团队有专职的前端, bootstrap 也要讲个基本法. SB Admin 2, 一个免费的 bootstrap theme, 4000颗星, 大体看了下, 想要的功能都有, 够用了. 一点点啃下来. 一. 导航栏部分 1. 上边框导航栏 <nav class="navbar navbar-default navbar-static-top" role="navigation" style…

Nodejs初阶之express

PS: 2014/09/24 更新<Express 4.X 启航指南>,欢迎阅读和评论:) 老规矩,开头部分都是些自娱自乐的随想,想到哪写到哪... 到今天俺已经在俺厂工作俩年零几天了,工作以来头一回在一家企业工作超俩年,对于这俩年确实只有满满的成就感,不管是工作还是生活...写到这句突然又想写篇这俩年的总结,等这篇文章发了之后就着手整理吧,吼吼. 那篇<node.js 初体验>好像才发生在前几月,没想到时间已过两年有多.且看到文章末尾处那句: “这篇文章只会是一个开始” 令俺…

MVC5 网站开发实践 2.2、管理员身份验证

上次完成了管理员的登录,这次要解决对管理员登录后的验证,采用AuthorizeAttribute属性的方式.之前还要解决几个问题,然后才重写验证类,最后稍微改一下界面. 目录 MVC5 网站开发实践概述 MVC5 网站开发实践 1.建立项目 MVC5 网站开发实践 2.后台管理 MVC5 网站开发实践 2.1.管理员登陆一.解决问题Home控制器错误提示 @泰德在评论中说浏览器中打开存在以下错误.这是因为项目中存在多个Home控制器,但系统不清楚你要访问的是哪个控制器的内容,因此…

AngularJS之WebAPi上传（十）

前言前面一系列我们纯粹是讲AngularJS,在讲一门知识时我们应该结合之前所学综合起来来做一个小的例子,前面我们讲了在MVC中上传文件的例子,在本节我们讲讲如何利用AngularJS在WebAPi中如何上传,来巩固下WebAPi并结合AngularJS中对应的一些组件学习下. AngularJS Upload Files for WebAPi (一)在WebAPi中我们如何获得上传本地文件的物理路径呢?需要实现此类: MultipartFormDataStreamProvider ,从该类中…

ASP.NET MVC之Session State性能问题（七）

前言这一节翻译一篇有关Session State性能问题的文章,非一字一句翻译. 话题不知道我们在真实环境中是否用到了Session State特性,它主要用来当在同一浏览器发出多个请求时来存储数据,在现在我们更多的为了避免整个页面刷新,Web应用程序更多倾向于利用高扩展性的Ajax,但是不知道我们是否注意到当我们使用Session数据多次请求MVC上的Action方法时产生的性能问题呢? 将Session放入上下文中(Put Session into the Context) 在进行代码演…

从零开始，搭建博客系统MVC5+EF6搭建框架（4）下，前后台布局实现、发布博客以及展示。

一.博客系统进度回顾目前已经完成了,前台展示,以及后台发布的功能,最近都在做这个,其实我在国庆的时候就可以弄完的,但是每天自己弄,突然最后国庆2天,连电脑都不想碰,所以就一直拖着,上一篇写了前端实现用到的一些WebUI框架以及一些系统中用到的js插件,其实写了这么久,还是第一次,有人留言,不要烂尾的,感觉还是有点点价值的,至少有人关注. 废话不多说,现在开始上代码. 二.博客系统后台布局实现 2.1.这里所用的是MVC的布局页来实现的,后台主要分为三部分:导航.菜单.主要内容代码实现: 这里…

前端框架bootstrap 表单和导航菜单的 Demo（第二篇）

表单: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script type="text/javascript" src="…

Asp.Net MVC+BootStrap+EF6.0实现简单的用户角色权限管理5

我们先直接拷贝下blank.html这个页面的代码,顺带先建立一个Home控制器,并添加Index视图.将代码拷贝进去. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>空白页 - Bootstrap后台管理系统模版Ace下载</title> <meta name="viewport&…

【读书笔记《Bootstrap 实战》】6.单页营销网站

我们已经掌握了很多实用 Bootstrap 的重要技能.现在,是时候拿出更多的创意来帮助客户实现他们全方位在线营销的愿望了.此次将带领大家做一个漂亮的单页高端营销网站. 主要任务如下: □ 一个大型介绍性传送带图片展示区,配有自定义的响应式欢迎信息: □ 一个客户留言区,显示为带标题的图片墙,就像砖垒的一样: □ 一个功能清单,使用大号 Font Awesome 图标: □ 一个带有自定义价目表的注册区: □ 一个带动态滚动的 ScrollSpy 导航条. 1.概况有一位潜在客户联系我们,她…

【读书笔记《Bootstrap 实战》】4.企业网站

上一章有对个人作品站点进行一些优化.本章,轮到我们充实这个作品站点了,补充一些项目,从而展示我们的能力.换句话说,我们要构建一个相对复杂的企业网站主页. 下面有几个成功企业的网站: □ Zappos (http://www.zappos.com/) □ Amazon (https://www.amazon.com/) 尽管这些网站网站各有特色,但共同的一点就是它们都很复杂. 如果按照区域划分,可以将这些网站的主页分成三部分. □ 页头区:这一部分包含Logo.带下拉菜单的主导航.二级和实用链接导…

【读书笔记《Bootstrap 实战》】2.作品展示站点

假设我们已经想好了要给自己的作品弄一个在线站点.一如既往,时间紧迫.我们需要快一点,但作品展示效果又必须专业.当然,站点还得是响应式的,能够在各种设备上正常浏览,因为这是我们向目标客户推销时的卖点.这个项目可以利用Bootstrap的很多内置特性,同时也将根据需要对Bootstrap进行一些定制. 1.设计目标虽然对大屏幕中的展示效果已经胸有成竹,但我们还应该从小设备开始,强迫自己聚焦在关键的要素上面. 这个作品展示站点应该具有下列功能: □ 带Logo的可折叠的响应式导航条: □ 重点展示四…

【Bootstrap Demo】入门例子创建

本文简单介绍下如何来使用 Bootstrap,通过引入 Bootstrap,来实现一个最基本的入门例子. 在前一篇博文[Bootstrap]1.初识Bootstrap 基础之上,我们完全可以更加方便快捷的创建一个的简单例子.这个例子只有基本的东西:引入了预编译版的 CSS 和 JavaScript 文件,页面只包含了一个 container 元素. 在Bootstrap的官方网站的下载页面 http://getbootstrap.com/getting-started/#download ,也有…

【读书笔记《Bootstrap 实战》】1.初识Bootstrap

作为Web前端开发框架,Bootstrap为大多数标准的UI设计常见提供了用户友好.扩浏览器的解决方案. 1.下载Bootstrap 打开官方网址 http://getbootstrap.com/ 进行下载. 2.准备项目模板文件夹接下来,我们为第一个项目创建一个文件夹以及一些基本的文件.谓词我们还要用到HTML5样板文件 HTML5 Boilerplate(H5BP),然后把Bootstrap的有用文件复制过去. 2.1 下载H5BP 访问网站链接地址:https://html5boiler…

Bootstrap 简介

一.Bootstrap介绍 Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.本课时讲解 Bootstrap 的概念,并介绍 Bootstrap 应用场景和如何下载. 中文官方网站:http://www.bootcss.com/ 二.入门例子创建下面讲解如何来使用 Bootstrap,通过引入 Bootstrap,来实现一个最基本的入门例子. 实现的效果如图所示: 代码如下: <!DOCTYPE html> <html…

bootstrap 组件

bootstrap 组件 1下拉菜单(dropdown) 下拉菜单切换(dropdown-toggle) 下拉菜单对齐(dropdown-menu-right-右对齐) 下拉菜单分割线(divider) 禁用菜单(disabled) 2按钮组(btn-group) 按钮组尺寸(btn-group-lg,btn-group-sm,btn-group-xs) 嵌套:只须把 .btn-group 放入另一个 .btn-group 中 eg:<div class="btn-gr…

AngularJS 的嵌套路由 UI-Router

AngularJS 的嵌套路由 UI-Router 本篇文章翻译自:https://scotch.io/tutorials/angular-routing-using-ui-router 演示网站请查看:**http://embed.plnkr.co/IzimSVsstarlFviAm7S7/preview** 源码:**http://plnkr.co/edit/IzimSVsstarlFviAm7S7?p=preview** 下面是我自己做的demo.比上面的例子要简单一点. github D…

【role="navigation"】的更多相关文章