An error occurred while loading the file. Please try again.
-
Patrick H. Lauke authored
as role="menu" is a very specific (and strict) ARIA pattern for desktop-like application menus, and our dropdowns are often used as pure navigation dropdowns, this change abandons ARIA menus for a more open-ended and light-weight approach (see http://heydonworks.com/practical_aria_examples/#submenus and http://www.w3.org/WAI/tutorials/menus/flyout/#improve-screen-reader-support-using-wai-aria) note that in dropdown.js, switched to now target ``.dropdown-menu`` instead of ``role["menu"]`` - this also prevents bootstrap scripts from "bleeding" into non-bootstrap components on the same page. also removed the ``role=["listbox"]`` part, which appears to be vestigial/unused (only place in bootstrap that uses that role are carousels, and their key handling is done separately)
5fd7bc15
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- Le styles --> <link href="../bootstrap.css" rel="stylesheet"> <link href="assets/css/docs.css" rel="stylesheet"> <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet"> <!-- Le fav and touch icons --> <link rel="shortcut icon" type="image/x-icon" href="assets/ico/favicon.ico"> <link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png"> <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png"> </head> <body> <!-- Navbar ================================================== --> <div class="navbar navbar-fixed"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="./index.html">Bootstrap</a> <ul class="nav"> <li><a href="./index.html">Overview</a></li> <li class="dropdown active"> <a href="./scaffolding.html" class="dropdown-toggle" data-toggle="dropdown"> Scaffolding <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="./scaffolding.html#grid">Grid system</a></li> <li><a href="./scaffolding.html#layouts">Layouts</a></li> <li><a href="./scaffolding.html#responsive">Responsive design</a></li> </ul> </li> <li class="dropdown"> <a href="./base-css.html" class="dropdown-toggle" data-toggle="dropdown"> Base CSS <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="./base-css.html#type">Type</a></li> <li><a href="./base-css.html#tables">Tables</a></li> <li><a href="./base-css.html#forms">Forms</a></li> <li><a href="./base-css.html#buttons">Buttons</a></li> <li><a href="./base-css.html#icons">Icons by Glyphicons</a></li> </ul> </li> <li class="dropdown"> <a href="./components.html" class="dropdown-toggle" data-toggle="dropdown"> Components <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="./components.html#buttonGroups">Button groups</a></li> <li><a href="./components.html#buttonDropdowns">Split button dropdowns</a></li> <li><a href="./components.html#navs">Nav, tabs, pills</a></li> <li><a href="./components.html#navbar">Navbar</a></li>7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
<li><a href="./components.html#breadcrumbs">Breadcrumbs</a></li>
<li><a href="./components.html#pagination">Pagination</a></li>
<li><a href="./components.html#thumbnails">Thumbnails</a></li>
<li><a href="./components.html#alerts">Alert messages</a></li>
</ul>
</li>
<li class="dropdown">
<a href="./javascript.html" class="dropdown-toggle" data-toggle="dropdown">
Javascript plugins
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./javascript.html#transitions">Transition</a></li>
<li><a href="./javascript.html#modals">Modal</a></li>
<li><a href="./javascript.html#dropdowns">Dropdown</a></li>
<li><a href="./javascript.html#scrollspy">Scrollspy</a></li>
<li><a href="./javascript.html#tabs">Tab</a></li>
<li><a href="./javascript.html#tooltips">Tooltip</a></li>
<li><a href="./javascript.html#popovers">Popover</a></li>
<li><a href="./javascript.html#alerts">Alert</a></li>
<li><a href="./javascript.html#buttons">Button</a></li>
<li><a href="./javascript.html#collapse">Collapse</a></li>
<li><a href="./javascript.html#carousel">Carousel</a></li>
<li><a href="./javascript.html#typeahead">Typeahead</a></li>
</ul>
</li>
<li>
<a href="./less.html">
Using LESS
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>Scaffolding</h1>
<p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
</header>
<!-- Grid system
================================================== -->
<section id="grid-system">
<div class="page-header">
<h1>Grid system <small>12 columns with a responsive twist</small></h1>
</div>
<h2>Default 940px grid</h2>
<div class="row show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
</div>
<div class="row show-grid">