Skip to content
GitLab
Commit 178d8e98 authored by fat's avatar fat
Browse files

update docs nav targets

parent bdac42ea
2 merge requests!8635ignore Gruntfile.js in jekyll,!8656Added rel="stylesheet" to CDN-Examples
Hide whitespace changes
Inline Side-by-side
Showing
with 53 additions and 36 deletions
+53 -36
_layouts/default.html
+ 1
- 1
View file @ 178d8e98
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
{% include header.html %} {% include header.html %}
<!-- Place anything custom after this. --> <!-- Place anything custom after this. -->
</head> </head>
<body data-spy="scroll" data-target=".bs-sidebar"> <body>
<!-- Docs master nav --> <!-- Docs master nav -->
{% include nav-main.html %} {% include nav-main.html %}
......
assets/js/application.js
+ 17
- 0
View file @ 178d8e98
...@@ -8,11 +8,28 @@ ...@@ -8,11 +8,28 @@
var $window = $(window) var $window = $(window)
var navHeight = $('.navbar').outerHeight(true) + 10
$(document.body).scrollspy({
target: '.bs-sidebar',
offset: navHeight
})
// Disable certain links in docs // Disable certain links in docs
$('.bs-docs-container [href=#]').click(function (e) { $('.bs-docs-container [href=#]').click(function (e) {
e.preventDefault() e.preventDefault()
}) })
$(document.body).on('click', '[href^=#]', function (e) {
var $target = $(this.getAttribute('href'))
e.preventDefault() // prevent browser scroll
document.body.scrollTop =
$target.offset().top -
navHeight + 5 // offset scroll by nav
})
// back to top // back to top
setTimeout(function () { setTimeout(function () {
......
javascript.html
+ 35
- 35
View file @ 178d8e98
...@@ -8,9 +8,9 @@ lead: "Bring Bootstrap's components to life with over a dozen custom jQuery plug ...@@ -8,9 +8,9 @@ lead: "Bring Bootstrap's components to life with over a dozen custom jQuery plug
<!-- Overview <!-- Overview
================================================== --> ================================================== -->
<div class="bs-docs-section" id="js-overview"> <div class="bs-docs-section">
<div class="page-header"> <div class="page-header">
<h1>Overview</h1> <h1 id="js-overview">Overview</h1>
</div> </div>
<h3 id="js-individual-compiled">Individual or compiled</h3> <h3 id="js-individual-compiled">Individual or compiled</h3>
...@@ -81,9 +81,9 @@ $('#myModal').on('show.bs.modal', function (e) { ...@@ -81,9 +81,9 @@ $('#myModal').on('show.bs.modal', function (e) {
<!-- Transitions <!-- Transitions
================================================== --> ================================================== -->
<div class="bs-docs-section" id="transitions"> <div class="bs-docs-section">
<div class="page-header"> <div class="page-header">
<h1>Transitions <small>transition.js</small></h1> <h1 id="transitions">Transitions <small>transition.js</small></h1>
</div> </div>
<h3>About transitions</h3> <h3>About transitions</h3>
<p>For simple transition effects, include <code>transition.js</code> once alongside the other JS files. If you're using the compiled (or minified) <code>bootstrap.js</code>, there is no need to include this&mdash;it's already there.</p> <p>For simple transition effects, include <code>transition.js</code> once alongside the other JS files. If you're using the compiled (or minified) <code>bootstrap.js</code>, there is no need to include this&mdash;it's already there.</p>
...@@ -103,9 +103,9 @@ $('#myModal').on('show.bs.modal', function (e) { ...@@ -103,9 +103,9 @@ $('#myModal').on('show.bs.modal', function (e) {
<!-- Modal <!-- Modal
================================================== --> ================================================== -->
<div class="bs-docs-section" id="modals"> <div class="bs-docs-section">
<div class="page-header"> <div class="page-header">
<h1>Modals <small>modal.js</small></h1> <h1 id="modals">Modals <small>modal.js</small></h1>
</div> </div>
<h2 id="modals-examples">Examples</h2> <h2 id="modals-examples">Examples</h2>
...@@ -339,9 +339,9 @@ $('#myModal').on('hidden.bs.modal', function () { ...@@ -339,9 +339,9 @@ $('#myModal').on('hidden.bs.modal', function () {
<!-- Dropdowns <!-- Dropdowns
================================================== --> ================================================== -->
<section id="dropdowns"> <div class="bs-docs-section">
<div class="page-header"> <div class="page-header">
<h1>Dropdowns <small>dropdown.js</small></h1> <h1 id="dropdowns">Dropdowns <small>dropdown.js</small></h1>
</div> </div>
...@@ -481,9 +481,9 @@ $('.dropdown-toggle').dropdown() ...@@ -481,9 +481,9 @@ $('.dropdown-toggle').dropdown()
<!-- ScrollSpy <!-- ScrollSpy
================================================== --> ================================================== -->
<section id="scrollspy"> <div class="bs-docs-section">
<div class="page-header"> <div class="page-header">
<h1>ScrollSpy <small>scrollspy.js</small></h1> <h1 id="scrollspy">ScrollSpy <small>scrollspy.js</small></h1>
</div> </div>
...@@ -527,7 +527,7 @@ $('.dropdown-toggle').dropdown() ...@@ -527,7 +527,7 @@ $('.dropdown-toggle').dropdown()
</div><!-- /example --> </div><!-- /example -->
<h2 id="scrollspy-examples">Usage</h2> <h2 id="scrollspy-usage">Usage</h2>
<h3>Via data attributes</h3> <h3>Via data attributes</h3>
<p>To easily add scrollspy behavior to your topbar navigation, add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the <code>&lt;body&gt;</code>. Then add the <code>data-target</code> attribute with the ID or class of the parent element of any Bootstrap <code>.nav</code> component.</p> <p>To easily add scrollspy behavior to your topbar navigation, add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the <code>&lt;body&gt;</code>. Then add the <code>data-target</code> attribute with the ID or class of the parent element of any Bootstrap <code>.nav</code> component.</p>
...@@ -605,9 +605,9 @@ $('#myScrollspy').on('activate.bs.scrollspy', function () { ...@@ -605,9 +605,9 @@ $('#myScrollspy').on('activate.bs.scrollspy', function () {
<!-- Tabs <!-- Tabs
================================================== --> ================================================== -->
<section id="tabs"> <div class="bs-docs-section">
<div class="page-header"> <div class="page-header">
<h1>Togglable tabs <small>tab.js</small></h1> <h1 id="tabs">Togglable tabs <small>tab.js</small></h1>
</div> </div>
...@@ -645,7 +645,7 @@ $('#myScrollspy').on('activate.bs.scrollspy', function () { ...@@ -645,7 +645,7 @@ $('#myScrollspy').on('activate.bs.scrollspy', function () {
<hr class="bs-docs-separator"> <hr class="bs-docs-separator">
<h2 id="tabs-examples">Usage</h2> <h2 id="tabs-usage">Usage</h2>
<p>Enable tabbable tabs via JavaScript (each tab needs to be activated individually):</p> <p>Enable tabbable tabs via JavaScript (each tab needs to be activated individually):</p>
{% highlight js %} {% highlight js %}
$('#myTab a').click(function (e) { $('#myTab a').click(function (e) {
...@@ -732,9 +732,9 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { ...@@ -732,9 +732,9 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
<!-- Tooltips <!-- Tooltips
================================================== --> ================================================== -->
<section id="tooltips"> <div class="bs-docs-section">
<div class="page-header"> <div class="page-header">
<h1>Tooltips <small>tooltip.js</small></h1> <h1 id="tooltips">Tooltips <small>tooltip.js</small></h1>
</div> </div>
<h2 id="tooltips-examples">Examples</h2> <h2 id="tooltips-examples">Examples</h2>
...@@ -763,7 +763,7 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { ...@@ -763,7 +763,7 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
<hr class="bs-docs-separator"> <hr class="bs-docs-separator">
<h2 id="tooltips-examples">Usage</h2> <h2 id="tooltips-usage">Usage</h2>
<p>Trigger the tooltip via JavaScript:</p> <p>Trigger the tooltip via JavaScript:</p>
{% highlight js %} {% highlight js %}
$('#example').tooltip(options) $('#example').tooltip(options)
...@@ -873,9 +873,9 @@ $('#example').tooltip(options) ...@@ -873,9 +873,9 @@ $('#example').tooltip(options)
<!-- Popovers <!-- Popovers
================================================== --> ================================================== -->
<section id="popovers"> <div class="bs-docs-section">
<div class="page-header"> <div class="page-header">
<h1>Popovers <small>popover.js</small></h1> <h1 id="popovers">Popovers <small>popover.js</small></h1>
</div> </div>
<h2 id="popovers-examples">Examples</h2> <h2 id="popovers-examples">Examples</h2>
...@@ -947,7 +947,7 @@ $('#example').tooltip(options) ...@@ -947,7 +947,7 @@ $('#example').tooltip(options)
<hr class="bs-docs-separator"> <hr class="bs-docs-separator">
<h2 id="popovers-examples">Usage</h2> <h2 id="popovers-usage">Usage</h2>
<p>Enable popovers via JavaScript:</p> <p>Enable popovers via JavaScript:</p>
{% highlight js %}$('#example').popover(options){% endhighlight %} {% highlight js %}$('#example').popover(options){% endhighlight %}
...@@ -1058,9 +1058,9 @@ $('#example').tooltip(options) ...@@ -1058,9 +1058,9 @@ $('#example').tooltip(options)
<!-- Alert <!-- Alert
================================================== --> ================================================== -->
<div class="bs-docs-section" id="alerts"> <div class="bs-docs-section">
<div class="page-header"> <div class="page-header">
<h1>Alert messages <small>alert.js</small></h1> <h1 id="alerts">Alert messages <small>alert.js</small></h1>
</div> </div>
...@@ -1088,7 +1088,7 @@ $('#example').tooltip(options) ...@@ -1088,7 +1088,7 @@ $('#example').tooltip(options)
<hr class="bs-docs-separator"> <hr class="bs-docs-separator">
<h2 id="alerts-examples">Usage</h2> <h2 id="alerts-usage">Usage</h2>
<p>Enable dismissal of an alert via JavaScript:</p> <p>Enable dismissal of an alert via JavaScript:</p>
{% highlight js %}$(".alert").alert(){% endhighlight %} {% highlight js %}$(".alert").alert(){% endhighlight %}
...@@ -1137,9 +1137,9 @@ $('#my-alert').bind('closed.bs.alert', function () { ...@@ -1137,9 +1137,9 @@ $('#my-alert').bind('closed.bs.alert', function () {
<!-- Buttons <!-- Buttons
================================================== --> ================================================== -->
<div class="bs-docs-section" id="buttons"> <div class="bs-docs-section">
<div class="page-header"> <div class="page-header">
<h1>Buttons <small>button.js</small></h1> <h1 id="buttons">Buttons <small>button.js</small></h1>
</div> </div>
<h2 id="buttons-examples">Example uses</h2> <h2 id="buttons-examples">Example uses</h2>
...@@ -1229,7 +1229,7 @@ $('#my-alert').bind('closed.bs.alert', function () { ...@@ -1229,7 +1229,7 @@ $('#my-alert').bind('closed.bs.alert', function () {
<hr class="bs-docs-separator"> <hr class="bs-docs-separator">
<h2 id="buttons-examples">Usage</h2> <h2 id="buttons-usage">Usage</h2>
<p>Enable buttons via JavaScript:</p> <p>Enable buttons via JavaScript:</p>
{% highlight js %} {% highlight js %}
$('.nav-tabs').button() $('.nav-tabs').button()
...@@ -1282,9 +1282,9 @@ $('.nav-tabs').button() ...@@ -1282,9 +1282,9 @@ $('.nav-tabs').button()
<!-- Collapse <!-- Collapse
================================================== --> ================================================== -->
<section id="collapse"> <div class="bs-docs-section">
<div class="page-header"> <div class="page-header">
<h1>Collapse <small>collapse.js</small></h1> <h1 id="collapse">Collapse <small>collapse.js</small></h1>
</div> </div>
<h3>About</h3> <h3>About</h3>
...@@ -1392,7 +1392,7 @@ $('.nav-tabs').button() ...@@ -1392,7 +1392,7 @@ $('.nav-tabs').button()
<hr class="bs-docs-separator"> <hr class="bs-docs-separator">
<h2 id="collapse-examples">Usage</h2> <h2 id="collapse-usage">Usage</h2>
<h3>Via data attributes</h3> <h3>Via data attributes</h3>
<p>Just add <code>data-toggle="collapse"</code> and a <code>data-target</code> to element to automatically assign control of a collapsible element. The <code>data-target</code> attribute accepts a CSS selector to apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If you'd like it to default open, add the additional class <code>in</code>.</p> <p>Just add <code>data-toggle="collapse"</code> and a <code>data-target</code> to element to automatically assign control of a collapsible element. The <code>data-target</code> attribute accepts a CSS selector to apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If you'd like it to default open, add the additional class <code>in</code>.</p>
...@@ -1492,9 +1492,9 @@ $('#myCollapsible').on('hidden.bs.collapse', function () { ...@@ -1492,9 +1492,9 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
<!-- Carousel <!-- Carousel
================================================== --> ================================================== -->
<section id="carousel"> <div class="bs-docs-section">
<div class="page-header"> <div class="page-header">
<h1>Carousel <small>carousel.js</small></h1> <h1 id="carousel">Carousel <small>carousel.js</small></h1>
</div> </div>
<h2 id="carousel-examples">Examples</h2> <h2 id="carousel-examples">Examples</h2>
...@@ -1614,7 +1614,7 @@ $('#myCollapsible').on('hidden.bs.collapse', function () { ...@@ -1614,7 +1614,7 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
<hr class="bs-docs-separator"> <hr class="bs-docs-separator">
<h2 id="carousel-examples">Usage</h2> <h2 id="carousel-usage">Usage</h2>
<h3>Via data attributes</h3> <h3>Via data attributes</h3>
<p>Use data attributes to easily control the position of the carousel. <code>data-slide</code> accepts the keywords <code>prev</code> or <code>next</code>, which alters the slide position relative to its current position. Alternatively, use <code>data-slide-to</code> to pass a raw slide index to the carousel <code>data-slide-to="2"</code>, which shifts the slide position to a particular index beginning with <code>0</code>.</p> <p>Use data attributes to easily control the position of the carousel. <code>data-slide</code> accepts the keywords <code>prev</code> or <code>next</code>, which alters the slide position relative to its current position. Alternatively, use <code>data-slide-to</code> to pass a raw slide index to the carousel <code>data-slide-to="2"</code>, which shifts the slide position to a particular index beginning with <code>0</code>.</p>
...@@ -1709,9 +1709,9 @@ $('#myCarousel').on('slide.bs.carousel', function () { ...@@ -1709,9 +1709,9 @@ $('#myCarousel').on('slide.bs.carousel', function () {
<!-- Affix <!-- Affix
================================================== --> ================================================== -->
<section id="affix"> <div class="bs-docs-section">
<div class="page-header"> <div class="page-header">
<h1>Affix <small>affix.js</small></h1> <h1 id="affix">Affix <small>affix.js</small></h1>
</div> </div>
<h2 id="affix-examples">Example</h2> <h2 id="affix-examples">Example</h2>
...@@ -1719,7 +1719,7 @@ $('#myCarousel').on('slide.bs.carousel', function () { ...@@ -1719,7 +1719,7 @@ $('#myCarousel').on('slide.bs.carousel', function () {
<hr class="bs-docs-separator"> <hr class="bs-docs-separator">
<h2 id="affix-examples">Usage</h2> <h2 id="affix-usage">Usage</h2>
<h3>Via data attributes</h3> <h3>Via data attributes</h3>
<p>To easily add affix behavior to any element, just add <code>data-spy="affix"</code> to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.</p> <p>To easily add affix behavior to any element, just add <code>data-spy="affix"</code> to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.</p>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment