Skip to content
GitLab
Commit 20cdb622 authored by Mark Otto's avatar Mark Otto
Browse files

Merge branch 'v4' of https://github.com/twbs/derpstrap into v4

parents b542137d b361dacf
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 572 additions and 213 deletions
+572 -213
Gruntfile.js
+ 1
- 1
View file @ 20cdb622
......@@ -163,7 +163,7 @@ module.exports = function (grunt) {
'Explorer >= 9',
'iOS >= 7',
'Opera >= 12',
'Safari >= 6'
'Safari >= 7.1'
]
},
core: {
......
dist/css/bootstrap.css
+ 0
- 4
View file @ 20cdb622
......@@ -5192,10 +5192,6 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
border: 0;
}
.affix {
position: fixed;
}
.text-left {
text-align: left;
}
......
dist/css/bootstrap.css.map
-20 bytes (0%)
View file @ 20cdb622
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
dist/css/bootstrap.min.css
+ 1
- 1
View file @ 20cdb622
This diff is collapsed.
docs/_data/nav.yml
+ 0
- 1
View file @ 20cdb622
......@@ -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 @ 20cdb622
......@@ -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/components/forms.md 0 → 100644
+ 517
- 0
View file @ 20cdb622
---
layout: page
title: Forms
---
Bootstrap normalizes common HTML5 form elements and adds a number of layout options for building forms of all sizes.
## Example form
Individual form controls automatically receive some global styling. All textual `<input>`, `<textarea>`, and `<select>` elements with `.form-control` are set to `width: 100%;` by default. Wrap labels and controls in `.form-group` for optimum spacing.
{% example html %}
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-secondary">Submit</button>
</form>
{% endexample %}
<div class="bs-callout bs-callout-warning">
<h4>Don't mix form groups with input groups</h4>
<p>Do not mix form groups directly with <a href="/components/#input-groups">input groups</a>. Instead, nest the input group inside of the form group.</p>
</div>
## Inline forms
Add `.form-inline` to your `<form>` for left-aligned and inline-block controls. **This only applies to forms within viewports that are at least 768px wide.**
<div class="bs-callout bs-callout-danger">
<h4>Requires custom widths</h4>
<p>Inputs and selects have `width: 100%;` applied by default in Bootstrap. Within inline forms, we reset that to `width: auto;` so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.</p>
</div>
<div class="bs-callout bs-callout-warning">
<h4>Always add labels</h4>
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the `.sr-only` class.</p>
</div>
{% example html %}
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
{% endexample %}
{% example html %}
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
{% endexample %}
## Horizontal forms
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding `.form-horizontal` to the form. Doing so changes `.form-group`s to behave as grid rows, so no need for `.row`.
{% example html %}
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-secondary">Sign in</button>
</div>
</div>
</form>
{% endexample %}
## Supported controls
Examples of standard form controls supported in an example form layout.
### Inputs
Most common form control, text-based input fields. Includes support for all HTML5 types: `text`, `password`, `datetime`, `datetime-local`, `date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`, `tel`, and `color`.
<div class="bs-callout bs-callout-danger">
<h4>Type declaration required</h4>
<p>Inputs will only be fully styled if their `type` is properly declared.</p>
</div>
{% example html %}
<input type="text" class="form-control" placeholder="Text input">
{% endexample %}
<div class="bs-callout bs-callout-info">
<h4>Input groups</h4>
<p>To add integrated text or buttons before and/or after any text-based `&lt;input&gt;`, <a href="../components/#input-groups">check out the input group component</a>.</p>
</div>
### Textarea
Form control which supports multiple lines of text. Change `rows` attribute as necessary.
{% example html %}
<textarea class="form-control" rows="3"></textarea>
{% endexample %}
### Checkboxes and radios
Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
A checkbox or radio with the `disabled` attribute will be styled appropriately. To have the `<label>` for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the `.disabled` class to your `.radio`, `.radio-inline`, `.checkbox`, `.checkbox-inline`, or `<fieldset>`.
#### Default (stacked)
{% example html %}
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
{% endexample %}
#### Inline
Use the `.checkbox-inline` or `.radio-inline` classes on a series of checkboxes or radios for controls that appear on the same line.
{% example html %}
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
{% endexample %}
#### Without labels
Should you have no text within the `<label>`, the input is positioned as you'd expect. **Currently only works on non-inline checkboxes and radios.**
{% example html %}
<div class="checkbox">
<label>
<input type="checkbox" id="blankCheckbox" value="option1">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="blankRadio" id="blankRadio1" value="option1">
</label>
</div>
{% endexample %}
### Selects
Use the default option, or add `multiple` to show multiple options at once.
{% example html %}
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
{% endexample %}
## Static controls
When you need to place plain text next to a form label within a form, use the `.form-control-static` class on a `<p>`.
{% example html %}
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">email@example.com</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
{% endexample %}
{% example html %}
<form class="form-inline">
<div class="form-group">
<label class="sr-only">Email</label>
<p class="form-control-static">email@example.com</p>
</div>
<div class="form-group">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Confirm identity</button>
</form>
{% endexample %}
## Focus state
We remove the default `outline` styles on some form controls and apply a `box-shadow` in its place for `:focus`.
<div class="bs-example">
<form>
<input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state">
</form>
</div>
<div class="bs-callout bs-callout-info">
<h4>Demo `:focus` state</h4>
<p>The above example input uses custom styles in our documentation to demonstrate the `:focus` state on a `.form-control`.</p>
</div>
## Disabled states
Add the `disabled` boolean attribute on an `<input>`, `<select>`, or `<textarea>` to prevent user input and trigger a slightly different look.
{% highlight html %}
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
{% endhighlight %}
Add the `disabled` attribute to a `<fieldset>` to disable all the controls within.
{% example html %}
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
{% endexample %}
<div class="bs-callout bs-callout-warning">
<h4>Caveat about link functionality of `&lt;a&gt;`</h4>
<p>By default, browsers will treat all native form controls (<code>&lt;input&gt;</code>, <code>&lt;select&gt;</code> and <code>&lt;button&gt;</code> elements) inside a <code>&lt;fieldset disabled&gt;</code> as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <code>&lt;a ... class="btn btn-*"&gt;</code> elements, these will only be given a style of <code>pointer-events: none</code>. As noted in the section about <a href="#buttons-disabled">disabled state for buttons</a> (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.</p>
</div>
<div class="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4>
<p>While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don't fully support the <code>disabled</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
</div>
## Readonly inputs
Add the `readonly` boolean attribute on an input to prevent user input and style the input as disabled.
{% example html %}
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
{% endexample %}
## Validation
Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add `.has-warning`, `.has-error`, or `.has-success` to the parent element. Any `.control-label`, `.form-control`, and `.help-block` within that element will receive the validation styles.
{% example html %}
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>
{% endexample %}
You can also add optional feedback icons with the addition of `.has-feedback` and the right icon.
<div class="bs-callout bs-callout-warning">
<h4>Icons, labels, and input groups</h4>
<p>Manual positioning of feedback icons is required for inputs without a label and for <a href="../components#input-groups">input groups</a> with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the `sr-only` class. If you must do without labels, adjust the `top` value of the feedback icon. For input groups, adjust the `right` value to an appropriate pixel value depending on the width of your addon.</p>
</div>
{% example html %}
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
{% endexample %}
{% example html %}
<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
</form>
{% endexample %}
{% example html %}
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</form>
{% endexample %}
For form controls with no visible label, add the `.sr-only` class on the label. Bootstrap will automatically adjust the position of the icon once it's been added.
{% example html %}
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
{% endexample %}
## Control sizing
Set heights using classes like `.input-lg`, and set widths using grid column classes like `.col-lg-*`.
{% example html %}
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg"></select>
<select class="form-control"></select>
<select class="form-control input-sm"></select>
{% endexample %}
Quickly size labels and form controls within `.form-horizontal` by adding `.form-group-lg` or `.form-group-sm` to existing `.form-group`s.
{% example html %}
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>
{% endexample %}
## Column sizing
Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.
{% example html %}
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>
{% endexample %}
## Help text
Block level help text for form controls.
{% example html %}
<p class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</p>
{% endexample %}
docs/components/images.md 0 → 100644
+ 37
- 0
View file @ 20cdb622
---
layout: page
title: Images
---
## Responsive images
Images in Bootstrap 3 can be made responsive-friendly via the addition of the `.img-responsive` class. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales nicely to the parent element.
<div class="bs-example">
<img data-src="holder.js/1000x200" class="img-responsive" alt="Generic responsive image">
</div>
{% highlight html %}
<img src="..." class="img-responsive" alt="Responsive image">
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
<h4>SVG images and IE 9-10</h4>
<p>In Internet Explorer 9-10, SVG images with <code>.img-responsive</code> are disproportionately sized. To fix this, add <code>width: 100% \9;</code> where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.</p>
</div>
## Image shapes
Add classes to an `<img>` element to easily style images in any project.
<div class="bs-example bs-example-images">
<img data-src="holder.js/200x200" class="img-rounded" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/200x200" class="img-circle" alt="A generic square placeholder image where only the portion within the circle circumscribed about said square is visible">
<img data-src="holder.js/200x200" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
</div>
{% highlight html %}
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
{% endhighlight %}
docs/dist/css/bootstrap.css
+ 0
- 4
View file @ 20cdb622
......@@ -5192,10 +5192,6 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
border: 0;
}
.affix {
position: fixed;
}
.text-left {
text-align: left;
}
......
docs/dist/css/bootstrap.css.map
-20 bytes (0%)
View file @ 20cdb622
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
docs/dist/css/bootstrap.min.css
+ 1
- 1
View file @ 20cdb622
This diff is collapsed.
docs/getting-started/support.md
+ 0
- 7
View file @ 20cdb622
......@@ -162,13 +162,6 @@ For more information and usage guidelines, read [Windows Phone 8 and Device-Widt
As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration.
### Safari percent rounding
The rendering engine of versions of Safari prior to v7.1 for OS X and Safari for iOS v8.0 had some trouble with the number of decimal places used in our `.col-*-1` grid classes. So if you had 12 individual grid columns, you'd notice that they came up short compared to other rows of columns. Besides upgrading Safari/iOS, you have some options for workarounds:
- Add `.pull-right` to your last grid column to get the hard-right alignment
- Tweak your percentages manually to get the perfect rounding for Safari (more difficult than the first option)
### Modals, navbars, and virtual keyboards
#### Overflow and scrolling
......
docs/getting-started/third-party-support.md
+ 6
- 37
View file @ 20cdb622
......@@ -7,50 +7,19 @@ While we don't officially support any third party plugins or add-ons, we do offe
### Box-sizing
Some third party software, including Google Maps and Google Custom Search Engine, conflict with Bootstrap due to `* { box-sizing: border-box; }`, a rule which makes it so `padding` does not affect the final computed width of an element. Learn more about [box model and sizing at CSS Tricks](http://css-tricks.com/box-sizing/).
Some third-party software, including Google Maps and Google Custom Search Engine, conflict with Bootstrap due to `* { box-sizing: border-box; }`, a rule which makes it so `padding` does not affect the final computed width of an element. These widgets expect the box model to be `content-box` instead. Learn more about [box model and sizing at CSS Tricks](http://css-tricks.com/box-sizing/).
Depending on the context, you may override as-needed (Option 1) or reset the box-sizing for entire regions (Option 2).
You can deal with this conflict by overriding the box model back to `content-box` just for the third-party widget's section of the page:
{% highlight scss %}
/* Box-sizing resets
/* Box-sizing reset
*
* Reset individual elements or override regions to avoid conflicts due to
* global box model settings of Bootstrap. Two options, individual overrides and
* region resets, are available as plain CSS and uncompiled Sass formats.
* Override an entire region's box model via CSS
* to avoid conflicts due to the global box model settings of Bootstrap.
*/
/* Option 1A: Override a single element's box model via CSS */
.element {
.selector-for-some-widget {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/* Option 1B: Override a single element's box model by using a Bootstrap Sass mixin */
.element {
.box-sizing(content-box);
}
/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/* Option 2B: Reset an entire region with a custom Sass mixin */
.reset-box-sizing {
&,
*,
*:before,
*:after {
.box-sizing(content-box);
}
}
.element {
.reset-box-sizing();
}
{% endhighlight %}
docs/javascript/affix.md deleted 100644 → 0
+ 0
- 121
View file @ b542137d
---
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 @ 20cdb622
......@@ -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/_scaffolding.scss
+ 6
- 1
View file @ 20cdb622
......@@ -8,10 +8,15 @@
// Heads up! This reset may cause conflicts with some third-party widgets.
// For recommendations on resolving such conflicts, see
// http://getbootstrap.com/getting-started/#third-box-sizing
// Credit: Jon Neal & CSS-Tricks
// http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: border-box;
box-sizing: inherit;
}
......
scss/_utilities.scss
+ 0
- 5
View file @ 20cdb622
......@@ -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