Skip to content
GitLab
Commit 0075de8e authored by Chris Rebert's avatar Chris Rebert
Browse files

Merge pull request #40 from twbs/bye-affix 

Remove affix from docs & CSS; add migration guidance
parents 6cb41761 00e6fae8
Hide whitespace changes
Inline Side-by-side
Showing
with 3 additions and 157 deletions
+3 -157
docs/_data/nav.yml
+ 0
- 1
View file @ 0075de8e
......@@ -122,7 +122,6 @@
- title: Buttons
- title: Collapse
- title: Carousel
- title: Affix
- title: Examples
pages:
......
docs/assets/css/src/docs.css
+ 2
- 30
View file @ 0075de8e
......@@ -528,14 +528,10 @@ body {
/*
* Side navigation
*
* Scrollspy and affixed enhanced navigation to highlight sections and secondary
* Scrollspy and enhanced navigation to highlight sections and secondary
* sections of docs content.
*/
/* By default it's not affixed in mobile views, so undo that */
.bs-docs-sidebar.affix {
position: static;
}
@media (min-width: 768px) {
.bs-docs-sidebar {
padding-left: 20px;
......@@ -618,35 +614,11 @@ body {
}
}
/* Show and affix the side nav when space allows it */
/* Show the side nav when space allows it */
@media (min-width: 992px) {
.bs-docs-sidebar .nav > .active > ul {
display: block;
}
/* Widen the fixed sidebar */
.bs-docs-sidebar.affix,
.bs-docs-sidebar.affix-bottom {
width: 213px;
}
.bs-docs-sidebar.affix {
position: fixed; /* Undo the static from mobile first approach */
top: 20px;
}
.bs-docs-sidebar.affix-bottom {
position: absolute; /* Undo the static from mobile first approach */
}
.bs-docs-sidebar.affix-bottom .bs-docs-sidenav,
.bs-docs-sidebar.affix .bs-docs-sidenav {
margin-top: 0;
margin-bottom: 0;
}
}
@media (min-width: 1200px) {
/* Widen the fixed sidebar again */
.bs-docs-sidebar.affix-bottom,
.bs-docs-sidebar.affix {
width: 263px;
}
}
......
docs/javascript/affix.md deleted 100644 → 0
+ 0
- 121
View file @ 6cb41761
---
layout: page
title: Affix
---
## Example
The subnavigation on the right is a live demo of the affix plugin.
## Usage
Use the affix plugin via data attributes or manually with your own JavaScript. **In both situations, you must provide CSS for the positioning and width of your affixed content.**
### Position via CSS
The affix plugin toggles between three classes, each representing a particular state: `.affix`, `.affix-top`, and `.affix-bottom`. You must provide the styles for these classes yourself (independent of this plugin) to handle the actual positions.
Here's how the affix plugin works:
- Scrolling past the element you want affixed should trigger the actual affixing. This is where `.affix` replaces `.affix-top` and sets `position: fixed;` (provided by Bootstrap's CSS).
- If a bottom offset is defined, scrolling past it should replace `.affix` with `.affix-bottom`. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add `position: absolute;` when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the element from there.
Follow the above steps to set your CSS for either of the usage options below.
### Via data attributes
To easily add affix behavior to any element, just add `data-spy="affix"` to the element you want to spy on. Use offsets to define when to toggle the pinning of an element.
{% highlight html %}
<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
...
</div>
{% endhighlight %}
### Via JavaScript
Call the affix plugin via JavaScript:
{% highlight js %}
$('#myAffix').affix({
offset: {
top: 100,
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true))
}
}
})
{% endhighlight %}
### Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-offset-top="200"`.
<div class="table-responsive">
<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>
</tr>
</thead>
<tbody>
<tr>
<td>offset</td>
<td>number | function | object</td>
<td>10</td>
<td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To provide a unique, bottom and top offset just provide an object <code>offset: { top: 10 }</code> or <code>offset: { top: 10, bottom: 5 }</code>. Use a function when you need to dynamically calculate an offset.</td>
</tr>
<tr>
<td>target</td>
<td>selector | node | jQuery element</td>
<td>the <code>window</code> object</td>
<td>Specifies the target element of the affix.</td>
</tr>
</tbody>
</table>
</div>
### Events
Bootstrap's affix plugin exposes a few events for hooking into affix functionality.
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>affix.bs.affix</td>
<td>This event fires immediately before the element has been affixed.</td>
</tr>
<tr>
<td>affixed.bs.affix</td>
<td>This event is fired after the element has been affixed.</td>
</tr>
<tr>
<td>affix-top.bs.affix</td>
<td>This event fires immediately before the element has been affixed-top.</td>
</tr>
<tr>
<td>affixed-top.bs.affix</td>
<td>This event is fired after the element has been affixed-top.</td>
</tr>
<tr>
<td>affix-bottom.bs.affix</td>
<td>This event fires immediately before the element has been affixed-bottom.</td>
</tr>
<tr>
<td>affixed-bottom.bs.affix</td>
<td>This event is fired after the element has been affixed-bottom.</td>
</tr>
</tbody>
</table>
</div>
docs/migration.md
+ 1
- 0
View file @ 0075de8e
......@@ -17,6 +17,7 @@ For a broader overview, see [what's new](http://blog.getbootstrap.com/DEAD-LINK-
- Switched from LESS to SCSS for our source CSS files.
- Added a new grid tier for ~`480px` and below.
- Dropped Glyphicons icon font.
- Dropped the Affix jQuery plugin. We recommend using a `position: sticky` polyfill instead. [See the HTML5 Please entry](http://html5please.com/#sticky) for details and specific polyfill recommendations.
- Refactored nearly all components to use more unnested classes instead of children selectors.
- Non-responsive usage of Bootstrap is no longer supported.
- Dropped the online Customizer in favor of more extensive setup documentation.
......
scss/_utilities.scss
+ 0
- 5
View file @ 0075de8e
......@@ -61,11 +61,6 @@
}
// For Affix plugin
.affix {
position: fixed;
}
// Alignment
.text-left { text-align: left; }
.text-right { text-align: right; }
......
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