mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-02 16:04:07 +03:00
Code Activity

Merge branch 'accessibility' into 2.1.0-wip

Browse Source 
Conflicts:
	docs/assets/js/bootstrap.min.js
	docs/javascript.html
	docs/templates/pages/javascript.mustache
This commit is contained in:
Jacob Thornton
2012-06-02 16:11:35 -07:00
parent ebc6935663 b1d7c34086
commit 5e5965ca6f
12 changed files with 577 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/templates/pages/javascript.mustache
Vendored
+58 -55
View File
@@ -122,18 +122,19 @@
<h2>{{_i}}Live demo{{/i}}</h2>
<p>{{_i}}Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.{{/i}}</p>
<!-- sample modal content -->
<div id="myModal" class="modal hide fade">
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h3>{{_i}}Modal Heading{{/i}}</h3>
<h3 id="myModalLabel">{{_i}}Modal Heading{{/i}}</h3>
</div>
<div class="modal-body">
<h4>{{_i}}Text in a modal{{/i}}</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
<h4>{{_i}}Popover in a modal{{/i}}</h4>
<p>{{_i}}This <a href="#" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.{{/i}}</p>
<p>{{_i}}This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.{{/i}}</p>
<h4>{{_i}}Tooltips in a modal{{/i}}</h4>
<p>{{_i}}<a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.{{/i}}</p>
@@ -150,8 +151,8 @@
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal" >{{_i}}Close{{/i}}</a>
<a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
<a href="#" role="button" class="btn" data-dismiss="modal" >{{_i}}Close{{/i}}</a>
<a href="#" role="button" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
</div>
</div>
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">{{_i}}Launch demo modal{{/i}}</a>
@@ -196,24 +197,25 @@
<p>{{_i}}You can activate modals on your page easily without having to write a single line of javascript. Just set <code>data-toggle="modal"</code> on a controller element with a <code>data-target="#foo"</code> or <code>href="#foo"</code> which corresponds to a modal element id, and when clicked, it will launch your modal.</p>
<p>Also, to add options to your modal instance, just include them as additional data attributes on either the control element or the modal markup itself.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;a class="btn" data-toggle="modal" href="#myModal" &gt;{{_i}}Launch Modal{{/i}}&lt;/a&gt;
&lt;a href="#myModal" role="button" class="btn" data-toggle="modal"&gt;{{_i}}Launch Modal{{/i}}&lt;/a&gt;
</pre>
<pre class="prettyprint linenums">
&lt;div class="modal hide" id="myModal"&gt;
&lt;div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
&lt;div class="modal-header"&gt;
&lt;button type="button" class="close" data-dismiss="modal"&gt;&times;&lt;/button&gt;
&lt;h3&gt;Modal header&lt;/h3&gt;
&lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt;
&lt;/div&gt;
&lt;div class="modal-body"&gt;
&lt;p&gt;{{_i}}One fine body…{{/i}}&lt;/p&gt;
&lt;/div&gt;
&lt;div class="modal-footer"&gt;
&lt;a href="#" class="btn" data-dismiss="modal"&gt;{{_i}}Close{{/i}}&lt;/a&gt;
&lt;a href="#" class="btn btn-primary"&gt;{{_i}}Save changes{{/i}}&lt;/a&gt;
&lt;a href="#" role="button" class="btn"&gt;{{_i}}Close{{/i}}&lt;/a&gt;
&lt;a href="#" role="button" class="btn btn-primary"&gt;{{_i}}Save changes{{/i}}&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
<div class="alert alert-info">
<strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}If you want your modal to animate in and out, just add a <code>.fade</code> class to the <code>.modal</code> element (refer to the demo to see this in action) and include bootstrap-transition.js.{{/i}}
</div>
@@ -287,41 +289,42 @@ $('#myModal').on('hidden', function () {
<div class="span9 columns">
<h2>{{_i}}Examples{{/i}}</h2>
<p>{{_i}}Click on the dropdown nav links in the navbar and pills below to test dropdowns.{{/i}}</p>
<div id="navbar-example" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="#">{{_i}}Project Name{{/i}}</a>
<ul class="nav">
<ul class="nav" role="navigation">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li><a tabindex="-1" href="http://google.com">{{_i}}Action{{/i}}</a></li>
<li><a tabindex="-1" href="#anotherAction">{{_i}}Another action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown 2 {{/i}}<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown 2 {{/i}}<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li id="fat-menu" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown 3{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown 3{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</li>
</ul>
@@ -332,33 +335,33 @@ $('#myModal').on('hidden', function () {
<ul class="nav nav-pills">
<li class="active"><a href="#">{{_i}}Regular link{{/i}}</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropdown 2{{/i}} <b class="caret"></b></a>
<ul id="menu2" class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown 2{{/i}} <b class="caret"></b></a>
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropdown 3{{/i}} <b class="caret"></b></a>
<ul id="menu3" class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown 3{{/i}} <b class="caret"></b></a>
<ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</li>
</ul> <!-- /tabs -->
@@ -378,16 +381,16 @@ $('#myModal').on('hidden', function () {
&lt;ul class="nav nav-pills"&gt;
&lt;li class="active"&gt;&lt;a href="#"&gt;Regular link&lt;/a&gt;&lt;/li&gt;
&lt;li class="dropdown" id="menu1"&gt;
&lt;a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"&gt;
&lt;a id="dLabel" role="button" class="dropdown-toggle" data-toggle="dropdown" href="#menu1"&gt;
{{_i}}Dropdown{{/i}}
&lt;b class="caret"&gt;&lt;/b&gt;
&lt;/a&gt;
&lt;ul class="dropdown-menu"&gt;
&lt;li&gt;&lt;a href="#"&gt;{{_i}}Action{{/i}}&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;{{_i}}Another action{{/i}}&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;{{_i}}Something else here{{/i}}&lt;/a&gt;&lt;/li&gt;
&lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;{{_i}}Action{{/i}}&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;{{_i}}Another action{{/i}}&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;{{_i}}Something else here{{/i}}&lt;/a&gt;&lt;/li&gt;
&lt;li class="divider"&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;{{_i}}Separated link{{/i}}&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;{{_i}}Separated link{{/i}}&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
...
@@ -396,11 +399,11 @@ $('#myModal').on('hidden', function () {
<pre class="prettyprint linenums">
&lt;ul class="nav nav-pills"&gt;
&lt;li class="dropdown"&gt;
&lt;a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html"&gt;
&lt;a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"&gt;
{{_i}}Dropdown{{/i}}
&lt;b class="caret"&gt;&lt;/b&gt;
&lt;/a&gt;
&lt;ul class="dropdown-menu"&gt;
&lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
...
&lt;/ul&gt;
&lt;/li&gt;