mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-26 23:54:23 +01:00
start wrapping text in {{_i}} for translation
This commit is contained in:
Jacob Thornton
parent
b4b1ef6839
commit
82de03b67c
@ -22,11 +22,10 @@
|
||||
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<!-- Navbar
|
||||
================================================== -->
|
||||
<div class="navbar navbar-fixed">
|
||||
|
||||
6
docs/build/index.js
vendored
6
docs/build/index.js
vendored
@ -6,7 +6,7 @@ var layout, pages
|
||||
|
||||
// compile layout template
|
||||
layout = fs.readFileSync(__dirname + '/../templates/layout.mustache', 'utf-8')
|
||||
layout = hogan.compile(layout)
|
||||
layout = hogan.compile(layout, { sectionTags: [{o:'_i', c:'i'}] })
|
||||
|
||||
// retrieve pages
|
||||
pages = fs.readdirSync(__dirname + '/../templates/pages')
|
||||
@ -18,7 +18,9 @@ pages.forEach(function (name) {
|
||||
, context = {}
|
||||
|
||||
context[name.replace(/\.mustache$/, '')] = 'active'
|
||||
page = hogan.compile(page)
|
||||
context._i = true
|
||||
|
||||
page = hogan.compile(page, { sectionTags: [{o:'_i', c:'i'}] })
|
||||
page = layout.render(context, {
|
||||
body: page
|
||||
})
|
||||
|
||||
@ -22,11 +22,10 @@
|
||||
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<!-- Navbar
|
||||
================================================== -->
|
||||
<div class="navbar navbar-fixed">
|
||||
|
||||
@ -22,11 +22,10 @@
|
||||
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<!-- Navbar
|
||||
================================================== -->
|
||||
<div class="navbar navbar-fixed">
|
||||
|
||||
@ -22,11 +22,10 @@
|
||||
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<!-- Navbar
|
||||
================================================== -->
|
||||
<div class="navbar navbar-fixed">
|
||||
@ -299,7 +298,7 @@
|
||||
<p><span class="label notice">Notice</span> 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).</p>
|
||||
<h3>Methods</h3>
|
||||
<h4>.modal(options)</h4>
|
||||
<p>Activates your content as a modal. Accepts an optional options <code>object</code>.
|
||||
<p>Activates your content as a modal. Accepts an optional options <code>object</code>.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
$('#myModal').modal({
|
||||
keyboard: false
|
||||
@ -314,7 +313,7 @@ $('#myModal').modal({
|
||||
<p>Manually hides a modal.</p>
|
||||
<pre class="prettyprint linenums">$('#myModal').modal('hide')</pre>
|
||||
<h3>Events</h3>
|
||||
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p>
|
||||
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -344,7 +343,7 @@ $('#myModal').modal({
|
||||
|
||||
<pre class="prettyprint linenums">
|
||||
$('#myModal').on('hidden', function () {
|
||||
// do something ...
|
||||
// do something…
|
||||
})</pre>
|
||||
</div>
|
||||
</div>
|
||||
@ -472,9 +471,7 @@ $('#myModal').on('hidden', function () {
|
||||
</ul></pre>
|
||||
<h3>Methods</h3>
|
||||
<h4>$().dropdown()</h4>
|
||||
<p>
|
||||
A programatic api for activating menus for a given navbar or tabbed navigation.
|
||||
</p>
|
||||
<p>A programatic api for activating menus for a given navbar or tabbed navigation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -544,9 +541,9 @@ $('#myModal').on('hidden', function () {
|
||||
<p>Call the scrollspy via javascript:</p>
|
||||
<pre class="prettyprint linenums">$('#navbar').scrollspy()</pre>
|
||||
<h3>Markup</h3>
|
||||
<p>To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the body).
|
||||
<p>To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the body).</p>
|
||||
<pre class="prettyprint linenums"><body data-spy="scroll" >...</body></pre>
|
||||
<p><span class="label notice">Notice</span> Navbar anchor tags must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the dom like <code><div id="home"></div></code>.
|
||||
<p><span class="label notice">Notice</span> Navbar anchor tags must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the dom like <code><div id="home"></div></code>.</p>
|
||||
<h3>Options</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
|
||||
@ -22,11 +22,10 @@
|
||||
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<!-- Navbar
|
||||
================================================== -->
|
||||
<div class="navbar navbar-fixed">
|
||||
|
||||
@ -22,11 +22,10 @@
|
||||
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<!-- Navbar
|
||||
================================================== -->
|
||||
<div class="navbar navbar-fixed">
|
||||
|
||||
3
docs/templates/layout.mustache
vendored
3
docs/templates/layout.mustache
vendored
@ -22,11 +22,10 @@
|
||||
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<!-- Navbar
|
||||
================================================== -->
|
||||
<div class="navbar navbar-fixed">
|
||||
|
||||
460
docs/templates/pages/javascript.mustache
vendored
460
docs/templates/pages/javascript.mustache
vendored
@ -1,21 +1,21 @@
|
||||
<!-- Masthead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<h1>Javascript for Bootstrap</h1>
|
||||
<p class="lead">Bring Bootstrap's components to life—now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.
|
||||
<h1>{{_i}}Javascript for{{/i}} Bootstrap</h1>
|
||||
<p class="lead">{{_i}}Bring Bootstrap's components to life—now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.{{/i}}
|
||||
<ul class="nav pills">
|
||||
<li><a href="./javascript.html#javascript">Overview</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>
|
||||
<li><a href="./javascript.html#javascript">{{_i}}Overview{{/i}}</a></li>
|
||||
<li><a href="./javascript.html#modals">{{_i}}Modal{{/i}}</a></li>
|
||||
<li><a href="./javascript.html#dropdowns">{{_i}}Dropdown{{/i}}</a></li>
|
||||
<li><a href="./javascript.html#scrollspy">{{_i}}Scrollspy{{/i}}</a></li>
|
||||
<li><a href="./javascript.html#tabs">{{_i}}Tab{{/i}}</a></li>
|
||||
<li><a href="./javascript.html#tooltips">{{_i}}Tooltip{{/i}}</a></li>
|
||||
<li><a href="./javascript.html#popovers">{{_i}}Popover{{/i}}</a></li>
|
||||
<li><a href="./javascript.html#alerts">{{_i}}Alert{{/i}}</a></li>
|
||||
<li><a href="./javascript.html#buttons">{{_i}}Button{{/i}}</a></li>
|
||||
<li><a href="./javascript.html#collapse">{{_i}}Collapse{{/i}}</a></li>
|
||||
<li><a href="./javascript.html#carousel">{{_i}}Carousel{{/i}}</a></li>
|
||||
<li><a href="./javascript.html#typeahead">{{_i}}Typeahead{{/i}}</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
|
||||
@ -24,105 +24,105 @@
|
||||
================================================== -->
|
||||
<section id="javascript">
|
||||
<div class="page-header">
|
||||
<h1>jQuery plugins <small>A dozen Bootstrap plugins to get you started</small></h1>
|
||||
<h1>{{_i}}jQuery plugins{{/i}} <small>{{_i}}A dozen Bootstrap plugins to get you started{{/i}}</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#modals">Modals</a><input checked="true" value="bootstrap-modal.js" type="checkbox"></h3>
|
||||
<p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p>
|
||||
<h3><a href="./javascript.html#modals">{{_i}}Modals{{/i}}</a><input checked="true" value="bootstrap-modal.js" type="checkbox"></h3>
|
||||
<p>{{_i}}A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.{{/i}}</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#dropdowns">Dropdowns</a><input checked="true" value="bootstrap-dropdown.js" type="checkbox"></h3>
|
||||
<p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p>
|
||||
<h3><a href="./javascript.html#dropdowns">{{_i}}Dropdowns{{/i}}</a><input checked="true" value="bootstrap-dropdown.js" type="checkbox"></h3>
|
||||
<p>{{_i}}Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.{{/i}}</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#scrollspy">Scrollspy</a><input checked="true" value="bootstrap-scrollspy.js" type="checkbox"></h3>
|
||||
<p>Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.</p>
|
||||
<h3><a href="./javascript.html#scrollspy">{{_i}}Scrollspy{{/i}}</a><input checked="true" value="bootstrap-scrollspy.js" type="checkbox"></h3>
|
||||
<p>{{_i}}Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.{{/i}}</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#tabs">Togglable tabs</a><input checked="true" value="bootstrap-tab.js" type="checkbox"></h3>
|
||||
<p>Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.</p>
|
||||
<h3><a href="./javascript.html#tabs">{{_i}}Togglable tabs{{/i}}</a><input checked="true" value="bootstrap-tab.js" type="checkbox"></h3>
|
||||
<p>{{_i}}Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.{{/i}}</p>
|
||||
</label>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#tooltips">Tooltips</a><input checked="true" value="bootstrap-tooltip.js" type="checkbox"></h3>
|
||||
<p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images, uss CSS3 for animations, and data-attributes for local title storage.</p>
|
||||
<h3><a href="./javascript.html#tooltips">{{_i}}Tooltips{{/i}}</a><input checked="true" value="bootstrap-tooltip.js" type="checkbox"></h3>
|
||||
<p>{{_i}}A new take on the jQuery Tipsy plugin, Tooltips don't rely on images, uss CSS3 for animations, and data-attributes for local title storage.{{/i}}</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#popovers">Popovers</a> <small class="muted">*</small><input checked="true" value="bootstrap-popover.js" type="checkbox"></h3>
|
||||
<p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p>
|
||||
<p class="muted"><strong>*</strong> Requires <a href="#tooltips">Tooltips</a> to be included</p>
|
||||
<h3><a href="./javascript.html#popovers">{{_i}}Popovers{{/i}}</a> <small class="muted">*</small><input checked="true" value="bootstrap-popover.js" type="checkbox"></h3>
|
||||
<p>{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information.{{/i}}</p>
|
||||
<p class="muted"><strong>*</strong> {{_i}}Requires <a href="#tooltips">Tooltips</a> to be included{{/i}}</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#alerts">Alert messages</a><input checked="true" value="bootstrap-alert.js" type="checkbox"></h3>
|
||||
<p>The alert plugin is a tiny class for adding close functionality to alerts.</p>
|
||||
<h3><a href="./javascript.html#alerts">{{_i}}Alert messages{{/i}}</a><input checked="true" value="bootstrap-alert.js" type="checkbox"></h3>
|
||||
<p>{{_i}}The alert plugin is a tiny class for adding close functionality to alerts.{{/i}}</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#buttons">Buttons</a><input checked="true" value="bootstrap-button.js" type="checkbox"></h3>
|
||||
<p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
|
||||
<h3><a href="./javascript.html#buttons">{{_i}}Buttons{{/i}}</a><input checked="true" value="bootstrap-button.js" type="checkbox"></h3>
|
||||
<p>{{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}</p>
|
||||
</label>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#collapse">Collapse</a><input checked="true" value="bootstrap-collapse.js" type="checkbox"></h3>
|
||||
<p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
|
||||
<h3><a href="./javascript.html#collapse">{{_i}}Collapse{{/i}}</a><input checked="true" value="bootstrap-collapse.js" type="checkbox"></h3>
|
||||
<p>{{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#carousel">Carousel</a><input checked="true" value="bootstrap-carousel.js" type="checkbox"></h3>
|
||||
<p>Create a merry-go-round of any content you wish to provide an interactive slideshow of content.</p>
|
||||
<h3><a href="./javascript.html#carousel">{{_i}}Carousel{{/i}}</a><input checked="true" value="bootstrap-carousel.js" type="checkbox"></h3>
|
||||
<p>{{_i}}Create a merry-go-round of any content you wish to provide an interactive slideshow of content.{{/i}}</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#typeahead">Typeahead</a><input checked="true" value="bootstrap-typeahead.js" type="checkbox"></h3>
|
||||
<p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
|
||||
<p>{{_i}}A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.{{/i}}</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#transitions">Transitions</a> <small class="muted">*</small><input value="bootstrap-transition.js" checked="true" type="checkbox"></h3>
|
||||
<p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.</p>
|
||||
<p class="muted"><strong>*</strong> Required for animation in plugins</p>
|
||||
<h3><a href="./javascript.html#transitions">{{_i}}Transitions{{/i}}</a> <small class="muted">*</small><input value="bootstrap-transition.js" checked="true" type="checkbox"></h3>
|
||||
<p>{{_i}}For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.{{/i}}</p>
|
||||
<p class="muted"><strong>*</strong> {{_i}}Required for animation in plugins{{/i}}</p>
|
||||
</label>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row">
|
||||
<div class="span5">
|
||||
<div class="btn-group" id="javascriptBuilder">
|
||||
<a id="javascriptBuild" class="btn primary large" href="#">Download Source</a>
|
||||
<a id="javascriptBuild" class="btn primary large" href="#">{{_i}}Download Source{{/i}}</a>
|
||||
<a class="btn primary large dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu large">
|
||||
<li class="active"><a href="#">Compressed</a></li>
|
||||
<li><a href="#">Uncompressed</a></li>
|
||||
<li class="active"><a href="#">{{_i}}Compressed{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Uncompressed{{/i}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<a id="selectAll" href="#" style="float:right">Select/Unselect All Plugins</a>
|
||||
<p class="muted"><span class="label warning">Note:</span> All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
|
||||
<a id="selectAll" href="#" style="float:right">{{_i}}Select/Unselect All Plugins{{/i}}</a>
|
||||
<p class="muted">{{_i}}<span class="label warning">Note:</span> All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.{{/i}}</p>
|
||||
</section>
|
||||
|
||||
|
||||
@ -131,93 +131,93 @@
|
||||
================================================== -->
|
||||
<section id="modals">
|
||||
<div class="page-header">
|
||||
<h1>Modals <small>bootstrap-modal.js</small></h1>
|
||||
<h1>{{_i}}Modals{{/i}} <small>bootstrap-modal.js</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span3 columns">
|
||||
<h3>About modals</h3>
|
||||
<p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p>
|
||||
<a href="../js/bootstrap-modal.js" target="_blank" class="btn">Download file</a>
|
||||
<h3>{{_i}}About modals{{/i}}</h3>
|
||||
<p>{{_i}}A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.{{/i}}</p>
|
||||
<a href="../js/bootstrap-modal.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
|
||||
</div>
|
||||
<div class="span9 columns">
|
||||
<h2>Static example</h2>
|
||||
<p>Below is a statically rendered modal.</p>
|
||||
<h2>{{_i}}Static example{{/i}}</h2>
|
||||
<p>{{_i}}Below is a statically rendered modal.{{/i}}</p>
|
||||
<div class="well" style="background-color: #888; border: none;">
|
||||
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
|
||||
<div class="modal-header">
|
||||
<a href="#" class="close" data-dismiss="modal">×</a>
|
||||
<h3>Modal header</h3>
|
||||
<h3>{{_i}}Modal header{{/i}}</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
<p>{{_i}}One fine body…{{/i}}</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#" class="btn primary">Save changes</a>
|
||||
<a href="#" class="btn">Close</a>
|
||||
<a href="#" class="btn primary">{{_i}}Save changes{{/i}}</a>
|
||||
<a href="#" class="btn">{{_i}}Close{{/i}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /well -->
|
||||
|
||||
<h2>Live demo</h2>
|
||||
<p>Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.</p>
|
||||
<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 class="modal-header">
|
||||
<a href="#" class="close" data-dismiss="modal" >×</a>
|
||||
<h3>Modal Heading</h3>
|
||||
<h3>{{_i}}Modal Heading{{/i}}</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h4>Text in a modal</h4>
|
||||
<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>Popover in a modal</h4>
|
||||
<p>This <a href="#" class="btn" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p>
|
||||
<h4>{{_i}}Popover in a modal{{/i}}</h4>
|
||||
<p>{{_i}}This <a href="#" class="btn" rel="popover" 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>Tooltips in a modal</h4>
|
||||
<p><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.</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>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#" class="btn primary">Save changes</a>
|
||||
<a href="#" class="btn" data-dismiss="modal" >Close</a>
|
||||
<a href="#" class="btn primary">{{_i}}Save changes<{{/i}}/a>
|
||||
<a href="#" class="btn" data-dismiss="modal" >{{_i}}Close{{/i}}</a>
|
||||
</div>
|
||||
</div>
|
||||
<a data-toggle="modal" href="#myModal" class="btn primary large">Launch demo modal</a>
|
||||
<a data-toggle="modal" href="#myModal" class="btn primary large">{{_i}}Launch demo modal{{/i}}</a>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>Using bootstrap-modal</h2>
|
||||
<p>Call the modal via javascript:</p>
|
||||
<h2>{{_i}}Using bootstrap-modal{{/i}}</h2>
|
||||
<p>{{_i}}Call the modal via javascript:{{/i}}</p>
|
||||
<pre class="prettyprint linenums">$('#myModal').modal(options)</pre>
|
||||
<h3>Options</h3>
|
||||
<h3>{{_i}}Options{{/i}}</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 50px;">type</th>
|
||||
<th style="width: 50px;">default</th>
|
||||
<th>description</th>
|
||||
<th style="width: 100px;">{{_i}}Name{{/i}}</th>
|
||||
<th style="width: 50px;">{{_i}}type{{/i}}</th>
|
||||
<th style="width: 50px;">{{_i}}default{{/i}}</th>
|
||||
<th>{{_i}}description{{/i}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>backdrop</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Includes a modal-backdrop element</td>
|
||||
<td>{{_i}}backdrop{{/i}}</td>
|
||||
<td>{{_i}}boolean{{/i}}</td>
|
||||
<td>{{_i}}true{{/i}}</td>
|
||||
<td>{{_i}}Includes a modal-backdrop element{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>keyboard</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Closes the modal when escape key is pressed</td>
|
||||
<td>{{_i}}keyboard{{/i}}</td>
|
||||
<td>{{_i}}boolean{{/i}}</td>
|
||||
<td>{{_i}}true{{/i}}</td>
|
||||
<td>{{_i}}Closes the modal when escape key is pressed{{/i}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>Markup</h3>
|
||||
<p>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.</p>
|
||||
<h3>{{_i}}Markup{{/i}}</h3>
|
||||
<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">
|
||||
<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
|
||||
<a class="btn" data-toggle="modal" href="#myModal" >{{_i}}Launch Modal{{/i}}</a>
|
||||
</pre>
|
||||
|
||||
<pre class="prettyprint linenums">
|
||||
@ -227,63 +227,63 @@
|
||||
<h3>Modal header</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
<p>{{_i}}One fine body…{{/i}}</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#" class="btn primary">Save changes</a>
|
||||
<a href="#" class="btn">Close</a>
|
||||
<a href="#" class="btn primary">{{_i}}Save changes{{/i}}</a>
|
||||
<a href="#" class="btn">{{_i}}Close{{/i}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
<p><span class="label notice">Notice</span> 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).</p>
|
||||
<h3>Methods</h3>
|
||||
<h4>.modal(options)</h4>
|
||||
<p>Activates your content as a modal. Accepts an optional options <code>object</code>.
|
||||
<p>{{_i}}<span class="label notice">Notice</span> 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).{{/i}}</p>
|
||||
<h3{{_i}}>Methods{{/i}}</h3>
|
||||
<h4>.modal({{_i}}options{{/i}})</h4>
|
||||
<p>{{_i}}Activates your content as a modal. Accepts an optional options <code>object</code>.{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
$('#myModal').modal({
|
||||
keyboard: false
|
||||
})</pre>
|
||||
<h4>.modal('toggle')</h4>
|
||||
<p>Manually toggles a modal.</p>
|
||||
<p>{{_i}}Manually toggles a modal.{{/i}}</p>
|
||||
<pre class="prettyprint linenums">$('#myModal').modal('toggle')</pre>
|
||||
<h4>.modal('show')</h4>
|
||||
<p>Manually opens a modal.</p>
|
||||
<p>{{_i}}Manually opens a modal.{{/i}}</p>
|
||||
<pre class="prettyprint linenums">$('#myModal').modal('show')</pre>
|
||||
<h4>.modal('hide')</h4>
|
||||
<p>Manually hides a modal.</p>
|
||||
<p>{{_i}}Manually hides a modal.{{/i}}</p>
|
||||
<pre class="prettyprint linenums">$('#myModal').modal('hide')</pre>
|
||||
<h3>Events</h3>
|
||||
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p>
|
||||
<h3>{{_i}}Events{{/i}}</h3>
|
||||
<p>{{_i}}Bootstrap's modal class exposes a few events for hooking into modal functionality.{{/i}}</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event</th>
|
||||
<th>Description</th>
|
||||
<th style="width: 150px;">{{_i}}Event{{/i}}</th>
|
||||
<th>{{_i}}Description{{/i}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>show</td>
|
||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
||||
<td>{{_i}}show{{/i}}</td>
|
||||
<td>{{_i}}This event fires immediately when the <code>show</code> instance method is called.{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shown</td>
|
||||
<td>This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).</td>
|
||||
<td>{{_i}}shown{{/i}}</td>
|
||||
<td>{{_i}}This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hide</td>
|
||||
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
|
||||
<td>{{_i}}hide{{/i}}</td>
|
||||
<td>{{_i}}This event is fired immediately when the <code>hide</code> instance method has been called.{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hidden</td>
|
||||
<td>This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).</td>
|
||||
<td>{{_i}}hidden{{/i}}</td>
|
||||
<td>{{_i}}This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).{{/i}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<pre class="prettyprint linenums">
|
||||
$('#myModal').on('hidden', function () {
|
||||
// do something ...
|
||||
// {{_i}}do something…{{/i}}
|
||||
})</pre>
|
||||
</div>
|
||||
</div>
|
||||
@ -295,52 +295,52 @@ $('#myModal').on('hidden', function () {
|
||||
================================================== -->
|
||||
<section id="dropdowns">
|
||||
<div class="page-header">
|
||||
<h1>Dropdowns <small>bootstrap-dropdown.js</small></h1>
|
||||
<h1>{{_i}}Dropdowns{{/i}} <small>bootstrap-dropdown.js</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span3 columns">
|
||||
<h3>About dropdowns</h3>
|
||||
<p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p>
|
||||
<a href="../js/bootstrap-dropdown.js" target="_blank" class="btn">Download file</a>
|
||||
<h3>{{_i}}About dropdowns{{/i}}</h3>
|
||||
<p>{{_i}}Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.{{/i}}</p>
|
||||
<a href="../js/bootstrap-dropdown.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
|
||||
</div>
|
||||
<div class="span9 columns">
|
||||
<h2>Examples</h2>
|
||||
<p>Click on the dropdown nav links in the navbar and pills below to test dropdowns.</p>
|
||||
<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="#">Project Name</a>
|
||||
<a class="brand" href="#">{{_i}}Project Name{{/i}}</a>
|
||||
<ul class="nav">
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<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>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown 2 {{/i}}<b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<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>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a 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">Dropdown 3 <b class="caret"></b></a>
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown 3{{/i}} <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<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>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@ -349,71 +349,69 @@ $('#myModal').on('hidden', function () {
|
||||
</div> <!-- /navbar-example -->
|
||||
|
||||
<ul class="nav pills">
|
||||
<li class="active"><a href="#">Regular link</a></li>
|
||||
<li class="active"><a href="#">{{_i}}Regular link{{/i}}</a></li>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
|
||||
<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="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<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>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
|
||||
<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="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<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>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a>
|
||||
<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="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<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>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul> <!-- /tabs -->
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>Using bootstrap-dropdown.js</h2>
|
||||
<p>Call the dropdowns via javascript:</p>
|
||||
<h2>{{_i}}Using{{/i}} bootstrap-dropdown.js</h2>
|
||||
<p>{{_i}}Call the dropdowns via javascript:{{/i}}</p>
|
||||
<pre class="prettyprint linenums">$('.dropdown-toggle').dropdown()</pre>
|
||||
<h3>Markup</h3>
|
||||
<p>To quickly add dropdown functionality to any element just add <code>data-toggle="dropdown"</code> and any valid bootstrap dropdown will automatically be activated.</p>
|
||||
<p><span class="label notice">Notice</span> For added control and flexibility, optionally specify a <code>data-target="#fat"</code> or <code>href="#fat"</code> - this allows you to target specific dropdowns.</p>
|
||||
<h3>{{_i}}Markup{{/i}}</h3>
|
||||
<p>{{_i}}To quickly add dropdown functionality to any element just add <code>data-toggle="dropdown"</code> and any valid bootstrap dropdown will automatically be activated.{{/i}}</p>
|
||||
<p>{{_i}}<span class="label notice">Notice</span> For added control and flexibility, optionally specify a <code>data-target="#fat"</code> or <code>href="#fat"</code> - this allows you to target specific dropdowns.{{/i}}</p>
|
||||
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav pills">
|
||||
<li class="active"><a href="#">Regular link</a></li>
|
||||
<li class="dropdown" id="menu1">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
|
||||
Dropdown
|
||||
{{_i}}Dropdown{{/i}}
|
||||
<b class="caret"></b>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<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>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
...
|
||||
</ul></pre>
|
||||
<h3>Methods</h3>
|
||||
<h3>{{_i}}Methods{{/i}}</h3>
|
||||
<h4>$().dropdown()</h4>
|
||||
<p>
|
||||
A programatic api for activating menus for a given navbar or tabbed navigation.
|
||||
</p>
|
||||
<p>{{_i}}A programatic api for activating menus for a given navbar or tabbed navigation.{{/i}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -424,30 +422,30 @@ $('#myModal').on('hidden', function () {
|
||||
================================================== -->
|
||||
<section id="scrollspy">
|
||||
<div class="page-header">
|
||||
<h1>ScrollSpy <small>bootstrap-scrollspy.js</small></h1>
|
||||
<h1>{{_i}}ScrollSpy{{/i}} <small>bootstrap-scrollspy.js</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span3 columns">
|
||||
<p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position.</p>
|
||||
<a href="../js/bootstrap-scrollspy.js" target="_blank" class="btn">Download file</a>
|
||||
<p>{{_i}}The ScrollSpy plugin is for automatically updating nav targets based on scroll position.{{/i}}</p>
|
||||
<a href="../js/bootstrap-scrollspy.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
|
||||
</div>
|
||||
<div class="span9 columns">
|
||||
<h2>Example navbar with scrollspy</h2>
|
||||
<p>Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!</p>
|
||||
<h2>{{_i}}Example navbar with scrollspy{{/i}}</h2>
|
||||
<p>{{_i}}Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!{{/i}}</p>
|
||||
<div id="navbarExample" class="navbar navbar-static">
|
||||
<div class="navbar-inner">
|
||||
<div class="container" style="width: auto;">
|
||||
<a class="brand" href="#">Project Name</a>
|
||||
<a class="brand" href="#">{{_i}}Project Name{{/i}}</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#fat">@fat</a></li>
|
||||
<li><a href="#mdo">@mdo</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#one">one</a></li>
|
||||
<li><a href="#two">two</a></li>
|
||||
<li><a href="#one">{{_i}}one{{/i}}</a></li>
|
||||
<li><a href="#two">{{_i}}two{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#three">three</a></li>
|
||||
<li><a href="#three">{{_i}}three{{/i}}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@ -479,29 +477,29 @@ $('#myModal').on('hidden', function () {
|
||||
</p>
|
||||
</div>
|
||||
<hr>
|
||||
<h2>Using bootstrap-scrollspy.js</h2>
|
||||
<p>Call the scrollspy via javascript:</p>
|
||||
<h2>{{_i}}Using bootstrap-scrollspy.js{{/i}}</h2>
|
||||
<p>{{_i}}Call the scrollspy via javascript:{{/i}}</p>
|
||||
<pre class="prettyprint linenums">$('#navbar').scrollspy()</pre>
|
||||
<h3>Markup</h3>
|
||||
<p>To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the body).
|
||||
<h3>{{_i}}Markup{{/i}}</h3>
|
||||
<p>{{_i}}To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the body).{{/i}}</p>
|
||||
<pre class="prettyprint linenums"><body data-spy="scroll" >...</body></pre>
|
||||
<p><span class="label notice">Notice</span> Navbar anchor tags must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the dom like <code><div id="home"></div></code>.
|
||||
<h3>Options</h3>
|
||||
<p>{{_i}}<span class="label notice">Notice</span> Navbar anchor tags must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the dom like <code><div id="home"></div></code>.{{/i}}</p>
|
||||
<h3>{{_i}}Options{{/i}}</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 100px;">type</th>
|
||||
<th style="width: 50px;">default</th>
|
||||
<th>description</th>
|
||||
<th style="width: 100px;">{{_i}}Name{{/i}}</th>
|
||||
<th style="width: 100px;">{{_i}}type{{/i}}</th>
|
||||
<th style="width: 50px;">{{_i}}default{{/i}}</th>
|
||||
<th>{{_i}}description{{/i}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>offset</td>
|
||||
<td>number</td>
|
||||
<td>10</td>
|
||||
<td>Pixels to offset from top when calculating position of scroll.</td>
|
||||
<td>{{_i}}offset{{/i}}</td>
|
||||
<td>{{_i}}number{{/i}}</td>
|
||||
<td>{{_i}}10{{/i}}</td>
|
||||
<td>{{_i}}Pixels to offset from top when calculating position of scroll.{{/i}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -515,21 +513,21 @@ $('#myModal').on('hidden', function () {
|
||||
================================================== -->
|
||||
<section id="tabs">
|
||||
<div class="page-header">
|
||||
<h1>Togglable tabs <small>bootstrap-tab.js</small></h1>
|
||||
<h1>{{_i}}Togglable tabs{{/i}} <small>bootstrap-tab.js</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span3 columns">
|
||||
<p>This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.</p>
|
||||
<a href="../js/bootstrap-tab.js" target="_blank" class="btn">Download file</a>
|
||||
<p>{{_i}}This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.{{/i}}</p>
|
||||
<a href="../js/bootstrap-tab.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
|
||||
</div>
|
||||
<div class="span9 columns">
|
||||
<h2>Example tabs</h2>
|
||||
<p>Click the tabs below to toggle between hidden panes, even via dropdown menus.</p>
|
||||
<h2>{{_i}}Example tabs{{/i}}</h2>
|
||||
<p>{{_i}}Click the tabs below to toggle between hidden panes, even via dropdown menus.{{/i}}</p>
|
||||
<ul id="tab" class="nav tabs">
|
||||
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
|
||||
<li><a href="#profile" data-toggle="tab">Profile</a></li>
|
||||
<li class="active"><a href="#home" data-toggle="tab">{{_i}}Home{{/i}}</a></li>
|
||||
<li><a href="#profile" data-toggle="tab">{{_i}}Profile{{/i}}</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#dropdown1" data-toggle="tab">@fat</a></li>
|
||||
<li><a href="#dropdown2" data-toggle="tab">@mdo</a></li>
|
||||
@ -551,29 +549,29 @@ $('#myModal').on('hidden', function () {
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<h2>Using bootstrap-tab.js</h2>
|
||||
<p>Enable tabbable tabs via javascript:</p>
|
||||
<h2>{{_i}}Using bootstrap-tab.js{{/i}}</h2>
|
||||
<p>{{_i}}Enable tabbable tabs via javascript:{{/i}}</p>
|
||||
<pre class="prettyprint linenums">$('#myTab').tab('show')</pre>
|
||||
<h3>Markup</h3>
|
||||
<p>You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.</p>
|
||||
<h3>{{_i}}Markup{{/i}}</h3>
|
||||
<p>{{_i}}You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="tabs">
|
||||
<li><a href="#home" data-toggle="tab">Home</a></li>
|
||||
<li><a href="#profile" data-toggle="tab">Profile</a></li>
|
||||
<li><a href="#messages" data-toggle="tab">Messages</a></li>
|
||||
<li><a href="#ettings" data-toggle="tab">Settings</a></li>
|
||||
<li><a href="#home" data-toggle="tab">{{_i}}Home{{/i}}</a></li>
|
||||
<li><a href="#profile" data-toggle="tab">{{_i}}Profile{{/i}}</a></li>
|
||||
<li><a href="#messages" data-toggle="tab">{{_i}}Messages{{/i}}</a></li>
|
||||
<li><a href="#ettings" data-toggle="tab">{{_i}}Settings{{/i}}</a></li>
|
||||
</ul></pre>
|
||||
<h3>Methods</h3>
|
||||
<h3>{{_i}}Methods{{/i}}</h3>
|
||||
<h4>$().tab</h4>
|
||||
<p>
|
||||
Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom.
|
||||
{{_i}}Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom.{{/i}}
|
||||
</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="tabs">
|
||||
<li class="active"><a href="#home">Home</a></li>
|
||||
<li><a href="#profile">Profile</a></li>
|
||||
<li><a href="#messages">Messages</a></li>
|
||||
<li><a href="#settings">Settings</a></li>
|
||||
<li class="active"><a href="#home">{{_i}}Home{{/i}}</a></li>
|
||||
<li><a href="#profile">{{_i}}Profile{{/i}}</a></li>
|
||||
<li><a href="#messages">{{_i}}Messages{{/i}}</a></li>
|
||||
<li><a href="#settings">{{_i}}Settings{{/i}}</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
@ -589,22 +587,22 @@ $('#myModal').on('hidden', function () {
|
||||
})
|
||||
</script></pre>
|
||||
</p>
|
||||
<h3>Events</h3>
|
||||
<h3>{{_i}}Events{{/i}}</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event</th>
|
||||
<th>Description</th>
|
||||
<th style="width: 150px;">{{_i}}Event{{/i}}</th>
|
||||
<th>{{_i}}Description{{/i}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>show</td>
|
||||
<td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
|
||||
<td>{{_i}}show{{/i}}</td>
|
||||
<td>{{_i}}This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shown</td>
|
||||
<td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
|
||||
<td>{{_i}}shown{{/i}}</td>
|
||||
<td>{{_i}}This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.{{/i}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -623,41 +621,41 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
================================================== -->
|
||||
<section id="tooltips">
|
||||
<div class="page-header">
|
||||
<h1>Tooltips <small>bootstrap-tooltip.js</small></h1>
|
||||
<h1>{{_i}}Tooltips{{/i}} <small>bootstrap-tooltip.js</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span3 columns">
|
||||
<h3>About Tooltips</h3>
|
||||
<p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.</p>
|
||||
<a href="../js/bootstrap-tooltip.js" target="_blank" class="btn">Download file</a>
|
||||
<h3>{{_i}}About Tooltips{{/i}}</h3>
|
||||
<p>{{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.{{/i}}</p>
|
||||
<a href="../js/bootstrap-tooltip.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
|
||||
</div>
|
||||
<div class="span9 columns">
|
||||
<h2>Example use of Tooltips</h2>
|
||||
<p>Hover over the links below to see tooltips:</p>
|
||||
<h2>{{_i}}Example use of Tooltips{{/i}}</h2>
|
||||
<p>{{_i}}Hover over the links below to see tooltips:{{/i}}</p>
|
||||
<div class="tooltip-demo well">
|
||||
<p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel='tooltip' title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel='tooltip' title='Another tooltip'>have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel='tooltip' title='Another one here too'>really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel='tooltip' title='The last tip!'>twitter handle</a> freegan cred raw denim single-origin coffee viral.
|
||||
<p class="muted" style="margin-bottom: 0;">{{_i}}Tight pants next level keffiyeh <a href="#" rel='tooltip' title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel='tooltip' title='Another tooltip'>have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel='tooltip' title='Another one here too'>really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel='tooltip' title='The last tip!'>twitter handle</a> freegan cred raw denim single-origin coffee viral.{{/i}}
|
||||
</p>
|
||||
</div>
|
||||
<hr>
|
||||
<h2>Using bootstrap-tooltip.js</h2>
|
||||
<p>Trigger the tooltip via javascript:</p>
|
||||
<pre class="prettyprint linenums">$('#example').tooltip(options)</pre>
|
||||
<h3>Options</h3>
|
||||
<h2>{{_i}}Using{{/i}} bootstrap-tooltip.js</h2>
|
||||
<p>{{_i}}Trigger the tooltip via javascript:{{/i}}</p>
|
||||
<pre class="prettyprint linenums">$('#example').tooltip({{_i}}options{{/i}})</pre>
|
||||
<h3>{{_i}}Options{{/i}}</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 100px;">type</th>
|
||||
<th style="width: 50px;">default</th>
|
||||
<th>description</th>
|
||||
<th style="width: 100px;">{{_i}}Name{{/i}}</th>
|
||||
<th style="width: 100px;">{{_i}}type{{/i}}</th>
|
||||
<th style="width: 50px;"{{_i}}>default{{/i}}</th>
|
||||
<th>{{_i}}description{{/i}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>animation</td>
|
||||
<td>boolean</td>
|
||||
<td>{{_i}}animation{{/i}}</td>
|
||||
<td>{{_i}}boolean{{/i}}</td>
|
||||
<td>true</td>
|
||||
<td>apply a css fade transition to the tooltip</td>
|
||||
<td>{{_i}}apply a css fade transition to the tooltip{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>placement</td>
|
||||
|
||||
@ -22,11 +22,10 @@
|
||||
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<!-- Navbar
|
||||
================================================== -->
|
||||
<div class="navbar navbar-fixed">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user