Comparar commits
400 Commits
| Autor | SHA1 | Data | |
|---|---|---|---|
| b4c4072679 | |||
| 04b00365da | |||
| 92fd785e97 | |||
| aadc76694d | |||
| 4be4e8ec35 | |||
| 14c1e926a6 | |||
| 87e2f0bbc5 | |||
| 573b3f4415 | |||
| 7d59745955 | |||
| b8238b6efb | |||
| 0822cc5458 | |||
| f0de5ad2ac | |||
| 790cb187f1 | |||
| d991ef2ab1 | |||
| 514ea6ea76 | |||
| beca8a6b74 | |||
| de683e9003 | |||
| 60b202de32 | |||
| d9b502dfb8 | |||
| c9789f7515 | |||
| b9bd82b496 | |||
| 37d0a30589 | |||
| 1c7fe5d887 | |||
| eb24718add | |||
| 6b2a010357 | |||
| 839b0c893f | |||
| 0992a85932 | |||
| 3469339068 | |||
| cec434a4c3 | |||
| 2f27d9851c | |||
| a61322c2fb | |||
| 01e0f8c653 | |||
| cf998040ec | |||
| ef80765726 | |||
| 40b7a909a6 | |||
| 16111a5e45 | |||
| e6a6fd2585 | |||
| 8c7f9c66a7 | |||
| c4d47fb1ea | |||
| 30fd4be093 | |||
| 501aabf572 | |||
| 366e1e0a6d | |||
| 1bf070b4ce | |||
| d8a7a380bc | |||
| e3f3542d0b | |||
| c8874ff285 | |||
| 60c9ff4364 | |||
| beb60309d1 | |||
| 2fa77bf197 | |||
| 3b56227553 | |||
| 4814281540 | |||
| accfdaafdb | |||
| 0fe9148b91 | |||
| 5e4db94c24 | |||
| 6a9cd513c0 | |||
| 042bb9b515 | |||
| 1629df8008 | |||
| a4b31d39a2 | |||
| a866a51a2e | |||
| ee91afba63 | |||
| 566380b257 | |||
| c25e8182ba | |||
| 45656fc7fc | |||
| 31fdb2e25e | |||
| c97d304c0c | |||
| 9443eb6e21 | |||
| 15c7e73abd | |||
| 31b9240dd0 | |||
| cb0fed6693 | |||
| db8a78fae6 | |||
| 4b86a91e53 | |||
| 7ec817ea46 | |||
| d6048031ed | |||
| b1f1d7871f | |||
| 1fe4ed8823 | |||
| dbe8aed76e | |||
| 6b9bb547bf | |||
| 0bfbf1446d | |||
| 8f0bc9e79b | |||
| d2ea2cdedd | |||
| f328ebbc73 | |||
| b7b2e4f8a1 | |||
| 7d655c3549 | |||
| 2f44d8d2da | |||
| 6014e63054 | |||
| ed2cf5b3e3 | |||
| e38d08d4c0 | |||
| baadc33c88 | |||
| 135e834bf4 | |||
| 3cc65cb86c | |||
| dd4ce35ddc | |||
| a5fc3e0667 | |||
| 3b6b8e9f41 | |||
| f20c3368e4 | |||
| c4eea3abde | |||
| b7764d8a33 | |||
| ab0c055bc6 | |||
| d6e3b6b5a4 | |||
| ee71fb492f | |||
| 5b0f956a60 | |||
| d9a0abaa06 | |||
| db9ec13ce4 | |||
| e5be883bb9 | |||
| 929598784f | |||
| 6803ff70f9 | |||
| 6afb1055e3 | |||
| 2428904b4b | |||
| 22f1cc44ca | |||
| f3268db4b4 | |||
| 01b465928e | |||
| bbb3c0a0e6 | |||
| 650c77ddb9 | |||
| b80bf2c138 | |||
| 38c5c13d38 | |||
| 598e9e6f13 | |||
| 60bb95e611 | |||
| 1da1994ba4 | |||
| a67c86e40f | |||
| c34ef69100 | |||
| c55329085e | |||
| 370fa45fbe | |||
| 4503ad7808 | |||
| 337741fc9a | |||
| f9ee99cf6f | |||
| 5ae1df617f | |||
| a23eb06536 | |||
| ecc24953a5 | |||
| 98aeb0acf1 | |||
| fdd1daeae1 | |||
| 4b34f4947a | |||
| 6f275c6148 | |||
| a809daf284 | |||
| 77c68e4bc2 | |||
| a7231854c9 | |||
| 8a16746542 | |||
| e195457728 | |||
| aaf80d410a | |||
| 19e2ad0eb6 | |||
| 6f894c62a5 | |||
| 42efd9f730 | |||
| 4de3a77a64 | |||
| 88e816956a | |||
| b242ff7851 | |||
| 767a293b4d | |||
| 56a24027c3 | |||
| d3b3b4c48f | |||
| d7c93fc647 | |||
| 53f9e25150 | |||
| 649d8c985e | |||
| 839f83c610 | |||
| 6e5a2fedaa | |||
| cf852c1f62 | |||
| 9fdc9887cf | |||
| edfc0bf8b3 | |||
| 1eb6a1d8c8 | |||
| 5eff3cdd5d | |||
| 1d87bcc9f5 | |||
| 976b4ea263 | |||
| ccf4c2fbe3 | |||
| 2c2a847e75 | |||
| aeb0e85151 | |||
| b5ad50686c | |||
| bf3dea668f | |||
| 684c9d8d05 | |||
| 848ca6e315 | |||
| 1c0e4fc7bb | |||
| f69d12af3d | |||
| 6f8e315b1d | |||
| 3096a377a2 | |||
| aa997e274e | |||
| 330b143b40 | |||
| 9749d6afc2 | |||
| b9c7f29134 | |||
| 340d90138c | |||
| 2a5fde272c | |||
| 9835549faf | |||
| e867ae7b60 | |||
| 90cdef8dfe | |||
| 0a7c840173 | |||
| dfbac13ad1 | |||
| 5da8b315c0 | |||
| da0217405f | |||
| f152dead92 | |||
| 68ff08cc91 | |||
| b6960d8cf9 | |||
| d594d6377a | |||
| defe85bb51 | |||
| 7a3a88acc6 | |||
| 48211ad9f5 | |||
| 0834bd51ec | |||
| f74990d898 | |||
| d09b46fe37 | |||
| effba9e55c | |||
| 2c0ed072b0 | |||
| 4d195222d4 | |||
| a9e661a2b5 | |||
| fad0fb683b | |||
| e2434fefbd | |||
| f59bf47081 | |||
| ddd59f22c7 | |||
| 24a36df9f6 | |||
| 7f7039321d | |||
| a55605ca57 | |||
| 442012f0f5 | |||
| 5a2966a2c2 | |||
| d23006a6bd | |||
| ccafc8a010 | |||
| 558bc52432 | |||
| 818c56f078 | |||
| 82a758344d | |||
| e194c3e4f4 | |||
| 5da30ee5fb | |||
| d5345f806c | |||
| dc32555f5b | |||
| 704dfb2f1d | |||
| a27bf30f0d | |||
| c1e82732cf | |||
| a24e47b5b8 | |||
| 43d130762b | |||
| 5e4f663e69 | |||
| b6575cc72e | |||
| a6705246d0 | |||
| e21b6459ad | |||
| 30d8eb3ed5 | |||
| 0a1434b23b | |||
| 3f493f0d0d | |||
| f706acb11c | |||
| 5abe33f5d8 | |||
| 6b67a83631 | |||
| 2c9f43f685 | |||
| c00f29e4d4 | |||
| 9726fded1c | |||
| 5d776bcfd2 | |||
| bbe4625672 | |||
| 7f9ff0ba5b | |||
| e9eff0cbff | |||
| 96e5fa6143 | |||
| 7c456c8554 | |||
| 219d275ae6 | |||
| dc4e80a655 | |||
| 5bd8cdca91 | |||
| dc6142751f | |||
| 529ecc5a77 | |||
| cddca18f12 | |||
| 9d985978a3 | |||
| 847b632577 | |||
| e324a1beb0 | |||
| 83a6a55d2c | |||
| 165729254b | |||
| ab5d7f863c | |||
| 9f29785783 | |||
| c105906780 | |||
| 18adc44171 | |||
| 070c125cec | |||
| 68d1d7fc83 | |||
| b5ceca14db | |||
| 9376a7c221 | |||
| cacc213762 | |||
| b9292ff90c | |||
| 3bd9a26c01 | |||
| 820a3b27b6 | |||
| 1747caf19d | |||
| 437654030a | |||
| 10e72e158d | |||
| 91fbadad5b | |||
| c362e72660 | |||
| 66b70016d0 | |||
| 2526c3fdbe | |||
| a7eb9c294a | |||
| 1c5b8e967e | |||
| be45a821bb | |||
| 1413f976ae | |||
| cc6fda2262 | |||
| 2c7ab23d7a | |||
| 2877f84579 | |||
| f4466dd9c7 | |||
| 81679981c5 | |||
| 306c1b4914 | |||
| ed74992853 | |||
| 12916b06aa | |||
| e31c7fb8a5 | |||
| 8b959cacbc | |||
| 0f2a423b8d | |||
| 15a4399015 | |||
| 869b69c66c | |||
| 06582edb2a | |||
| d470fb72da | |||
| 68cbba347b | |||
| eca23e9b0f | |||
| f514c87d6b | |||
| 30d6a71ccd | |||
| 439ff09701 | |||
| c8862d91bc | |||
| 0dece7a71f | |||
| 139f1be49d | |||
| ea61cdb740 | |||
| 32d425967a | |||
| 85c57c6ba8 | |||
| e8b3c36068 | |||
| dbb244cb97 | |||
| fbec803b55 | |||
| bca3ff4ed6 | |||
| f087b3428c | |||
| fe7b6decb1 | |||
| 322a56354f | |||
| 721b568303 | |||
| c5173cdb92 | |||
| 52e669d619 | |||
| 38c546c785 | |||
| 12aa060efd | |||
| e9c32fdf6d | |||
| acc037de15 | |||
| ddd154481b | |||
| fa6a6dbb92 | |||
| 78390d12af | |||
| cb69aa976f | |||
| fe8df5022b | |||
| f1349a2450 | |||
| 8fb36cb3dd | |||
| 296b838405 | |||
| bf3a5df371 | |||
| 783120dffa | |||
| 014d3cedf5 | |||
| bfc97fdaf6 | |||
| 693fd0db2a | |||
| fda5bb135e | |||
| 74f51105e9 | |||
| 942f9c5df4 | |||
| 02097700e8 | |||
| dc10e6bbf8 | |||
| e6e4d93d5e | |||
| 701f871e7d | |||
| e0d0190803 | |||
| 5d1b4206b1 | |||
| 8df2811d49 | |||
| 8b417c39e7 | |||
| ace6dc0c25 | |||
| a10d68f291 | |||
| a367fd4938 | |||
| 88c2497368 | |||
| 5702e1be6e | |||
| 4d593618e0 | |||
| 05655ff4ff | |||
| 1700e48e7f | |||
| 0df0b5f1f5 | |||
| cd1f72f484 | |||
| 303767350c | |||
| 6ec7c72e5b | |||
| 41889f74d0 | |||
| c8856eeff3 | |||
| 54486de88c | |||
| f2bbee2075 | |||
| ddf5ceccce | |||
| cf7d7a7b5d | |||
| 02c0b788cd | |||
| 0a1d296e19 | |||
| 79b7017227 | |||
| d38bda1480 | |||
| 62c78e46f8 | |||
| 91bcccd9a8 | |||
| ebed09ec01 | |||
| f3b3814606 | |||
| 823b5accd3 | |||
| 7e6cc0bf7e | |||
| 76f9c9128e | |||
| 51f293ba4c | |||
| 075e320a83 | |||
| 21957a3d9e | |||
| 953dc3a6f2 | |||
| fb51efcbd4 | |||
| 2320a09898 | |||
| 22d1506d23 | |||
| 28da31218f | |||
| 68f26d959f | |||
| e4866c4b3c | |||
| 5d6cf2ee19 | |||
| 2c93190283 | |||
| a8b9342aea | |||
| c9dbd2d601 | |||
| 72e2d4bb77 | |||
| 7ea343d570 | |||
| ead5dbeba5 | |||
| 2f39f86bd7 | |||
| 381d967ec8 | |||
| 46b5e0cbc6 | |||
| fc42ac6a56 | |||
| 46d38b10b8 | |||
| d0c75bbc83 | |||
| d350f577e9 | |||
| 46347fff01 | |||
| be03a53086 | |||
| 14b941744c | |||
| bf48c31406 | |||
| 64326322b4 | |||
| d5697fcf6b | |||
| 3b3dd3ac3c | |||
| 404e4d9e9a | |||
| cbf1dace2f | |||
| 233e050adf | |||
| d19ca23f8f |
@@ -0,0 +1,368 @@
|
||||
## 2.3.2 re-release (July 26, 2013)
|
||||
|
||||
Patch to update jQuery in Bower and bump Recess to 1.1.9.
|
||||
|
||||
## 2.3.2 (May 17, 2013)
|
||||
|
||||
Fix dropdown for firefox (middleclick) and mobile.
|
||||
|
||||
## 2.3.1 (February 28, 2013)
|
||||
|
||||
Patch release for @fat's n00bery
|
||||
|
||||
- fix missing event type in dropdown
|
||||
- fix delegated data-attrs for popover/tooltip
|
||||
- make carousel actually pause when you click cycle
|
||||
- fix jshint ref in makefile
|
||||
- fix trying to remove backdrop when no backdrop
|
||||
|
||||
## 2.3.0 (February 7, 2013)
|
||||
|
||||
Minor release to add carousel indicators, improve tooltips, improve dev setup, and fix hella bugs.
|
||||
|
||||
- **Repository changes:**
|
||||
- **Local instead of global dependencies** for our makefile and install process. Now getting started is way easier—just run `npm install`.
|
||||
- Upgraded to jQuery 1.9. No changes were needed, but we did upgrade the included jQuery file to the latest release.
|
||||
- Moved changelog to be within the repo instead of as a wiki page.
|
||||
- **New and improved features:**
|
||||
- **Added carousel indicators!** Add the HTML and it automagically works.
|
||||
- **Added `container` option to tooltips.** The default option is still `insertAfter`, but now you may specify where to insert tooltips (and by extension, popovers) with the optional container parameter.
|
||||
- Improved popovers now utilize `max-width` instead of `width`, have been widened from 240px to 280px, and will automatically hide the title if one has not been set via CSS `:empty` selector.
|
||||
- Improved tooltip alignment on edges with [#6713](https://github.com/twbs/bootstrap/pull/6713).
|
||||
- **Improved accessibility for links in all components.** After merging [#6441](https://github.com/twbs/bootstrap/pull/6441), link hover states now apply to the `:focus` state as well. This goes for basic `<a>` tags, as well as buttons, navs, dropdowns, and more.
|
||||
- Added print utility classes to show and hide content between `screen` and `print` via CSS.
|
||||
- Updated input groups to make them behave more like default form controls. Added `display: inline-block;`, increased `margin-bottom`, and added `vertical-align: middle;` to match `<input>` styles.
|
||||
- Added `.horizontal-three-colors()` gradient mixin (with example in the CSS tests file).
|
||||
- Added `.text-left`, `.text-center`, and `.text-right` utility classes for easy typographic alignment.
|
||||
- Added `@ms-viewport` so IE10 can use responsive CSS when in split-screen mode.
|
||||
- **Docs changes:**
|
||||
- Added [new justified navigation example](https://f.cloud.github.com/assets/98681/25869/5e2f812c-4afa-11e2-9293-501cd689232d.png).
|
||||
- Added sticky footer with fixed navbar example.
|
||||
|
||||
See more on the [2.3.0 pull request](https://github.com/twbs/bootstrap/pull/6346).
|
||||
|
||||
|
||||
## 2.2.2 (December 8, 2012)
|
||||
|
||||
Bugfix release addressing docs, CSS, and some JavaScript issues. Key changes include:
|
||||
|
||||
- **Docs:**
|
||||
- Assets (illustrations and examples) are now retina-ready.
|
||||
- Replaced [Placehold.it](http://placehold.it) with [Holder.js](http://imsky.github.com/holder/), a client-side and retina-ready placeholder image tool.
|
||||
- **Dropdowns:** Temporary fix added for dropdowns on mobile to prevent them from closing early.
|
||||
- **Popovers:**
|
||||
- No longer inherits `font-size: 0;` when placed in button groups.
|
||||
- Arrows refactored to work in IE8, and use less code.
|
||||
- Plugin no longer inserts popover content into a `<p>`, but rather directly into `.popover-content`.
|
||||
- **Labels and badges:** Now [automatically collapse](https://github.com/twbs/bootstrap/commit/ead5dbeba5cd7acfa560bfb353f5e7c4f4a19256) if they have no content.
|
||||
- **Tables:** Nesting support with `.table-bordered` and `.table-striped` greatly improved.
|
||||
- **Typeahead:**
|
||||
- Now [inserts dropdown menu after the input](https://github.com/twbs/bootstrap/commit/1747caf19d59cad7fdc90ae56a00e0e2849f95f4) instead of at the close of the document.
|
||||
- Hitting escape will place focus back on the `<input>`.
|
||||
- Print styles, from HTML5 Boilerplate, have been added.
|
||||
|
||||
See more on the [2.2.2 milestone](https://github.com/twbs/bootstrap/issues?milestone=17&state=closed).
|
||||
|
||||
|
||||
## 2.2.1 (October 30, 2012)
|
||||
|
||||
Hotfix release to address the carousel bug reports.
|
||||
|
||||
|
||||
## 2.2.0 (October 29, 2012)
|
||||
|
||||
### tl;dr
|
||||
|
||||
2.1.2 is now 2.2.0: four new example templates, added media component, new typographic scale, fixed that box-shadow mixin bug, fixed z-index issues, and [more](https://github.com/twbs/bootstrap/issues?milestone=15&page=1&state=closed).
|
||||
|
||||
### Highlights
|
||||
|
||||
- **Added four new example templates** to the docs, including a narrow marketing page, sign in form, sticky footer, and a fancy carousel (created for an upcoming .net magazine article).
|
||||
- **Added the media component**, to create larger common components like comments, Tweets, etc.
|
||||
- **New variable-driven typographic scale** based on `@baseFontSize` and `@baseLineHeight`.
|
||||
- Revamped mini, small, and large padding via new variables for inputs and buttons so everything is the same size.
|
||||
- Reverted 2.1.1's `.box-shadow();` mixin change that caused compiler errors.
|
||||
- Improved dropdown submenus to support dropups and left-aligned submenus.
|
||||
- Fixed z-index issues with tooltips and popovers in modals.
|
||||
- Hero unit now sets basic type styles for the entire component, rather than on `.hero-unit p { ... }`.
|
||||
- Updated JavaScript plugins and docs to jQuery 1.8.1.
|
||||
- Added Contributing.md file.
|
||||
- Added support for installing Bootstrap via [Bower](http://twitter.github.com/bower).
|
||||
- Miscellaneous variable improvements across the board.
|
||||
- Miscellaneous documentation typos fixed.
|
||||
|
||||
For the full list of issues included in this release, visit the [2.2.0 milestone on GitHub](https://github.com/twbs/bootstrap/issues?milestone=15&page=1&state=closed)
|
||||
|
||||
|
||||
|
||||
## 2.1.1 (September 4, 2012)
|
||||
|
||||
* New feature: alert text. We documented these new classes, like `.text-success`, at the bottom of the [Typography section](http://twbs.github.com/bootstrap/base-css.html#typography) along with the long undocumented `.muted`.
|
||||
* Fixed a lot of typos in the docs. Spelling is hard.
|
||||
* Made the `.box-shadow()` mixin more durable. It no longer requires escaping for multiple shadows, meaning you can easily use variables and functions in them once again.
|
||||
* Widened `.dl-horizontal dt` and `.horizontal-form .control-group` to better handle the increased font-size.
|
||||
* Dropdown submenus improved: now you only see the next level, not all levels, on hover of the submenu toggle.
|
||||
* Clarified jQuery and Bootstrap template requirements in Getting Started section.
|
||||
* `select` now utilizes `@inputBorder`.
|
||||
* `.lead` now scales up from `@baseFontSize` instead of being a fixed font-size and line-height.
|
||||
* Fixed the vertical three color gradient in latest Firefox.
|
||||
* Reordered some variables that caused errors in certain Less compilers.
|
||||
|
||||
View all closed issues on the [2.1.1 milestone](https://github.com/twbs/bootstrap/issues?milestone=14&state=closed).
|
||||
|
||||
|
||||
## 2.1.0 (August 20, 2012)
|
||||
|
||||
### Key changes
|
||||
|
||||
* Submenu support on dropdowns
|
||||
* Affix JavaScript plugin
|
||||
* Block level buttons
|
||||
* State classes on table rows
|
||||
* Improved disabled states on navs and dropdowns
|
||||
* The navbar component is now white by default, with an optional class to darken it
|
||||
* Improved prepended and appended inputs
|
||||
* New base font-size and line-height
|
||||
* Added variable for navbar collapse trigger point
|
||||
* Fluid grid offsets
|
||||
* Fluid grid system variables are no longer fixed percentages
|
||||
* Removed LESS docs page
|
||||
|
||||
For full set of changes, see the completed milestone: https://github.com/twbs/bootstrap/issues?milestone=7&page=1&state=closed
|
||||
|
||||
## 2.0.4 (June 1, 2012)
|
||||
|
||||
|
||||
### Docs
|
||||
|
||||
- Added `type="button"` to all dismiss buttons in alerts and modals to avoid a bug in which they prevent their parent's `form` from properly submitting.
|
||||
- Added simple documentation to Base CSS for `.lead`.
|
||||
- Added new CSS test to illustrate how the navbar, static and fixed, behaves.
|
||||
- Clarified grid sizing copy to include mention of responsive variations.
|
||||
- Reformatted the LESS docs page to prevent terrible table displays at smaller grid sizes.
|
||||
- Miscellaneous typos and tweaks.
|
||||
|
||||
### CSS
|
||||
|
||||
- Refactored forms.less to make our selectors more specific for fewer overrides and less code. Instead of a generic `input` selector and various resets, we target each type of input like `input[type="text"]`, `input[type="password"]`, etc.
|
||||
- Form field state (e.g., success or error) now applies to checkbox and radio labels.
|
||||
- Removed redundant CSS on `<p>` for `font-family`, `font-size`, and `line-height`.
|
||||
- Removed redundant `color` declaration from the `<label>` element.
|
||||
- Added variables for dropdown dividers border colors.
|
||||
- `legend` and `.form-actions` share the same `border-color`, `#e5e5e5`.
|
||||
- Fixed some responsive issues with input-prepend and -append, notably with the fluid grid.
|
||||
- Added special CSS to prevent `max-width: 100%;` on images from messing up Google Maps rendering.
|
||||
- Scope opened dropdowns to only immediate children to avoid unintended cascade.
|
||||
- Similarly, scope floated-right dropdowns to immediate children with `.pull-right > .dropdown-menu`.
|
||||
- Updated `.placeholder()` mixin to use `&` operator in Less for proper output when compiling.
|
||||
- Added `-ms-input-placeholder` to `.placeholder()` mixin.
|
||||
- Added CSS3 hyphens mixin.
|
||||
- Fixed a bug in IE7/8 where certain form controls would not show text if the parent had a filter opacity set.
|
||||
|
||||
|
||||
## 2.0.3 (April 24, 2012)
|
||||
|
||||
Running makefile now require JSHint and Recess.
|
||||
|
||||
### HTML and CSS
|
||||
|
||||
- Overhauled the responsive utility classes to simplify required CSS, add `!important` to all declarations, and use `display: inherit` in place of `display: block` to account for different types of elements.
|
||||
- Removed `>` from fluid grid column selectors, meaning every element with a `.span*` class within a `.row-fluid` will use percentage widths instead of fixed-pixels.
|
||||
- Fixed regression in responsive images support as of 2.0.1. We've re-added `max-width: 100%;` to images by default. We removed it in our last release since we had folks complaining about Google Maps integration and other projects, but we're taking a different stance now on these things and will require developers to make these tweaks on their end.
|
||||
- Added variable `@navbarBrandColor` for the brand element in navbars, which defaults to `@navbarLinkColor`.
|
||||
- Font-family mixins now use variables for their stacks.
|
||||
- Fixed an unescaped `filter` on the `.reset-filter()` mixin that was causing some errors depending on your compiler.
|
||||
- Fixed regression in `.form-actions` background, which was too dark, by adding a new variable `@formActionsBackground` and changing the color to `#f5f5f5` instead of `#eee`.
|
||||
- Fixed an issue on button group dropdowns where the background color was not using the button's darker color when the dropdown is open.
|
||||
- Generalized and simplified the open dropdown classes while adding smarter defaults. Instead of `.dropdown.open`, we now use just `.open`. On the defaults side, all dropdown menus now have rounded corners to start.
|
||||
- Improved active `.dropdown-toggle` styles (for dropdown buttons) by darkening the background and sharpening the inset shadow to match the active state of buttons.
|
||||
- Direction of animation on progress bars reversed.
|
||||
- Fixed input-prepend/append issue with uneditable inputs: `.uneditable-input` was being floated and a missing comma meant its `border-radius` for the append option wasn't being applied properly.
|
||||
- Removed `height: auto;` from `img` since it was overriding dimensions set via HTML attributes.
|
||||
- Fixed an issue of double borders on the top of tables with captions or colgroups.
|
||||
- Fixed issue with anchor buttons in the `.navbar-text`. Instead of a general styling on all anchors within an element with that class, we now have a new class to specifically apply appropriate link color.
|
||||
- Added support for `@navbarHeight` on the brand/project name and nav links for complete navbar height customization.
|
||||
- Fixed the black borders on buttons problem in IE7 by removing the border, increasing the line-height, and providing darker background colors.
|
||||
- Removed excess padding on `.search-query` inputs in IE7 since it doesn't have border-radius.
|
||||
- Updated alert messages in Components to use `button` elements as close icons instead of `a`. Both can be used, but an `a` will require `href="#"` for dismissal on iOS devices.
|
||||
- Fixed an issue with prepended/appended inputs in Firefox where `select` elements required two clicks to toggle the dropdown. Resolved by moving the `position: relative` to the `select` by default instead of on `:focus`.
|
||||
- Added a new mixin, `.backface-visibility`, to help refine CSS 3D tranforms. Examples and explanation of usage can be found on [CSS Tricks](http://css-tricks.com/almanac/properties/b/backface-visibility/).
|
||||
- Changed specificity of grid classes in responsive layouts under 767px to accurately target `input`, `select`, and `textarea` elements that use `.span*` classes.
|
||||
- Horizontal description lists, `.dl-horizontal`, now truncate terms that are too long to fit in their fixed-width column. In the < 767px responsive layout, they change to their default stacked layout.
|
||||
- Changed tabbable tabs to prevent issues in left and right aligned tabs. `.tab-content` would not growing to its parent's full width due to `display: table`. We removed that and the `width: 100%` and instead just set `overflow: auto` to clear the left and right aligned tabs.
|
||||
- Updated thumbnails to support fluid grid column sizing.
|
||||
- Added `>` to most of the button group selectors
|
||||
- Added new variable, `@inputBorderRadius`, to all form controls that previously made use of the static `3px` value everywhere.
|
||||
- Changed the way we do `border-radius` for tables. Instead of the regular mixin that zeros out all other corners, we specify one corner only so they can be combined for use on single column table headers.
|
||||
- Updated Glyphicons Halflings from 1.5 to 1.6, introducing 20 new icons.
|
||||
- Added an `offset` paramater to the `.makeColumn`.
|
||||
- Increased the specificity of all tabbable nav selectors to include `.nav-collapse` to appropriately scope the responsive navbar behavior.
|
||||
- Fixed uneditable inputs: text now cuts off and does not wrap, making it behave just like a default `input`.
|
||||
- Labels and badges are now `vertical-align: baseline;` so they line up with surrounding text.
|
||||
|
||||
### Javascript
|
||||
|
||||
- Add jshint support
|
||||
- Add travis-ci support w/ headless phantom integration
|
||||
- Replace UA sniffing in bootstrap-transitions.js
|
||||
- Add MSTransitionEnd event to transition plugin
|
||||
- Fix pause method in carousel (shouldn't restart when hovering over controls)
|
||||
- Fix crazy opera bug #1776
|
||||
- Don't open dropdown if target element is disabled
|
||||
- Always select last item in scrollspy if you've reached the bottom of the document or element
|
||||
- Typeahead should escape regexp special chars
|
||||
- If interval is false on carousel, do not auto-cycle
|
||||
- Add preventDefault support for all initial event types (show, close, hide, etc.)
|
||||
- Fix collapse bug in ie7+ for initial collapse in
|
||||
- Fix nested collapse bug
|
||||
- If transitioning collapse, don't start new transition
|
||||
- Try to autodetect when to use html/text method in tooltip/popovers to help prevent xss
|
||||
- Add bootstrap + bootstrap.min.js to gh-pages for @remy and jsbin support
|
||||
|
||||
### Documentation and repo
|
||||
|
||||
- Combined badges and labels into a single LESS file, labels-badges.less, to reduce repeated CSS.
|
||||
- Separated responsive features into multiple files. We now have a file for each grouping of media queries (tablets and down, tablets to desktops, and large desktops). Additionally, the visible/hidden utility classes and the responsive navbar are in their own files. The output is the same in the compiled CSS, but this should give folks a bit more flexibility.
|
||||
- Added a new CSS Tests page in the docs (not in the top nav) for better testing of edge cases and extending the use of standard components.
|
||||
- Removed the bootstrap.zip file from the repo and the make process for faster building and a lighter repo. From now on, the zip will only be in the documentation branch.
|
||||
- Fixed incorrect use of class instead of ID for tabs example and added documentation for multiple ways of toggling tabs.
|
||||
- Fixed required markup listed for the specialized navbar search field.
|
||||
- Removed all mention of `@siteWidth`, a variable no longer in use.
|
||||
- Removed mentions of unused `@buttonPrimaryBackground` variable, which is no longer in use.
|
||||
- Updated LESS docs page to include all the new variables we added in previous releases.
|
||||
- Removed broken "dropup" menus from tabs and pills examples (shouldn't have been there in the first place).
|
||||
- Replaced `.badge-error` with `.badge-important`. The error option is not a valid class and was a typo in the docs.
|
||||
- Fixed mention of how to add plain text to the navbar. Previously the docs stated you only needed a `p` tag, but the required HTML is any element with class `.navbar-text`.
|
||||
- Clarified the use of `.tabbable` for tabs. The wrapping class is only required for left and right tabs to clear their floats. Also added mention of `.fade` to fade in tabs.
|
||||
- Updated forms documentation:
|
||||
- Remove unnecessary duplicate help text in first example
|
||||
- Added mention of required `input` class, `.search-query`, for the search form variation
|
||||
- Removed incorrect mention of form fields being `display: block;` to start as fields are `inline-block` to start.
|
||||
- Added mention of `data-target` attribute for the dropdowns javascript plugin to show how to keep custom URLs intact on links with `.dropdown-toggle` class.
|
||||
- Updated the Kippt screenshot on the homepage to reflect their recent responsive redesign and upgrade to 2.0.2.
|
||||
|
||||
|
||||
## 2.0.2 (March 12, 2012)
|
||||
|
||||
Overview of docs changes, bugfixes, and new features.
|
||||
|
||||
### Documentation updates
|
||||
|
||||
- All docs pages now have distinct titles, such as <em>Scaffolding · Twitter Bootstrap</em>.
|
||||
- Updated the Apple touch icons (now black on black instead of the blue grid) and fixed the links to them in the docs.
|
||||
- Added new global styles docs section to the Scaffolding page.
|
||||
- Required use of HTML5 doctype
|
||||
- Overview of global typographic and links details
|
||||
- Mention of our embedded CSS reset via [Normalize.css](http://necolas.github.com/normalize.css/)
|
||||
- Added version number to the download button on the docs homepage.
|
||||
- Updated progress bars section to simplify how the classes stack and more clearly indicate the available optional classes and styles.
|
||||
- Added a new example, [SoundReady.fm](http://soundready.fm), to the homepage
|
||||
- Added various sizes to the docs for button groups
|
||||
|
||||
### Resolved bugs
|
||||
|
||||
- Removed all IE7 hacks and floats from `.input-prepend` and `.input-append`, however, this requires you to **ensure there is no whitespace in your code** between `.add-on` and the `input`.
|
||||
- In `.input-prepend` and `.input-append`, added ability to use add-ons on both sides when you chain the selectors.
|
||||
- Updated lingering `.btn-dark` reference to `.btn-inverse`.
|
||||
- Fixed issue with content being cut off in `.tab-content` for tabbable sections.
|
||||
- Updated `.navbar .container` to use `width: auto;` to start and then reset the fixed widths via the `#gridSystem` mixin (it's a little dirty, but required to avoid adding another class).
|
||||
- Modal footer buttons are now aligned by their parent via `text-align: right;` instead of `float: right` on the button level. This was changed to allow the use of `.pull-left` and `.pull-right` to align buttons easily. Double check your button order with this change!
|
||||
- Fixed problem where default striped progress bar was green instead of blue.
|
||||
- Fixed CSS selector used for `input` and `textarea` grid sizes to properly apply the CSS (was `input > .span*` and now is `input.span*`).
|
||||
|
||||
### New features
|
||||
|
||||
- Horizontal dividers support added to nav lists
|
||||
- Added basic version of badges
|
||||
- Added visible/hidden classes for devices
|
||||
- Added support for buttons in input-prepend/append component
|
||||
- Added .navbar-fixed-bottom support
|
||||
- Added .dropup support for dropdown menus to pop them upward instead of downward (this is automatically done for the newly added fixed bottom navbar).
|
||||
- Added mixin for [new image replacement technique](http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/)
|
||||
- Added pause on hover for the carousel
|
||||
- Added tons of new variables for typography, buttons, forms, dropdowns, navbar, and more for the LESS pros out there. These variables have also been reflected on the Customize page.
|
||||
- Added new horizontal description list variation
|
||||
- Added `.disabled` class support to the pager component (also added a mention of this to the docs)
|
||||
- Added `.well-large` and `.well-small` classes for extending the well component
|
||||
|
||||
For a full issue-by-issue rundown of the release, check out the now closed [2.0.2 milestone on GitHub](https://github.com/twbs/bootstrap/issues?sort=created&direction=desc&state=closed&page=1&milestone=9)
|
||||
|
||||
## v2.0.1 (February 17, 2012)
|
||||
|
||||
Overview of changes:
|
||||
|
||||
- Previously the docs called for use of `.control-label` in the examples, but the CSS didn't make clear use of it. This class is required for horizontal forms and has been reflected in the CSS.
|
||||
- We've tried our best to improve rendering of buttons and icons across all browsers. Some issues remain; Firefox throws an `!important`on `line-height` for inputs, so that's the big one.
|
||||
- We refined the label component style to move away from uppercase.
|
||||
- Added the black button option, `.btn-inverse`.
|
||||
- Added a mini button class, `.btn-mini`.
|
||||
- We had to re-add the protocol, `http:` to the HTML5 schim because IE7-8 wouldn't recognize it, dropping some HTML5 support for those browsers and introducing major performance issues.
|
||||
- Resolved some issues with responsive layouts where media queries would overlap at 768px and 980px.
|
||||
- Rearranged Scaffolding docs page to split fixed and fluid grid systems.
|
||||
- Tons of docs updates for typos and language changes.
|
||||
|
||||
For full list of changes, see the now closed [v2.0.1 milestone](https://github.com/twbs/bootstrap/issues?milestone=8&state=closed).
|
||||
|
||||
## v2.0.0 (January 28, 2012)
|
||||
Complete rewrite of the library. For full details, head to the upgrading doc at http://twbs.github.com/bootstrap/upgrading.html.
|
||||
|
||||
## v1.4.0
|
||||
### Key bug fixes and changes
|
||||
- **Updated tables** to make no border the default and add options for condensed and bordered versions
|
||||
- **Updated form states** to expand on error styles and provide warning and success variations
|
||||
- New javascript plugin for button states
|
||||
- Switched to strict mode for Javascript plugins
|
||||
- Added more data attribute controls to our plugins
|
||||
- Full list of 25+ issues fixed: https://github.com/twbs/bootstrap/issues?milestone=6&state=closed
|
||||
|
||||
## v1.3.0
|
||||
### New features
|
||||
- **Javascript plugins** for modals, alerts, dropdowns, scrollspy, tabs, tooltips, and popovers that work with jQuery and Ender
|
||||
- **Massively updated docs** for both the main page and for the new javascript plugins
|
||||
- **Inline labels** for marking inline content with key visual flags
|
||||
- Media thumbnails
|
||||
- Breadcrumbs
|
||||
|
||||
### Updated docs
|
||||
- Added complete javascript page with detailed documentation for how to use plugins
|
||||
- Three complete example pages of using Bootstrap, linked from main docs page with thumbnails
|
||||
- Added section for compiling Less, for guidelines on how to recompile Bootstrap with Less
|
||||
- Added section for customizing grid variables in Less to roll your own grid system
|
||||
- Added section for code for using pre and code tags
|
||||
- Added section for form field sizes that match grid column sizes
|
||||
|
||||
### Key bug fixes and changes
|
||||
- Updated table styles to be just a tad bit more refined
|
||||
- Added new form input sizes based on the Bootstrap grid system (meaning now you can do `input.span5` for a 280px-wide input)
|
||||
- Removed `:focus` states from `:active` links in Firefox
|
||||
- Fixed unqualified `.clearfix` in forms.less that added bottom margin to all containers
|
||||
- Updated `.container()` mixing to be `.fixed-container()` to prevent conflicts when compiling
|
||||
- Added focus states (either `box-shadow` or `outline` on `:focus`) to all buttons, links, and inputs
|
||||
- No longer require `h3` in topbar, but still support for backwards compatibility
|
||||
|
||||
## v1.2.0
|
||||
- **Dropdowns refactored** to be extensible (now work in ul.tabs)
|
||||
- **Added HTML5 form support** by generalizing the form selectors (e.g., input instead of input[type=text|password])
|
||||
- **Gradients back in IE**, but removed rounded corners in IE9 to prevent background bleed on buttons and alert messages
|
||||
- **Simplified the grid CSS** by removing the static .span1-16 classes in favor of CSS-style regex for column styles in the grid
|
||||
- **Added .one-third and .two-thirds columns** to the grid system
|
||||
- Fixed bug in disabled buttons where they received :active styles
|
||||
- Bug fixes
|
||||
|
||||
## v1.1.1
|
||||
- **Redesigned alerts** to be more readable
|
||||
- **Refactored buttons and alerts CSS** to be simpler
|
||||
- Updated grid system to be more specific and not require .column or columns
|
||||
- Improved on specificity of CSS selectors by removing unnecessary tag and parent selectors
|
||||
- Miscellaneous updates to docs
|
||||
- Bug fixes
|
||||
|
||||
## v1.1.0
|
||||
- **Added support for IE7 and IE8**
|
||||
- Added examples directory with first example usage of Bootstrap for a simple website
|
||||
- Syntax fixes for gradients and color-stops
|
||||
- Miscellaneous updates to docs
|
||||
- Bug fixes
|
||||
|
||||
## v1.0.0
|
||||
- **Initial release**
|
||||
@@ -9,7 +9,7 @@ Looking to contribute something to Bootstrap? **Here's how you can help.**
|
||||
We only accept issues that are bug reports or feature requests. Bugs must be isolated and reproducible problems that we can fix within the Bootstrap core. Please read the following guidelines before opening any issue.
|
||||
|
||||
1. **Search for existing issues.** We get a lot of duplicate issues, and you'd help us out a lot by first checking if someone else has reported the same issue. Moreover, the issue may have already been resolved with a fix available.
|
||||
2. **Create an isolated and reproducible test case.** Be sure the problem exists in Bootstrap's code with a [reduced test cases](http://css-tricks.com/reduced-test-cases/) that should be included in each bug report.
|
||||
2. **Create an isolated and reproducible test case.** Be sure the problem exists in Bootstrap's code with a [reduced test case](http://css-tricks.com/reduced-test-cases/) that should be included in each bug report.
|
||||
3. **Include a live example.** Make use of jsFiddle or jsBin to share your isolated test cases.
|
||||
4. **Share as much information as possible.** Include operating system and version, browser and version, version of Bootstrap, customized or vanilla build, etc. where appropriate. Also include steps to reproduce the bug.
|
||||
|
||||
@@ -72,4 +72,4 @@ As of v2.0.0, Bootstrap's documentation is powered by Mustache templates and bui
|
||||
|
||||
## License
|
||||
|
||||
By contributing your code, you agree to license your contribution under the terms of the APLv2: https://github.com/twitter/bootstrap/blob/master/LICENSE
|
||||
By contributing your code, you agree to license your contribution under the terms of the APLv2: https://github.com/twbs/bootstrap/blob/master/LICENSE
|
||||
|
||||
@@ -15,11 +15,11 @@ build:
|
||||
@echo "\n${HR}"
|
||||
@echo "Building Bootstrap..."
|
||||
@echo "${HR}\n"
|
||||
@jshint js/*.js --config js/.jshintrc
|
||||
@jshint js/tests/unit/*.js --config js/.jshintrc
|
||||
@./node_modules/.bin/jshint js/*.js --config js/.jshintrc
|
||||
@./node_modules/.bin/jshint js/tests/unit/*.js --config js/.jshintrc
|
||||
@echo "Running JSHint on javascript... ${CHECK} Done"
|
||||
@recess --compile ${BOOTSTRAP_LESS} > ${BOOTSTRAP}
|
||||
@recess --compile ${BOOTSTRAP_RESPONSIVE_LESS} > ${BOOTSTRAP_RESPONSIVE}
|
||||
@./node_modules/.bin/recess --compile ${BOOTSTRAP_LESS} > ${BOOTSTRAP}
|
||||
@./node_modules/.bin/recess --compile ${BOOTSTRAP_RESPONSIVE_LESS} > ${BOOTSTRAP_RESPONSIVE}
|
||||
@echo "Compiling LESS with Recess... ${CHECK} Done"
|
||||
@node docs/build
|
||||
@cp img/* docs/assets/img/
|
||||
@@ -27,8 +27,8 @@ build:
|
||||
@cp js/tests/vendor/jquery.js docs/assets/js/
|
||||
@echo "Compiling documentation... ${CHECK} Done"
|
||||
@cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js js/bootstrap-affix.js > docs/assets/js/bootstrap.js
|
||||
@uglifyjs -nc docs/assets/js/bootstrap.js > docs/assets/js/bootstrap.min.tmp.js
|
||||
@echo "/**\n* Bootstrap.js v2.2.0 by @fat & @mdo\n* Copyright 2012 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > docs/assets/js/copyright.js
|
||||
@./node_modules/.bin/uglifyjs -nc docs/assets/js/bootstrap.js > docs/assets/js/bootstrap.min.tmp.js
|
||||
@echo "/**\n* Bootstrap.js v2.3.2 by @fat & @mdo\n* Copyright 2013 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > docs/assets/js/copyright.js
|
||||
@cat docs/assets/js/copyright.js docs/assets/js/bootstrap.min.tmp.js > docs/assets/js/bootstrap.min.js
|
||||
@rm docs/assets/js/copyright.js docs/assets/js/bootstrap.min.tmp.js
|
||||
@echo "Compiling and minifying javascript... ${CHECK} Done"
|
||||
@@ -43,8 +43,8 @@ build:
|
||||
#
|
||||
|
||||
test:
|
||||
jshint js/*.js --config js/.jshintrc
|
||||
jshint js/tests/unit/*.js --config js/.jshintrc
|
||||
./node_modules/.bin/jshint js/*.js --config js/.jshintrc
|
||||
./node_modules/.bin/jshint js/tests/unit/*.js --config js/.jshintrc
|
||||
node js/tests/server.js &
|
||||
phantomjs js/tests/phantom.js "http://localhost:3000/js/tests"
|
||||
kill -9 `cat js/tests/pid.txt`
|
||||
@@ -62,21 +62,46 @@ clean:
|
||||
# recess & uglifyjs are required
|
||||
#
|
||||
|
||||
bootstrap:
|
||||
mkdir -p bootstrap/img
|
||||
mkdir -p bootstrap/css
|
||||
bootstrap: bootstrap-img bootstrap-css bootstrap-js
|
||||
|
||||
|
||||
#
|
||||
# JS COMPILE
|
||||
#
|
||||
bootstrap-js: bootstrap/js/*.js
|
||||
|
||||
bootstrap/js/*.js: js/*.js
|
||||
mkdir -p bootstrap/js
|
||||
cp img/* bootstrap/img/
|
||||
recess --compile ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.css
|
||||
recess --compress ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.min.css
|
||||
recess --compile ${BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.css
|
||||
recess --compress ${BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.min.css
|
||||
cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js js/bootstrap-affix.js > bootstrap/js/bootstrap.js
|
||||
uglifyjs -nc bootstrap/js/bootstrap.js > bootstrap/js/bootstrap.min.tmp.js
|
||||
echo "/*!\n* Bootstrap.js by @fat & @mdo\n* Copyright 2012 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > bootstrap/js/copyright.js
|
||||
./node_modules/.bin/uglifyjs -nc bootstrap/js/bootstrap.js > bootstrap/js/bootstrap.min.tmp.js
|
||||
echo "/*!\n* Bootstrap.js by @fat & @mdo\n* Copyright 2013 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > bootstrap/js/copyright.js
|
||||
cat bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js > bootstrap/js/bootstrap.min.js
|
||||
rm bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js
|
||||
|
||||
#
|
||||
# CSS COMPLILE
|
||||
#
|
||||
|
||||
bootstrap-css: bootstrap/css/*.css
|
||||
|
||||
bootstrap/css/*.css: less/*.less
|
||||
mkdir -p bootstrap/css
|
||||
./node_modules/.bin/recess --compile ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.css
|
||||
./node_modules/.bin/recess --compress ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.min.css
|
||||
./node_modules/.bin/recess --compile ${BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.css
|
||||
./node_modules/.bin/recess --compress ${BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.min.css
|
||||
|
||||
#
|
||||
# IMAGES
|
||||
#
|
||||
|
||||
bootstrap-img: bootstrap/img/*
|
||||
|
||||
bootstrap/img/*: img/*
|
||||
mkdir -p bootstrap/img
|
||||
cp img/* bootstrap/img/
|
||||
|
||||
|
||||
#
|
||||
# MAKE FOR GH-PAGES 4 FAT & MDO ONLY (O_O )
|
||||
#
|
||||
@@ -98,4 +123,4 @@ watch:
|
||||
watchr -e "watch('less/.*\.less') { system 'make' }"
|
||||
|
||||
|
||||
.PHONY: docs watch gh-pages
|
||||
.PHONY: docs watch gh-pages bootstrap-img bootstrap-css bootstrap-js
|
||||
@@ -1,21 +1,22 @@
|
||||
[Twitter Bootstrap](http://twitter.github.com/bootstrap) [](http://travis-ci.org/twitter/bootstrap)
|
||||
=================
|
||||
# [Bootstrap v2.3.2](http://twbs.github.com/bootstrap) [](http://travis-ci.org/twbs/bootstrap)
|
||||
|
||||
Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created and maintained by [Mark Otto](http://twitter.com/mdo) and [Jacob Thornton](http://twitter.com/fat).
|
||||
|
||||
To get started, checkout http://getbootstrap.com!
|
||||
To get started, checkout [http://getbootstrap.com](http://getbootstrap.com)!
|
||||
|
||||
|
||||
|
||||
Quick start
|
||||
-----------
|
||||
## Quick start
|
||||
|
||||
Clone the repo, `git clone git://github.com/twitter/bootstrap.git`, [download the latest release](https://github.com/twitter/bootstrap/zipball/master), or install with twitter's [Bower](http://twitter.github.com/bower): `bower install bootstrap`.
|
||||
Three quick start options are available:
|
||||
|
||||
* [Download the latest release](https://github.com/twbs/bootstrap/zipball/master).
|
||||
* Clone the repo: `git clone git://github.com/twbs/bootstrap.git`.
|
||||
* Install with Twitter's [Bower](http://bower.io): `bower install bootstrap`.
|
||||
|
||||
|
||||
|
||||
Versioning
|
||||
----------
|
||||
## Versioning
|
||||
|
||||
For transparency and insight into our release cycle, and for striving to maintain backward compatibility, Bootstrap will be maintained under the Semantic Versioning guidelines as much as possible.
|
||||
|
||||
@@ -29,100 +30,73 @@ And constructed with the following guidelines:
|
||||
* New additions without breaking backward compatibility bumps the minor (and resets the patch)
|
||||
* Bug fixes and misc changes bumps the patch
|
||||
|
||||
For more information on SemVer, please visit http://semver.org/.
|
||||
For more information on SemVer, please visit [http://semver.org/](http://semver.org/).
|
||||
|
||||
|
||||
|
||||
Bug tracker
|
||||
-----------
|
||||
## Bug tracker
|
||||
|
||||
Have a bug? Please create an issue here on GitHub that conforms with [necolas's guidelines](https://github.com/necolas/issue-guidelines).
|
||||
|
||||
https://github.com/twitter/bootstrap/issues
|
||||
Have a bug or a feature request? [Please open a new issue](https://github.com/twbs/bootstrap/issues). Before opening any issue, please search for existing issues and read the [Issue Guidelines](https://github.com/necolas/issue-guidelines), written by [Nicolas Gallagher](https://github.com/necolas/).
|
||||
|
||||
|
||||
|
||||
Twitter account
|
||||
---------------
|
||||
## Community
|
||||
|
||||
Keep up to date on announcements and more by following Bootstrap on Twitter, [@TwBootstrap](http://twitter.com/TwBootstrap).
|
||||
Keep track of development and community news.
|
||||
|
||||
* Follow [@twbootstrap on Twitter](http://twitter.com/twbootstrap).
|
||||
* Read and subscribe to the [The Official Twitter Bootstrap Blog](http://blog.getbootstrap.com).
|
||||
* Have a question that's not a feature request or bug report? [Ask on the mailing list.](http://groups.google.com/group/twitter-bootstrap)
|
||||
* Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##twitter-bootstrap` channel.
|
||||
|
||||
|
||||
|
||||
Blog
|
||||
----
|
||||
## Compiling CSS and JavaScript
|
||||
|
||||
Read more detailed announcements, discussions, and more on [The Official Twitter Bootstrap Blog](http://blog.getbootstrap.com).
|
||||
|
||||
|
||||
|
||||
Mailing list
|
||||
------------
|
||||
|
||||
Have a question? Ask on our mailing list!
|
||||
|
||||
twitter-bootstrap@googlegroups.com
|
||||
|
||||
http://groups.google.com/group/twitter-bootstrap
|
||||
|
||||
|
||||
|
||||
IRC
|
||||
---
|
||||
|
||||
Server: irc.freenode.net
|
||||
|
||||
Channel: ##twitter-bootstrap (the double ## is not a typo)
|
||||
|
||||
|
||||
|
||||
Developers
|
||||
----------
|
||||
|
||||
We have included a makefile with convenience methods for working with the Bootstrap library.
|
||||
|
||||
+ **dependencies**
|
||||
Our makefile depends on you having recess, connect, uglify.js, and jshint installed. To install, just run the following command in npm:
|
||||
Bootstrap includes a [makefile](Makefile) with convenient methods for working with the framework. Before getting started, be sure to install [the necessary local dependencies](package.json):
|
||||
|
||||
```
|
||||
$ npm install recess connect uglify-js jshint -g
|
||||
$ npm install
|
||||
```
|
||||
|
||||
+ **build** - `make`
|
||||
Runs the recess compiler to rebuild the `/less` files and compiles the docs pages. Requires recess and uglify-js. <a href="http://twitter.github.com/bootstrap/extend.html#compiling">Read more in our docs »</a>
|
||||
When completed, you'll be able to run the various make commands provided:
|
||||
|
||||
+ **test** - `make test`
|
||||
#### build - `make`
|
||||
Runs the recess compiler to rebuild the `/less` files and compiles the docs. Requires recess and uglify-js.
|
||||
|
||||
#### test - `make test`
|
||||
Runs jshint and qunit tests headlessly in [phantomjs](http://code.google.com/p/phantomjs/) (used for ci). Depends on having phantomjs installed.
|
||||
|
||||
+ **watch** - `make watch`
|
||||
#### watch - `make watch`
|
||||
This is a convenience method for watching just Less files and automatically building them whenever you save. Requires the Watchr gem.
|
||||
|
||||
|
||||
|
||||
Contributing
|
||||
------------
|
||||
|
||||
Please submit all pull requests against *-wip branches. If your unit test contains javascript patches or features, you must include relevant unit tests. Thanks!
|
||||
Should you encounter problems with installing dependencies or running the makefile commands, be sure to first uninstall any previous versions (global and local) you may have installed, and then rerun `npm install`.
|
||||
|
||||
|
||||
|
||||
Authors
|
||||
-------
|
||||
## Contributing
|
||||
|
||||
Please submit all pull requests against *-wip branches. If your pull request contains JavaScript patches or features, you must include relevant unit tests. All HTML and CSS should conform to the [Code Guide](http://github.com/mdo/code-guide), maintained by [Mark Otto](http://github.com/mdo).
|
||||
|
||||
Thanks!
|
||||
|
||||
|
||||
|
||||
## Authors
|
||||
|
||||
**Mark Otto**
|
||||
|
||||
+ http://twitter.com/mdo
|
||||
+ http://github.com/markdotto
|
||||
+ [http://twitter.com/mdo](http://twitter.com/mdo)
|
||||
+ [http://github.com/mdo](http://github.com/mdo)
|
||||
|
||||
**Jacob Thornton**
|
||||
|
||||
+ http://twitter.com/fat
|
||||
+ http://github.com/fat
|
||||
+ [http://twitter.com/fat](http://twitter.com/fat)
|
||||
+ [http://github.com/fat](http://github.com/fat)
|
||||
|
||||
|
||||
|
||||
Copyright and license
|
||||
---------------------
|
||||
## Copyright and license
|
||||
|
||||
Copyright 2012 Twitter, Inc.
|
||||
|
||||
@@ -130,7 +104,7 @@ Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this work except in compliance with the License.
|
||||
You may obtain a copy of the License in the LICENSE file, or at:
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
[http://www.apache.org/licenses/LICENSE-2.0](http://www.apache.org/licenses/LICENSE-2.0)
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"name": "bootstrap",
|
||||
"version": "2.2.0",
|
||||
"version": "2.3.2",
|
||||
"main": ["./docs/assets/js/bootstrap.js", "./docs/assets/css/bootstrap.css"],
|
||||
"dependencies": {
|
||||
"jquery": "~1.8.0"
|
||||
"jquery": ">=1.8.0 <2.1.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"name": "twbs/bootstrap"
|
||||
, "description": "Sleek, intuitive, and powerful front-end framework for faster and easier web development."
|
||||
, "keywords": ["bootstrap", "css"]
|
||||
, "homepage": "http://twbs.github.com/bootstrap/"
|
||||
, "author": "Twitter Inc."
|
||||
, "license": "Apache-2.0"
|
||||
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Bootstrap Responsive v2.2.0
|
||||
* Bootstrap Responsive v2.3.2
|
||||
*
|
||||
* Copyright 2012 Twitter, Inc
|
||||
* Licensed under the Apache License v2.0
|
||||
@@ -40,6 +40,10 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@-ms-viewport {
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
@@ -91,6 +95,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
.visible-print {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.visible-print {
|
||||
display: inherit !important;
|
||||
}
|
||||
.hidden-print {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.row {
|
||||
margin-left: -30px;
|
||||
@@ -999,7 +1016,9 @@
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.nav-collapse .nav > li > a:hover,
|
||||
.nav-collapse .dropdown-menu a:hover {
|
||||
.nav-collapse .nav > li > a:focus,
|
||||
.nav-collapse .dropdown-menu a:hover,
|
||||
.nav-collapse .dropdown-menu a:focus {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.navbar-inverse .nav-collapse .nav > li > a,
|
||||
@@ -1007,7 +1026,9 @@
|
||||
color: #999999;
|
||||
}
|
||||
.navbar-inverse .nav-collapse .nav > li > a:hover,
|
||||
.navbar-inverse .nav-collapse .dropdown-menu a:hover {
|
||||
.navbar-inverse .nav-collapse .nav > li > a:focus,
|
||||
.navbar-inverse .nav-collapse .dropdown-menu a:hover,
|
||||
.navbar-inverse .nav-collapse .dropdown-menu a:focus {
|
||||
background-color: #111111;
|
||||
}
|
||||
.nav-collapse.in .btn-group {
|
||||
@@ -1018,7 +1039,7 @@
|
||||
position: static;
|
||||
top: auto;
|
||||
left: auto;
|
||||
display: block;
|
||||
display: none;
|
||||
float: none;
|
||||
max-width: none;
|
||||
padding: 0;
|
||||
@@ -1032,6 +1053,9 @@
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.nav-collapse .open > .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
.nav-collapse .dropdown-menu:before,
|
||||
.nav-collapse .dropdown-menu:after {
|
||||
display: none;
|
||||
|
||||
@@ -177,6 +177,16 @@ hr.soften {
|
||||
background: url(../img/bs-docs-masthead-pattern.png) repeat center center;
|
||||
opacity: .4;
|
||||
}
|
||||
@media
|
||||
only screen and (-webkit-min-device-pixel-ratio: 2),
|
||||
only screen and ( min--moz-device-pixel-ratio: 2),
|
||||
only screen and ( -o-min-device-pixel-ratio: 2/1) {
|
||||
|
||||
.jumbotron:after {
|
||||
background-size: 150px 150px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Masthead (docs home)
|
||||
------------------------- */
|
||||
@@ -278,9 +288,10 @@ hr.soften {
|
||||
line-height: 1.25;
|
||||
color: #999;
|
||||
}
|
||||
.marketing img {
|
||||
.marketing-img {
|
||||
display: block;
|
||||
margin: 0 auto 30px;
|
||||
max-height: 145px;
|
||||
}
|
||||
|
||||
|
||||
@@ -289,7 +300,8 @@ hr.soften {
|
||||
-------------------------------------------------- */
|
||||
|
||||
.footer {
|
||||
padding: 70px 0;
|
||||
text-align: center;
|
||||
padding: 30px 0;
|
||||
margin-top: 70px;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
background-color: #f5f5f5;
|
||||
@@ -327,16 +339,22 @@ hr.soften {
|
||||
min-height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.show-grid:hover [class*="span"] {
|
||||
background: #ddd;
|
||||
.show-grid [class*="span"]:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
.show-grid .show-grid {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.show-grid .show-grid [class*="span"] {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.show-grid [class*="span"] [class*="span"] {
|
||||
background-color: #ccc;
|
||||
}
|
||||
.show-grid [class*="span"] [class*="span"] [class*="span"] {
|
||||
background-color: #999;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -534,6 +552,9 @@ h2 + .row {
|
||||
|
||||
/* Example page
|
||||
------------------------- */
|
||||
.bootstrap-examples h4 {
|
||||
margin: 10px 0 5px;
|
||||
}
|
||||
.bootstrap-examples p {
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
@@ -669,6 +690,21 @@ form.bs-docs-example {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
/* Dropdowns */
|
||||
.bs-docs-example-submenus {
|
||||
min-height: 180px;
|
||||
}
|
||||
.bs-docs-example-submenus > .pull-left + .pull-left {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.bs-docs-example-submenus .dropup > .dropdown-menu,
|
||||
.bs-docs-example-submenus .dropdown > .dropdown-menu {
|
||||
display: block;
|
||||
position: static;
|
||||
margin-bottom: 5px;
|
||||
*width: 180px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Responsive docs
|
||||
@@ -849,6 +885,7 @@ form.bs-docs-example {
|
||||
/* When affixed, space properly */
|
||||
.bs-docs-sidenav {
|
||||
top: 0;
|
||||
width: 218px;
|
||||
margin-top: 30px;
|
||||
margin-right: 0;
|
||||
}
|
||||
@@ -856,7 +893,7 @@ form.bs-docs-example {
|
||||
|
||||
/* Tablet to desktop
|
||||
------------------------- */
|
||||
@media (min-width: 768px) and (max-width: 980px) {
|
||||
@media (min-width: 768px) and (max-width: 979px) {
|
||||
/* Remove any padding from the body */
|
||||
body {
|
||||
padding-top: 0;
|
||||
@@ -994,7 +1031,26 @@ form.bs-docs-example {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* Modal example */
|
||||
/* Examples: dropdowns */
|
||||
.bs-docs-example-submenus > .pull-left {
|
||||
float: none;
|
||||
clear: both;
|
||||
}
|
||||
.bs-docs-example-submenus > .pull-left,
|
||||
.bs-docs-example-submenus > .pull-left + .pull-left {
|
||||
margin-left: 0;
|
||||
}
|
||||
.bs-docs-example-submenus p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.bs-docs-example-submenus .dropup > .dropdown-menu,
|
||||
.bs-docs-example-submenus .dropdown > .dropdown-menu {
|
||||
margin-bottom: 10px;
|
||||
float: none;
|
||||
max-width: 180px;
|
||||
}
|
||||
|
||||
/* Examples: modal */
|
||||
.modal-example .modal {
|
||||
position: relative;
|
||||
top: auto;
|
||||
@@ -1008,8 +1064,4 @@ form.bs-docs-example {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
/* Unfloat the back to top in footer to prevent odd text wrapping */
|
||||
.footer .pull-right {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
Depois Largura: | Altura: | Tamanho: 2.6 KiB |
|
Depois Largura: | Altura: | Tamanho: 30 KiB |
|
Antes Largura: | Altura: | Tamanho: 4.9 KiB Depois Largura: | Altura: | Tamanho: 11 KiB |
|
Antes Largura: | Altura: | Tamanho: 10 KiB Depois Largura: | Altura: | Tamanho: 10 KiB |
|
Antes Largura: | Altura: | Tamanho: 14 KiB Depois Largura: | Altura: | Tamanho: 30 KiB |
|
Antes Largura: | Altura: | Tamanho: 53 KiB Depois Largura: | Altura: | Tamanho: 332 KiB |
|
Antes Largura: | Altura: | Tamanho: 23 KiB |
|
Depois Largura: | Altura: | Tamanho: 204 KiB |
|
Antes Largura: | Altura: | Tamanho: 19 KiB |
|
Depois Largura: | Altura: | Tamanho: 133 KiB |
|
Antes Largura: | Altura: | Tamanho: 21 KiB Depois Largura: | Altura: | Tamanho: 115 KiB |
|
Depois Largura: | Altura: | Tamanho: 131 KiB |
|
Antes Largura: | Altura: | Tamanho: 4.1 KiB Depois Largura: | Altura: | Tamanho: 22 KiB |
|
Antes Largura: | Altura: | Tamanho: 5.5 KiB |
|
Depois Largura: | Altura: | Tamanho: 35 KiB |
|
Antes Largura: | Altura: | Tamanho: 9.5 KiB Depois Largura: | Altura: | Tamanho: 30 KiB |
@@ -17,7 +17,7 @@ To target a specific plugin, just include the plugins name as a namespace along
|
||||
|
||||
---
|
||||
|
||||
### PROGRAMATIC API
|
||||
### PROGRAMMATIC API
|
||||
|
||||
We also believe you should be able to use all plugins provided by Bootstrap purely through the JS API.
|
||||
|
||||
|
||||
@@ -14,12 +14,14 @@
|
||||
})
|
||||
|
||||
// side bar
|
||||
$('.bs-docs-sidenav').affix({
|
||||
offset: {
|
||||
top: function () { return $window.width() <= 980 ? 290 : 210 }
|
||||
, bottom: 270
|
||||
}
|
||||
})
|
||||
setTimeout(function () {
|
||||
$('.bs-docs-sidenav').affix({
|
||||
offset: {
|
||||
top: function () { return $window.width() <= 980 ? 290 : 210 }
|
||||
, bottom: 270
|
||||
}
|
||||
})
|
||||
}, 100)
|
||||
|
||||
// make code pretty
|
||||
window.prettyPrint && prettyPrint()
|
||||
@@ -34,21 +36,21 @@
|
||||
// add tipsies to grid for scaffolding
|
||||
if ($('#gridSystem').length) {
|
||||
$('#gridSystem').tooltip({
|
||||
selector: '.show-grid > div'
|
||||
selector: '.show-grid > [class*="span"]'
|
||||
, title: function () { return $(this).width() + 'px' }
|
||||
})
|
||||
}
|
||||
|
||||
// tooltip demo
|
||||
$('.tooltip-demo').tooltip({
|
||||
selector: "a[rel=tooltip]"
|
||||
selector: "a[data-toggle=tooltip]"
|
||||
})
|
||||
|
||||
$('.tooltip-test').tooltip()
|
||||
$('.popover-test').popover()
|
||||
|
||||
// popover demo
|
||||
$("a[rel=popover]")
|
||||
$("a[data-toggle=popover]")
|
||||
.popover()
|
||||
.click(function(e) {
|
||||
e.preventDefault()
|
||||
@@ -89,7 +91,7 @@
|
||||
})
|
||||
|
||||
// request built javascript
|
||||
$('.download-btn').on('click', function () {
|
||||
$('.download-btn .btn').on('click', function () {
|
||||
|
||||
var css = $("#components.download input:checked")
|
||||
.map(function () { return this.value })
|
||||
@@ -151,4 +153,4 @@ $.ajaxTransport('jsonpi', function(opts, originalOptions, jqXHR) {
|
||||
}
|
||||
})
|
||||
|
||||
}(window.jQuery)
|
||||
}(window.jQuery)
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* ==========================================================
|
||||
* bootstrap-affix.js v2.2.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#affix
|
||||
* bootstrap-affix.js v2.3.2
|
||||
* http://twbs.github.com/bootstrap/javascript.html#affix
|
||||
* ==========================================================
|
||||
* Copyright 2012 Twitter, Inc.
|
||||
* Copyright 2013 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
@@ -68,6 +68,8 @@
|
||||
/* AFFIX PLUGIN DEFINITION
|
||||
* ======================= */
|
||||
|
||||
var old = $.fn.affix
|
||||
|
||||
$.fn.affix = function (option) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
@@ -85,6 +87,15 @@
|
||||
}
|
||||
|
||||
|
||||
/* AFFIX NO CONFLICT
|
||||
* ================= */
|
||||
|
||||
$.fn.affix.noConflict = function () {
|
||||
$.fn.affix = old
|
||||
return this
|
||||
}
|
||||
|
||||
|
||||
/* AFFIX DATA-API
|
||||
* ============== */
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* ==========================================================
|
||||
* bootstrap-alert.js v2.2.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#alerts
|
||||
* bootstrap-alert.js v2.3.2
|
||||
* http://twbs.github.com/bootstrap/javascript.html#alerts
|
||||
* ==========================================================
|
||||
* Copyright 2012 Twitter, Inc.
|
||||
* Copyright 2013 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
@@ -68,6 +68,8 @@
|
||||
/* ALERT PLUGIN DEFINITION
|
||||
* ======================= */
|
||||
|
||||
var old = $.fn.alert
|
||||
|
||||
$.fn.alert = function (option) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
@@ -80,6 +82,15 @@
|
||||
$.fn.alert.Constructor = Alert
|
||||
|
||||
|
||||
/* ALERT NO CONFLICT
|
||||
* ================= */
|
||||
|
||||
$.fn.alert.noConflict = function () {
|
||||
$.fn.alert = old
|
||||
return this
|
||||
}
|
||||
|
||||
|
||||
/* ALERT DATA-API
|
||||
* ============== */
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* ============================================================
|
||||
* bootstrap-button.js v2.2.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#buttons
|
||||
* bootstrap-button.js v2.3.2
|
||||
* http://twbs.github.com/bootstrap/javascript.html#buttons
|
||||
* ============================================================
|
||||
* Copyright 2012 Twitter, Inc.
|
||||
* Copyright 2013 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
@@ -64,6 +64,8 @@
|
||||
/* BUTTON PLUGIN DEFINITION
|
||||
* ======================== */
|
||||
|
||||
var old = $.fn.button
|
||||
|
||||
$.fn.button = function (option) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
@@ -82,6 +84,15 @@
|
||||
$.fn.button.Constructor = Button
|
||||
|
||||
|
||||
/* BUTTON NO CONFLICT
|
||||
* ================== */
|
||||
|
||||
$.fn.button.noConflict = function () {
|
||||
$.fn.button = old
|
||||
return this
|
||||
}
|
||||
|
||||
|
||||
/* BUTTON DATA-API
|
||||
* =============== */
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* ==========================================================
|
||||
* bootstrap-carousel.js v2.2.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#carousel
|
||||
* bootstrap-carousel.js v2.3.2
|
||||
* http://twbs.github.com/bootstrap/javascript.html#carousel
|
||||
* ==========================================================
|
||||
* Copyright 2012 Twitter, Inc.
|
||||
* Copyright 2013 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
@@ -28,8 +28,8 @@
|
||||
|
||||
var Carousel = function (element, options) {
|
||||
this.$element = $(element)
|
||||
this.$indicators = this.$element.find('.carousel-indicators')
|
||||
this.options = options
|
||||
this.options.slide && this.slide(this.options.slide)
|
||||
this.options.pause == 'hover' && this.$element
|
||||
.on('mouseenter', $.proxy(this.pause, this))
|
||||
.on('mouseleave', $.proxy(this.cycle, this))
|
||||
@@ -39,19 +39,24 @@
|
||||
|
||||
cycle: function (e) {
|
||||
if (!e) this.paused = false
|
||||
if (this.interval) clearInterval(this.interval);
|
||||
this.options.interval
|
||||
&& !this.paused
|
||||
&& (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
|
||||
return this
|
||||
}
|
||||
|
||||
, getActiveIndex: function () {
|
||||
this.$active = this.$element.find('.item.active')
|
||||
this.$items = this.$active.parent().children()
|
||||
return this.$items.index(this.$active)
|
||||
}
|
||||
|
||||
, to: function (pos) {
|
||||
var $active = this.$element.find('.item.active')
|
||||
, children = $active.parent().children()
|
||||
, activePos = children.index($active)
|
||||
var activeIndex = this.getActiveIndex()
|
||||
, that = this
|
||||
|
||||
if (pos > (children.length - 1) || pos < 0) return
|
||||
if (pos > (this.$items.length - 1) || pos < 0) return
|
||||
|
||||
if (this.sliding) {
|
||||
return this.$element.one('slid', function () {
|
||||
@@ -59,18 +64,18 @@
|
||||
})
|
||||
}
|
||||
|
||||
if (activePos == pos) {
|
||||
if (activeIndex == pos) {
|
||||
return this.pause().cycle()
|
||||
}
|
||||
|
||||
return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos]))
|
||||
return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos]))
|
||||
}
|
||||
|
||||
, pause: function (e) {
|
||||
if (!e) this.paused = true
|
||||
if (this.$element.find('.next, .prev').length && $.support.transition.end) {
|
||||
this.$element.trigger($.support.transition.end)
|
||||
this.cycle()
|
||||
this.cycle(true)
|
||||
}
|
||||
clearInterval(this.interval)
|
||||
this.interval = null
|
||||
@@ -104,10 +109,19 @@
|
||||
|
||||
e = $.Event('slide', {
|
||||
relatedTarget: $next[0]
|
||||
, direction: direction
|
||||
})
|
||||
|
||||
if ($next.hasClass('active')) return
|
||||
|
||||
if (this.$indicators.length) {
|
||||
this.$indicators.find('.active').removeClass('active')
|
||||
this.$element.one('slid', function () {
|
||||
var $nextIndicator = $(that.$indicators.children()[that.getActiveIndex()])
|
||||
$nextIndicator && $nextIndicator.addClass('active')
|
||||
})
|
||||
}
|
||||
|
||||
if ($.support.transition && this.$element.hasClass('slide')) {
|
||||
this.$element.trigger(e)
|
||||
if (e.isDefaultPrevented()) return
|
||||
@@ -141,6 +155,8 @@
|
||||
/* CAROUSEL PLUGIN DEFINITION
|
||||
* ========================== */
|
||||
|
||||
var old = $.fn.carousel
|
||||
|
||||
$.fn.carousel = function (option) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
@@ -150,7 +166,7 @@
|
||||
if (!data) $this.data('carousel', (data = new Carousel(this, options)))
|
||||
if (typeof option == 'number') data.to(option)
|
||||
else if (action) data[action]()
|
||||
else if (options.interval) data.cycle()
|
||||
else if (options.interval) data.pause().cycle()
|
||||
})
|
||||
}
|
||||
|
||||
@@ -162,14 +178,29 @@
|
||||
$.fn.carousel.Constructor = Carousel
|
||||
|
||||
|
||||
/* CAROUSEL NO CONFLICT
|
||||
* ==================== */
|
||||
|
||||
$.fn.carousel.noConflict = function () {
|
||||
$.fn.carousel = old
|
||||
return this
|
||||
}
|
||||
|
||||
/* CAROUSEL DATA-API
|
||||
* ================= */
|
||||
|
||||
$(document).on('click.carousel.data-api', '[data-slide]', function (e) {
|
||||
$(document).on('click.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
|
||||
var $this = $(this), href
|
||||
, $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
|
||||
, options = !$target.data('carousel') && $.extend({}, $target.data(), $this.data())
|
||||
, options = $.extend({}, $target.data(), $this.data())
|
||||
, slideIndex
|
||||
|
||||
$target.carousel(options)
|
||||
|
||||
if (slideIndex = $this.attr('data-slide-to')) {
|
||||
$target.data('carousel').pause().to(slideIndex).cycle()
|
||||
}
|
||||
|
||||
e.preventDefault()
|
||||
})
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* =============================================================
|
||||
* bootstrap-collapse.js v2.2.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#collapse
|
||||
* bootstrap-collapse.js v2.3.2
|
||||
* http://twbs.github.com/bootstrap/javascript.html#collapse
|
||||
* =============================================================
|
||||
* Copyright 2012 Twitter, Inc.
|
||||
* Copyright 2013 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
@@ -52,7 +52,7 @@
|
||||
, actives
|
||||
, hasData
|
||||
|
||||
if (this.transitioning) return
|
||||
if (this.transitioning || this.$element.hasClass('in')) return
|
||||
|
||||
dimension = this.dimension()
|
||||
scroll = $.camelCase(['scroll', dimension].join('-'))
|
||||
@@ -72,7 +72,7 @@
|
||||
|
||||
, hide: function () {
|
||||
var dimension
|
||||
if (this.transitioning) return
|
||||
if (this.transitioning || !this.$element.hasClass('in')) return
|
||||
dimension = this.dimension()
|
||||
this.reset(this.$element[dimension]())
|
||||
this.transition('removeClass', $.Event('hide'), 'hidden')
|
||||
@@ -120,14 +120,16 @@
|
||||
}
|
||||
|
||||
|
||||
/* COLLAPSIBLE PLUGIN DEFINITION
|
||||
* ============================== */
|
||||
/* COLLAPSE PLUGIN DEFINITION
|
||||
* ========================== */
|
||||
|
||||
var old = $.fn.collapse
|
||||
|
||||
$.fn.collapse = function (option) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
, data = $this.data('collapse')
|
||||
, options = typeof option == 'object' && option
|
||||
, options = $.extend({}, $.fn.collapse.defaults, $this.data(), typeof option == 'object' && option)
|
||||
if (!data) $this.data('collapse', (data = new Collapse(this, options)))
|
||||
if (typeof option == 'string') data[option]()
|
||||
})
|
||||
@@ -140,9 +142,18 @@
|
||||
$.fn.collapse.Constructor = Collapse
|
||||
|
||||
|
||||
/* COLLAPSIBLE DATA-API
|
||||
/* COLLAPSE NO CONFLICT
|
||||
* ==================== */
|
||||
|
||||
$.fn.collapse.noConflict = function () {
|
||||
$.fn.collapse = old
|
||||
return this
|
||||
}
|
||||
|
||||
|
||||
/* COLLAPSE DATA-API
|
||||
* ================= */
|
||||
|
||||
$(document).on('click.collapse.data-api', '[data-toggle=collapse]', function (e) {
|
||||
var $this = $(this), href
|
||||
, target = $this.attr('data-target')
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* ============================================================
|
||||
* bootstrap-dropdown.js v2.2.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#dropdowns
|
||||
* bootstrap-dropdown.js v2.3.2
|
||||
* http://twbs.github.com/bootstrap/javascript.html#dropdowns
|
||||
* ============================================================
|
||||
* Copyright 2012 Twitter, Inc.
|
||||
* Copyright 2013 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
@@ -52,10 +52,15 @@
|
||||
clearMenus()
|
||||
|
||||
if (!isActive) {
|
||||
if ('ontouchstart' in document.documentElement) {
|
||||
// if mobile we we use a backdrop because click events don't delegate
|
||||
$('<div class="dropdown-backdrop"/>').insertBefore($(this)).on('click', clearMenus)
|
||||
}
|
||||
$parent.toggleClass('open')
|
||||
$this.focus()
|
||||
}
|
||||
|
||||
$this.focus()
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
@@ -80,9 +85,12 @@
|
||||
|
||||
isActive = $parent.hasClass('open')
|
||||
|
||||
if (!isActive || (isActive && e.keyCode == 27)) return $this.click()
|
||||
if (!isActive || (isActive && e.keyCode == 27)) {
|
||||
if (e.which == 27) $parent.find(toggle).focus()
|
||||
return $this.click()
|
||||
}
|
||||
|
||||
$items = $('[role=menu] li:not(.divider) a', $parent)
|
||||
$items = $('[role=menu] li:not(.divider):visible a', $parent)
|
||||
|
||||
if (!$items.length) return
|
||||
|
||||
@@ -100,8 +108,9 @@
|
||||
}
|
||||
|
||||
function clearMenus() {
|
||||
$('.dropdown-backdrop').remove()
|
||||
$(toggle).each(function () {
|
||||
getParent($(this)).removeClass("open")
|
||||
getParent($(this)).removeClass('open')
|
||||
})
|
||||
}
|
||||
|
||||
@@ -114,8 +123,9 @@
|
||||
selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
|
||||
}
|
||||
|
||||
$parent = $(selector)
|
||||
$parent.length || ($parent = $this.parent())
|
||||
$parent = selector && $(selector)
|
||||
|
||||
if (!$parent || !$parent.length) $parent = $this.parent()
|
||||
|
||||
return $parent
|
||||
}
|
||||
@@ -124,6 +134,8 @@
|
||||
/* DROPDOWN PLUGIN DEFINITION
|
||||
* ========================== */
|
||||
|
||||
var old = $.fn.dropdown
|
||||
|
||||
$.fn.dropdown = function (option) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
@@ -136,13 +148,22 @@
|
||||
$.fn.dropdown.Constructor = Dropdown
|
||||
|
||||
|
||||
/* DROPDOWN NO CONFLICT
|
||||
* ==================== */
|
||||
|
||||
$.fn.dropdown.noConflict = function () {
|
||||
$.fn.dropdown = old
|
||||
return this
|
||||
}
|
||||
|
||||
|
||||
/* APPLY TO STANDARD DROPDOWN ELEMENTS
|
||||
* =================================== */
|
||||
|
||||
$(document)
|
||||
.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
|
||||
.on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
|
||||
.on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
|
||||
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
|
||||
.on('click.dropdown.data-api', clearMenus)
|
||||
.on('click.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
|
||||
.on('click.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
|
||||
.on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
|
||||
|
||||
}(window.jQuery);
|
||||
}(window.jQuery);
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* =========================================================
|
||||
* bootstrap-modal.js v2.2.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#modals
|
||||
* bootstrap-modal.js v2.3.2
|
||||
* http://twbs.github.com/bootstrap/javascript.html#modals
|
||||
* =========================================================
|
||||
* Copyright 2012 Twitter, Inc.
|
||||
* Copyright 2013 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
@@ -60,8 +60,7 @@
|
||||
that.$element.appendTo(document.body) //don't move modals dom position
|
||||
}
|
||||
|
||||
that.$element
|
||||
.show()
|
||||
that.$element.show()
|
||||
|
||||
if (transition) {
|
||||
that.$element[0].offsetWidth // force reflow
|
||||
@@ -139,16 +138,17 @@
|
||||
})
|
||||
}
|
||||
|
||||
, hideModal: function (that) {
|
||||
this.$element
|
||||
.hide()
|
||||
.trigger('hidden')
|
||||
|
||||
this.backdrop()
|
||||
, hideModal: function () {
|
||||
var that = this
|
||||
this.$element.hide()
|
||||
this.backdrop(function () {
|
||||
that.removeBackdrop()
|
||||
that.$element.trigger('hidden')
|
||||
})
|
||||
}
|
||||
|
||||
, removeBackdrop: function () {
|
||||
this.$backdrop.remove()
|
||||
this.$backdrop && this.$backdrop.remove()
|
||||
this.$backdrop = null
|
||||
}
|
||||
|
||||
@@ -172,6 +172,8 @@
|
||||
|
||||
this.$backdrop.addClass('in')
|
||||
|
||||
if (!callback) return
|
||||
|
||||
doAnimate ?
|
||||
this.$backdrop.one($.support.transition.end, callback) :
|
||||
callback()
|
||||
@@ -180,8 +182,8 @@
|
||||
this.$backdrop.removeClass('in')
|
||||
|
||||
$.support.transition && this.$element.hasClass('fade')?
|
||||
this.$backdrop.one($.support.transition.end, $.proxy(this.removeBackdrop, this)) :
|
||||
this.removeBackdrop()
|
||||
this.$backdrop.one($.support.transition.end, callback) :
|
||||
callback()
|
||||
|
||||
} else if (callback) {
|
||||
callback()
|
||||
@@ -193,6 +195,8 @@
|
||||
/* MODAL PLUGIN DEFINITION
|
||||
* ======================= */
|
||||
|
||||
var old = $.fn.modal
|
||||
|
||||
$.fn.modal = function (option) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
@@ -213,6 +217,15 @@
|
||||
$.fn.modal.Constructor = Modal
|
||||
|
||||
|
||||
/* MODAL NO CONFLICT
|
||||
* ================= */
|
||||
|
||||
$.fn.modal.noConflict = function () {
|
||||
$.fn.modal = old
|
||||
return this
|
||||
}
|
||||
|
||||
|
||||
/* MODAL DATA-API
|
||||
* ============== */
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* ===========================================================
|
||||
* bootstrap-popover.js v2.2.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#popovers
|
||||
* bootstrap-popover.js v2.3.2
|
||||
* http://twbs.github.com/bootstrap/javascript.html#popovers
|
||||
* ===========================================================
|
||||
* Copyright 2012 Twitter, Inc.
|
||||
* Copyright 2013 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
@@ -44,7 +44,7 @@
|
||||
, content = this.getContent()
|
||||
|
||||
$tip.find('.popover-title')[this.options.html ? 'html' : 'text'](title)
|
||||
$tip.find('.popover-content > *')[this.options.html ? 'html' : 'text'](content)
|
||||
$tip.find('.popover-content')[this.options.html ? 'html' : 'text'](content)
|
||||
|
||||
$tip.removeClass('fade top bottom left right in')
|
||||
}
|
||||
@@ -58,8 +58,8 @@
|
||||
, $e = this.$element
|
||||
, o = this.options
|
||||
|
||||
content = $e.attr('data-content')
|
||||
|| (typeof o.content == 'function' ? o.content.call($e[0]) : o.content)
|
||||
content = (typeof o.content == 'function' ? o.content.call($e[0]) : o.content)
|
||||
|| $e.attr('data-content')
|
||||
|
||||
return content
|
||||
}
|
||||
@@ -81,6 +81,8 @@
|
||||
/* POPOVER PLUGIN DEFINITION
|
||||
* ======================= */
|
||||
|
||||
var old = $.fn.popover
|
||||
|
||||
$.fn.popover = function (option) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
@@ -97,7 +99,16 @@
|
||||
placement: 'right'
|
||||
, trigger: 'click'
|
||||
, content: ''
|
||||
, template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
|
||||
, template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
|
||||
})
|
||||
|
||||
}(window.jQuery);
|
||||
|
||||
/* POPOVER NO CONFLICT
|
||||
* =================== */
|
||||
|
||||
$.fn.popover.noConflict = function () {
|
||||
$.fn.popover = old
|
||||
return this
|
||||
}
|
||||
|
||||
}(window.jQuery);
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* =============================================================
|
||||
* bootstrap-scrollspy.js v2.2.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#scrollspy
|
||||
* bootstrap-scrollspy.js v2.3.2
|
||||
* http://twbs.github.com/bootstrap/javascript.html#scrollspy
|
||||
* =============================================================
|
||||
* Copyright 2012 Twitter, Inc.
|
||||
* Copyright 2013 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
@@ -59,7 +59,7 @@
|
||||
, $href = /^#\w/.test(href) && $(href)
|
||||
return ( $href
|
||||
&& $href.length
|
||||
&& [[ $href.position().top, href ]] ) || null
|
||||
&& [[ $href.position().top + (!$.isWindow(self.$scrollElement.get(0)) && self.$scrollElement.scrollTop()), href ]] ) || null
|
||||
})
|
||||
.sort(function (a, b) { return a[0] - b[0] })
|
||||
.each(function () {
|
||||
@@ -121,6 +121,8 @@
|
||||
/* SCROLLSPY PLUGIN DEFINITION
|
||||
* =========================== */
|
||||
|
||||
var old = $.fn.scrollspy
|
||||
|
||||
$.fn.scrollspy = function (option) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
@@ -138,6 +140,15 @@
|
||||
}
|
||||
|
||||
|
||||
/* SCROLLSPY NO CONFLICT
|
||||
* ===================== */
|
||||
|
||||
$.fn.scrollspy.noConflict = function () {
|
||||
$.fn.scrollspy = old
|
||||
return this
|
||||
}
|
||||
|
||||
|
||||
/* SCROLLSPY DATA-API
|
||||
* ================== */
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* ========================================================
|
||||
* bootstrap-tab.js v2.2.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#tabs
|
||||
* bootstrap-tab.js v2.3.2
|
||||
* http://twbs.github.com/bootstrap/javascript.html#tabs
|
||||
* ========================================================
|
||||
* Copyright 2012 Twitter, Inc.
|
||||
* Copyright 2013 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
@@ -110,6 +110,8 @@
|
||||
/* TAB PLUGIN DEFINITION
|
||||
* ===================== */
|
||||
|
||||
var old = $.fn.tab
|
||||
|
||||
$.fn.tab = function ( option ) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
@@ -122,6 +124,15 @@
|
||||
$.fn.tab.Constructor = Tab
|
||||
|
||||
|
||||
/* TAB NO CONFLICT
|
||||
* =============== */
|
||||
|
||||
$.fn.tab.noConflict = function () {
|
||||
$.fn.tab = old
|
||||
return this
|
||||
}
|
||||
|
||||
|
||||
/* TAB DATA-API
|
||||
* ============ */
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
/* ===========================================================
|
||||
* bootstrap-tooltip.js v2.2.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#tooltips
|
||||
* bootstrap-tooltip.js v2.3.2
|
||||
* http://twbs.github.com/bootstrap/javascript.html#tooltips
|
||||
* Inspired by the original jQuery.tipsy by Jason Frame
|
||||
* ===========================================================
|
||||
* Copyright 2012 Twitter, Inc.
|
||||
* Copyright 2013 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
@@ -38,19 +38,27 @@
|
||||
, init: function (type, element, options) {
|
||||
var eventIn
|
||||
, eventOut
|
||||
, triggers
|
||||
, trigger
|
||||
, i
|
||||
|
||||
this.type = type
|
||||
this.$element = $(element)
|
||||
this.options = this.getOptions(options)
|
||||
this.enabled = true
|
||||
|
||||
if (this.options.trigger == 'click') {
|
||||
this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
|
||||
} else if (this.options.trigger != 'manual') {
|
||||
eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus'
|
||||
eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur'
|
||||
this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
|
||||
this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
|
||||
triggers = this.options.trigger.split(' ')
|
||||
|
||||
for (i = triggers.length; i--;) {
|
||||
trigger = triggers[i]
|
||||
if (trigger == 'click') {
|
||||
this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
|
||||
} else if (trigger != 'manual') {
|
||||
eventIn = trigger == 'hover' ? 'mouseenter' : 'focus'
|
||||
eventOut = trigger == 'hover' ? 'mouseleave' : 'blur'
|
||||
this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
|
||||
this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
|
||||
}
|
||||
}
|
||||
|
||||
this.options.selector ?
|
||||
@@ -59,7 +67,7 @@
|
||||
}
|
||||
|
||||
, getOptions: function (options) {
|
||||
options = $.extend({}, $.fn[this.type].defaults, options, this.$element.data())
|
||||
options = $.extend({}, $.fn[this.type].defaults, this.$element.data(), options)
|
||||
|
||||
if (options.delay && typeof options.delay == 'number') {
|
||||
options.delay = {
|
||||
@@ -72,7 +80,15 @@
|
||||
}
|
||||
|
||||
, enter: function (e) {
|
||||
var self = $(e.currentTarget)[this.type](this._options).data(this.type)
|
||||
var defaults = $.fn[this.type].defaults
|
||||
, options = {}
|
||||
, self
|
||||
|
||||
this._options && $.each(this._options, function (key, value) {
|
||||
if (defaults[key] != value) options[key] = value
|
||||
}, this)
|
||||
|
||||
self = $(e.currentTarget)[this.type](options).data(this.type)
|
||||
|
||||
if (!self.options.delay || !self.options.delay.show) return self.show()
|
||||
|
||||
@@ -97,14 +113,16 @@
|
||||
|
||||
, show: function () {
|
||||
var $tip
|
||||
, inside
|
||||
, pos
|
||||
, actualWidth
|
||||
, actualHeight
|
||||
, placement
|
||||
, tp
|
||||
, e = $.Event('show')
|
||||
|
||||
if (this.hasContent() && this.enabled) {
|
||||
this.$element.trigger(e)
|
||||
if (e.isDefaultPrevented()) return
|
||||
$tip = this.tip()
|
||||
this.setContent()
|
||||
|
||||
@@ -116,19 +134,18 @@
|
||||
this.options.placement.call(this, $tip[0], this.$element[0]) :
|
||||
this.options.placement
|
||||
|
||||
inside = /in/.test(placement)
|
||||
|
||||
$tip
|
||||
.detach()
|
||||
.css({ top: 0, left: 0, display: 'block' })
|
||||
.insertAfter(this.$element)
|
||||
|
||||
pos = this.getPosition(inside)
|
||||
this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)
|
||||
|
||||
pos = this.getPosition()
|
||||
|
||||
actualWidth = $tip[0].offsetWidth
|
||||
actualHeight = $tip[0].offsetHeight
|
||||
|
||||
switch (inside ? placement.split(' ')[1] : placement) {
|
||||
switch (placement) {
|
||||
case 'bottom':
|
||||
tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
|
||||
break
|
||||
@@ -143,13 +160,58 @@
|
||||
break
|
||||
}
|
||||
|
||||
$tip
|
||||
.offset(tp)
|
||||
.addClass(placement)
|
||||
.addClass('in')
|
||||
this.applyPlacement(tp, placement)
|
||||
this.$element.trigger('shown')
|
||||
}
|
||||
}
|
||||
|
||||
, applyPlacement: function(offset, placement){
|
||||
var $tip = this.tip()
|
||||
, width = $tip[0].offsetWidth
|
||||
, height = $tip[0].offsetHeight
|
||||
, actualWidth
|
||||
, actualHeight
|
||||
, delta
|
||||
, replace
|
||||
|
||||
$tip
|
||||
.offset(offset)
|
||||
.addClass(placement)
|
||||
.addClass('in')
|
||||
|
||||
actualWidth = $tip[0].offsetWidth
|
||||
actualHeight = $tip[0].offsetHeight
|
||||
|
||||
if (placement == 'top' && actualHeight != height) {
|
||||
offset.top = offset.top + height - actualHeight
|
||||
replace = true
|
||||
}
|
||||
|
||||
if (placement == 'bottom' || placement == 'top') {
|
||||
delta = 0
|
||||
|
||||
if (offset.left < 0){
|
||||
delta = offset.left * -2
|
||||
offset.left = 0
|
||||
$tip.offset(offset)
|
||||
actualWidth = $tip[0].offsetWidth
|
||||
actualHeight = $tip[0].offsetHeight
|
||||
}
|
||||
|
||||
this.replaceArrow(delta - width + actualWidth, actualWidth, 'left')
|
||||
} else {
|
||||
this.replaceArrow(actualHeight - height, actualHeight, 'top')
|
||||
}
|
||||
|
||||
if (replace) $tip.offset(offset)
|
||||
}
|
||||
|
||||
, replaceArrow: function(delta, dimension, position){
|
||||
this
|
||||
.arrow()
|
||||
.css(position, delta ? (50 * (1 - delta / dimension) + "%") : '')
|
||||
}
|
||||
|
||||
, setContent: function () {
|
||||
var $tip = this.tip()
|
||||
, title = this.getTitle()
|
||||
@@ -161,6 +223,10 @@
|
||||
, hide: function () {
|
||||
var that = this
|
||||
, $tip = this.tip()
|
||||
, e = $.Event('hide')
|
||||
|
||||
this.$element.trigger(e)
|
||||
if (e.isDefaultPrevented()) return
|
||||
|
||||
$tip.removeClass('in')
|
||||
|
||||
@@ -179,13 +245,15 @@
|
||||
removeWithAnimation() :
|
||||
$tip.detach()
|
||||
|
||||
this.$element.trigger('hidden')
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
, fixTitle: function () {
|
||||
var $e = this.$element
|
||||
if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') {
|
||||
$e.attr('data-original-title', $e.attr('title') || '').removeAttr('title')
|
||||
$e.attr('data-original-title', $e.attr('title') || '').attr('title', '')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -193,11 +261,12 @@
|
||||
return this.getTitle()
|
||||
}
|
||||
|
||||
, getPosition: function (inside) {
|
||||
return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), {
|
||||
width: this.$element[0].offsetWidth
|
||||
, height: this.$element[0].offsetHeight
|
||||
})
|
||||
, getPosition: function () {
|
||||
var el = this.$element[0]
|
||||
return $.extend({}, (typeof el.getBoundingClientRect == 'function') ? el.getBoundingClientRect() : {
|
||||
width: el.offsetWidth
|
||||
, height: el.offsetHeight
|
||||
}, this.$element.offset())
|
||||
}
|
||||
|
||||
, getTitle: function () {
|
||||
@@ -215,6 +284,10 @@
|
||||
return this.$tip = this.$tip || $(this.options.template)
|
||||
}
|
||||
|
||||
, arrow: function(){
|
||||
return this.$arrow = this.$arrow || this.tip().find(".tooltip-arrow")
|
||||
}
|
||||
|
||||
, validate: function () {
|
||||
if (!this.$element[0].parentNode) {
|
||||
this.hide()
|
||||
@@ -236,8 +309,8 @@
|
||||
}
|
||||
|
||||
, toggle: function (e) {
|
||||
var self = $(e.currentTarget)[this.type](this._options).data(this.type)
|
||||
self[self.tip().hasClass('in') ? 'hide' : 'show']()
|
||||
var self = e ? $(e.currentTarget)[this.type](this._options).data(this.type) : this
|
||||
self.tip().hasClass('in') ? self.hide() : self.show()
|
||||
}
|
||||
|
||||
, destroy: function () {
|
||||
@@ -250,6 +323,8 @@
|
||||
/* TOOLTIP PLUGIN DEFINITION
|
||||
* ========================= */
|
||||
|
||||
var old = $.fn.tooltip
|
||||
|
||||
$.fn.tooltip = function ( option ) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
@@ -267,10 +342,20 @@
|
||||
, placement: 'top'
|
||||
, selector: false
|
||||
, template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
|
||||
, trigger: 'hover'
|
||||
, trigger: 'hover focus'
|
||||
, title: ''
|
||||
, delay: 0
|
||||
, html: false
|
||||
, container: false
|
||||
}
|
||||
|
||||
}(window.jQuery);
|
||||
|
||||
/* TOOLTIP NO CONFLICT
|
||||
* =================== */
|
||||
|
||||
$.fn.tooltip.noConflict = function () {
|
||||
$.fn.tooltip = old
|
||||
return this
|
||||
}
|
||||
|
||||
}(window.jQuery);
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* ===================================================
|
||||
* bootstrap-transition.js v2.2.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#transitions
|
||||
* bootstrap-transition.js v2.3.2
|
||||
* http://twbs.github.com/bootstrap/javascript.html#transitions
|
||||
* ===================================================
|
||||
* Copyright 2012 Twitter, Inc.
|
||||
* Copyright 2013 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* =============================================================
|
||||
* bootstrap-typeahead.js v2.2.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#typeahead
|
||||
* bootstrap-typeahead.js v2.3.2
|
||||
* http://twbs.github.com/bootstrap/javascript.html#typeahead
|
||||
* =============================================================
|
||||
* Copyright 2012 Twitter, Inc.
|
||||
* Copyright 2013 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
@@ -33,8 +33,8 @@
|
||||
this.sorter = this.options.sorter || this.sorter
|
||||
this.highlighter = this.options.highlighter || this.highlighter
|
||||
this.updater = this.options.updater || this.updater
|
||||
this.$menu = $(this.options.menu).appendTo('body')
|
||||
this.source = this.options.source
|
||||
this.$menu = $(this.options.menu)
|
||||
this.shown = false
|
||||
this.listen()
|
||||
}
|
||||
@@ -56,16 +56,18 @@
|
||||
}
|
||||
|
||||
, show: function () {
|
||||
var pos = $.extend({}, this.$element.offset(), {
|
||||
var pos = $.extend({}, this.$element.position(), {
|
||||
height: this.$element[0].offsetHeight
|
||||
})
|
||||
|
||||
this.$menu.css({
|
||||
top: pos.top + pos.height
|
||||
, left: pos.left
|
||||
})
|
||||
this.$menu
|
||||
.insertAfter(this.$element)
|
||||
.css({
|
||||
top: pos.top + pos.height
|
||||
, left: pos.left
|
||||
})
|
||||
.show()
|
||||
|
||||
this.$menu.show()
|
||||
this.shown = true
|
||||
return this
|
||||
}
|
||||
@@ -170,6 +172,7 @@
|
||||
|
||||
, listen: function () {
|
||||
this.$element
|
||||
.on('focus', $.proxy(this.focus, this))
|
||||
.on('blur', $.proxy(this.blur, this))
|
||||
.on('keypress', $.proxy(this.keypress, this))
|
||||
.on('keyup', $.proxy(this.keyup, this))
|
||||
@@ -181,6 +184,7 @@
|
||||
this.$menu
|
||||
.on('click', $.proxy(this.click, this))
|
||||
.on('mouseenter', 'li', $.proxy(this.mouseenter, this))
|
||||
.on('mouseleave', 'li', $.proxy(this.mouseleave, this))
|
||||
}
|
||||
|
||||
, eventSupported: function(eventName) {
|
||||
@@ -217,7 +221,7 @@
|
||||
}
|
||||
|
||||
, keydown: function (e) {
|
||||
this.suppressKeyPressRepeat = !~$.inArray(e.keyCode, [40,38,9,13,27])
|
||||
this.suppressKeyPressRepeat = ~$.inArray(e.keyCode, [40,38,9,13,27])
|
||||
this.move(e)
|
||||
}
|
||||
|
||||
@@ -254,28 +258,41 @@
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
, focus: function (e) {
|
||||
this.focused = true
|
||||
}
|
||||
|
||||
, blur: function (e) {
|
||||
var that = this
|
||||
setTimeout(function () { that.hide() }, 150)
|
||||
this.focused = false
|
||||
if (!this.mousedover && this.shown) this.hide()
|
||||
}
|
||||
|
||||
, click: function (e) {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
this.select()
|
||||
this.$element.focus()
|
||||
}
|
||||
|
||||
, mouseenter: function (e) {
|
||||
this.mousedover = true
|
||||
this.$menu.find('.active').removeClass('active')
|
||||
$(e.currentTarget).addClass('active')
|
||||
}
|
||||
|
||||
, mouseleave: function (e) {
|
||||
this.mousedover = false
|
||||
if (!this.focused && this.shown) this.hide()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* TYPEAHEAD PLUGIN DEFINITION
|
||||
* =========================== */
|
||||
|
||||
var old = $.fn.typeahead
|
||||
|
||||
$.fn.typeahead = function (option) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
@@ -297,13 +314,21 @@
|
||||
$.fn.typeahead.Constructor = Typeahead
|
||||
|
||||
|
||||
/* TYPEAHEAD DATA-API
|
||||
/* TYPEAHEAD NO CONFLICT
|
||||
* =================== */
|
||||
|
||||
$.fn.typeahead.noConflict = function () {
|
||||
$.fn.typeahead = old
|
||||
return this
|
||||
}
|
||||
|
||||
|
||||
/* TYPEAHEAD DATA-API
|
||||
* ================== */
|
||||
|
||||
$(document).on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) {
|
||||
var $this = $(this)
|
||||
if ($this.data('typeahead')) return
|
||||
e.preventDefault()
|
||||
$this.typeahead($this.data())
|
||||
})
|
||||
|
||||
|
||||
@@ -0,0 +1,401 @@
|
||||
/*
|
||||
|
||||
Holder - 1.9 - client side image placeholders
|
||||
(c) 2012-2013 Ivan Malopinsky / http://imsky.co
|
||||
|
||||
Provided under the Apache 2.0 License: http://www.apache.org/licenses/LICENSE-2.0
|
||||
Commercial use requires attribution.
|
||||
|
||||
*/
|
||||
|
||||
var Holder = Holder || {};
|
||||
(function (app, win) {
|
||||
|
||||
var preempted = false,
|
||||
fallback = false,
|
||||
canvas = document.createElement('canvas');
|
||||
|
||||
//getElementsByClassName polyfill
|
||||
document.getElementsByClassName||(document.getElementsByClassName=function(e){var t=document,n,r,i,s=[];if(t.querySelectorAll)return t.querySelectorAll("."+e);if(t.evaluate){r=".//*[contains(concat(' ', @class, ' '), ' "+e+" ')]",n=t.evaluate(r,t,null,0,null);while(i=n.iterateNext())s.push(i)}else{n=t.getElementsByTagName("*"),r=new RegExp("(^|\\s)"+e+"(\\s|$)");for(i=0;i<n.length;i++)r.test(n[i].className)&&s.push(n[i])}return s})
|
||||
|
||||
//getComputedStyle polyfill
|
||||
window.getComputedStyle||(window.getComputedStyle=function(e,t){return this.el=e,this.getPropertyValue=function(t){var n=/(\-([a-z]){1})/g;return t=="float"&&(t="styleFloat"),n.test(t)&&(t=t.replace(n,function(){return arguments[2].toUpperCase()})),e.currentStyle[t]?e.currentStyle[t]:null},this})
|
||||
|
||||
//http://javascript.nwbox.com/ContentLoaded by Diego Perini with modifications
|
||||
function contentLoaded(n,t){var l="complete",s="readystatechange",u=!1,h=u,c=!0,i=n.document,a=i.documentElement,e=i.addEventListener?"addEventListener":"attachEvent",v=i.addEventListener?"removeEventListener":"detachEvent",f=i.addEventListener?"":"on",r=function(e){(e.type!=s||i.readyState==l)&&((e.type=="load"?n:i)[v](f+e.type,r,u),!h&&(h=!0)&&t.call(n,null))},o=function(){try{a.doScroll("left")}catch(n){setTimeout(o,50);return}r("poll")};if(i.readyState==l)t.call(n,"lazy");else{if(i.createEventObject&&a.doScroll){try{c=!n.frameElement}catch(y){}c&&o()}i[e](f+"DOMContentLoaded",r,u),i[e](f+s,r,u),n[e](f+"load",r,u)}};
|
||||
|
||||
//https://gist.github.com/991057 by Jed Schmidt with modifications
|
||||
function selector(a){
|
||||
a=a.match(/^(\W)?(.*)/);var b=document["getElement"+(a[1]?a[1]=="#"?"ById":"sByClassName":"sByTagName")](a[2]);
|
||||
var ret=[]; b!=null&&(b.length?ret=b:b.length==0?ret=b:ret=[b]); return ret;
|
||||
}
|
||||
|
||||
//shallow object property extend
|
||||
function extend(a,b){var c={};for(var d in a)c[d]=a[d];for(var e in b)c[e]=b[e];return c}
|
||||
|
||||
//hasOwnProperty polyfill
|
||||
if (!Object.prototype.hasOwnProperty)
|
||||
Object.prototype.hasOwnProperty = function(prop) {
|
||||
var proto = this.__proto__ || this.constructor.prototype;
|
||||
return (prop in this) && (!(prop in proto) || proto[prop] !== this[prop]);
|
||||
}
|
||||
|
||||
function text_size(width, height, template) {
|
||||
var dimension_arr = [height, width].sort();
|
||||
var maxFactor = Math.round(dimension_arr[1] / 16),
|
||||
minFactor = Math.round(dimension_arr[0] / 16);
|
||||
var text_height = Math.max(template.size, maxFactor);
|
||||
return {
|
||||
height: text_height
|
||||
}
|
||||
}
|
||||
|
||||
function draw(ctx, dimensions, template, ratio) {
|
||||
var ts = text_size(dimensions.width, dimensions.height, template);
|
||||
var text_height = ts.height;
|
||||
var width = dimensions.width * ratio, height = dimensions.height * ratio;
|
||||
var font = template.font ? template.font : "sans-serif";
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
ctx.textAlign = "center";
|
||||
ctx.textBaseline = "middle";
|
||||
ctx.fillStyle = template.background;
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
ctx.fillStyle = template.foreground;
|
||||
ctx.font = "bold " + text_height + "px "+font;
|
||||
var text = template.text ? template.text : (dimensions.width + "x" + dimensions.height);
|
||||
if (ctx.measureText(text).width / width > 1) {
|
||||
text_height = template.size / (ctx.measureText(text).width / width);
|
||||
}
|
||||
//Resetting font size if necessary
|
||||
ctx.font = "bold " + (text_height * ratio) + "px "+font;
|
||||
ctx.fillText(text, (width / 2), (height / 2), width);
|
||||
return canvas.toDataURL("image/png");
|
||||
}
|
||||
|
||||
function render(mode, el, holder, src) {
|
||||
var dimensions = holder.dimensions,
|
||||
theme = holder.theme,
|
||||
text = holder.text ? decodeURIComponent(holder.text) : holder.text;
|
||||
var dimensions_caption = dimensions.width + "x" + dimensions.height;
|
||||
theme = (text ? extend(theme, { text: text }) : theme);
|
||||
theme = (holder.font ? extend(theme, {font: holder.font}) : theme);
|
||||
|
||||
var ratio = 1;
|
||||
if(window.devicePixelRatio && window.devicePixelRatio > 1){
|
||||
ratio = window.devicePixelRatio;
|
||||
}
|
||||
|
||||
if (mode == "image") {
|
||||
el.setAttribute("data-src", src);
|
||||
el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
|
||||
|
||||
if(fallback || !holder.auto){
|
||||
el.style.width = dimensions.width + "px";
|
||||
el.style.height = dimensions.height + "px";
|
||||
}
|
||||
|
||||
if (fallback) {
|
||||
el.style.backgroundColor = theme.background;
|
||||
|
||||
}
|
||||
else{
|
||||
el.setAttribute("src", draw(ctx, dimensions, theme, ratio));
|
||||
}
|
||||
} else {
|
||||
if (!fallback) {
|
||||
el.style.backgroundImage = "url(" + draw(ctx, dimensions, theme, ratio) + ")";
|
||||
el.style.backgroundSize = dimensions.width+"px "+dimensions.height+"px";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function fluid(el, holder, src) {
|
||||
var dimensions = holder.dimensions,
|
||||
theme = holder.theme,
|
||||
text = holder.text;
|
||||
var dimensions_caption = dimensions.width + "x" + dimensions.height;
|
||||
theme = (text ? extend(theme, {
|
||||
text: text
|
||||
}) : theme);
|
||||
|
||||
var fluid = document.createElement("div");
|
||||
|
||||
fluid.style.backgroundColor = theme.background;
|
||||
fluid.style.color = theme.foreground;
|
||||
fluid.className = el.className + " holderjs-fluid";
|
||||
fluid.style.width = holder.dimensions.width + (holder.dimensions.width.indexOf("%")>0?"":"px");
|
||||
fluid.style.height = holder.dimensions.height + (holder.dimensions.height.indexOf("%")>0?"":"px");
|
||||
fluid.id = el.id;
|
||||
|
||||
el.style.width=0;
|
||||
el.style.height=0;
|
||||
|
||||
if (theme.text) {
|
||||
fluid.appendChild(document.createTextNode(theme.text))
|
||||
} else {
|
||||
fluid.appendChild(document.createTextNode(dimensions_caption))
|
||||
fluid_images.push(fluid);
|
||||
setTimeout(fluid_update, 0);
|
||||
}
|
||||
|
||||
el.parentNode.insertBefore(fluid, el.nextSibling)
|
||||
|
||||
if(window.jQuery){
|
||||
jQuery(function($){
|
||||
$(el).on("load", function(){
|
||||
el.style.width = fluid.style.width;
|
||||
el.style.height = fluid.style.height;
|
||||
$(el).show();
|
||||
$(fluid).remove();
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function fluid_update() {
|
||||
for (i in fluid_images) {
|
||||
if(!fluid_images.hasOwnProperty(i)) continue;
|
||||
var el = fluid_images[i],
|
||||
label = el.firstChild;
|
||||
|
||||
el.style.lineHeight = el.offsetHeight+"px";
|
||||
label.data = el.offsetWidth + "x" + el.offsetHeight;
|
||||
}
|
||||
}
|
||||
|
||||
function parse_flags(flags, options) {
|
||||
|
||||
var ret = {
|
||||
theme: settings.themes.gray
|
||||
}, render = false;
|
||||
|
||||
for (sl = flags.length, j = 0; j < sl; j++) {
|
||||
var flag = flags[j];
|
||||
if (app.flags.dimensions.match(flag)) {
|
||||
render = true;
|
||||
ret.dimensions = app.flags.dimensions.output(flag);
|
||||
} else if (app.flags.fluid.match(flag)) {
|
||||
render = true;
|
||||
ret.dimensions = app.flags.fluid.output(flag);
|
||||
ret.fluid = true;
|
||||
} else if (app.flags.colors.match(flag)) {
|
||||
ret.theme = app.flags.colors.output(flag);
|
||||
} else if (options.themes[flag]) {
|
||||
//If a theme is specified, it will override custom colors
|
||||
ret.theme = options.themes[flag];
|
||||
} else if (app.flags.text.match(flag)) {
|
||||
ret.text = app.flags.text.output(flag);
|
||||
} else if(app.flags.font.match(flag)){
|
||||
ret.font = app.flags.font.output(flag);
|
||||
}
|
||||
else if(app.flags.auto.match(flag)){
|
||||
ret.auto = true;
|
||||
}
|
||||
}
|
||||
|
||||
return render ? ret : false;
|
||||
|
||||
};
|
||||
|
||||
if (!canvas.getContext) {
|
||||
fallback = true;
|
||||
} else {
|
||||
if (canvas.toDataURL("image/png")
|
||||
.indexOf("data:image/png") < 0) {
|
||||
//Android doesn't support data URI
|
||||
fallback = true;
|
||||
} else {
|
||||
var ctx = canvas.getContext("2d");
|
||||
}
|
||||
}
|
||||
|
||||
var fluid_images = [];
|
||||
|
||||
var settings = {
|
||||
domain: "holder.js",
|
||||
images: "img",
|
||||
bgnodes: ".holderjs",
|
||||
themes: {
|
||||
"gray": {
|
||||
background: "#eee",
|
||||
foreground: "#aaa",
|
||||
size: 12
|
||||
},
|
||||
"social": {
|
||||
background: "#3a5a97",
|
||||
foreground: "#fff",
|
||||
size: 12
|
||||
},
|
||||
"industrial": {
|
||||
background: "#434A52",
|
||||
foreground: "#C2F200",
|
||||
size: 12
|
||||
}
|
||||
},
|
||||
stylesheet: ".holderjs-fluid {font-size:16px;font-weight:bold;text-align:center;font-family:sans-serif;margin:0}"
|
||||
};
|
||||
|
||||
|
||||
app.flags = {
|
||||
dimensions: {
|
||||
regex: /^(\d+)x(\d+)$/,
|
||||
output: function (val) {
|
||||
var exec = this.regex.exec(val);
|
||||
return {
|
||||
width: +exec[1],
|
||||
height: +exec[2]
|
||||
}
|
||||
}
|
||||
},
|
||||
fluid: {
|
||||
regex: /^([0-9%]+)x([0-9%]+)$/,
|
||||
output: function (val) {
|
||||
var exec = this.regex.exec(val);
|
||||
return {
|
||||
width: exec[1],
|
||||
height: exec[2]
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: {
|
||||
regex: /#([0-9a-f]{3,})\:#([0-9a-f]{3,})/i,
|
||||
output: function (val) {
|
||||
var exec = this.regex.exec(val);
|
||||
return {
|
||||
size: settings.themes.gray.size,
|
||||
foreground: "#" + exec[2],
|
||||
background: "#" + exec[1]
|
||||
}
|
||||
}
|
||||
},
|
||||
text: {
|
||||
regex: /text\:(.*)/,
|
||||
output: function (val) {
|
||||
return this.regex.exec(val)[1];
|
||||
}
|
||||
},
|
||||
font: {
|
||||
regex: /font\:(.*)/,
|
||||
output: function(val){
|
||||
return this.regex.exec(val)[1];
|
||||
}
|
||||
},
|
||||
auto: {
|
||||
regex: /^auto$/
|
||||
}
|
||||
}
|
||||
|
||||
for (var flag in app.flags) {
|
||||
if(!app.flags.hasOwnProperty(flag)) continue;
|
||||
app.flags[flag].match = function (val) {
|
||||
return val.match(this.regex)
|
||||
}
|
||||
}
|
||||
|
||||
app.add_theme = function (name, theme) {
|
||||
name != null && theme != null && (settings.themes[name] = theme);
|
||||
return app;
|
||||
};
|
||||
|
||||
app.add_image = function (src, el) {
|
||||
var node = selector(el);
|
||||
if (node.length) {
|
||||
for (var i = 0, l = node.length; i < l; i++) {
|
||||
var img = document.createElement("img")
|
||||
img.setAttribute("data-src", src);
|
||||
node[i].appendChild(img);
|
||||
}
|
||||
}
|
||||
return app;
|
||||
};
|
||||
|
||||
app.run = function (o) {
|
||||
var options = extend(settings, o), images = [];
|
||||
|
||||
if(options.images instanceof window.NodeList){
|
||||
imageNodes = options.images;
|
||||
}
|
||||
else if(options.images instanceof window.Node){
|
||||
imageNodes = [options.images];
|
||||
}
|
||||
else{
|
||||
imageNodes = selector(options.images);
|
||||
}
|
||||
|
||||
if(options.elements instanceof window.NodeList){
|
||||
bgnodes = options.bgnodes;
|
||||
}
|
||||
else if(options.bgnodes instanceof window.Node){
|
||||
bgnodes = [options.bgnodes];
|
||||
}
|
||||
else{
|
||||
bgnodes = selector(options.bgnodes);
|
||||
}
|
||||
|
||||
preempted = true;
|
||||
|
||||
for (i = 0, l = imageNodes.length; i < l; i++) images.push(imageNodes[i]);
|
||||
|
||||
var holdercss = document.getElementById("holderjs-style");
|
||||
|
||||
if(!holdercss){
|
||||
holdercss = document.createElement("style");
|
||||
holdercss.setAttribute("id", "holderjs-style");
|
||||
holdercss.type = "text/css";
|
||||
document.getElementsByTagName("head")[0].appendChild(holdercss);
|
||||
}
|
||||
|
||||
if(holdercss.styleSheet){
|
||||
holdercss.styleSheet += options.stylesheet;
|
||||
}
|
||||
else{
|
||||
holdercss.textContent+= options.stylesheet;
|
||||
}
|
||||
|
||||
var cssregex = new RegExp(options.domain + "\/(.*?)\"?\\)");
|
||||
|
||||
for (var l = bgnodes.length, i = 0; i < l; i++) {
|
||||
var src = window.getComputedStyle(bgnodes[i], null)
|
||||
.getPropertyValue("background-image");
|
||||
var flags = src.match(cssregex);
|
||||
if (flags) {
|
||||
var holder = parse_flags(flags[1].split("/"), options);
|
||||
if (holder) {
|
||||
render("background", bgnodes[i], holder, src);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (var l = images.length, i = 0; i < l; i++) {
|
||||
var src = images[i].getAttribute("src") || images[i].getAttribute("data-src");
|
||||
if (src != null && src.indexOf(options.domain) >= 0) {
|
||||
var holder = parse_flags(src.substr(src.lastIndexOf(options.domain) + options.domain.length + 1)
|
||||
.split("/"), options);
|
||||
if (holder) {
|
||||
if (holder.fluid) {
|
||||
fluid(images[i], holder, src);
|
||||
} else {
|
||||
render("image", images[i], holder, src);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return app;
|
||||
};
|
||||
|
||||
contentLoaded(win, function () {
|
||||
if (window.addEventListener) {
|
||||
window.addEventListener("resize", fluid_update, false);
|
||||
window.addEventListener("orientationchange", fluid_update, false);
|
||||
} else {
|
||||
window.attachEvent("onresize", fluid_update)
|
||||
}
|
||||
preempted || app.run();
|
||||
});
|
||||
|
||||
if ( typeof define === "function" && define.amd ) {
|
||||
define( "Holder", [], function () { return app; } );
|
||||
}
|
||||
|
||||
})(Holder, window);
|
||||
@@ -0,0 +1,8 @@
|
||||
/*
|
||||
HTML5 Shiv v3.6.2pre | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
|
||||
*/
|
||||
(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
|
||||
a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}</style>";
|
||||
c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
|
||||
"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",version:"3.6.2pre",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment();
|
||||
for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);
|
||||
@@ -15,16 +15,26 @@
|
||||
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<script src="assets/js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="shortcut icon" href="assets/ico/favicon.ico">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="assets/ico/favicon.png">
|
||||
|
||||
<script type="text/javascript">
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-146052-10']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body data-spy="scroll" data-target=".bs-docs-sidebar">
|
||||
@@ -170,6 +180,19 @@
|
||||
|
||||
<p><span class="label label-info">Heads up!</span> Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
|
||||
|
||||
<h3>Alignment classes</h3>
|
||||
<p>Easily realign text to components with text alignment classes.</p>
|
||||
<div class="bs-docs-example">
|
||||
<p class="text-left">Left aligned text.</p>
|
||||
<p class="text-center">Center aligned text.</p>
|
||||
<p class="text-right">Right aligned text.</p>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<p class="text-left">Left aligned text.</p>
|
||||
<p class="text-center">Center aligned text.</p>
|
||||
<p class="text-right">Right aligned text.</p>
|
||||
</pre>
|
||||
|
||||
<h3>Emphasis classes</h3>
|
||||
<p>Convey meaning through color with a handful of emphasis utility classes.</p>
|
||||
<div class="bs-docs-example">
|
||||
@@ -192,7 +215,7 @@
|
||||
|
||||
|
||||
<h2 id="abbreviations">Abbreviations</h2>
|
||||
<p>Stylized implemenation of HTML's <code><abbr></code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.</p>
|
||||
<p>Stylized implementation of HTML's <code><abbr></code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.</p>
|
||||
|
||||
<h3><code><abbr></code></h3>
|
||||
<p>For expanded text on long hover of an abbreviation, include the <code>title</code> attribute.</p>
|
||||
@@ -226,7 +249,7 @@
|
||||
</address>
|
||||
<address>
|
||||
<strong>Full Name</strong><br>
|
||||
<a href="mailto:#">first.last@gmail.com</a>
|
||||
<a href="mailto:#">first.last@example.com</a>
|
||||
</address>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
@@ -239,7 +262,7 @@
|
||||
|
||||
<address>
|
||||
<strong>Full Name</strong><br>
|
||||
<a href="mailto:#">first.last@gmail.com</a>
|
||||
<a href="mailto:#">first.last@example.com</a>
|
||||
</address>
|
||||
</pre>
|
||||
|
||||
@@ -350,7 +373,7 @@
|
||||
</pre>
|
||||
|
||||
<h3>Unstyled</h3>
|
||||
<p>A list of items with no <code>list-style</code> or additional left padding.</p>
|
||||
<p>Remove the default <code>list-style</code> and left padding on list items (immediate children only).</p>
|
||||
<div class="bs-docs-example">
|
||||
<ul class="unstyled">
|
||||
<li>Lorem ipsum dolor sit amet</li>
|
||||
@@ -374,6 +397,21 @@
|
||||
<ul class="unstyled">
|
||||
<li>...</li>
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h3>Inline</h3>
|
||||
<p>Place all list items on a single line with <code>inline-block</code> and some light padding.</p>
|
||||
<div class="bs-docs-example">
|
||||
<ul class="inline">
|
||||
<li>Lorem ipsum</li>
|
||||
<li>Phasellus iaculis</li>
|
||||
<li>Nulla volutpat</li>
|
||||
</ul>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="inline">
|
||||
<li>...</li>
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h3>Description</h3>
|
||||
@@ -438,7 +476,7 @@
|
||||
For example, <code><section></code> should be wrapped as inline.
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
For example, <code><section></code> should be wrapped as inline.
|
||||
For example, <code>&lt;section&gt;</code> should be wrapped as inline.
|
||||
</pre>
|
||||
|
||||
<h2>Basic block</h2>
|
||||
@@ -512,7 +550,7 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<p>Add any of the following classes to the <code>.table</code> base class.</p>
|
||||
|
||||
<h3><code>.table-striped</code></h3>
|
||||
<p>Adds zebra-striping to any table row within the <code><tbody></code> via the <code>:nth-child</code> CSS selector (not available in IE7-IE8).</p>
|
||||
<p>Adds zebra-striping to any table row within the <code><tbody></code> via the <code>:nth-child</code> CSS selector (not available in IE7-8).</p>
|
||||
<div class="bs-docs-example">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
@@ -829,8 +867,7 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<code><th></code>
|
||||
</td>
|
||||
<td>
|
||||
Special table cell for column (or row, depending on scope and placement) labels<br>
|
||||
Must be used within a <code><thead></code>
|
||||
Special table cell for column (or row, depending on scope and placement) labels
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -1308,6 +1345,54 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h4>Segmented dropdown groups</h4>
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-prepend">
|
||||
<div class="btn-group">
|
||||
<button class="btn" tabindex="-1">Action</button>
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<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 class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="input-append">
|
||||
<input type="text">
|
||||
<div class="btn-group">
|
||||
<button class="btn" tabindex="-1">Action</button>
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<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 class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<form>
|
||||
<div class="input-prepend">
|
||||
<div class="btn-group">...</div>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="input-append">
|
||||
<input type="text">
|
||||
<div class="btn-group">...</div>
|
||||
</div>
|
||||
</form>
|
||||
</pre>
|
||||
|
||||
<h4>Search form</h4>
|
||||
@@ -1416,7 +1501,7 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
</select>
|
||||
</pre>
|
||||
|
||||
<p>For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.</p>
|
||||
<p>For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and clears the float.</p>
|
||||
<form class="bs-docs-example" style="padding-bottom: 15px;">
|
||||
<div class="controls">
|
||||
<input class="span5" type="text" placeholder=".span5">
|
||||
@@ -1459,7 +1544,7 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
</pre>
|
||||
|
||||
<h3>Form actions</h3>
|
||||
<p>End a form with a group of actions (buttons). When placed within a <code>.form-horizontal</code>, the buttons will automatically indent to line up with the form controls.</p>
|
||||
<p>End a form with a group of actions (buttons). When placed within a <code>.form-actions</code>, the buttons will automatically indent to line up with the form controls.</p>
|
||||
<form class="bs-docs-example">
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Save changes</button>
|
||||
@@ -1506,6 +1591,16 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
|
||||
</pre>
|
||||
|
||||
<h3>Invalid inputs</h3>
|
||||
<p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
|
||||
<p>This is not available in versions of Internet Explorer 7-9 due to lack of support for CSS pseudo selectors.</p>
|
||||
<form class="bs-docs-example form-inline">
|
||||
<input class="span3" type="email" placeholder="test@example.com" required>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<input class="span3" type="email" required>
|
||||
</pre>
|
||||
|
||||
<h3>Disabled inputs</h3>
|
||||
@@ -1558,6 +1653,7 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<span class="help-inline">Something may have gone wrong</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group error">
|
||||
<label class="control-label" for="inputError">Input with error</label>
|
||||
<div class="controls">
|
||||
@@ -1565,6 +1661,15 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<span class="help-inline">Please correct the error</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group info">
|
||||
<label class="control-label" for="inputInfo">Input with info</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputInfo">
|
||||
<span class="help-inline">Username is already taken</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group success">
|
||||
<label class="control-label" for="inputSuccess">Input with success</label>
|
||||
<div class="controls">
|
||||
@@ -1753,9 +1858,9 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
|
||||
<p>Add classes to an <code><img></code> element to easily style images in any project.</p>
|
||||
<div class="bs-docs-example bs-docs-example-images">
|
||||
<img src="http://placehold.it/140x140" class="img-rounded">
|
||||
<img src="http://placehold.it/140x140" class="img-circle">
|
||||
<img src="http://placehold.it/140x140" class="img-polaroid">
|
||||
<img data-src="holder.js/140x140" class="img-rounded">
|
||||
<img data-src="holder.js/140x140" class="img-circle">
|
||||
<img data-src="holder.js/140x140" class="img-polaroid">
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<img src="..." class="img-rounded">
|
||||
@@ -1969,7 +2074,6 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group">
|
||||
|
||||
<a class="btn" href="#"><i class="icon-align-left"></i></a>
|
||||
<a class="btn" href="#"><i class="icon-align-center"></i></a>
|
||||
<a class="btn" href="#"><i class="icon-align-right"></i></a>
|
||||
@@ -2006,15 +2110,18 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h5>Small button</h5>
|
||||
<h5>Button sizes</h5>
|
||||
<div class="bs-docs-example">
|
||||
<a class="btn btn-small" href="#"><i class="icon-star"></i></a>
|
||||
<a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
|
||||
<a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a>
|
||||
<a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<a class="btn btn-small" href="#"><i class="icon-star"></i></a>
|
||||
<a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
|
||||
<a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a>
|
||||
<a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>
|
||||
</pre>
|
||||
|
||||
|
||||
<h4>Navigation</h4>
|
||||
<div class="bs-docs-example">
|
||||
<div class="well" style="padding: 8px 0; margin-bottom: 0;">
|
||||
@@ -2073,16 +2180,15 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
================================================== -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p class="pull-right"><a href="#">Back to top</a></p>
|
||||
<p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
|
||||
<p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
<p><a href="http://glyphicons.com">Glyphicons Free</a> licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
<ul class="footer-links">
|
||||
<li><a href="http://blog.getbootstrap.com">Blog</a></li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li>
|
||||
<li><a href="https://github.com/twbs/bootstrap/issues?state=open">Issues</a></li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
|
||||
<li><a href="https://github.com/twbs/bootstrap/releases">Changelog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -2094,7 +2200,6 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
||||
<script src="assets/js/jquery.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="assets/js/bootstrap-transition.js"></script>
|
||||
<script src="assets/js/bootstrap-alert.js"></script>
|
||||
<script src="assets/js/bootstrap-modal.js"></script>
|
||||
@@ -2108,9 +2213,28 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<script src="assets/js/bootstrap-carousel.js"></script>
|
||||
<script src="assets/js/bootstrap-typeahead.js"></script>
|
||||
<script src="assets/js/bootstrap-affix.js"></script>
|
||||
|
||||
<script src="assets/js/holder/holder.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
|
||||
<script src="assets/js/application.js"></script>
|
||||
|
||||
|
||||
<!-- Analytics
|
||||
================================================== -->
|
||||
<script>
|
||||
var _gauges = _gauges || [];
|
||||
(function() {
|
||||
var t = document.createElement('script');
|
||||
t.type = 'text/javascript';
|
||||
t.async = true;
|
||||
t.id = 'gauges-tracker';
|
||||
t.setAttribute('data-site-id', '4f0dc9fef5a1f55508000013');
|
||||
t.src = '//secure.gaug.es/track.js';
|
||||
var s = document.getElementsByTagName('script')[0];
|
||||
s.parentNode.insertBefore(t, s);
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -15,16 +15,26 @@
|
||||
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<script src="assets/js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="shortcut icon" href="assets/ico/favicon.ico">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="assets/ico/favicon.png">
|
||||
|
||||
<script type="text/javascript">
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-146052-10']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body data-spy="scroll" data-target=".bs-docs-sidebar">
|
||||
@@ -161,16 +171,35 @@
|
||||
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h3>Disabled menu options</h3>
|
||||
<p>Add <code>.disabled</code> to a <code><li></code> in the dropdown to disable the link.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="dropdown clearfix">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
|
||||
<li><a tabindex="-1" href="#">Regular link</a></li>
|
||||
<li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
|
||||
<li><a tabindex="-1" href="#">Another link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
|
||||
<li><a tabindex="-1" href="#">Regular link</a></li>
|
||||
<li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
|
||||
<li><a tabindex="-1" href="#">Another link</a></li>
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h3>Sub menus on dropdowns</h3>
|
||||
<p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p>
|
||||
<div class="bs-docs-example" style="min-height: 180px;">
|
||||
<div class="bs-docs-example bs-docs-example-submenus">
|
||||
|
||||
<div class="pull-left">
|
||||
<p class="muted">Default</p>
|
||||
<div class="dropdown clearfix">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
|
||||
<li><a tabindex="-1" href="#">Action</a></li>
|
||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
@@ -189,10 +218,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pull-left" style="margin-left: 20px;">
|
||||
<div class="pull-left">
|
||||
<p class="muted">Dropup</p>
|
||||
<div class="dropup">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
|
||||
<li><a tabindex="-1" href="#">Action</a></li>
|
||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
@@ -211,10 +240,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pull-left" style="margin-left: 20px;">
|
||||
<div class="pull-left">
|
||||
<p class="muted">Left submenu</p>
|
||||
<div class="dropdown">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
|
||||
<li><a tabindex="-1" href="#">Action</a></li>
|
||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
@@ -272,9 +301,9 @@
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="btn-group">
|
||||
<button class="btn">1</button>
|
||||
<button class="btn">2</button>
|
||||
<button class="btn">3</button>
|
||||
<button class="btn">Left</button>
|
||||
<button class="btn">Middle</button>
|
||||
<button class="btn">Right</button>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
@@ -1496,6 +1525,7 @@
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -1525,7 +1555,7 @@
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
<li class="disabled"><a href="#">Prev</a></li>
|
||||
<li class="disabled"><a href="#">&laquo;</a></li>
|
||||
<li class="active"><a href="#">1</a></li>
|
||||
...
|
||||
</ul>
|
||||
@@ -1535,7 +1565,7 @@
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
<li class="disabled"><span>Prev</span></li>
|
||||
<li class="disabled"><span>&laquo;</span></li>
|
||||
<li class="active"><span>1</span></li>
|
||||
...
|
||||
</ul>
|
||||
@@ -1859,6 +1889,9 @@
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Easily collapsible</h3>
|
||||
<p>For easy implementation, labels and badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@@ -1921,22 +1954,22 @@
|
||||
<ul class="thumbnails">
|
||||
<li class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x180" alt="">
|
||||
<img data-src="holder.js/260x180" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x180" alt="">
|
||||
<img data-src="holder.js/260x180" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x180" alt="">
|
||||
<img data-src="holder.js/260x180" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x180" alt="">
|
||||
<img data-src="holder.js/260x180" alt="">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -1948,7 +1981,7 @@
|
||||
<ul class="thumbnails">
|
||||
<li class="span4">
|
||||
<div class="thumbnail">
|
||||
<img src="http://placehold.it/300x200" alt="">
|
||||
<img data-src="holder.js/300x200" alt="">
|
||||
<div class="caption">
|
||||
<h3>Thumbnail label</h3>
|
||||
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
@@ -1958,7 +1991,7 @@
|
||||
</li>
|
||||
<li class="span4">
|
||||
<div class="thumbnail">
|
||||
<img src="http://placehold.it/300x200" alt="">
|
||||
<img data-src="holder.js/300x200" alt="">
|
||||
<div class="caption">
|
||||
<h3>Thumbnail label</h3>
|
||||
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
@@ -1968,7 +2001,7 @@
|
||||
</li>
|
||||
<li class="span4">
|
||||
<div class="thumbnail">
|
||||
<img src="http://placehold.it/300x200" alt="">
|
||||
<img data-src="holder.js/300x200" alt="">
|
||||
<div class="caption">
|
||||
<h3>Thumbnail label</h3>
|
||||
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
@@ -1994,7 +2027,7 @@
|
||||
<ul class="thumbnails">
|
||||
<li class="span4">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/300x200" alt="">
|
||||
<img data-src="holder.js/300x200" alt="">
|
||||
</a>
|
||||
</li>
|
||||
...
|
||||
@@ -2005,7 +2038,7 @@
|
||||
<ul class="thumbnails">
|
||||
<li class="span4">
|
||||
<div class="thumbnail">
|
||||
<img src="http://placehold.it/300x200" alt="">
|
||||
<img data-src="holder.js/300x200" alt="">
|
||||
<h3>Thumbnail label</h3>
|
||||
<p>Thumbnail caption...</p>
|
||||
</div>
|
||||
@@ -2019,27 +2052,27 @@
|
||||
<ul class="thumbnails">
|
||||
<li class="span4">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/360x270" alt="">
|
||||
<img data-src="holder.js/360x270" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x120" alt="">
|
||||
<img data-src="holder.js/260x120" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span2">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/160x120" alt="">
|
||||
<img data-src="holder.js/160x120" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x120" alt="">
|
||||
<img data-src="holder.js/260x120" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span2">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/160x120" alt="">
|
||||
<img data-src="holder.js/160x120" alt="">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -2066,16 +2099,16 @@
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="alert">
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<button type="button" class="close" data-dismiss="alert">&times;</button>
|
||||
<strong>Warning!</strong> Best check yo self, you're not looking too good.
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>Dismiss buttons</h3>
|
||||
<p>Mobile Safari and Mobile Opera browsers, in addition to the <code>data-dismiss="alert"</code> attribute, require an <code>href="#"</code> for the dismissal of alerts when using an <code><a></code> tag.</p>
|
||||
<pre class="prettyprint linenums"><a href="#" class="close" data-dismiss="alert">×</a></pre>
|
||||
<pre class="prettyprint linenums"><a href="#" class="close" data-dismiss="alert">&times;</a></pre>
|
||||
<p>Alternatively, you may use a <code><button></code> element with the data attribute, which we have opted to do for our docs. When using <code><button></code>, you must include <code>type="button"</code> or your forms may not submit.</p>
|
||||
<pre class="prettyprint linenums"><button type="button" class="close" data-dismiss="alert">×</button></pre>
|
||||
<pre class="prettyprint linenums"><button type="button" class="close" data-dismiss="alert">&times;</button></pre>
|
||||
|
||||
<h3>Dismiss alerts via JavaScript</h3>
|
||||
<p>Use the <a href="./javascript.html#alerts">alerts jQuery plugin</a> for quick and easy dismissal of alerts.</p>
|
||||
@@ -2095,7 +2128,7 @@
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="alert alert-block">
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<button type="button" class="close" data-dismiss="alert">&times;</button>
|
||||
<h4>Warning!</h4>
|
||||
Best check yo self, you're not...
|
||||
</div>
|
||||
@@ -2311,7 +2344,7 @@
|
||||
<div class="bs-docs-example">
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
<img class="media-object" data-src="holder.js/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Media heading</h4>
|
||||
@@ -2320,14 +2353,14 @@
|
||||
</div>
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
<img class="media-object" data-src="holder.js/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Media heading</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
<img class="media-object" data-src="holder.js/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Media heading</h4>
|
||||
@@ -2340,7 +2373,7 @@
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
<img class="media-object" data-src="holder.js/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Media heading</h4>
|
||||
@@ -2364,7 +2397,7 @@
|
||||
<ul class="media-list">
|
||||
<li class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
<img class="media-object" data-src="holder.js/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Media heading</h4>
|
||||
@@ -2372,7 +2405,7 @@
|
||||
<!-- Nested media object -->
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
<img class="media-object" data-src="holder.js/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Nested media heading</h4>
|
||||
@@ -2380,7 +2413,7 @@
|
||||
<!-- Nested media object -->
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
<img class="media-object" data-src="holder.js/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Nested media heading</h4>
|
||||
@@ -2392,7 +2425,7 @@
|
||||
<!-- Nested media object -->
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
<img class="media-object" data-src="holder.js/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Nested media heading</h4>
|
||||
@@ -2403,7 +2436,7 @@
|
||||
</li>
|
||||
<li class="media">
|
||||
<a class="pull-right" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
<img class="media-object" data-src="holder.js/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Media heading</h4>
|
||||
@@ -2416,7 +2449,7 @@
|
||||
<ul class="media-list">
|
||||
<li class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
<img class="media-object" data-src="holder.js/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Media heading</h4>
|
||||
@@ -2485,7 +2518,7 @@
|
||||
<p><button class="close" style="float: none;">×</button></p>
|
||||
</div>
|
||||
<pre class="prettyprint linenums"><button class="close">&times;</button></pre>
|
||||
<p>iOS devices require an href="#" for click events if you would rather use an anchor.</p>
|
||||
<p>iOS devices require an <code>href="#"</code> for click events if you would rather use an anchor.</p>
|
||||
<pre class="prettyprint linenums"><a class="close" href="#">&times;</a></pre>
|
||||
|
||||
<h2>Helper classes</h2>
|
||||
@@ -2558,16 +2591,15 @@ class="clearfix"
|
||||
================================================== -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p class="pull-right"><a href="#">Back to top</a></p>
|
||||
<p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
|
||||
<p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
<p><a href="http://glyphicons.com">Glyphicons Free</a> licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
<ul class="footer-links">
|
||||
<li><a href="http://blog.getbootstrap.com">Blog</a></li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li>
|
||||
<li><a href="https://github.com/twbs/bootstrap/issues?state=open">Issues</a></li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
|
||||
<li><a href="https://github.com/twbs/bootstrap/releases">Changelog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -2579,7 +2611,6 @@ class="clearfix"
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
||||
<script src="assets/js/jquery.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="assets/js/bootstrap-transition.js"></script>
|
||||
<script src="assets/js/bootstrap-alert.js"></script>
|
||||
<script src="assets/js/bootstrap-modal.js"></script>
|
||||
@@ -2593,9 +2624,28 @@ class="clearfix"
|
||||
<script src="assets/js/bootstrap-carousel.js"></script>
|
||||
<script src="assets/js/bootstrap-typeahead.js"></script>
|
||||
<script src="assets/js/bootstrap-affix.js"></script>
|
||||
|
||||
<script src="assets/js/holder/holder.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
|
||||
<script src="assets/js/application.js"></script>
|
||||
|
||||
|
||||
<!-- Analytics
|
||||
================================================== -->
|
||||
<script>
|
||||
var _gauges = _gauges || [];
|
||||
(function() {
|
||||
var t = document.createElement('script');
|
||||
t.type = 'text/javascript';
|
||||
t.async = true;
|
||||
t.id = 'gauges-tracker';
|
||||
t.setAttribute('data-site-id', '4f0dc9fef5a1f55508000013');
|
||||
t.src = '//secure.gaug.es/track.js';
|
||||
var s = document.getElementsByTagName('script')[0];
|
||||
s.parentNode.insertBefore(t, s);
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -15,16 +15,26 @@
|
||||
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<script src="assets/js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="shortcut icon" href="assets/ico/favicon.ico">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="assets/ico/favicon.png">
|
||||
|
||||
<script type="text/javascript">
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-146052-10']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body data-spy="scroll" data-target=".bs-docs-sidebar">
|
||||
@@ -74,7 +84,7 @@
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<div class="container">
|
||||
<h1>Customize and download</h1>
|
||||
<p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.</p>
|
||||
<p class="lead"><a href="https://github.com/twitter/bootstrap/archive/v2.3.2.zip">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -144,7 +154,6 @@
|
||||
</div><!-- /span -->
|
||||
<div class="span3">
|
||||
<h3>Miscellaneous</h3>
|
||||
<label class="checkbox"><input checked="checked" type="checkbox" value="media.less"> Media object</label>
|
||||
<label class="checkbox"><input checked="checked" type="checkbox" value="wells.less"> Wells</label>
|
||||
<label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> Close icon</label>
|
||||
<label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> Utilities</label>
|
||||
@@ -370,7 +379,7 @@
|
||||
<label>@btnPrimaryBackground</label>
|
||||
<input type="text" class="span3" placeholder="@linkColor">
|
||||
<label>@btnPrimaryBackgroundHighlight</label>
|
||||
<input type="text" class="span3" placeholder="darken(@white, 10%);">
|
||||
<input type="text" class="span3" placeholder="darken(@white, 10%)">
|
||||
|
||||
</div><!-- /span -->
|
||||
<div class="span3">
|
||||
@@ -450,7 +459,7 @@
|
||||
</h1>
|
||||
</div>
|
||||
<div class="download-btn">
|
||||
<a class="btn btn-primary" href="#" >Customize and Download</a>
|
||||
<a class="btn btn-primary" href="#" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Customize and Download</a>
|
||||
<h4>What's included?</h4>
|
||||
<p>Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.</p>
|
||||
</div>
|
||||
@@ -470,16 +479,15 @@
|
||||
================================================== -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p class="pull-right"><a href="#">Back to top</a></p>
|
||||
<p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
|
||||
<p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
<p><a href="http://glyphicons.com">Glyphicons Free</a> licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
<ul class="footer-links">
|
||||
<li><a href="http://blog.getbootstrap.com">Blog</a></li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li>
|
||||
<li><a href="https://github.com/twbs/bootstrap/issues?state=open">Issues</a></li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
|
||||
<li><a href="https://github.com/twbs/bootstrap/releases">Changelog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -491,7 +499,6 @@
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
||||
<script src="assets/js/jquery.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="assets/js/bootstrap-transition.js"></script>
|
||||
<script src="assets/js/bootstrap-alert.js"></script>
|
||||
<script src="assets/js/bootstrap-modal.js"></script>
|
||||
@@ -505,9 +512,28 @@
|
||||
<script src="assets/js/bootstrap-carousel.js"></script>
|
||||
<script src="assets/js/bootstrap-typeahead.js"></script>
|
||||
<script src="assets/js/bootstrap-affix.js"></script>
|
||||
|
||||
<script src="assets/js/holder/holder.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
|
||||
<script src="assets/js/application.js"></script>
|
||||
|
||||
|
||||
<!-- Analytics
|
||||
================================================== -->
|
||||
<script>
|
||||
var _gauges = _gauges || [];
|
||||
(function() {
|
||||
var t = document.createElement('script');
|
||||
t.type = 'text/javascript';
|
||||
t.async = true;
|
||||
t.id = 'gauges-tracker';
|
||||
t.setAttribute('data-site-id', '4f0dc9fef5a1f55508000013');
|
||||
t.src = '//secure.gaug.es/track.js';
|
||||
var s = document.getElementsByTagName('script')[0];
|
||||
s.parentNode.insertBefore(t, s);
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -28,11 +28,17 @@
|
||||
|
||||
/* Special class on .container surrounding .navbar, used for positioning it into place. */
|
||||
.navbar-wrapper {
|
||||
position: relative;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
margin-top: 20px;
|
||||
margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
|
||||
}
|
||||
.navbar-wrapper .navbar {
|
||||
|
||||
}
|
||||
|
||||
/* Remove border and change up box shadow for more contrast */
|
||||
.navbar .navbar-inner {
|
||||
@@ -62,7 +68,7 @@
|
||||
|
||||
|
||||
|
||||
/* CUSTOMIZE THE NAVBAR
|
||||
/* CUSTOMIZE THE CAROUSEL
|
||||
-------------------------------------------------- */
|
||||
|
||||
/* Carousel base class */
|
||||
@@ -71,24 +77,27 @@
|
||||
}
|
||||
|
||||
.carousel .container {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.carousel-control {
|
||||
height: 80px;
|
||||
margin-top: 0;
|
||||
font-size: 120px;
|
||||
text-shadow: 0 1px 1px rgba(0,0,0,.4);
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
font-size: 120px;
|
||||
margin-top: 0;
|
||||
text-shadow: 0 1px 1px rgba(0,0,0,.4);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.carousel .item {
|
||||
height: 500px;
|
||||
}
|
||||
.carousel img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
min-width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
@@ -98,7 +107,7 @@
|
||||
position: static;
|
||||
max-width: 550px;
|
||||
padding: 0 20px;
|
||||
margin-bottom: 100px;
|
||||
margin-top: 200px;
|
||||
}
|
||||
.carousel-caption h1,
|
||||
.carousel-caption .lead {
|
||||
@@ -219,7 +228,7 @@
|
||||
.carousel-caption {
|
||||
width: 65%;
|
||||
padding: 0 70px;
|
||||
margin-bottom: 40px;
|
||||
margin-top: 100px;
|
||||
}
|
||||
.carousel-caption h1 {
|
||||
font-size: 30px;
|
||||
@@ -246,15 +255,15 @@
|
||||
|
||||
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<script src="../assets/js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Fav and touch icons -->
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -263,43 +272,45 @@
|
||||
|
||||
<!-- NAVBAR
|
||||
================================================== -->
|
||||
<!-- Wrap the .navbar in .container to center it on the page and provide easy way to target it with .navbar-wrapper. -->
|
||||
<div class="container navbar-wrapper">
|
||||
<div class="navbar-wrapper">
|
||||
<!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
|
||||
<div class="container">
|
||||
|
||||
<div class="navbar navbar-inverse">
|
||||
<div class="navbar-inner">
|
||||
<!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
<a class="brand" href="#">Project name</a>
|
||||
<!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<!-- Read about Bootstrap dropdowns at http://twitter.github.com/bootstrap/javascript.html#dropdowns -->
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <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 class="divider"></li>
|
||||
<li class="nav-header">Nav header</li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a href="#">One more separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.nav-collapse -->
|
||||
</div><!-- /.navbar-inner -->
|
||||
</div><!-- /.navbar -->
|
||||
<div class="navbar navbar-inverse">
|
||||
<div class="navbar-inner">
|
||||
<!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
|
||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="brand" href="#">Project name</a>
|
||||
<!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<!-- Read about Bootstrap dropdowns at http://twbs.github.com/bootstrap/javascript.html#dropdowns -->
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <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 class="divider"></li>
|
||||
<li class="nav-header">Nav header</li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a href="#">One more separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.nav-collapse -->
|
||||
</div><!-- /.navbar-inner -->
|
||||
</div><!-- /.navbar -->
|
||||
|
||||
</div><!-- /.container -->
|
||||
</div> <!-- /.container -->
|
||||
</div><!-- /.navbar-wrapper -->
|
||||
|
||||
|
||||
|
||||
@@ -353,19 +364,19 @@
|
||||
<!-- Three columns of text below the carousel -->
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<img class="img-circle" src="http://placehold.it/140x140">
|
||||
<img class="img-circle" data-src="holder.js/140x140">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
|
||||
<p><a class="btn" href="#">View details »</a></p>
|
||||
</div><!-- /.span4 -->
|
||||
<div class="span4">
|
||||
<img class="img-circle" src="http://placehold.it/140x140">
|
||||
<img class="img-circle" data-src="holder.js/140x140">
|
||||
<h2>Heading</h2>
|
||||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
||||
<p><a class="btn" href="#">View details »</a></p>
|
||||
</div><!-- /.span4 -->
|
||||
<div class="span4">
|
||||
<img class="img-circle" src="http://placehold.it/140x140">
|
||||
<img class="img-circle" data-src="holder.js/140x140">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
||||
<p><a class="btn" href="#">View details »</a></p>
|
||||
@@ -407,7 +418,7 @@
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<p class="pull-right"><a href="#">Back to top</a></p>
|
||||
<p>© 2012 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
|
||||
<p>© 2013 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
|
||||
</footer>
|
||||
|
||||
</div><!-- /.container -->
|
||||
@@ -438,5 +449,6 @@
|
||||
})
|
||||
}(window.jQuery)
|
||||
</script>
|
||||
<script src="../assets/js/holder/holder.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -17,20 +17,29 @@
|
||||
.sidebar-nav {
|
||||
padding: 9px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
/* Enable use of floated navbar text */
|
||||
.navbar-text.pull-right {
|
||||
float: none;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
|
||||
|
||||
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<script src="../assets/js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Fav and touch icons -->
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -38,11 +47,11 @@
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container-fluid">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
</button>
|
||||
<a class="brand" href="#">Project name</a>
|
||||
<div class="nav-collapse collapse">
|
||||
<p class="navbar-text pull-right">
|
||||
@@ -86,7 +95,7 @@
|
||||
<div class="hero-unit">
|
||||
<h1>Hello, world!</h1>
|
||||
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
|
||||
<p><a class="btn btn-primary btn-large">Learn more »</a></p>
|
||||
<p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="span4">
|
||||
@@ -128,7 +137,7 @@
|
||||
<hr>
|
||||
|
||||
<footer>
|
||||
<p>© Company 2012</p>
|
||||
<p>© Company 2013</p>
|
||||
</footer>
|
||||
|
||||
</div><!--/.fluid-container-->
|
||||
|
||||
@@ -19,15 +19,15 @@
|
||||
|
||||
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<script src="../assets/js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Fav and touch icons -->
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -35,11 +35,11 @@
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
</button>
|
||||
<a class="brand" href="#">Project name</a>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
@@ -75,7 +75,7 @@
|
||||
<div class="hero-unit">
|
||||
<h1>Hello, world!</h1>
|
||||
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
|
||||
<p><a class="btn btn-primary btn-large">Learn more »</a></p>
|
||||
<p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p>
|
||||
</div>
|
||||
|
||||
<!-- Example row of columns -->
|
||||
@@ -100,7 +100,7 @@
|
||||
<hr>
|
||||
|
||||
<footer>
|
||||
<p>© Company 2012</p>
|
||||
<p>© Company 2013</p>
|
||||
</footer>
|
||||
|
||||
</div> <!-- /container -->
|
||||
|
||||
@@ -57,6 +57,8 @@
|
||||
}
|
||||
.navbar .nav {
|
||||
margin: 0;
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
.navbar .nav li {
|
||||
display: table-cell;
|
||||
@@ -82,15 +84,15 @@
|
||||
|
||||
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<script src="../assets/js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Fav and touch icons -->
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -146,7 +148,7 @@
|
||||
<hr>
|
||||
|
||||
<div class="footer">
|
||||
<p>© Company 2012</p>
|
||||
<p>© Company 2013</p>
|
||||
</div>
|
||||
|
||||
</div> <!-- /container -->
|
||||
@@ -50,15 +50,15 @@
|
||||
|
||||
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<script src="../assets/js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Fav and touch icons -->
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -111,7 +111,7 @@
|
||||
<hr>
|
||||
|
||||
<div class="footer">
|
||||
<p>© Company 2012</p>
|
||||
<p>© Company 2013</p>
|
||||
</div>
|
||||
|
||||
</div> <!-- /container -->
|
||||
|
||||
@@ -46,15 +46,15 @@
|
||||
|
||||
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<script src="../assets/js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Fav and touch icons -->
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@@ -18,15 +18,15 @@
|
||||
|
||||
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<script src="../assets/js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Fav and touch icons -->
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -34,11 +34,11 @@
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
</button>
|
||||
<a class="brand" href="#">Project name</a>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Sticky footer · Twitter Bootstrap</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- CSS -->
|
||||
<link href="../assets/css/bootstrap.css" rel="stylesheet">
|
||||
<style type="text/css">
|
||||
|
||||
/* Sticky footer styles
|
||||
-------------------------------------------------- */
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
/* The html and body elements cannot have any padding or margin. */
|
||||
}
|
||||
|
||||
/* Wrapper for page content to push down footer */
|
||||
#wrap {
|
||||
min-height: 100%;
|
||||
height: auto !important;
|
||||
height: 100%;
|
||||
/* Negative indent footer by it's height */
|
||||
margin: 0 auto -60px;
|
||||
}
|
||||
|
||||
/* Set the fixed height of the footer here */
|
||||
#push,
|
||||
#footer {
|
||||
height: 60px;
|
||||
}
|
||||
#footer {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* Lastly, apply responsive CSS fixes as necessary */
|
||||
@media (max-width: 767px) {
|
||||
#footer {
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Custom page CSS
|
||||
-------------------------------------------------- */
|
||||
/* Not required for template or sticky footer method. */
|
||||
|
||||
#wrap > .container {
|
||||
padding-top: 60px;
|
||||
}
|
||||
.container .credit {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
</style>
|
||||
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
|
||||
|
||||
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../assets/js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Fav and touch icons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<!-- Part 1: Wrap all page content here -->
|
||||
<div id="wrap">
|
||||
|
||||
<!-- Fixed navbar -->
|
||||
<div class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="brand" href="#">Project name</a>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <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 class="divider"></li>
|
||||
<li class="nav-header">Nav header</li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a href="#">One more separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.nav-collapse -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Begin page content -->
|
||||
<div class="container">
|
||||
<div class="page-header">
|
||||
<h1>Sticky footer with fixed navbar</h1>
|
||||
</div>
|
||||
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
|
||||
<p>Back to <a href="./sticky-footer.html">the sticky footer</a> minus the navbar.</p>
|
||||
</div>
|
||||
|
||||
<div id="push"></div>
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Le javascript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="../assets/js/jquery.js"></script>
|
||||
<script src="../assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../assets/js/bootstrap-alert.js"></script>
|
||||
<script src="../assets/js/bootstrap-modal.js"></script>
|
||||
<script src="../assets/js/bootstrap-dropdown.js"></script>
|
||||
<script src="../assets/js/bootstrap-scrollspy.js"></script>
|
||||
<script src="../assets/js/bootstrap-tab.js"></script>
|
||||
<script src="../assets/js/bootstrap-tooltip.js"></script>
|
||||
<script src="../assets/js/bootstrap-popover.js"></script>
|
||||
<script src="../assets/js/bootstrap-button.js"></script>
|
||||
<script src="../assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../assets/js/bootstrap-carousel.js"></script>
|
||||
<script src="../assets/js/bootstrap-typeahead.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -67,15 +67,15 @@
|
||||
|
||||
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<script src="../assets/js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Fav and touch icons -->
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -90,6 +90,7 @@
|
||||
<h1>Sticky footer</h1>
|
||||
</div>
|
||||
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
|
||||
<p>Use <a href="./sticky-footer-navbar.html">the sticky footer</a> with a fixed navbar if need be, too.</p>
|
||||
</div>
|
||||
|
||||
<div id="push"></div>
|
||||
|
||||
@@ -15,16 +15,26 @@
|
||||
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<script src="assets/js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="shortcut icon" href="assets/ico/favicon.ico">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="assets/ico/favicon.png">
|
||||
|
||||
<script type="text/javascript">
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-146052-10']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body data-spy="scroll" data-target=".bs-docs-sidebar">
|
||||
@@ -136,16 +146,8 @@
|
||||
|
||||
<h2>Tools for compiling</h2>
|
||||
|
||||
<h3>Node with makefile</h3>
|
||||
<p>Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:</p>
|
||||
<pre>$ npm install -g less jshint recess uglify-js</pre>
|
||||
<p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p>
|
||||
<p>Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p>
|
||||
|
||||
<h3>Command line</h3>
|
||||
<p>Install the LESS command line tool via Node and run the following command:</p>
|
||||
<pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre>
|
||||
<p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p>
|
||||
<p>Follow <a href="https://github.com/twbs/bootstrap#developers">the instructions in the project readme</a> on GitHub for compiling via command line.</p>
|
||||
|
||||
<h3>JavaScript</h3>
|
||||
<p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code><head></code>.</p>
|
||||
@@ -245,16 +247,15 @@
|
||||
================================================== -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p class="pull-right"><a href="#">Back to top</a></p>
|
||||
<p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
|
||||
<p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
<p><a href="http://glyphicons.com">Glyphicons Free</a> licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
<ul class="footer-links">
|
||||
<li><a href="http://blog.getbootstrap.com">Blog</a></li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li>
|
||||
<li><a href="https://github.com/twbs/bootstrap/issues?state=open">Issues</a></li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
|
||||
<li><a href="https://github.com/twbs/bootstrap/releases">Changelog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -266,7 +267,6 @@
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
||||
<script src="assets/js/jquery.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="assets/js/bootstrap-transition.js"></script>
|
||||
<script src="assets/js/bootstrap-alert.js"></script>
|
||||
<script src="assets/js/bootstrap-modal.js"></script>
|
||||
@@ -280,9 +280,28 @@
|
||||
<script src="assets/js/bootstrap-carousel.js"></script>
|
||||
<script src="assets/js/bootstrap-typeahead.js"></script>
|
||||
<script src="assets/js/bootstrap-affix.js"></script>
|
||||
|
||||
<script src="assets/js/holder/holder.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
|
||||
<script src="assets/js/application.js"></script>
|
||||
|
||||
|
||||
<!-- Analytics
|
||||
================================================== -->
|
||||
<script>
|
||||
var _gauges = _gauges || [];
|
||||
(function() {
|
||||
var t = document.createElement('script');
|
||||
t.type = 'text/javascript';
|
||||
t.async = true;
|
||||
t.id = 'gauges-tracker';
|
||||
t.setAttribute('data-site-id', '4f0dc9fef5a1f55508000013');
|
||||
t.src = '//secure.gaug.es/track.js';
|
||||
var s = document.getElementsByTagName('script')[0];
|
||||
s.parentNode.insertBefore(t, s);
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -15,16 +15,26 @@
|
||||
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<script src="assets/js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="shortcut icon" href="assets/ico/favicon.ico">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="assets/ico/favicon.png">
|
||||
|
||||
<script type="text/javascript">
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-146052-10']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body data-spy="scroll" data-target=".bs-docs-sidebar">
|
||||
@@ -110,12 +120,12 @@
|
||||
<div class="span6">
|
||||
<h2>Download compiled</h2>
|
||||
<p><strong>Fastest way to get started:</strong> get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.</p>
|
||||
<p><a class="btn btn-large btn-primary" href="assets/bootstrap.zip" >Download Bootstrap</a></p>
|
||||
<p><a class="btn btn-large btn-primary" href="assets/bootstrap.zip" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<h2>Download source</h2>
|
||||
<p>Get the original files for all CSS and JavaScript, along with a local copy of the docs by downloading the latest version directly from GitHub.</p>
|
||||
<p><a class="btn btn-large" href="https://github.com/twitter/bootstrap/zipball/master" >Download Bootstrap source</a></p>
|
||||
<p><a class="btn btn-large" href="https://github.com/twbs/bootstrap/zipball/master" >Download Bootstrap source</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -157,13 +167,13 @@
|
||||
<p class="lead">Bootstrap comes equipped with HTML, CSS, and JS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the <a href="http://getbootstrap.com">Bootstrap documentation</a>.</p>
|
||||
|
||||
<h2>Docs sections</h2>
|
||||
<h4><a href="http://twitter.github.com/bootstrap/scaffolding.html">Scaffolding</a></h4>
|
||||
<h4><a href="http://twbs.github.com/bootstrap/scaffolding.html">Scaffolding</a></h4>
|
||||
<p>Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.</p>
|
||||
<h4><a href="http://twitter.github.com/bootstrap/base-css.html">Base CSS</a></h4>
|
||||
<h4><a href="http://twbs.github.com/bootstrap/base-css.html">Base CSS</a></h4>
|
||||
<p>Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes <a href="http://glyphicons.com">Glyphicons</a>, a great little icon set.</p>
|
||||
<h4><a href="http://twitter.github.com/bootstrap/components.html">Components</a></h4>
|
||||
<h4><a href="http://twbs.github.com/bootstrap/components.html">Components</a></h4>
|
||||
<p>Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.</p>
|
||||
<h4><a href="http://twitter.github.com/bootstrap/javascript.html">JavaScript plugins</a></h4>
|
||||
<h4><a href="http://twbs.github.com/bootstrap/javascript.html">JavaScript plugins</a></h4>
|
||||
<p>Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.</p>
|
||||
|
||||
<h2>List of components</h2>
|
||||
@@ -198,17 +208,18 @@
|
||||
<div class="page-header">
|
||||
<h1>4. Basic HTML template</h1>
|
||||
</div>
|
||||
<p class="lead">With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <a href="#file-structure">File structure</a>.</p>
|
||||
<p class="lead">With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <a href="./getting-started.html#file-structure">File structure</a>.</p>
|
||||
<p>Now, here's a look at a <strong>typical HTML file</strong>:</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Bootstrap 101 Template</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello, world!</h1>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
<script src="http://code.jquery.com/jquery.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</pre>
|
||||
@@ -218,12 +229,13 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Bootstrap 101 Template</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- Bootstrap -->
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello, world!</h1>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
<script src="http://code.jquery.com/jquery.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -243,21 +255,21 @@
|
||||
<ul class="thumbnails bootstrap-examples">
|
||||
<li class="span3">
|
||||
<a class="thumbnail" href="examples/starter-template.html">
|
||||
<img src="assets/img/examples/bootstrap-example-starter.jpg" alt="">
|
||||
<img src="assets/img/examples/bootstrap-example-starter.png" alt="">
|
||||
</a>
|
||||
<h4>Starter template</h4>
|
||||
<p>A barebones HTML document with all the Bootstrap CSS and JavaScript included.</p>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a class="thumbnail" href="examples/hero.html">
|
||||
<img src="assets/img/examples/bootstrap-example-hero.jpg" alt="">
|
||||
<img src="assets/img/examples/bootstrap-example-marketing.png" alt="">
|
||||
</a>
|
||||
<h4>Basic marketing site</h4>
|
||||
<p>Featuring a hero unit for a primary message and three supporting elements.</p>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a class="thumbnail" href="examples/fluid.html">
|
||||
<img src="assets/img/examples/bootstrap-example-fluid.jpg" alt="">
|
||||
<img src="assets/img/examples/bootstrap-example-fluid.png" alt="">
|
||||
</a>
|
||||
<h4>Fluid layout</h4>
|
||||
<p>Uses our new responsive, fluid grid system to create a seamless liquid layout.</p>
|
||||
@@ -270,6 +282,13 @@
|
||||
<h4>Narrow marketing</h4>
|
||||
<p>Slim, lightweight marketing template for small projects or teams.</p>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a class="thumbnail" href="examples/justified-nav.html">
|
||||
<img src="assets/img/examples/bootstrap-example-justified-nav.png" alt="">
|
||||
</a>
|
||||
<h4>Justified nav</h4>
|
||||
<p>Marketing page with equal-width navigation links in a modified navbar.</p>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a class="thumbnail" href="examples/signin.html">
|
||||
<img src="assets/img/examples/bootstrap-example-signin.png" alt="">
|
||||
@@ -277,6 +296,7 @@
|
||||
<h4>Sign in</h4>
|
||||
<p>Barebones sign in form with custom, larger form controls and a flexible layout.</p>
|
||||
</li>
|
||||
|
||||
<li class="span3">
|
||||
<a class="thumbnail" href="examples/sticky-footer.html">
|
||||
<img src="assets/img/examples/bootstrap-example-sticky-footer.png" alt="">
|
||||
@@ -284,7 +304,6 @@
|
||||
<h4>Sticky footer</h4>
|
||||
<p>Pin a fixed-height footer to the bottom of the user's viewport.</p>
|
||||
</li>
|
||||
|
||||
<li class="span3">
|
||||
<a class="thumbnail" href="examples/carousel.html">
|
||||
<img src="assets/img/examples/bootstrap-example-carousel.png" alt="">
|
||||
@@ -305,8 +324,8 @@
|
||||
<h1>What next?</h1>
|
||||
</div>
|
||||
<p class="lead">Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.</p>
|
||||
<a class="btn btn-large btn-primary" href="./scaffolding.html" >Visit the Bootstrap docs</a>
|
||||
<a class="btn btn-large" href="./customize.html" style="margin-left: 5px;" >Customize Bootstrap</a>
|
||||
<a class="btn btn-large btn-primary" href="./scaffolding.html" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Next steps', 'Visit docs']);">Visit the Bootstrap docs</a>
|
||||
<a class="btn btn-large" href="./customize.html" style="margin-left: 5px;" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Next steps', 'Customize']);">Customize Bootstrap</a>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -323,16 +342,15 @@
|
||||
================================================== -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p class="pull-right"><a href="#">Back to top</a></p>
|
||||
<p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
|
||||
<p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
<p><a href="http://glyphicons.com">Glyphicons Free</a> licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
<ul class="footer-links">
|
||||
<li><a href="http://blog.getbootstrap.com">Blog</a></li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li>
|
||||
<li><a href="https://github.com/twbs/bootstrap/issues?state=open">Issues</a></li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
|
||||
<li><a href="https://github.com/twbs/bootstrap/releases">Changelog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -344,7 +362,6 @@
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
||||
<script src="assets/js/jquery.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="assets/js/bootstrap-transition.js"></script>
|
||||
<script src="assets/js/bootstrap-alert.js"></script>
|
||||
<script src="assets/js/bootstrap-modal.js"></script>
|
||||
@@ -358,9 +375,28 @@
|
||||
<script src="assets/js/bootstrap-carousel.js"></script>
|
||||
<script src="assets/js/bootstrap-typeahead.js"></script>
|
||||
<script src="assets/js/bootstrap-affix.js"></script>
|
||||
|
||||
<script src="assets/js/holder/holder.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
|
||||
<script src="assets/js/application.js"></script>
|
||||
|
||||
|
||||
<!-- Analytics
|
||||
================================================== -->
|
||||
<script>
|
||||
var _gauges = _gauges || [];
|
||||
(function() {
|
||||
var t = document.createElement('script');
|
||||
t.type = 'text/javascript';
|
||||
t.async = true;
|
||||
t.id = 'gauges-tracker';
|
||||
t.setAttribute('data-site-id', '4f0dc9fef5a1f55508000013');
|
||||
t.src = '//secure.gaug.es/track.js';
|
||||
var s = document.getElementsByTagName('script')[0];
|
||||
s.parentNode.insertBefore(t, s);
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -15,16 +15,26 @@
|
||||
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<script src="assets/js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="shortcut icon" href="assets/ico/favicon.ico">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="assets/ico/favicon.png">
|
||||
|
||||
<script type="text/javascript">
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-146052-10']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body data-spy="scroll" data-target=".bs-docs-sidebar">
|
||||
@@ -74,20 +84,20 @@
|
||||
<h1>Bootstrap</h1>
|
||||
<p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
|
||||
<p>
|
||||
<a href="assets/bootstrap.zip" class="btn btn-primary btn-large" >Download Bootstrap</a>
|
||||
<a href="assets/bootstrap.zip" class="btn btn-primary btn-large" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 2.3.2']);">Download Bootstrap</a>
|
||||
</p>
|
||||
<ul class="masthead-links">
|
||||
<li>
|
||||
<a href="http://github.com/twitter/bootstrap" >GitHub project</a>
|
||||
<a href="http://github.com/twitter/bootstrap" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);">GitHub project</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./getting-started.html#examples" >Examples</a>
|
||||
<a href="./getting-started.html#examples" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);">Examples</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./extend.html" >Extend</a>
|
||||
<a href="./extend.html" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Extend']);">Extend</a>
|
||||
</li>
|
||||
<li>
|
||||
Version 2.2.0
|
||||
Version 2.3.2
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -97,16 +107,16 @@
|
||||
<div class="container">
|
||||
<ul class="bs-docs-social-buttons">
|
||||
<li>
|
||||
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
|
||||
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
|
||||
</li>
|
||||
<li>
|
||||
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px"></iframe>
|
||||
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
|
||||
</li>
|
||||
<li class="follow-btn">
|
||||
<a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a>
|
||||
</li>
|
||||
<li class="tweet-btn">
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twbs.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -121,19 +131,19 @@
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span4">
|
||||
<img src="assets/img/bs-docs-twitter-github.png">
|
||||
<img class="marketing-img" src="assets/img/bs-docs-twitter-github.png">
|
||||
<h2>By nerds, for nerds.</h2>
|
||||
<p>Built at Twitter by <a href="http://twitter.com/mdo">@mdo</a> and <a href="http://twitter.com/fat">@fat</a>, Bootstrap utilizes <a href="http://lesscss.org">LESS CSS</a>, is compiled via <a href="http://nodejs.org">Node</a>, and is managed through <a href="http://github.com">GitHub</a> to help nerds do awesome stuff on the web.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<img src="assets/img/bs-docs-responsive-illustrations.png">
|
||||
<img class="marketing-img" src="assets/img/bs-docs-responsive-illustrations.png">
|
||||
<h2>Made for everyone.</h2>
|
||||
<p>Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via <a href="./scaffolding.html#responsive">responsive CSS</a> as well.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<img src="assets/img/bs-docs-bootstrap-features.png">
|
||||
<img class="marketing-img" src="assets/img/bs-docs-bootstrap-features.png">
|
||||
<h2>Packed with features.</h2>
|
||||
<p>A 12-column responsive <a href="./scaffolding.html#grid">grid</a>, dozens of components, <a href="./javascript.html">JavaScript plugins</a>, typography, form controls, and even a <a href="./customize.html">web-based Customizer</a> to make Bootstrap your own.</p>
|
||||
<p>A 12-column responsive <a href="./scaffolding.html#gridSystem">grid</a>, dozens of components, <a href="./javascript.html">JavaScript plugins</a>, typography, form controls, and even a <a href="./customize.html">web-based Customizer</a> to make Bootstrap your own.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -176,16 +186,15 @@
|
||||
================================================== -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p class="pull-right"><a href="#">Back to top</a></p>
|
||||
<p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
|
||||
<p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
<p><a href="http://glyphicons.com">Glyphicons Free</a> licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
<ul class="footer-links">
|
||||
<li><a href="http://blog.getbootstrap.com">Blog</a></li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li>
|
||||
<li><a href="https://github.com/twbs/bootstrap/issues?state=open">Issues</a></li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
|
||||
<li><a href="https://github.com/twbs/bootstrap/releases">Changelog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -197,7 +206,6 @@
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
||||
<script src="assets/js/jquery.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="assets/js/bootstrap-transition.js"></script>
|
||||
<script src="assets/js/bootstrap-alert.js"></script>
|
||||
<script src="assets/js/bootstrap-modal.js"></script>
|
||||
@@ -211,9 +219,28 @@
|
||||
<script src="assets/js/bootstrap-carousel.js"></script>
|
||||
<script src="assets/js/bootstrap-typeahead.js"></script>
|
||||
<script src="assets/js/bootstrap-affix.js"></script>
|
||||
|
||||
<script src="assets/js/holder/holder.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
|
||||
<script src="assets/js/application.js"></script>
|
||||
|
||||
|
||||
<!-- Analytics
|
||||
================================================== -->
|
||||
<script>
|
||||
var _gauges = _gauges || [];
|
||||
(function() {
|
||||
var t = document.createElement('script');
|
||||
t.type = 'text/javascript';
|
||||
t.async = true;
|
||||
t.id = 'gauges-tracker';
|
||||
t.setAttribute('data-site-id', '4f0dc9fef5a1f55508000013');
|
||||
t.src = '//secure.gaug.es/track.js';
|
||||
var s = document.getElementsByTagName('script')[0];
|
||||
s.parentNode.insertBefore(t, s);
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -15,16 +15,26 @@
|
||||
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<script src="assets/js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="shortcut icon" href="assets/ico/favicon.ico">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="assets/ico/favicon.png">
|
||||
|
||||
<script type="text/javascript">
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-146052-10']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body data-spy="scroll" data-target=".bs-docs-sidebar">
|
||||
@@ -134,9 +144,17 @@ $("#myModal").modal('show') // initializes and invokes show immed
|
||||
</pre>
|
||||
<p>Each plugin also exposes its raw constructor on a `Constructor` property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.</p>
|
||||
|
||||
<h3>No Conflict</h3>
|
||||
<p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p>
|
||||
|
||||
<pre class="prettyprint linenums">
|
||||
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
|
||||
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the bootstrap functionality
|
||||
</pre>
|
||||
|
||||
<h3>Events</h3>
|
||||
<p>Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p>
|
||||
<p>All infinitive events provide preventDefault functionality. This provides the abililty to stop the execution of an action before it starts.</p>
|
||||
<p>All infinitive events provide preventDefault functionality. This provides the ability to stop the execution of an action before it starts.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
$('#myModal').on('show', function (e) {
|
||||
if (!data) return e.preventDefault() // stops modal from being shown
|
||||
@@ -153,7 +171,7 @@ $('#myModal').on('show', function (e) {
|
||||
<h1>Transitions <small>bootstrap-transition.js</small></h1>
|
||||
</div>
|
||||
<h3>About transitions</h3>
|
||||
<p>For simple transition effects, include bootstrap-transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this—it's already there.</p>
|
||||
<p>For simple transition effects, include <strong>bootstrap-transition.js</strong> once alongside the other JS files. If you're using the compiled (or minified) <strong>bootstrap.js</strong>, there is no need to include this—it's already there.</p>
|
||||
<h3>Use cases</h3>
|
||||
<p>A few examples of the transition plugin:</p>
|
||||
<ul>
|
||||
@@ -181,7 +199,7 @@ $('#myModal').on('show', function (e) {
|
||||
<h3>Static example</h3>
|
||||
<p>A rendered modal with header, body, and set of actions in the footer.</p>
|
||||
<div class="bs-docs-example" style="background-color: #f5f5f5;">
|
||||
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
|
||||
<div class="modal" style="position: relative; top: auto; left: auto; right: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3>Modal header</h3>
|
||||
@@ -397,21 +415,21 @@ $('#myModal').on('hidden', function () {
|
||||
<li class="dropdown">
|
||||
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
|
||||
<li><a tabindex="-1" href="http://google.com">Action</a></li>
|
||||
<li><a tabindex="-1" href="#anotherAction">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a tabindex="-1" href="#">Separated link</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
|
||||
<li><a tabindex="-1" href="#">Action</a></li>
|
||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a tabindex="-1" href="#">Separated link</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -419,18 +437,18 @@ $('#myModal').on('hidden', function () {
|
||||
<li id="fat-menu" class="dropdown">
|
||||
<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
|
||||
<li><a tabindex="-1" href="#">Action</a></li>
|
||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a tabindex="-1" href="#">Separated link</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /navbar-example -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Within tabs</h3>
|
||||
<div class="bs-docs-example">
|
||||
@@ -439,35 +457,35 @@ $('#myModal').on('hidden', function () {
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
|
||||
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
|
||||
<li><a tabindex="-1" href="#">Action</a></li>
|
||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a tabindex="-1" href="#">Separated link</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
|
||||
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
|
||||
<li><a tabindex="-1" href="#">Action</a></li>
|
||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a tabindex="-1" href="#">Separated link</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a>
|
||||
<ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop5">
|
||||
<li><a tabindex="-1" href="#">Action</a></li>
|
||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a tabindex="-1" href="#">Separated link</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul> <!-- /tabs -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
@@ -507,7 +525,7 @@ $('#myModal').on('hidden', function () {
|
||||
|
||||
<h3>Methods</h3>
|
||||
<h4>$().dropdown('toggle')</h4>
|
||||
<p>A programatic api for toggling menus for a given navbar or tabbed navigation.</p>
|
||||
<p>A programmatic api for toggling menus for a given navbar or tabbed navigation.</p>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -636,7 +654,7 @@ $('[data-spy="scroll"]').each(function () {
|
||||
|
||||
|
||||
<h2>Example tabs</h2>
|
||||
<p>Add quick, dynamic tab functionality to transiton through panes of local content, even via dropdown menus.</p>
|
||||
<p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p>
|
||||
<div class="bs-docs-example">
|
||||
<ul id="myTab" class="nav nav-tabs">
|
||||
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
|
||||
@@ -759,23 +777,27 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
|
||||
<h2>Examples</h2>
|
||||
<p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.</p>
|
||||
<p>For performance reasons, the tooltip and popover data-apis are opt in, meaning <strong>you must initialize them yourself</strong>.</p>
|
||||
<p>Hover over the links below to see tooltips:</p>
|
||||
<div class="bs-docs-example tooltip-demo">
|
||||
<p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel="tooltip" title="Default 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 really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, 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;">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default 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="#" data-toggle="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 really ironic artisan <a href="#" data-toggle="tooltip" title="A much longer tooltip belongs right here to demonstrate the max-width we apply.">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3>Four directions</h3>
|
||||
<div class="bs-docs-example tooltip-demo">
|
||||
<ul class="bs-docs-tooltip-examples">
|
||||
<li><a href="#" rel="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li>
|
||||
<li><a href="#" rel="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li>
|
||||
<li><a href="#" rel="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li>
|
||||
<li><a href="#" rel="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li>
|
||||
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li>
|
||||
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li>
|
||||
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li>
|
||||
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Tooltips in input groups</h3>
|
||||
<p>When using tooltips and popovers with the Bootstrap input groups, you'll have to set the <code>container</code> (documented below) option to avoid unwanted side effects.</p>
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
@@ -809,7 +831,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
</tr>
|
||||
<tr>
|
||||
<td>placement</td>
|
||||
<td>string|function</td>
|
||||
<td>string | function</td>
|
||||
<td>'top'</td>
|
||||
<td>how to position the tooltip - top | bottom | left | right</td>
|
||||
</tr>
|
||||
@@ -828,8 +850,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
<tr>
|
||||
<td>trigger</td>
|
||||
<td>string</td>
|
||||
<td>'hover'</td>
|
||||
<td>how tooltip is triggered - click | hover | focus | manual</td>
|
||||
<td>'hover focus'</td>
|
||||
<td>how tooltip is triggered - click | hover | focus | manual. Note you case pass trigger mutliple, space seperated, trigger types.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>delay</td>
|
||||
@@ -841,6 +863,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>container</td>
|
||||
<td>string | false</td>
|
||||
<td>false</td>
|
||||
<td>
|
||||
<p>Appends the tooltip to a specific element <code>container: 'body'</code></p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="alert alert-info">
|
||||
@@ -849,8 +879,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
</div>
|
||||
|
||||
<h3>Markup</h3>
|
||||
<p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p>
|
||||
<pre class="prettyprint linenums"><a href="#" rel="tooltip" title="first tooltip">hover over me</a></pre>
|
||||
<pre class="prettyprint linenums"><a href="#" data-toggle="tooltip" title="first tooltip">hover over me</a></pre>
|
||||
|
||||
<h3>Methods</h3>
|
||||
<h4>$().tooltip(options)</h4>
|
||||
@@ -922,16 +951,16 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
|
||||
<h3>Live demo</h3>
|
||||
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
||||
<a href="#" class="btn btn-large btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
|
||||
<a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
|
||||
</div>
|
||||
|
||||
<h4>Four directions</h4>
|
||||
<div class="bs-docs-example tooltip-demo">
|
||||
<ul class="bs-docs-tooltip-examples">
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li>
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li>
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</a></li>
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a></li>
|
||||
<li><a href="#" class="btn" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li>
|
||||
<li><a href="#" class="btn" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li>
|
||||
<li><a href="#" class="btn" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</a></li>
|
||||
<li><a href="#" class="btn" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -969,7 +998,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
</tr>
|
||||
<tr>
|
||||
<td>placement</td>
|
||||
<td>string|function</td>
|
||||
<td>string | function</td>
|
||||
<td>'right'</td>
|
||||
<td>how to position the popover - top | bottom | left | right</td>
|
||||
</tr>
|
||||
@@ -1007,6 +1036,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>container</td>
|
||||
<td>string | false</td>
|
||||
<td>false</td>
|
||||
<td>
|
||||
<p>Appends the popover to a specific element <code>container: 'body'</code></p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="alert alert-info">
|
||||
@@ -1124,7 +1161,7 @@ $('#my-alert').bind('closed', function () {
|
||||
<p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
|
||||
|
||||
<h4>Stateful</h4>
|
||||
<p>Add data-loading-text="Loading..." to use a loading state on a button.</p>
|
||||
<p>Add <code>data-loading-text="Loading..."</code> to use a loading state on a button.</p>
|
||||
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
||||
<button type="button" id="fat-btn" data-loading-text="loading..." class="btn btn-primary">
|
||||
Loading state
|
||||
@@ -1133,14 +1170,14 @@ $('#my-alert').bind('closed', function () {
|
||||
<pre class="prettyprint linenums"><button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button></pre>
|
||||
|
||||
<h4>Single toggle</h4>
|
||||
<p>Add data-toggle="button" to activate toggling on a single button.</p>
|
||||
<p>Add <code>data-toggle="button"</code> to activate toggling on a single button.</p>
|
||||
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
||||
<button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>
|
||||
</div>
|
||||
<pre class="prettyprint linenums"><button type="button" class="btn" data-toggle="button">Single Toggle</button></pre>
|
||||
<pre class="prettyprint linenums"><button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button></pre>
|
||||
|
||||
<h4>Checkbox</h4>
|
||||
<p>Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.</p>
|
||||
<p>Add <code>data-toggle="buttons-checkbox"</code> for checkbox style toggling on btn-group.</p>
|
||||
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
||||
<div class="btn-group" data-toggle="buttons-checkbox">
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
@@ -1150,14 +1187,14 @@ $('#my-alert').bind('closed', function () {
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="btn-group" data-toggle="buttons-checkbox">
|
||||
<button type="button" class="btn">Left</button>
|
||||
<button type="button" class="btn">Middle</button>
|
||||
<button type="button" class="btn">Right</button>
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
<button type="button" class="btn btn-primary">Middle</button>
|
||||
<button type="button" class="btn btn-primary">Right</button>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h4>Radio</h4>
|
||||
<p>Add data-toggle="buttons-radio" for radio style toggling on btn-group.</p>
|
||||
<p>Add <code>data-toggle="buttons-radio"</code> for radio style toggling on btn-group.</p>
|
||||
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
||||
<div class="btn-group" data-toggle="buttons-radio">
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
@@ -1167,9 +1204,9 @@ $('#my-alert').bind('closed', function () {
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="btn-group" data-toggle="buttons-radio">
|
||||
<button type="button" class="btn">Left</button>
|
||||
<button type="button" class="btn">Middle</button>
|
||||
<button type="button" class="btn">Right</button>
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
<button type="button" class="btn btn-primary">Middle</button>
|
||||
<button type="button" class="btn btn-primary">Right</button>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
@@ -1201,7 +1238,7 @@ $('#my-alert').bind('closed', function () {
|
||||
<pre class="prettyprint linenums"><button type="button" class="btn" data-loading-text="loading stuff..." >...</button></pre>
|
||||
<div class="alert alert-info">
|
||||
<strong>Heads up!</strong>
|
||||
<a href="https://github.com/twitter/bootstrap/issues/793">Firefox persists the disabled state across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.
|
||||
<a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists the disabled state across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.
|
||||
</div>
|
||||
<h4>$().button('reset')</h4>
|
||||
<p>Resets button state - swaps text to original text.</p>
|
||||
@@ -1414,6 +1451,11 @@ $('#myCollapsible').on('hidden', function () {
|
||||
<p>The slideshow below shows a generic plugin and component for cycling through elements like a carousel.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div id="myCarousel" class="carousel slide">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="1"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="item active">
|
||||
<img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
|
||||
@@ -1443,6 +1485,11 @@ $('#myCollapsible').on('hidden', function () {
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div id="myCarousel" class="carousel slide">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="1"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="2"></li>
|
||||
</ol>
|
||||
<!-- Carousel items -->
|
||||
<div class="carousel-inner">
|
||||
<div class="active item">…</div>
|
||||
@@ -1467,14 +1514,14 @@ $('#myCollapsible').on('hidden', function () {
|
||||
<h2>Usage</h2>
|
||||
|
||||
<h3>Via data attributes</h3>
|
||||
<p>...</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 it's 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 jump's the slide position to a particular index beginning with <code>0</code>.</p>
|
||||
|
||||
<h3>Via JavaScript</h3>
|
||||
<p>Call carousel manually with:</p>
|
||||
<pre class="prettyprint linenums">$('.carousel').carousel()</pre>
|
||||
|
||||
<h3>Options</h3>
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.</p>
|
||||
<p>Options can be passed via data attributes or JavaScriptz. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -1557,7 +1604,7 @@ $('.carousel').carousel({
|
||||
<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
|
||||
</div>
|
||||
<pre class="prettyprint linenums"><input type="text" data-provide="typeahead"></pre>
|
||||
|
||||
<p>You'll want to set <code>autocomplete="off"</code> to prevent default browser menus from appearing over the Bootstrap typeahead dropdown.</p>
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
@@ -1663,14 +1710,6 @@ $('.carousel').carousel({
|
||||
<p>Call the affix plugin via JavaScript:</p>
|
||||
<pre class="prettyprint linenums">$('#navbar').affix()</pre>
|
||||
|
||||
<h3>Methods</h3>
|
||||
<h4>.affix('refresh')</h4>
|
||||
<p>When using affix in conjunction with adding or removing of elements from the DOM, you'll want to call the refresh method:</p>
|
||||
<pre class="prettyprint linenums">
|
||||
$('[data-spy="affix"]').each(function () {
|
||||
$(this).affix('refresh')
|
||||
});
|
||||
</pre>
|
||||
<h3>Options</h3>
|
||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
@@ -1687,7 +1726,7 @@ $('[data-spy="affix"]').each(function () {
|
||||
<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 provide, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provided an object <code>offset: { x: 10 }</code>. Use a function when you need to dynamically provide an offset (useful for some responsive designs).</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 left directions. To listen for a single direction, or multiple unique offsets, just provide an object <code>offset: { x: 10 }</code>. Use a function when you need to dynamically provide an offset (useful for some responsive designs).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -1706,16 +1745,15 @@ $('[data-spy="affix"]').each(function () {
|
||||
================================================== -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p class="pull-right"><a href="#">Back to top</a></p>
|
||||
<p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
|
||||
<p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
<p><a href="http://glyphicons.com">Glyphicons Free</a> licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
<ul class="footer-links">
|
||||
<li><a href="http://blog.getbootstrap.com">Blog</a></li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li>
|
||||
<li><a href="https://github.com/twbs/bootstrap/issues?state=open">Issues</a></li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
|
||||
<li><a href="https://github.com/twbs/bootstrap/releases">Changelog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -1727,7 +1765,6 @@ $('[data-spy="affix"]').each(function () {
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
||||
<script src="assets/js/jquery.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="assets/js/bootstrap-transition.js"></script>
|
||||
<script src="assets/js/bootstrap-alert.js"></script>
|
||||
<script src="assets/js/bootstrap-modal.js"></script>
|
||||
@@ -1741,9 +1778,28 @@ $('[data-spy="affix"]').each(function () {
|
||||
<script src="assets/js/bootstrap-carousel.js"></script>
|
||||
<script src="assets/js/bootstrap-typeahead.js"></script>
|
||||
<script src="assets/js/bootstrap-affix.js"></script>
|
||||
|
||||
<script src="assets/js/holder/holder.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
|
||||
<script src="assets/js/application.js"></script>
|
||||
|
||||
|
||||
<!-- Analytics
|
||||
================================================== -->
|
||||
<script>
|
||||
var _gauges = _gauges || [];
|
||||
(function() {
|
||||
var t = document.createElement('script');
|
||||
t.type = 'text/javascript';
|
||||
t.async = true;
|
||||
t.id = 'gauges-tracker';
|
||||
t.setAttribute('data-site-id', '4f0dc9fef5a1f55508000013');
|
||||
t.src = '//secure.gaug.es/track.js';
|
||||
var s = document.getElementsByTagName('script')[0];
|
||||
s.parentNode.insertBefore(t, s);
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -15,16 +15,26 @@
|
||||
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<script src="assets/js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="shortcut icon" href="assets/ico/favicon.ico">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="assets/ico/favicon.png">
|
||||
|
||||
<script type="text/javascript">
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-146052-10']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body data-spy="scroll" data-target=".bs-docs-sidebar">
|
||||
@@ -123,7 +133,7 @@
|
||||
<p>These styles can be found within <strong>scaffolding.less</strong>.</p>
|
||||
|
||||
<h3>Reset via Normalize</h3>
|
||||
<p>With Bootstrap 2, the old reset block has been dropped in favor of <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> that also powers the <a href="http://html5boilerplate.com" target="_blank">HTML5 Boilerplate</a>. While we use much of Normalize within our <strong>reset.less</strong>, we have removed some elements specifically for Bootstrap.</p>
|
||||
<p>With Bootstrap 2, the old reset block has been dropped in favor of <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a> that also powers the <a href="http://html5boilerplate.com" target="_blank">HTML5 Boilerplate</a>. While we use much of Normalize within our <strong>reset.less</strong>, we have removed some elements specifically for Bootstrap.</p>
|
||||
|
||||
</section>
|
||||
|
||||
@@ -301,13 +311,21 @@
|
||||
</pre>
|
||||
|
||||
<h2>Fluid nesting</h2>
|
||||
<p>Nesting with fluid grids is a bit different: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.</p>
|
||||
<p>Fluid grids utilize nesting differently: each nested level of columns should add up to 12 columns. This is because the fluid grid uses percentages, not pixels, for setting widths.</p>
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span12">
|
||||
Fluid 12
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span6">
|
||||
Fluid 6
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span6">
|
||||
Fluid 6
|
||||
</div>
|
||||
<div class="span6">
|
||||
Fluid 6
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span6">
|
||||
Fluid 6
|
||||
@@ -320,7 +338,13 @@
|
||||
<div class="span12">
|
||||
Fluid 12
|
||||
<div class="row-fluid">
|
||||
<div class="span6">Fluid 6</div>
|
||||
<div class="span6">
|
||||
Fluid 6
|
||||
<div class="row-fluid">
|
||||
<div class="span6">Fluid 6</div>
|
||||
<div class="span6">Fluid 6</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span6">Fluid 6</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -543,16 +567,15 @@
|
||||
================================================== -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p class="pull-right"><a href="#">Back to top</a></p>
|
||||
<p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
|
||||
<p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
<p><a href="http://glyphicons.com">Glyphicons Free</a> licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
<ul class="footer-links">
|
||||
<li><a href="http://blog.getbootstrap.com">Blog</a></li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li>
|
||||
<li><a href="https://github.com/twbs/bootstrap/issues?state=open">Issues</a></li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
|
||||
<li><a href="https://github.com/twbs/bootstrap/releases">Changelog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -564,7 +587,6 @@
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
||||
<script src="assets/js/jquery.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="assets/js/bootstrap-transition.js"></script>
|
||||
<script src="assets/js/bootstrap-alert.js"></script>
|
||||
<script src="assets/js/bootstrap-modal.js"></script>
|
||||
@@ -578,9 +600,28 @@
|
||||
<script src="assets/js/bootstrap-carousel.js"></script>
|
||||
<script src="assets/js/bootstrap-typeahead.js"></script>
|
||||
<script src="assets/js/bootstrap-affix.js"></script>
|
||||
|
||||
<script src="assets/js/holder/holder.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
|
||||
<script src="assets/js/application.js"></script>
|
||||
|
||||
|
||||
<!-- Analytics
|
||||
================================================== -->
|
||||
<script>
|
||||
var _gauges = _gauges || [];
|
||||
(function() {
|
||||
var t = document.createElement('script');
|
||||
t.type = 'text/javascript';
|
||||
t.async = true;
|
||||
t.id = 'gauges-tracker';
|
||||
t.setAttribute('data-site-id', '4f0dc9fef5a1f55508000013');
|
||||
t.src = '//secure.gaug.es/track.js';
|
||||
var s = document.getElementsByTagName('script')[0];
|
||||
s.parentNode.insertBefore(t, s);
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -15,15 +15,15 @@
|
||||
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<script src="assets/js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="shortcut icon" href="assets/ico/favicon.ico">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="assets/ico/favicon.png">
|
||||
|
||||
{{#production}}
|
||||
<script type="text/javascript">
|
||||
@@ -89,16 +89,15 @@
|
||||
================================================== -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p class="pull-right"><a href="#">{{_i}}Back to top{{/i}}</a></p>
|
||||
<p>{{_i}}Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.{{/i}}</p>
|
||||
<p>{{_i}}Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.{{/i}}</p>
|
||||
<p>{{_i}}<a href="http://glyphicons.com">Glyphicons Free</a> licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.{{/i}}</p>
|
||||
<ul class="footer-links">
|
||||
<li><a href="http://blog.getbootstrap.com">{{_i}}Blog{{/i}}</a></li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">{{_i}}Issues{{/i}}</a></li>
|
||||
<li><a href="https://github.com/twbs/bootstrap/issues?state=open">{{_i}}Issues{{/i}}</a></li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="https://github.com/twitter/bootstrap/wiki">{{_i}}Roadmap and changelog{{/i}}</a></li>
|
||||
<li><a href="https://github.com/twbs/bootstrap/releases">{{_i}}Changelog{{/i}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -110,7 +109,6 @@
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
||||
<script src="assets/js/jquery.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="assets/js/bootstrap-transition.js"></script>
|
||||
<script src="assets/js/bootstrap-alert.js"></script>
|
||||
<script src="assets/js/bootstrap-modal.js"></script>
|
||||
@@ -124,6 +122,10 @@
|
||||
<script src="assets/js/bootstrap-carousel.js"></script>
|
||||
<script src="assets/js/bootstrap-typeahead.js"></script>
|
||||
<script src="assets/js/bootstrap-affix.js"></script>
|
||||
|
||||
<script src="assets/js/holder/holder.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
|
||||
<script src="assets/js/application.js"></script>
|
||||
|
||||
|
||||
|
||||
@@ -104,6 +104,19 @@
|
||||
|
||||
<p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}Alignment classes{{/i}}</h3>
|
||||
<p>{{_i}}Easily realign text to components with text alignment classes.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<p class="text-left">Left aligned text.</p>
|
||||
<p class="text-center">Center aligned text.</p>
|
||||
<p class="text-right">Right aligned text.</p>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<p class="text-left">Left aligned text.</p>
|
||||
<p class="text-center">Center aligned text.</p>
|
||||
<p class="text-right">Right aligned text.</p>
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Emphasis classes{{/i}}</h3>
|
||||
<p>{{_i}}Convey meaning through color with a handful of emphasis utility classes.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
@@ -127,7 +140,7 @@
|
||||
|
||||
{{! Abbreviations }}
|
||||
<h2 id="abbreviations">{{_i}}Abbreviations{{/i}}</h2>
|
||||
<p>{{_i}}Stylized implemenation of HTML's <code><abbr></code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.{{/i}}</p>
|
||||
<p>{{_i}}Stylized implementation of HTML's <code><abbr></code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.{{/i}}</p>
|
||||
|
||||
<h3><code><abbr></code></h3>
|
||||
<p>{{_i}}For expanded text on long hover of an abbreviation, include the <code>title</code> attribute.{{/i}}</p>
|
||||
@@ -162,7 +175,7 @@
|
||||
</address>
|
||||
<address>
|
||||
<strong>{{_i}}Full Name{{/i}}</strong><br>
|
||||
<a href="mailto:#">{{_i}}first.last@gmail.com{{/i}}</a>
|
||||
<a href="mailto:#">{{_i}}first.last@example.com{{/i}}</a>
|
||||
</address>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
@@ -175,7 +188,7 @@
|
||||
|
||||
<address>
|
||||
<strong>{{_i}}Full Name{{/i}}</strong><br>
|
||||
<a href="mailto:#">{{_i}}first.last@gmail.com{{/i}}</a>
|
||||
<a href="mailto:#">{{_i}}first.last@example.com{{/i}}</a>
|
||||
</address>
|
||||
</pre>
|
||||
|
||||
@@ -287,7 +300,7 @@
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Unstyled{{/i}}</h3>
|
||||
<p>{{_i}}A list of items with no <code>list-style</code> or additional left padding.{{/i}}</p>
|
||||
<p>{{_i}}Remove the default <code>list-style</code> and left padding on list items (immediate children only).{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<ul class="unstyled">
|
||||
<li>Lorem ipsum dolor sit amet</li>
|
||||
@@ -311,6 +324,21 @@
|
||||
<ul class="unstyled">
|
||||
<li>...</li>
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Inline{{/i}}</h3>
|
||||
<p>{{_i}}Place all list items on a single line with <code>inline-block</code> and some light padding.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<ul class="inline">
|
||||
<li>Lorem ipsum</li>
|
||||
<li>Phasellus iaculis</li>
|
||||
<li>Nulla volutpat</li>
|
||||
</ul>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="inline">
|
||||
<li>...</li>
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Description{{/i}}</h3>
|
||||
@@ -375,7 +403,7 @@
|
||||
For example, <code><section></code> should be wrapped as inline.
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
{{_i}}For example, <code><section></code> should be wrapped as inline.{{/i}}
|
||||
{{_i}}For example, <code>&lt;section&gt;</code> should be wrapped as inline.{{/i}}
|
||||
</pre>
|
||||
|
||||
<h2>Basic block</h2>
|
||||
@@ -449,7 +477,7 @@
|
||||
<p>{{_i}}Add any of the following classes to the <code>.table</code> base class.{{/i}}</p>
|
||||
|
||||
<h3><code>{{_i}}.table-striped{{/i}}</code></h3>
|
||||
<p>{{_i}}Adds zebra-striping to any table row within the <code><tbody></code> via the <code>:nth-child</code> CSS selector (not available in IE7-IE8).{{/i}}</p>
|
||||
<p>{{_i}}Adds zebra-striping to any table row within the <code><tbody></code> via the <code>:nth-child</code> CSS selector (not available in IE7-8).{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
@@ -766,8 +794,7 @@
|
||||
<code><th></code>
|
||||
</td>
|
||||
<td>
|
||||
{{_i}}Special table cell for column (or row, depending on scope and placement) labels{{/i}}<br>
|
||||
{{_i}}Must be used within a <code><thead></code>{{/i}}
|
||||
{{_i}}Special table cell for column (or row, depending on scope and placement) labels{{/i}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -1245,6 +1272,54 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h4>{{_i}}Segmented dropdown groups{{/i}}</h4>
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-prepend">
|
||||
<div class="btn-group">
|
||||
<button class="btn" tabindex="-1">Action</button>
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="input-append">
|
||||
<input type="text">
|
||||
<div class="btn-group">
|
||||
<button class="btn" tabindex="-1">Action</button>
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<form>
|
||||
<div class="input-prepend">
|
||||
<div class="btn-group">...</div>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="input-append">
|
||||
<input type="text">
|
||||
<div class="btn-group">...</div>
|
||||
</div>
|
||||
</form>
|
||||
</pre>
|
||||
|
||||
<h4>{{_i}}Search form{{/i}}</h4>
|
||||
@@ -1353,7 +1428,7 @@
|
||||
</select>
|
||||
</pre>
|
||||
|
||||
<p>{{_i}}For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.{{/i}}</p>
|
||||
<p>{{_i}}For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and clears the float.{{/i}}</p>
|
||||
<form class="bs-docs-example" style="padding-bottom: 15px;">
|
||||
<div class="controls">
|
||||
<input class="span5" type="text" placeholder=".span5">
|
||||
@@ -1396,7 +1471,7 @@
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Form actions{{/i}}</h3>
|
||||
<p>{{_i}}End a form with a group of actions (buttons). When placed within a <code>.form-horizontal</code>, the buttons will automatically indent to line up with the form controls.{{/i}}</p>
|
||||
<p>{{_i}}End a form with a group of actions (buttons). When placed within a <code>.form-actions</code>, the buttons will automatically indent to line up with the form controls.{{/i}}</p>
|
||||
<form class="bs-docs-example">
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
|
||||
@@ -1443,6 +1518,16 @@
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<input class="input-xlarge" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}">
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Invalid inputs{{/i}}</h3>
|
||||
<p>{{_i}}Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.{{/i}}</p>
|
||||
<p>{{_i}}This is not available in versions of Internet Explorer 7-9 due to lack of support for CSS pseudo selectors.{{/i}}</p>
|
||||
<form class="bs-docs-example form-inline">
|
||||
<input class="span3" type="email" placeholder="test@example.com" required>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<input class="span3" type="email" required>
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Disabled inputs{{/i}}</h3>
|
||||
@@ -1495,6 +1580,7 @@
|
||||
<span class="help-inline">{{_i}}Something may have gone wrong{{/i}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group error">
|
||||
<label class="control-label" for="inputError">{{_i}}Input with error{{/i}}</label>
|
||||
<div class="controls">
|
||||
@@ -1502,6 +1588,15 @@
|
||||
<span class="help-inline">{{_i}}Please correct the error{{/i}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group info">
|
||||
<label class="control-label" for="inputInfo">{{_i}}Input with info{{/i}}</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputInfo">
|
||||
<span class="help-inline">{{_i}}Username is already taken{{/i}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group success">
|
||||
<label class="control-label" for="inputSuccess">{{_i}}Input with success{{/i}}</label>
|
||||
<div class="controls">
|
||||
@@ -1690,9 +1785,9 @@
|
||||
|
||||
<p>{{_i}}Add classes to an <code><img></code> element to easily style images in any project.{{/i}}</p>
|
||||
<div class="bs-docs-example bs-docs-example-images">
|
||||
<img src="http://placehold.it/140x140" class="img-rounded">
|
||||
<img src="http://placehold.it/140x140" class="img-circle">
|
||||
<img src="http://placehold.it/140x140" class="img-polaroid">
|
||||
<img data-src="holder.js/140x140" class="img-rounded">
|
||||
<img data-src="holder.js/140x140" class="img-circle">
|
||||
<img data-src="holder.js/140x140" class="img-polaroid">
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<img src="..." class="img-rounded">
|
||||
@@ -1906,7 +2001,6 @@
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group">
|
||||
|
||||
<a class="btn" href="#"><i class="icon-align-left"></i></a>
|
||||
<a class="btn" href="#"><i class="icon-align-center"></i></a>
|
||||
<a class="btn" href="#"><i class="icon-align-right"></i></a>
|
||||
@@ -1943,15 +2037,18 @@
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h5>{{_i}}Small button{{/i}}</h5>
|
||||
<h5>{{_i}}Button sizes{{/i}}</h5>
|
||||
<div class="bs-docs-example">
|
||||
<a class="btn btn-small" href="#"><i class="icon-star"></i></a>
|
||||
<a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
|
||||
<a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a>
|
||||
<a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>
|
||||
</div>{{! /bs-docs-example }}
|
||||
<pre class="prettyprint linenums">
|
||||
<a class="btn btn-small" href="#"><i class="icon-star"></i></a>
|
||||
<a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
|
||||
<a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a>
|
||||
<a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>
|
||||
</pre>
|
||||
|
||||
|
||||
<h4>{{_i}}Navigation{{/i}}</h4>
|
||||
<div class="bs-docs-example">
|
||||
<div class="well" style="padding: 8px 0; margin-bottom: 0;">
|
||||
|
||||
@@ -90,16 +90,35 @@
|
||||
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Disabled menu options{{/i}}</h3>
|
||||
<p>{{_i}}Add <code>.disabled</code> to a <code><li></code> in the dropdown to disable the link.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="dropdown clearfix">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
|
||||
<li><a tabindex="-1" href="#">{{_i}}Regular link{{/i}}</a></li>
|
||||
<li class="disabled"><a tabindex="-1" href="#">{{_i}}Disabled link{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Another link{{/i}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>{{! /example }}
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
|
||||
<li><a tabindex="-1" href="#">{{_i}}Regular link{{/i}}</a></li>
|
||||
<li class="disabled"><a tabindex="-1" href="#">{{_i}}Disabled link{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Another link{{/i}}</a></li>
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Sub menus on dropdowns{{/i}}</h3>
|
||||
<p>{{_i}}Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.{{/i}}</p>
|
||||
<div class="bs-docs-example" style="min-height: 180px;">
|
||||
<div class="bs-docs-example bs-docs-example-submenus">
|
||||
|
||||
<div class="pull-left">
|
||||
<p class="muted">Default</p>
|
||||
<div class="dropdown clearfix">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
|
||||
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
@@ -118,10 +137,10 @@
|
||||
</div>
|
||||
</div>{{! /.pull-left }}
|
||||
|
||||
<div class="pull-left" style="margin-left: 20px;">
|
||||
<div class="pull-left">
|
||||
<p class="muted">Dropup</p>
|
||||
<div class="dropup">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
|
||||
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
@@ -140,10 +159,10 @@
|
||||
</div>
|
||||
</div>{{! /.pull-left }}
|
||||
|
||||
<div class="pull-left" style="margin-left: 20px;">
|
||||
<div class="pull-left">
|
||||
<p class="muted">Left submenu</p>
|
||||
<div class="dropdown">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
|
||||
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
@@ -201,9 +220,9 @@
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="btn-group">
|
||||
<button class="btn">1</button>
|
||||
<button class="btn">2</button>
|
||||
<button class="btn">3</button>
|
||||
<button class="btn">Left</button>
|
||||
<button class="btn">Middle</button>
|
||||
<button class="btn">Right</button>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
@@ -1425,6 +1444,7 @@
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -1454,7 +1474,7 @@
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
<li class="disabled"><a href="#">Prev</a></li>
|
||||
<li class="disabled"><a href="#">&laquo;</a></li>
|
||||
<li class="active"><a href="#">1</a></li>
|
||||
...
|
||||
</ul>
|
||||
@@ -1464,7 +1484,7 @@
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
<li class="disabled"><span>Prev</span></li>
|
||||
<li class="disabled"><span>&laquo;</span></li>
|
||||
<li class="active"><span>1</span></li>
|
||||
...
|
||||
</ul>
|
||||
@@ -1788,6 +1808,9 @@
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>{{_i}}Easily collapsible{{/i}}</h3>
|
||||
<p>{{_i}}For easy implementation, labels and badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.{{/i}}</p>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@@ -1850,22 +1873,22 @@
|
||||
<ul class="thumbnails">
|
||||
<li class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x180" alt="">
|
||||
<img data-src="holder.js/260x180" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x180" alt="">
|
||||
<img data-src="holder.js/260x180" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x180" alt="">
|
||||
<img data-src="holder.js/260x180" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x180" alt="">
|
||||
<img data-src="holder.js/260x180" alt="">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -1877,7 +1900,7 @@
|
||||
<ul class="thumbnails">
|
||||
<li class="span4">
|
||||
<div class="thumbnail">
|
||||
<img src="http://placehold.it/300x200" alt="">
|
||||
<img data-src="holder.js/300x200" alt="">
|
||||
<div class="caption">
|
||||
<h3>{{_i}}Thumbnail label{{/i}}</h3>
|
||||
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
@@ -1887,7 +1910,7 @@
|
||||
</li>
|
||||
<li class="span4">
|
||||
<div class="thumbnail">
|
||||
<img src="http://placehold.it/300x200" alt="">
|
||||
<img data-src="holder.js/300x200" alt="">
|
||||
<div class="caption">
|
||||
<h3>{{_i}}Thumbnail label{{/i}}</h3>
|
||||
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
@@ -1897,7 +1920,7 @@
|
||||
</li>
|
||||
<li class="span4">
|
||||
<div class="thumbnail">
|
||||
<img src="http://placehold.it/300x200" alt="">
|
||||
<img data-src="holder.js/300x200" alt="">
|
||||
<div class="caption">
|
||||
<h3>{{_i}}Thumbnail label{{/i}}</h3>
|
||||
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
@@ -1923,7 +1946,7 @@
|
||||
<ul class="thumbnails">
|
||||
<li class="span4">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/300x200" alt="">
|
||||
<img data-src="holder.js/300x200" alt="">
|
||||
</a>
|
||||
</li>
|
||||
...
|
||||
@@ -1934,7 +1957,7 @@
|
||||
<ul class="thumbnails">
|
||||
<li class="span4">
|
||||
<div class="thumbnail">
|
||||
<img src="http://placehold.it/300x200" alt="">
|
||||
<img data-src="holder.js/300x200" alt="">
|
||||
<h3>{{_i}}Thumbnail label{{/i}}</h3>
|
||||
<p>{{_i}}Thumbnail caption...{{/i}}</p>
|
||||
</div>
|
||||
@@ -1948,27 +1971,27 @@
|
||||
<ul class="thumbnails">
|
||||
<li class="span4">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/360x270" alt="">
|
||||
<img data-src="holder.js/360x270" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x120" alt="">
|
||||
<img data-src="holder.js/260x120" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span2">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/160x120" alt="">
|
||||
<img data-src="holder.js/160x120" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x120" alt="">
|
||||
<img data-src="holder.js/260x120" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span2">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/160x120" alt="">
|
||||
<img data-src="holder.js/160x120" alt="">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -1995,16 +2018,16 @@
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="alert">
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<button type="button" class="close" data-dismiss="alert">&times;</button>
|
||||
<strong>{{_i}}Warning!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Dismiss buttons{{/i}}</h3>
|
||||
<p>{{_i}}Mobile Safari and Mobile Opera browsers, in addition to the <code>data-dismiss="alert"</code> attribute, require an <code>href="#"</code> for the dismissal of alerts when using an <code><a></code> tag.{{/i}}</p>
|
||||
<pre class="prettyprint linenums"><a href="#" class="close" data-dismiss="alert">×</a></pre>
|
||||
<pre class="prettyprint linenums"><a href="#" class="close" data-dismiss="alert">&times;</a></pre>
|
||||
<p>{{_i}}Alternatively, you may use a <code><button></code> element with the data attribute, which we have opted to do for our docs. When using <code><button></code>, you must include <code>type="button"</code> or your forms may not submit.{{/i}}</p>
|
||||
<pre class="prettyprint linenums"><button type="button" class="close" data-dismiss="alert">×</button></pre>
|
||||
<pre class="prettyprint linenums"><button type="button" class="close" data-dismiss="alert">&times;</button></pre>
|
||||
|
||||
<h3>{{_i}}Dismiss alerts via JavaScript{{/i}}</h3>
|
||||
<p>{{_i}}Use the <a href="./javascript.html#alerts">alerts jQuery plugin</a> for quick and easy dismissal of alerts.{{/i}}</p>
|
||||
@@ -2024,7 +2047,7 @@
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="alert alert-block">
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<button type="button" class="close" data-dismiss="alert">&times;</button>
|
||||
<h4>{{_i}}Warning!{{/i}}</h4>
|
||||
{{_i}}Best check yo self, you're not...{{/i}}
|
||||
</div>
|
||||
@@ -2240,7 +2263,7 @@
|
||||
<div class="bs-docs-example">
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
<img class="media-object" data-src="holder.js/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
|
||||
@@ -2249,14 +2272,14 @@
|
||||
</div>
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
<img class="media-object" data-src="holder.js/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
<img class="media-object" data-src="holder.js/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
|
||||
@@ -2269,7 +2292,7 @@
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
<img class="media-object" data-src="holder.js/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
|
||||
@@ -2293,7 +2316,7 @@
|
||||
<ul class="media-list">
|
||||
<li class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
<img class="media-object" data-src="holder.js/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
|
||||
@@ -2301,7 +2324,7 @@
|
||||
<!-- Nested media object -->
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
<img class="media-object" data-src="holder.js/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Nested media heading{{/i}}</h4>
|
||||
@@ -2309,7 +2332,7 @@
|
||||
<!-- Nested media object -->
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
<img class="media-object" data-src="holder.js/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Nested media heading{{/i}}</h4>
|
||||
@@ -2321,7 +2344,7 @@
|
||||
<!-- Nested media object -->
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
<img class="media-object" data-src="holder.js/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Nested media heading{{/i}}</h4>
|
||||
@@ -2332,7 +2355,7 @@
|
||||
</li>
|
||||
<li class="media">
|
||||
<a class="pull-right" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
<img class="media-object" data-src="holder.js/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
|
||||
@@ -2345,7 +2368,7 @@
|
||||
<ul class="media-list">
|
||||
<li class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
<img class="media-object" data-src="holder.js/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
|
||||
@@ -2414,7 +2437,7 @@
|
||||
<p><button class="close" style="float: none;">×</button></p>
|
||||
</div>
|
||||
<pre class="prettyprint linenums"><button class="close">&times;</button></pre>
|
||||
<p>{{_i}}iOS devices require an href="#" for click events if you would rather use an anchor.{{/i}}</p>
|
||||
<p>{{_i}}iOS devices require an <code>href="#"</code> for click events if you would rather use an anchor.{{/i}}</p>
|
||||
<pre class="prettyprint linenums"><a class="close" href="#">&times;</a></pre>
|
||||
|
||||
<h2>{{_i}}Helper classes{{/i}}</h2>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<div class="container">
|
||||
<h1>{{_i}}Customize and download{{/i}}</h1>
|
||||
<p class="lead">{{_i}}<a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.{{/i}}</p>
|
||||
<p class="lead">{{_i}}<a href="https://github.com/twbs/bootstrap/archive/v2.3.2.zip">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.{{/i}}</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -73,7 +73,6 @@
|
||||
</div><!-- /span -->
|
||||
<div class="span3">
|
||||
<h3>{{_i}}Miscellaneous{{/i}}</h3>
|
||||
<label class="checkbox"><input checked="checked" type="checkbox" value="media.less"> {{_i}}Media object{{/i}}</label>
|
||||
<label class="checkbox"><input checked="checked" type="checkbox" value="wells.less"> {{_i}}Wells{{/i}}</label>
|
||||
<label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> {{_i}}Close icon{{/i}}</label>
|
||||
<label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> {{_i}}Utilities{{/i}}</label>
|
||||
@@ -299,7 +298,7 @@
|
||||
<label>@btnPrimaryBackground</label>
|
||||
<input type="text" class="span3" placeholder="@linkColor">
|
||||
<label>@btnPrimaryBackgroundHighlight</label>
|
||||
<input type="text" class="span3" placeholder="darken(@white, 10%);">
|
||||
<input type="text" class="span3" placeholder="darken(@white, 10%)">
|
||||
|
||||
</div><!-- /span -->
|
||||
<div class="span3">
|
||||
@@ -379,7 +378,7 @@
|
||||
</h1>
|
||||
</div>
|
||||
<div class="download-btn">
|
||||
<a class="btn btn-primary" href="#" {{#production}}onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);"{{/production}}>Customize and Download</a>
|
||||
<a class="btn btn-primary" href="#" {{#production}}onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);"{{/production}}>{{_i}}Customize and Download{{/i}}</a>
|
||||
<h4>{{_i}}What's included?{{/i}}</h4>
|
||||
<p>{{_i}}Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.{{/i}}</p>
|
||||
</div>
|
||||
|
||||
@@ -65,16 +65,8 @@
|
||||
|
||||
<h2>{{_i}}Tools for compiling{{/i}}</h2>
|
||||
|
||||
<h3>{{_i}}Node with makefile{{/i}}</h3>
|
||||
<p>{{_i}}Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:{{/i}}</p>
|
||||
<pre>$ npm install -g less jshint recess uglify-js</pre>
|
||||
<p>{{_i}}Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.{{/i}}</p>
|
||||
<p>{{_i}}Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}Command line{{/i}}</h3>
|
||||
<p>{{_i}}Install the LESS command line tool via Node and run the following command:{{/i}}</p>
|
||||
<pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre>
|
||||
<p>{{_i}}Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!{{/i}}</p>
|
||||
<p>{{_i}}Follow <a href="https://github.com/twbs/bootstrap#developers">the instructions in the project readme</a> on GitHub for compiling via command line.{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}JavaScript{{/i}}</h3>
|
||||
<p>{{_i}}<a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code><head></code>.{{/i}}</p>
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
<div class="span6">
|
||||
<h2>Download source</h2>
|
||||
<p>Get the original files for all CSS and JavaScript, along with a local copy of the docs by downloading the latest version directly from GitHub.</p>
|
||||
<p><a class="btn btn-large" href="https://github.com/twitter/bootstrap/zipball/master" {{#production}}onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);"{{/production}}>{{_i}}Download Bootstrap source{{/i}}</a></p>
|
||||
<p><a class="btn btn-large" href="https://github.com/twbs/bootstrap/zipball/master" {{#production}}onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);"{{/production}}>{{_i}}Download Bootstrap source{{/i}}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -86,13 +86,13 @@
|
||||
<p class="lead">{{_i}}Bootstrap comes equipped with HTML, CSS, and JS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the <a href="http://getbootstrap.com">Bootstrap documentation</a>.{{/i}}</p>
|
||||
|
||||
<h2>{{_i}}Docs sections{{/i}}</h2>
|
||||
<h4><a href="http://twitter.github.com/bootstrap/scaffolding.html">{{_i}}Scaffolding{{/i}}</a></h4>
|
||||
<h4><a href="http://twbs.github.com/bootstrap/scaffolding.html">{{_i}}Scaffolding{{/i}}</a></h4>
|
||||
<p>{{_i}}Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.{{/i}}</p>
|
||||
<h4><a href="http://twitter.github.com/bootstrap/base-css.html">{{_i}}Base CSS{{/i}}</a></h4>
|
||||
<h4><a href="http://twbs.github.com/bootstrap/base-css.html">{{_i}}Base CSS{{/i}}</a></h4>
|
||||
<p>{{_i}}Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes <a href="http://glyphicons.com">Glyphicons</a>, a great little icon set.{{/i}}</p>
|
||||
<h4><a href="http://twitter.github.com/bootstrap/components.html">{{_i}}Components{{/i}}</a></h4>
|
||||
<h4><a href="http://twbs.github.com/bootstrap/components.html">{{_i}}Components{{/i}}</a></h4>
|
||||
<p>{{_i}}Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.{{/i}}</p>
|
||||
<h4><a href="http://twitter.github.com/bootstrap/javascript.html">{{_i}}JavaScript plugins{{/i}}</a></h4>
|
||||
<h4><a href="http://twbs.github.com/bootstrap/javascript.html">{{_i}}JavaScript plugins{{/i}}</a></h4>
|
||||
<p>{{_i}}Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.{{/i}}</p>
|
||||
|
||||
<h2>{{_i}}List of components{{/i}}</h2>
|
||||
@@ -127,17 +127,18 @@
|
||||
<div class="page-header">
|
||||
<h1>{{_i}}4. Basic HTML template{{/i}}</h1>
|
||||
</div>
|
||||
<p class="lead">{{_i}}With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <a href="#file-structure">File structure</a>.{{/i}}</p>
|
||||
<p class="lead">{{_i}}With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <a href="./getting-started.html#file-structure">File structure</a>.{{/i}}</p>
|
||||
<p>{{_i}}Now, here's a look at a <strong>typical HTML file</strong>:{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Bootstrap 101 Template</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello, world!</h1>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
<script src="http://code.jquery.com/jquery.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</pre>
|
||||
@@ -147,12 +148,13 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Bootstrap 101 Template</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- Bootstrap -->
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello, world!</h1>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
<script src="http://code.jquery.com/jquery.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -172,21 +174,21 @@
|
||||
<ul class="thumbnails bootstrap-examples">
|
||||
<li class="span3">
|
||||
<a class="thumbnail" href="examples/starter-template.html">
|
||||
<img src="assets/img/examples/bootstrap-example-starter.jpg" alt="">
|
||||
<img src="assets/img/examples/bootstrap-example-starter.png" alt="">
|
||||
</a>
|
||||
<h4>{{_i}}Starter template{{/i}}</h4>
|
||||
<p>{{_i}}A barebones HTML document with all the Bootstrap CSS and JavaScript included.{{/i}}</p>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a class="thumbnail" href="examples/hero.html">
|
||||
<img src="assets/img/examples/bootstrap-example-hero.jpg" alt="">
|
||||
<img src="assets/img/examples/bootstrap-example-marketing.png" alt="">
|
||||
</a>
|
||||
<h4>{{_i}}Basic marketing site{{/i}}</h4>
|
||||
<p>{{_i}}Featuring a hero unit for a primary message and three supporting elements.{{/i}}</p>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a class="thumbnail" href="examples/fluid.html">
|
||||
<img src="assets/img/examples/bootstrap-example-fluid.jpg" alt="">
|
||||
<img src="assets/img/examples/bootstrap-example-fluid.png" alt="">
|
||||
</a>
|
||||
<h4>{{_i}}Fluid layout{{/i}}</h4>
|
||||
<p>{{_i}}Uses our new responsive, fluid grid system to create a seamless liquid layout.{{/i}}</p>
|
||||
@@ -199,6 +201,13 @@
|
||||
<h4>{{_i}}Narrow marketing{{/i}}</h4>
|
||||
<p>{{_i}}Slim, lightweight marketing template for small projects or teams.{{/i}}</p>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a class="thumbnail" href="examples/justified-nav.html">
|
||||
<img src="assets/img/examples/bootstrap-example-justified-nav.png" alt="">
|
||||
</a>
|
||||
<h4>{{_i}}Justified nav{{/i}}</h4>
|
||||
<p>{{_i}}Marketing page with equal-width navigation links in a modified navbar.{{/i}}</p>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a class="thumbnail" href="examples/signin.html">
|
||||
<img src="assets/img/examples/bootstrap-example-signin.png" alt="">
|
||||
@@ -206,6 +215,7 @@
|
||||
<h4>{{_i}}Sign in{{/i}}</h4>
|
||||
<p>{{_i}}Barebones sign in form with custom, larger form controls and a flexible layout.{{/i}}</p>
|
||||
</li>
|
||||
|
||||
<li class="span3">
|
||||
<a class="thumbnail" href="examples/sticky-footer.html">
|
||||
<img src="assets/img/examples/bootstrap-example-sticky-footer.png" alt="">
|
||||
@@ -213,7 +223,6 @@
|
||||
<h4>{{_i}}Sticky footer{{/i}}</h4>
|
||||
<p>{{_i}}Pin a fixed-height footer to the bottom of the user's viewport.{{/i}}</p>
|
||||
</li>
|
||||
|
||||
<li class="span3">
|
||||
<a class="thumbnail" href="examples/carousel.html">
|
||||
<img src="assets/img/examples/bootstrap-example-carousel.png" alt="">
|
||||
|
||||
@@ -3,11 +3,11 @@
|
||||
<h1>{{_i}}Bootstrap{{/i}}</h1>
|
||||
<p>{{_i}}Sleek, intuitive, and powerful front-end framework for faster and easier web development.{{/i}}</p>
|
||||
<p>
|
||||
<a href="assets/bootstrap.zip" class="btn btn-primary btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 2.2.0']);"{{/production}}>{{_i}}Download Bootstrap{{/i}}</a>
|
||||
<a href="https://github.com/twbs/bootstrap/archive/v2.3.2.zip" class="btn btn-primary btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 2.3.2']);"{{/production}}>{{_i}}Download Bootstrap{{/i}}</a>
|
||||
</p>
|
||||
<ul class="masthead-links">
|
||||
<li>
|
||||
<a href="http://github.com/twitter/bootstrap" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);"{{/production}}>{{_i}}GitHub project{{/i}}</a>
|
||||
<a href="http://github.com/twbs/bootstrap" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);"{{/production}}>{{_i}}GitHub project{{/i}}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./getting-started.html#examples" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);"{{/production}}>{{_i}}Examples{{/i}}</a>
|
||||
@@ -16,7 +16,7 @@
|
||||
<a href="./extend.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Extend']);"{{/production}}>{{_i}}Extend{{/i}}</a>
|
||||
</li>
|
||||
<li>
|
||||
{{_i}}Version 2.2.0{{/i}}
|
||||
{{_i}}Version 2.3.2{{/i}}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -26,16 +26,16 @@
|
||||
<div class="container">
|
||||
<ul class="bs-docs-social-buttons">
|
||||
<li>
|
||||
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
|
||||
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
|
||||
</li>
|
||||
<li>
|
||||
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px"></iframe>
|
||||
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
|
||||
</li>
|
||||
<li class="follow-btn">
|
||||
<a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">{{_i}}Follow @twbootstrap{{/i}}</a>
|
||||
</li>
|
||||
<li class="tweet-btn">
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://getbootstrap.com" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Bootstrap">Tweet</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -50,19 +50,19 @@
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span4">
|
||||
<img src="assets/img/bs-docs-twitter-github.png">
|
||||
<img class="marketing-img" src="assets/img/bs-docs-twitter-github.png">
|
||||
<h2>{{_i}}By nerds, for nerds.{{/i}}</h2>
|
||||
<p>{{_i}}Built at Twitter by <a href="http://twitter.com/mdo">@mdo</a> and <a href="http://twitter.com/fat">@fat</a>, Bootstrap utilizes <a href="http://lesscss.org">LESS CSS</a>, is compiled via <a href="http://nodejs.org">Node</a>, and is managed through <a href="http://github.com">GitHub</a> to help nerds do awesome stuff on the web.{{/i}}</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<img src="assets/img/bs-docs-responsive-illustrations.png">
|
||||
<img class="marketing-img" src="assets/img/bs-docs-responsive-illustrations.png">
|
||||
<h2>{{_i}}Made for everyone.{{/i}}</h2>
|
||||
<p>{{_i}}Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via <a href="./scaffolding.html#responsive">responsive CSS</a> as well.{{/i}}</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<img src="assets/img/bs-docs-bootstrap-features.png">
|
||||
<img class="marketing-img" src="assets/img/bs-docs-bootstrap-features.png">
|
||||
<h2>{{_i}}Packed with features.{{/i}}</h2>
|
||||
<p>{{_i}}A 12-column responsive <a href="./scaffolding.html#grid">grid</a>, dozens of components, <a href="./javascript.html">JavaScript plugins</a>, typography, form controls, and even a <a href="./customize.html">web-based Customizer</a> to make Bootstrap your own.{{/i}}</p>
|
||||
<p>{{_i}}A 12-column responsive <a href="./scaffolding.html#gridSystem">grid</a>, dozens of components, <a href="./javascript.html">JavaScript plugins</a>, typography, form controls, and even a <a href="./customize.html">web-based Customizer</a> to make Bootstrap your own.{{/i}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -63,9 +63,17 @@ $("#myModal").modal('show') // initializes and invokes show immed
|
||||
</pre>
|
||||
<p>{{_i}}Each plugin also exposes its raw constructor on a `Constructor` property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}No Conflict{{/i}}</h3>
|
||||
<p>{{_i}}Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.{{/i}}</p>
|
||||
|
||||
<pre class="prettyprint linenums">
|
||||
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
|
||||
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the bootstrap functionality
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Events{{/i}}</h3>
|
||||
<p>{{_i}}Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.{{/i}}</p>
|
||||
<p>{{_i}}All infinitive events provide preventDefault functionality. This provides the abililty to stop the execution of an action before it starts.{{/i}}</p>
|
||||
<p>{{_i}}All infinitive events provide preventDefault functionality. This provides the ability to stop the execution of an action before it starts.{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
$('#myModal').on('show', function (e) {
|
||||
if (!data) return e.preventDefault() // stops modal from being shown
|
||||
@@ -82,7 +90,7 @@ $('#myModal').on('show', function (e) {
|
||||
<h1>{{_i}}Transitions{{/i}} <small>bootstrap-transition.js</small></h1>
|
||||
</div>
|
||||
<h3>{{_i}}About transitions{{/i}}</h3>
|
||||
<p>{{_i}}For simple transition effects, include bootstrap-transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this—it's already there.{{/i}}</p>
|
||||
<p>{{_i}}For simple transition effects, include <strong>bootstrap-transition.js</strong> once alongside the other JS files. If you're using the compiled (or minified) <strong>bootstrap.js</strong>, there is no need to include this—it's already there.{{/i}}</p>
|
||||
<h3>{{_i}}Use cases{{/i}}</h3>
|
||||
<p>{{_i}}A few examples of the transition plugin:{{/i}}</p>
|
||||
<ul>
|
||||
@@ -111,7 +119,7 @@ $('#myModal').on('show', function (e) {
|
||||
<h3>{{_i}}Static example{{/i}}</h3>
|
||||
<p>{{_i}}A rendered modal with header, body, and set of actions in the footer.{{/i}}</p>
|
||||
<div class="bs-docs-example" style="background-color: #f5f5f5;">
|
||||
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
|
||||
<div class="modal" style="position: relative; top: auto; left: auto; right: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3>{{_i}}Modal header{{/i}}</h3>
|
||||
@@ -327,21 +335,21 @@ $('#myModal').on('hidden', function () {
|
||||
<li class="dropdown">
|
||||
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
|
||||
<li><a tabindex="-1" href="http://google.com">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#anotherAction">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">{{_i}}Action{{/i}}</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">{{_i}}Another action{{/i}}</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown 2 {{/i}}<b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
|
||||
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -349,11 +357,11 @@ $('#myModal').on('hidden', function () {
|
||||
<li id="fat-menu" class="dropdown">
|
||||
<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown 3{{/i}} <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
|
||||
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -369,31 +377,31 @@ $('#myModal').on('hidden', function () {
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
|
||||
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
|
||||
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown 2{{/i}} <b class="caret"></b></a>
|
||||
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
|
||||
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown 3{{/i}} <b class="caret"></b></a>
|
||||
<ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop5">
|
||||
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul> <!-- /tabs -->
|
||||
@@ -437,7 +445,7 @@ $('#myModal').on('hidden', function () {
|
||||
|
||||
<h3>{{_i}}Methods{{/i}}</h3>
|
||||
<h4>$().dropdown('toggle')</h4>
|
||||
<p>{{_i}}A programatic api for toggling menus for a given navbar or tabbed navigation.{{/i}}</p>
|
||||
<p>{{_i}}A programmatic api for toggling menus for a given navbar or tabbed navigation.{{/i}}</p>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -566,7 +574,7 @@ $('[data-spy="scroll"]').each(function () {
|
||||
|
||||
|
||||
<h2>{{_i}}Example tabs{{/i}}</h2>
|
||||
<p>{{_i}}Add quick, dynamic tab functionality to transiton through panes of local content, even via dropdown menus.{{/i}}</p>
|
||||
<p>{{_i}}Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<ul id="myTab" class="nav nav-tabs">
|
||||
<li class="active"><a href="#home" data-toggle="tab">{{_i}}Home{{/i}}</a></li>
|
||||
@@ -689,23 +697,27 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
|
||||
<h2>{{_i}}Examples{{/i}}</h2>
|
||||
<p>{{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.{{/i}}</p>
|
||||
<p>{{_i}}For performance reasons, the tooltip and popover data-apis are opt in, meaning <strong>you must initialize them yourself</strong>.{{/i}}</p>
|
||||
<p>{{_i}}Hover over the links below to see tooltips:{{/i}}</p>
|
||||
<div class="bs-docs-example tooltip-demo">
|
||||
<p class="muted" style="margin-bottom: 0;">{{_i}}Tight pants next level keffiyeh <a href="#" rel="tooltip" title="Default 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 really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, 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 class="muted" style="margin-bottom: 0;">{{_i}}Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default 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="#" data-toggle="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 really ironic artisan <a href="#" data-toggle="tooltip" title="A much longer tooltip belongs right here to demonstrate the max-width we apply.">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.{{/i}}
|
||||
</p>
|
||||
</div>{{! /example }}
|
||||
|
||||
<h3>{{_i}}Four directions{{/i}}</h3>
|
||||
<div class="bs-docs-example tooltip-demo">
|
||||
<ul class="bs-docs-tooltip-examples">
|
||||
<li><a href="#" rel="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li>
|
||||
<li><a href="#" rel="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li>
|
||||
<li><a href="#" rel="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li>
|
||||
<li><a href="#" rel="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li>
|
||||
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li>
|
||||
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li>
|
||||
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li>
|
||||
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li>
|
||||
</ul>
|
||||
</div>{{! /example }}
|
||||
|
||||
|
||||
<h3>{{_i}}Tooltips in input groups{{/i}}</h3>
|
||||
<p>{{_i}}When using tooltips and popovers with the Bootstrap input groups, you'll have to set the <code>container</code> (documented below) option to avoid unwanted side effects.{{/i}}</p>
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
@@ -739,7 +751,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{_i}}placement{{/i}}</td>
|
||||
<td>{{_i}}string|function{{/i}}</td>
|
||||
<td>{{_i}}string | function{{/i}}</td>
|
||||
<td>'top'</td>
|
||||
<td>{{_i}}how to position the tooltip{{/i}} - top | bottom | left | right</td>
|
||||
</tr>
|
||||
@@ -758,8 +770,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
<tr>
|
||||
<td>{{_i}}trigger{{/i}}</td>
|
||||
<td>{{_i}}string{{/i}}</td>
|
||||
<td>'hover'</td>
|
||||
<td>{{_i}}how tooltip is triggered{{/i}} - click | hover | focus | manual</td>
|
||||
<td>'hover focus'</td>
|
||||
<td>{{_i}}how tooltip is triggered{{/i}} - click | hover | focus | manual. {{_i}}Note you case pass trigger mutliple, space seperated, trigger types.{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{_i}}delay{{/i}}</td>
|
||||
@@ -771,6 +783,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
<p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{_i}}container{{/i}}</td>
|
||||
<td>{{_i}}string | false{{/i}}</td>
|
||||
<td>{{_i}}false{{/i}}</td>
|
||||
<td>
|
||||
<p>{{_i}}Appends the tooltip to a specific element <code>container: 'body'</code>{{/i}}</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="alert alert-info">
|
||||
@@ -779,8 +799,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
</div>
|
||||
|
||||
<h3>{{_i}}Markup{{/i}}</h3>
|
||||
<p>{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}</p>
|
||||
<pre class="prettyprint linenums"><a href="#" rel="tooltip" title="{{_i}}first tooltip{{/i}}">{{_i}}hover over me{{/i}}</a></pre>
|
||||
<pre class="prettyprint linenums"><a href="#" data-toggle="tooltip" title="{{_i}}first tooltip{{/i}}">{{_i}}hover over me{{/i}}</a></pre>
|
||||
|
||||
<h3>{{_i}}Methods{{/i}}</h3>
|
||||
<h4>$().tooltip({{_i}}options{{/i}})</h4>
|
||||
@@ -852,16 +871,16 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
|
||||
<h3>Live demo</h3>
|
||||
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
||||
<a href="#" class="btn btn-large btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">{{_i}}Click to toggle popover{{/i}}</a>
|
||||
<a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">{{_i}}Click to toggle popover{{/i}}</a>
|
||||
</div>
|
||||
|
||||
<h4>{{_i}}Four directions{{/i}}</h4>
|
||||
<div class="bs-docs-example tooltip-demo">
|
||||
<ul class="bs-docs-tooltip-examples">
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li>
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li>
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</a></li>
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a></li>
|
||||
<li><a href="#" class="btn" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li>
|
||||
<li><a href="#" class="btn" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li>
|
||||
<li><a href="#" class="btn" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</a></li>
|
||||
<li><a href="#" class="btn" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a></li>
|
||||
</ul>
|
||||
</div>{{! /example }}
|
||||
|
||||
@@ -899,7 +918,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{_i}}placement{{/i}}</td>
|
||||
<td>{{_i}}string|function{{/i}}</td>
|
||||
<td>{{_i}}string | function{{/i}}</td>
|
||||
<td>'right'</td>
|
||||
<td>{{_i}}how to position the popover{{/i}} - top | bottom | left | right</td>
|
||||
</tr>
|
||||
@@ -937,6 +956,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
<p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{_i}}container{{/i}}</td>
|
||||
<td>{{_i}}string | false{{/i}}</td>
|
||||
<td>{{_i}}false{{/i}}</td>
|
||||
<td>
|
||||
<p>{{_i}}Appends the popover to a specific element <code>container: 'body'</code>{{/i}}</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="alert alert-info">
|
||||
@@ -1054,7 +1081,7 @@ $('#my-alert').bind('closed', function () {
|
||||
<p>{{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}</p>
|
||||
|
||||
<h4>{{_i}}Stateful{{/i}}</h4>
|
||||
<p>{{_i}}Add data-loading-text="Loading..." to use a loading state on a button.{{/i}}</p>
|
||||
<p>{{_i}}Add <code>data-loading-text="Loading..."</code> to use a loading state on a button.{{/i}}</p>
|
||||
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
||||
<button type="button" id="fat-btn" data-loading-text="loading..." class="btn btn-primary">
|
||||
{{_i}}Loading state{{/i}}
|
||||
@@ -1063,14 +1090,14 @@ $('#my-alert').bind('closed', function () {
|
||||
<pre class="prettyprint linenums"><button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button></pre>
|
||||
|
||||
<h4>{{_i}}Single toggle{{/i}}</h4>
|
||||
<p>{{_i}}Add data-toggle="button" to activate toggling on a single button.{{/i}}</p>
|
||||
<p>{{_i}}Add <code>data-toggle="button"</code> to activate toggling on a single button.{{/i}}</p>
|
||||
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
||||
<button type="button" class="btn btn-primary" data-toggle="button">{{_i}}Single Toggle{{/i}}</button>
|
||||
</div>{{! /example }}
|
||||
<pre class="prettyprint linenums"><button type="button" class="btn" data-toggle="button">Single Toggle</button></pre>
|
||||
<pre class="prettyprint linenums"><button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button></pre>
|
||||
|
||||
<h4>{{_i}}Checkbox{{/i}}</h4>
|
||||
<p>{{_i}}Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.{{/i}}</p>
|
||||
<p>{{_i}}Add <code>data-toggle="buttons-checkbox"</code> for checkbox style toggling on btn-group.{{/i}}</p>
|
||||
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
||||
<div class="btn-group" data-toggle="buttons-checkbox">
|
||||
<button type="button" class="btn btn-primary">{{_i}}Left{{/i}}</button>
|
||||
@@ -1080,14 +1107,14 @@ $('#my-alert').bind('closed', function () {
|
||||
</div>{{! /example }}
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="btn-group" data-toggle="buttons-checkbox">
|
||||
<button type="button" class="btn">Left</button>
|
||||
<button type="button" class="btn">Middle</button>
|
||||
<button type="button" class="btn">Right</button>
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
<button type="button" class="btn btn-primary">Middle</button>
|
||||
<button type="button" class="btn btn-primary">Right</button>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h4>{{_i}}Radio{{/i}}</h4>
|
||||
<p>{{_i}}Add data-toggle="buttons-radio" for radio style toggling on btn-group.{{/i}}</p>
|
||||
<p>{{_i}}Add <code>data-toggle="buttons-radio"</code> for radio style toggling on btn-group.{{/i}}</p>
|
||||
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
||||
<div class="btn-group" data-toggle="buttons-radio">
|
||||
<button type="button" class="btn btn-primary">{{_i}}Left{{/i}}</button>
|
||||
@@ -1097,9 +1124,9 @@ $('#my-alert').bind('closed', function () {
|
||||
</div>{{! /example }}
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="btn-group" data-toggle="buttons-radio">
|
||||
<button type="button" class="btn">Left</button>
|
||||
<button type="button" class="btn">Middle</button>
|
||||
<button type="button" class="btn">Right</button>
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
<button type="button" class="btn btn-primary">Middle</button>
|
||||
<button type="button" class="btn btn-primary">Right</button>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
@@ -1131,7 +1158,7 @@ $('#my-alert').bind('closed', function () {
|
||||
<pre class="prettyprint linenums"><button type="button" class="btn" data-loading-text="loading stuff..." >...</button></pre>
|
||||
<div class="alert alert-info">
|
||||
<strong>{{_i}}Heads up!{{/i}}</strong>
|
||||
{{_i}}<a href="https://github.com/twitter/bootstrap/issues/793">Firefox persists the disabled state across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.{{/i}}
|
||||
{{_i}}<a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists the disabled state across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.{{/i}}
|
||||
</div>
|
||||
<h4>$().button('reset')</h4>
|
||||
<p>{{_i}}Resets button state - swaps text to original text.{{/i}}</p>
|
||||
@@ -1344,6 +1371,11 @@ $('#myCollapsible').on('hidden', function () {
|
||||
<p>{{_i}}The slideshow below shows a generic plugin and component for cycling through elements like a carousel.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<div id="myCarousel" class="carousel slide">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="1"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="item active">
|
||||
<img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
|
||||
@@ -1373,6 +1405,11 @@ $('#myCollapsible').on('hidden', function () {
|
||||
</div>{{! /example }}
|
||||
<pre class="prettyprint linenums">
|
||||
<div id="myCarousel" class="carousel slide">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="1"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="2"></li>
|
||||
</ol>
|
||||
<!-- {{_i}}Carousel items{{/i}} -->
|
||||
<div class="carousel-inner">
|
||||
<div class="active item">…</div>
|
||||
@@ -1397,14 +1434,14 @@ $('#myCollapsible').on('hidden', function () {
|
||||
<h2>{{_i}}Usage{{/i}}</h2>
|
||||
|
||||
<h3>{{_i}}Via data attributes{{/i}}</h3>
|
||||
<p>{{_i}}...{{/i}}</p>
|
||||
<p>{{_i}}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 it's 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 jump's the slide position to a particular index beginning with <code>0</code>.{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}Via JavaScript{{/i}}</h3>
|
||||
<p>{{_i}}Call carousel manually with:{{/i}}</p>
|
||||
<pre class="prettyprint linenums">$('.carousel').carousel()</pre>
|
||||
|
||||
<h3>{{_i}}Options{{/i}}</h3>
|
||||
<p>{{_i}}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.{{/i}}</p>
|
||||
<p>{{_i}}Options can be passed via data attributes or JavaScriptz. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.{{/i}}</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -1487,7 +1524,7 @@ $('.carousel').carousel({
|
||||
<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
|
||||
</div>{{! /example }}
|
||||
<pre class="prettyprint linenums"><input type="text" data-provide="typeahead"></pre>
|
||||
|
||||
<p>You'll want to set <code>autocomplete="off"</code> to prevent default browser menus from appearing over the Bootstrap typeahead dropdown.</p>
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
@@ -1593,14 +1630,6 @@ $('.carousel').carousel({
|
||||
<p>{{_i}}Call the affix plugin via JavaScript:{{/i}}</p>
|
||||
<pre class="prettyprint linenums">$('#navbar').affix()</pre>
|
||||
|
||||
<h3>{{_i}}Methods{{/i}}</h3>
|
||||
<h4>.affix('refresh')</h4>
|
||||
<p>{{_i}}When using affix in conjunction with adding or removing of elements from the DOM, you'll want to call the refresh method:{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
$('[data-spy="affix"]').each(function () {
|
||||
$(this).affix('refresh')
|
||||
});
|
||||
</pre>
|
||||
<h3>{{_i}}Options{{/i}}</h3>
|
||||
<p>{{_i}}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.{{/i}}</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
@@ -1617,7 +1646,7 @@ $('[data-spy="affix"]').each(function () {
|
||||
<td>{{_i}}offset{{/i}}</td>
|
||||
<td>{{_i}}number | function | object{{/i}}</td>
|
||||
<td>{{_i}}10{{/i}}</td>
|
||||
<td>{{_i}}Pixels to offset from screen when calculating position of scroll. If a single number is provide, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provided an object <code>offset: { x: 10 }</code>. Use a function when you need to dynamically provide an offset (useful for some responsive designs).{{/i}}</td>
|
||||
<td>{{_i}}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 left directions. To listen for a single direction, or multiple unique offsets, just provide an object <code>offset: { x: 10 }</code>. Use a function when you need to dynamically provide an offset (useful for some responsive designs).{{/i}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
<p>{{_i}}These styles can be found within <strong>scaffolding.less</strong>.{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}Reset via Normalize{{/i}}</h3>
|
||||
<p>{{_i}}With Bootstrap 2, the old reset block has been dropped in favor of <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> that also powers the <a href="http://html5boilerplate.com" target="_blank">HTML5 Boilerplate</a>. While we use much of Normalize within our <strong>reset.less</strong>, we have removed some elements specifically for Bootstrap.{{/i}}</p>
|
||||
<p>{{_i}}With Bootstrap 2, the old reset block has been dropped in favor of <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a> that also powers the <a href="http://html5boilerplate.com" target="_blank">HTML5 Boilerplate</a>. While we use much of Normalize within our <strong>reset.less</strong>, we have removed some elements specifically for Bootstrap.{{/i}}</p>
|
||||
|
||||
</section>
|
||||
|
||||
@@ -230,13 +230,21 @@
|
||||
</pre>
|
||||
|
||||
<h2>{{_i}}Fluid nesting{{/i}}</h2>
|
||||
<p>{{_i}}Nesting with fluid grids is a bit different: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.{{/i}}</p>
|
||||
<p>{{_i}}Fluid grids utilize nesting differently: each nested level of columns should add up to 12 columns. This is because the fluid grid uses percentages, not pixels, for setting widths.{{/i}}</p>
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span12">
|
||||
{{_i}}Fluid 12{{/i}}
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span6">
|
||||
{{_i}}Fluid 6{{/i}}
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span6">
|
||||
{{_i}}Fluid 6{{/i}}
|
||||
</div>
|
||||
<div class="span6">
|
||||
{{_i}}Fluid 6{{/i}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span6">
|
||||
{{_i}}Fluid 6{{/i}}
|
||||
@@ -249,7 +257,13 @@
|
||||
<div class="span12">
|
||||
{{_i}}Fluid 12{{/i}}
|
||||
<div class="row-fluid">
|
||||
<div class="span6">{{_i}}Fluid 6{{/i}}</div>
|
||||
<div class="span6">
|
||||
{{_i}}Fluid 6{{/i}}
|
||||
<div class="row-fluid">
|
||||
<div class="span6">{{_i}}Fluid 6{{/i}}</div>
|
||||
<div class="span6">{{_i}}Fluid 6{{/i}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span6">{{_i}}Fluid 6{{/i}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* ==========================================================
|
||||
* bootstrap-affix.js v2.2.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#affix
|
||||
* bootstrap-affix.js v2.3.2
|
||||
* http://getbootstrap.com/2.3.2/javascript.html#affix
|
||||
* ==========================================================
|
||||
* Copyright 2012 Twitter, Inc.
|
||||
* Copyright 2013 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
@@ -68,6 +68,8 @@
|
||||
/* AFFIX PLUGIN DEFINITION
|
||||
* ======================= */
|
||||
|
||||
var old = $.fn.affix
|
||||
|
||||
$.fn.affix = function (option) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
@@ -85,6 +87,15 @@
|
||||
}
|
||||
|
||||
|
||||
/* AFFIX NO CONFLICT
|
||||
* ================= */
|
||||
|
||||
$.fn.affix.noConflict = function () {
|
||||
$.fn.affix = old
|
||||
return this
|
||||
}
|
||||
|
||||
|
||||
/* AFFIX DATA-API
|
||||
* ============== */
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* ==========================================================
|
||||
* bootstrap-alert.js v2.2.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#alerts
|
||||
* bootstrap-alert.js v2.3.2
|
||||
* http://getbootstrap.com/2.3.2/javascript.html#alerts
|
||||
* ==========================================================
|
||||
* Copyright 2012 Twitter, Inc.
|
||||
* Copyright 2013 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
@@ -68,6 +68,8 @@
|
||||
/* ALERT PLUGIN DEFINITION
|
||||
* ======================= */
|
||||
|
||||
var old = $.fn.alert
|
||||
|
||||
$.fn.alert = function (option) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
@@ -80,6 +82,15 @@
|
||||
$.fn.alert.Constructor = Alert
|
||||
|
||||
|
||||
/* ALERT NO CONFLICT
|
||||
* ================= */
|
||||
|
||||
$.fn.alert.noConflict = function () {
|
||||
$.fn.alert = old
|
||||
return this
|
||||
}
|
||||
|
||||
|
||||
/* ALERT DATA-API
|
||||
* ============== */
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* ============================================================
|
||||
* bootstrap-button.js v2.2.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#buttons
|
||||
* bootstrap-button.js v2.3.2
|
||||
* http://getbootstrap.com/2.3.2/javascript.html#buttons
|
||||
* ============================================================
|
||||
* Copyright 2012 Twitter, Inc.
|
||||
* Copyright 2013 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
@@ -64,6 +64,8 @@
|
||||
/* BUTTON PLUGIN DEFINITION
|
||||
* ======================== */
|
||||
|
||||
var old = $.fn.button
|
||||
|
||||
$.fn.button = function (option) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
@@ -82,6 +84,15 @@
|
||||
$.fn.button.Constructor = Button
|
||||
|
||||
|
||||
/* BUTTON NO CONFLICT
|
||||
* ================== */
|
||||
|
||||
$.fn.button.noConflict = function () {
|
||||
$.fn.button = old
|
||||
return this
|
||||
}
|
||||
|
||||
|
||||
/* BUTTON DATA-API
|
||||
* =============== */
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* ==========================================================
|
||||
* bootstrap-carousel.js v2.2.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#carousel
|
||||
* bootstrap-carousel.js v2.3.2
|
||||
* http://getbootstrap.com/2.3.2/javascript.html#carousel
|
||||
* ==========================================================
|
||||
* Copyright 2012 Twitter, Inc.
|
||||
* Copyright 2013 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
@@ -28,8 +28,8 @@
|
||||
|
||||
var Carousel = function (element, options) {
|
||||
this.$element = $(element)
|
||||
this.$indicators = this.$element.find('.carousel-indicators')
|
||||
this.options = options
|
||||
this.options.slide && this.slide(this.options.slide)
|
||||
this.options.pause == 'hover' && this.$element
|
||||
.on('mouseenter', $.proxy(this.pause, this))
|
||||
.on('mouseleave', $.proxy(this.cycle, this))
|
||||
@@ -39,19 +39,24 @@
|
||||
|
||||
cycle: function (e) {
|
||||
if (!e) this.paused = false
|
||||
if (this.interval) clearInterval(this.interval);
|
||||
this.options.interval
|
||||
&& !this.paused
|
||||
&& (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
|
||||
return this
|
||||
}
|
||||
|
||||
, getActiveIndex: function () {
|
||||
this.$active = this.$element.find('.item.active')
|
||||
this.$items = this.$active.parent().children()
|
||||
return this.$items.index(this.$active)
|
||||
}
|
||||
|
||||
, to: function (pos) {
|
||||
var $active = this.$element.find('.item.active')
|
||||
, children = $active.parent().children()
|
||||
, activePos = children.index($active)
|
||||
var activeIndex = this.getActiveIndex()
|
||||
, that = this
|
||||
|
||||
if (pos > (children.length - 1) || pos < 0) return
|
||||
if (pos > (this.$items.length - 1) || pos < 0) return
|
||||
|
||||
if (this.sliding) {
|
||||
return this.$element.one('slid', function () {
|
||||
@@ -59,18 +64,18 @@
|
||||
})
|
||||
}
|
||||
|
||||
if (activePos == pos) {
|
||||
if (activeIndex == pos) {
|
||||
return this.pause().cycle()
|
||||
}
|
||||
|
||||
return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos]))
|
||||
return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos]))
|
||||
}
|
||||
|
||||
, pause: function (e) {
|
||||
if (!e) this.paused = true
|
||||
if (this.$element.find('.next, .prev').length && $.support.transition.end) {
|
||||
this.$element.trigger($.support.transition.end)
|
||||
this.cycle()
|
||||
this.cycle(true)
|
||||
}
|
||||
clearInterval(this.interval)
|
||||
this.interval = null
|
||||
@@ -104,10 +109,19 @@
|
||||
|
||||
e = $.Event('slide', {
|
||||
relatedTarget: $next[0]
|
||||
, direction: direction
|
||||
})
|
||||
|
||||
if ($next.hasClass('active')) return
|
||||
|
||||
if (this.$indicators.length) {
|
||||
this.$indicators.find('.active').removeClass('active')
|
||||
this.$element.one('slid', function () {
|
||||
var $nextIndicator = $(that.$indicators.children()[that.getActiveIndex()])
|
||||
$nextIndicator && $nextIndicator.addClass('active')
|
||||
})
|
||||
}
|
||||
|
||||
if ($.support.transition && this.$element.hasClass('slide')) {
|
||||
this.$element.trigger(e)
|
||||
if (e.isDefaultPrevented()) return
|
||||
@@ -141,6 +155,8 @@
|
||||
/* CAROUSEL PLUGIN DEFINITION
|
||||
* ========================== */
|
||||
|
||||
var old = $.fn.carousel
|
||||
|
||||
$.fn.carousel = function (option) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
@@ -150,7 +166,7 @@
|
||||
if (!data) $this.data('carousel', (data = new Carousel(this, options)))
|
||||
if (typeof option == 'number') data.to(option)
|
||||
else if (action) data[action]()
|
||||
else if (options.interval) data.cycle()
|
||||
else if (options.interval) data.pause().cycle()
|
||||
})
|
||||
}
|
||||
|
||||
@@ -162,14 +178,29 @@
|
||||
$.fn.carousel.Constructor = Carousel
|
||||
|
||||
|
||||
/* CAROUSEL NO CONFLICT
|
||||
* ==================== */
|
||||
|
||||
$.fn.carousel.noConflict = function () {
|
||||
$.fn.carousel = old
|
||||
return this
|
||||
}
|
||||
|
||||
/* CAROUSEL DATA-API
|
||||
* ================= */
|
||||
|
||||
$(document).on('click.carousel.data-api', '[data-slide]', function (e) {
|
||||
$(document).on('click.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
|
||||
var $this = $(this), href
|
||||
, $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
|
||||
, options = !$target.data('carousel') && $.extend({}, $target.data(), $this.data())
|
||||
, options = $.extend({}, $target.data(), $this.data())
|
||||
, slideIndex
|
||||
|
||||
$target.carousel(options)
|
||||
|
||||
if (slideIndex = $this.attr('data-slide-to')) {
|
||||
$target.data('carousel').pause().to(slideIndex).cycle()
|
||||
}
|
||||
|
||||
e.preventDefault()
|
||||
})
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* =============================================================
|
||||
* bootstrap-collapse.js v2.2.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#collapse
|
||||
* bootstrap-collapse.js v2.3.2
|
||||
* http://getbootstrap.com/2.3.2/javascript.html#collapse
|
||||
* =============================================================
|
||||
* Copyright 2012 Twitter, Inc.
|
||||
* Copyright 2013 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
@@ -52,7 +52,7 @@
|
||||
, actives
|
||||
, hasData
|
||||
|
||||
if (this.transitioning) return
|
||||
if (this.transitioning || this.$element.hasClass('in')) return
|
||||
|
||||
dimension = this.dimension()
|
||||
scroll = $.camelCase(['scroll', dimension].join('-'))
|
||||
@@ -72,7 +72,7 @@
|
||||
|
||||
, hide: function () {
|
||||
var dimension
|
||||
if (this.transitioning) return
|
||||
if (this.transitioning || !this.$element.hasClass('in')) return
|
||||
dimension = this.dimension()
|
||||
this.reset(this.$element[dimension]())
|
||||
this.transition('removeClass', $.Event('hide'), 'hidden')
|
||||
@@ -120,14 +120,16 @@
|
||||
}
|
||||
|
||||
|
||||
/* COLLAPSIBLE PLUGIN DEFINITION
|
||||
* ============================== */
|
||||
/* COLLAPSE PLUGIN DEFINITION
|
||||
* ========================== */
|
||||
|
||||
var old = $.fn.collapse
|
||||
|
||||
$.fn.collapse = function (option) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
, data = $this.data('collapse')
|
||||
, options = typeof option == 'object' && option
|
||||
, options = $.extend({}, $.fn.collapse.defaults, $this.data(), typeof option == 'object' && option)
|
||||
if (!data) $this.data('collapse', (data = new Collapse(this, options)))
|
||||
if (typeof option == 'string') data[option]()
|
||||
})
|
||||
@@ -140,9 +142,18 @@
|
||||
$.fn.collapse.Constructor = Collapse
|
||||
|
||||
|
||||
/* COLLAPSIBLE DATA-API
|
||||
/* COLLAPSE NO CONFLICT
|
||||
* ==================== */
|
||||
|
||||
$.fn.collapse.noConflict = function () {
|
||||
$.fn.collapse = old
|
||||
return this
|
||||
}
|
||||
|
||||
|
||||
/* COLLAPSE DATA-API
|
||||
* ================= */
|
||||
|
||||
$(document).on('click.collapse.data-api', '[data-toggle=collapse]', function (e) {
|
||||
var $this = $(this), href
|
||||
, target = $this.attr('data-target')
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* ============================================================
|
||||
* bootstrap-dropdown.js v2.2.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#dropdowns
|
||||
* bootstrap-dropdown.js v2.3.2
|
||||
* http://getbootstrap.com/2.3.2/javascript.html#dropdowns
|
||||
* ============================================================
|
||||
* Copyright 2012 Twitter, Inc.
|
||||
* Copyright 2013 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
@@ -52,10 +52,15 @@
|
||||
clearMenus()
|
||||
|
||||
if (!isActive) {
|
||||
if ('ontouchstart' in document.documentElement) {
|
||||
// if mobile we we use a backdrop because click events don't delegate
|
||||
$('<div class="dropdown-backdrop"/>').insertBefore($(this)).on('click', clearMenus)
|
||||
}
|
||||
$parent.toggleClass('open')
|
||||
$this.focus()
|
||||
}
|
||||
|
||||
$this.focus()
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
@@ -80,9 +85,12 @@
|
||||
|
||||
isActive = $parent.hasClass('open')
|
||||
|
||||
if (!isActive || (isActive && e.keyCode == 27)) return $this.click()
|
||||
if (!isActive || (isActive && e.keyCode == 27)) {
|
||||
if (e.which == 27) $parent.find(toggle).focus()
|
||||
return $this.click()
|
||||
}
|
||||
|
||||
$items = $('[role=menu] li:not(.divider) a', $parent)
|
||||
$items = $('[role=menu] li:not(.divider):visible a', $parent)
|
||||
|
||||
if (!$items.length) return
|
||||
|
||||
@@ -100,6 +108,7 @@
|
||||
}
|
||||
|
||||
function clearMenus() {
|
||||
$('.dropdown-backdrop').remove()
|
||||
$(toggle).each(function () {
|
||||
getParent($(this)).removeClass('open')
|
||||
})
|
||||
@@ -114,8 +123,9 @@
|
||||
selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
|
||||
}
|
||||
|
||||
$parent = $(selector)
|
||||
$parent.length || ($parent = $this.parent())
|
||||
$parent = selector && $(selector)
|
||||
|
||||
if (!$parent || !$parent.length) $parent = $this.parent()
|
||||
|
||||
return $parent
|
||||
}
|
||||
@@ -124,6 +134,8 @@
|
||||
/* DROPDOWN PLUGIN DEFINITION
|
||||
* ========================== */
|
||||
|
||||
var old = $.fn.dropdown
|
||||
|
||||
$.fn.dropdown = function (option) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
@@ -136,13 +148,22 @@
|
||||
$.fn.dropdown.Constructor = Dropdown
|
||||
|
||||
|
||||
/* DROPDOWN NO CONFLICT
|
||||
* ==================== */
|
||||
|
||||
$.fn.dropdown.noConflict = function () {
|
||||
$.fn.dropdown = old
|
||||
return this
|
||||
}
|
||||
|
||||
|
||||
/* APPLY TO STANDARD DROPDOWN ELEMENTS
|
||||
* =================================== */
|
||||
|
||||
$(document)
|
||||
.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
|
||||
.on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
|
||||
.on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
|
||||
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
|
||||
.on('click.dropdown.data-api', clearMenus)
|
||||
.on('click.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
|
||||
.on('click.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
|
||||
.on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
|
||||
|
||||
}(window.jQuery);
|
||||
}(window.jQuery);
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* =========================================================
|
||||
* bootstrap-modal.js v2.2.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#modals
|
||||
* bootstrap-modal.js v2.3.2
|
||||
* http://getbootstrap.com/2.3.2/javascript.html#modals
|
||||
* =========================================================
|
||||
* Copyright 2012 Twitter, Inc.
|
||||
* Copyright 2013 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
@@ -60,8 +60,7 @@
|
||||
that.$element.appendTo(document.body) //don't move modals dom position
|
||||
}
|
||||
|
||||
that.$element
|
||||
.show()
|
||||
that.$element.show()
|
||||
|
||||
if (transition) {
|
||||
that.$element[0].offsetWidth // force reflow
|
||||
@@ -139,16 +138,17 @@
|
||||
})
|
||||
}
|
||||
|
||||
, hideModal: function (that) {
|
||||
this.$element
|
||||
.hide()
|
||||
.trigger('hidden')
|
||||
|
||||
this.backdrop()
|
||||
, hideModal: function () {
|
||||
var that = this
|
||||
this.$element.hide()
|
||||
this.backdrop(function () {
|
||||
that.removeBackdrop()
|
||||
that.$element.trigger('hidden')
|
||||
})
|
||||
}
|
||||
|
||||
, removeBackdrop: function () {
|
||||
this.$backdrop.remove()
|
||||
this.$backdrop && this.$backdrop.remove()
|
||||
this.$backdrop = null
|
||||
}
|
||||
|
||||
@@ -172,6 +172,8 @@
|
||||
|
||||
this.$backdrop.addClass('in')
|
||||
|
||||
if (!callback) return
|
||||
|
||||
doAnimate ?
|
||||
this.$backdrop.one($.support.transition.end, callback) :
|
||||
callback()
|
||||
@@ -180,8 +182,8 @@
|
||||
this.$backdrop.removeClass('in')
|
||||
|
||||
$.support.transition && this.$element.hasClass('fade')?
|
||||
this.$backdrop.one($.support.transition.end, $.proxy(this.removeBackdrop, this)) :
|
||||
this.removeBackdrop()
|
||||
this.$backdrop.one($.support.transition.end, callback) :
|
||||
callback()
|
||||
|
||||
} else if (callback) {
|
||||
callback()
|
||||
@@ -193,6 +195,8 @@
|
||||
/* MODAL PLUGIN DEFINITION
|
||||
* ======================= */
|
||||
|
||||
var old = $.fn.modal
|
||||
|
||||
$.fn.modal = function (option) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
@@ -213,6 +217,15 @@
|
||||
$.fn.modal.Constructor = Modal
|
||||
|
||||
|
||||
/* MODAL NO CONFLICT
|
||||
* ================= */
|
||||
|
||||
$.fn.modal.noConflict = function () {
|
||||
$.fn.modal = old
|
||||
return this
|
||||
}
|
||||
|
||||
|
||||
/* MODAL DATA-API
|
||||
* ============== */
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* ===========================================================
|
||||
* bootstrap-popover.js v2.2.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#popovers
|
||||
* bootstrap-popover.js v2.3.2
|
||||
* http://getbootstrap.com/2.3.2/javascript.html#popovers
|
||||
* ===========================================================
|
||||
* Copyright 2012 Twitter, Inc.
|
||||
* Copyright 2013 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
@@ -44,7 +44,7 @@
|
||||
, content = this.getContent()
|
||||
|
||||
$tip.find('.popover-title')[this.options.html ? 'html' : 'text'](title)
|
||||
$tip.find('.popover-content > *')[this.options.html ? 'html' : 'text'](content)
|
||||
$tip.find('.popover-content')[this.options.html ? 'html' : 'text'](content)
|
||||
|
||||
$tip.removeClass('fade top bottom left right in')
|
||||
}
|
||||
@@ -58,8 +58,8 @@
|
||||
, $e = this.$element
|
||||
, o = this.options
|
||||
|
||||
content = $e.attr('data-content')
|
||||
|| (typeof o.content == 'function' ? o.content.call($e[0]) : o.content)
|
||||
content = (typeof o.content == 'function' ? o.content.call($e[0]) : o.content)
|
||||
|| $e.attr('data-content')
|
||||
|
||||
return content
|
||||
}
|
||||
@@ -81,6 +81,8 @@
|
||||
/* POPOVER PLUGIN DEFINITION
|
||||
* ======================= */
|
||||
|
||||
var old = $.fn.popover
|
||||
|
||||
$.fn.popover = function (option) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
@@ -97,7 +99,16 @@
|
||||
placement: 'right'
|
||||
, trigger: 'click'
|
||||
, content: ''
|
||||
, template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
|
||||
, template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
|
||||
})
|
||||
|
||||
}(window.jQuery);
|
||||
|
||||
/* POPOVER NO CONFLICT
|
||||
* =================== */
|
||||
|
||||
$.fn.popover.noConflict = function () {
|
||||
$.fn.popover = old
|
||||
return this
|
||||
}
|
||||
|
||||
}(window.jQuery);
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* =============================================================
|
||||
* bootstrap-scrollspy.js v2.2.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#scrollspy
|
||||
* bootstrap-scrollspy.js v2.3.2
|
||||
* http://getbootstrap.com/2.3.2/javascript.html#scrollspy
|
||||
* =============================================================
|
||||
* Copyright 2012 Twitter, Inc.
|
||||
* Copyright 2013 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
@@ -59,7 +59,7 @@
|
||||
, $href = /^#\w/.test(href) && $(href)
|
||||
return ( $href
|
||||
&& $href.length
|
||||
&& [[ $href.position().top, href ]] ) || null
|
||||
&& [[ $href.position().top + (!$.isWindow(self.$scrollElement.get(0)) && self.$scrollElement.scrollTop()), href ]] ) || null
|
||||
})
|
||||
.sort(function (a, b) { return a[0] - b[0] })
|
||||
.each(function () {
|
||||
@@ -121,6 +121,8 @@
|
||||
/* SCROLLSPY PLUGIN DEFINITION
|
||||
* =========================== */
|
||||
|
||||
var old = $.fn.scrollspy
|
||||
|
||||
$.fn.scrollspy = function (option) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
@@ -138,6 +140,15 @@
|
||||
}
|
||||
|
||||
|
||||
/* SCROLLSPY NO CONFLICT
|
||||
* ===================== */
|
||||
|
||||
$.fn.scrollspy.noConflict = function () {
|
||||
$.fn.scrollspy = old
|
||||
return this
|
||||
}
|
||||
|
||||
|
||||
/* SCROLLSPY DATA-API
|
||||
* ================== */
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* ========================================================
|
||||
* bootstrap-tab.js v2.2.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#tabs
|
||||
* bootstrap-tab.js v2.3.2
|
||||
* http://getbootstrap.com/2.3.2/javascript.html#tabs
|
||||
* ========================================================
|
||||
* Copyright 2012 Twitter, Inc.
|
||||
* Copyright 2013 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
@@ -110,6 +110,8 @@
|
||||
/* TAB PLUGIN DEFINITION
|
||||
* ===================== */
|
||||
|
||||
var old = $.fn.tab
|
||||
|
||||
$.fn.tab = function ( option ) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
@@ -122,6 +124,15 @@
|
||||
$.fn.tab.Constructor = Tab
|
||||
|
||||
|
||||
/* TAB NO CONFLICT
|
||||
* =============== */
|
||||
|
||||
$.fn.tab.noConflict = function () {
|
||||
$.fn.tab = old
|
||||
return this
|
||||
}
|
||||
|
||||
|
||||
/* TAB DATA-API
|
||||
* ============ */
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
/* ===========================================================
|
||||
* bootstrap-tooltip.js v2.2.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#tooltips
|
||||
* bootstrap-tooltip.js v2.3.2
|
||||
* http://getbootstrap.com/2.3.2/javascript.html#tooltips
|
||||
* Inspired by the original jQuery.tipsy by Jason Frame
|
||||
* ===========================================================
|
||||
* Copyright 2012 Twitter, Inc.
|
||||
* Copyright 2013 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
@@ -38,19 +38,27 @@
|
||||
, init: function (type, element, options) {
|
||||
var eventIn
|
||||
, eventOut
|
||||
, triggers
|
||||
, trigger
|
||||
, i
|
||||
|
||||
this.type = type
|
||||
this.$element = $(element)
|
||||
this.options = this.getOptions(options)
|
||||
this.enabled = true
|
||||
|
||||
if (this.options.trigger == 'click') {
|
||||
this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
|
||||
} else if (this.options.trigger != 'manual') {
|
||||
eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus'
|
||||
eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur'
|
||||
this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
|
||||
this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
|
||||
triggers = this.options.trigger.split(' ')
|
||||
|
||||
for (i = triggers.length; i--;) {
|
||||
trigger = triggers[i]
|
||||
if (trigger == 'click') {
|
||||
this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
|
||||
} else if (trigger != 'manual') {
|
||||
eventIn = trigger == 'hover' ? 'mouseenter' : 'focus'
|
||||
eventOut = trigger == 'hover' ? 'mouseleave' : 'blur'
|
||||
this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
|
||||
this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
|
||||
}
|
||||
}
|
||||
|
||||
this.options.selector ?
|
||||
@@ -59,7 +67,7 @@
|
||||
}
|
||||
|
||||
, getOptions: function (options) {
|
||||
options = $.extend({}, $.fn[this.type].defaults, options, this.$element.data())
|
||||
options = $.extend({}, $.fn[this.type].defaults, this.$element.data(), options)
|
||||
|
||||
if (options.delay && typeof options.delay == 'number') {
|
||||
options.delay = {
|
||||
@@ -72,7 +80,15 @@
|
||||
}
|
||||
|
||||
, enter: function (e) {
|
||||
var self = $(e.currentTarget)[this.type](this._options).data(this.type)
|
||||
var defaults = $.fn[this.type].defaults
|
||||
, options = {}
|
||||
, self
|
||||
|
||||
this._options && $.each(this._options, function (key, value) {
|
||||
if (defaults[key] != value) options[key] = value
|
||||
}, this)
|
||||
|
||||
self = $(e.currentTarget)[this.type](options).data(this.type)
|
||||
|
||||
if (!self.options.delay || !self.options.delay.show) return self.show()
|
||||
|
||||
@@ -97,14 +113,16 @@
|
||||
|
||||
, show: function () {
|
||||
var $tip
|
||||
, inside
|
||||
, pos
|
||||
, actualWidth
|
||||
, actualHeight
|
||||
, placement
|
||||
, tp
|
||||
, e = $.Event('show')
|
||||
|
||||
if (this.hasContent() && this.enabled) {
|
||||
this.$element.trigger(e)
|
||||
if (e.isDefaultPrevented()) return
|
||||
$tip = this.tip()
|
||||
this.setContent()
|
||||
|
||||
@@ -116,19 +134,18 @@
|
||||
this.options.placement.call(this, $tip[0], this.$element[0]) :
|
||||
this.options.placement
|
||||
|
||||
inside = /in/.test(placement)
|
||||
|
||||
$tip
|
||||
.detach()
|
||||
.css({ top: 0, left: 0, display: 'block' })
|
||||
.insertAfter(this.$element)
|
||||
|
||||
pos = this.getPosition(inside)
|
||||
this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)
|
||||
|
||||
pos = this.getPosition()
|
||||
|
||||
actualWidth = $tip[0].offsetWidth
|
||||
actualHeight = $tip[0].offsetHeight
|
||||
|
||||
switch (inside ? placement.split(' ')[1] : placement) {
|
||||
switch (placement) {
|
||||
case 'bottom':
|
||||
tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
|
||||
break
|
||||
@@ -143,13 +160,58 @@
|
||||
break
|
||||
}
|
||||
|
||||
$tip
|
||||
.offset(tp)
|
||||
.addClass(placement)
|
||||
.addClass('in')
|
||||
this.applyPlacement(tp, placement)
|
||||
this.$element.trigger('shown')
|
||||
}
|
||||
}
|
||||
|
||||
, applyPlacement: function(offset, placement){
|
||||
var $tip = this.tip()
|
||||
, width = $tip[0].offsetWidth
|
||||
, height = $tip[0].offsetHeight
|
||||
, actualWidth
|
||||
, actualHeight
|
||||
, delta
|
||||
, replace
|
||||
|
||||
$tip
|
||||
.offset(offset)
|
||||
.addClass(placement)
|
||||
.addClass('in')
|
||||
|
||||
actualWidth = $tip[0].offsetWidth
|
||||
actualHeight = $tip[0].offsetHeight
|
||||
|
||||
if (placement == 'top' && actualHeight != height) {
|
||||
offset.top = offset.top + height - actualHeight
|
||||
replace = true
|
||||
}
|
||||
|
||||
if (placement == 'bottom' || placement == 'top') {
|
||||
delta = 0
|
||||
|
||||
if (offset.left < 0){
|
||||
delta = offset.left * -2
|
||||
offset.left = 0
|
||||
$tip.offset(offset)
|
||||
actualWidth = $tip[0].offsetWidth
|
||||
actualHeight = $tip[0].offsetHeight
|
||||
}
|
||||
|
||||
this.replaceArrow(delta - width + actualWidth, actualWidth, 'left')
|
||||
} else {
|
||||
this.replaceArrow(actualHeight - height, actualHeight, 'top')
|
||||
}
|
||||
|
||||
if (replace) $tip.offset(offset)
|
||||
}
|
||||
|
||||
, replaceArrow: function(delta, dimension, position){
|
||||
this
|
||||
.arrow()
|
||||
.css(position, delta ? (50 * (1 - delta / dimension) + "%") : '')
|
||||
}
|
||||
|
||||
, setContent: function () {
|
||||
var $tip = this.tip()
|
||||
, title = this.getTitle()
|
||||
@@ -161,6 +223,10 @@
|
||||
, hide: function () {
|
||||
var that = this
|
||||
, $tip = this.tip()
|
||||
, e = $.Event('hide')
|
||||
|
||||
this.$element.trigger(e)
|
||||
if (e.isDefaultPrevented()) return
|
||||
|
||||
$tip.removeClass('in')
|
||||
|
||||
@@ -179,13 +245,15 @@
|
||||
removeWithAnimation() :
|
||||
$tip.detach()
|
||||
|
||||
this.$element.trigger('hidden')
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
, fixTitle: function () {
|
||||
var $e = this.$element
|
||||
if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') {
|
||||
$e.attr('data-original-title', $e.attr('title') || '').removeAttr('title')
|
||||
$e.attr('data-original-title', $e.attr('title') || '').attr('title', '')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -193,11 +261,12 @@
|
||||
return this.getTitle()
|
||||
}
|
||||
|
||||
, getPosition: function (inside) {
|
||||
return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), {
|
||||
width: this.$element[0].offsetWidth
|
||||
, height: this.$element[0].offsetHeight
|
||||
})
|
||||
, getPosition: function () {
|
||||
var el = this.$element[0]
|
||||
return $.extend({}, (typeof el.getBoundingClientRect == 'function') ? el.getBoundingClientRect() : {
|
||||
width: el.offsetWidth
|
||||
, height: el.offsetHeight
|
||||
}, this.$element.offset())
|
||||
}
|
||||
|
||||
, getTitle: function () {
|
||||
@@ -215,6 +284,10 @@
|
||||
return this.$tip = this.$tip || $(this.options.template)
|
||||
}
|
||||
|
||||
, arrow: function(){
|
||||
return this.$arrow = this.$arrow || this.tip().find(".tooltip-arrow")
|
||||
}
|
||||
|
||||
, validate: function () {
|
||||
if (!this.$element[0].parentNode) {
|
||||
this.hide()
|
||||
@@ -236,8 +309,8 @@
|
||||
}
|
||||
|
||||
, toggle: function (e) {
|
||||
var self = $(e.currentTarget)[this.type](this._options).data(this.type)
|
||||
self[self.tip().hasClass('in') ? 'hide' : 'show']()
|
||||
var self = e ? $(e.currentTarget)[this.type](this._options).data(this.type) : this
|
||||
self.tip().hasClass('in') ? self.hide() : self.show()
|
||||
}
|
||||
|
||||
, destroy: function () {
|
||||
@@ -250,6 +323,8 @@
|
||||
/* TOOLTIP PLUGIN DEFINITION
|
||||
* ========================= */
|
||||
|
||||
var old = $.fn.tooltip
|
||||
|
||||
$.fn.tooltip = function ( option ) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
@@ -267,10 +342,20 @@
|
||||
, placement: 'top'
|
||||
, selector: false
|
||||
, template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
|
||||
, trigger: 'hover'
|
||||
, trigger: 'hover focus'
|
||||
, title: ''
|
||||
, delay: 0
|
||||
, html: false
|
||||
, container: false
|
||||
}
|
||||
|
||||
}(window.jQuery);
|
||||
|
||||
/* TOOLTIP NO CONFLICT
|
||||
* =================== */
|
||||
|
||||
$.fn.tooltip.noConflict = function () {
|
||||
$.fn.tooltip = old
|
||||
return this
|
||||
}
|
||||
|
||||
}(window.jQuery);
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* ===================================================
|
||||
* bootstrap-transition.js v2.2.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#transitions
|
||||
* bootstrap-transition.js v2.3.2
|
||||
* http://getbootstrap.com/2.3.2/javascript.html#transitions
|
||||
* ===================================================
|
||||
* Copyright 2012 Twitter, Inc.
|
||||
* Copyright 2013 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* =============================================================
|
||||
* bootstrap-typeahead.js v2.2.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#typeahead
|
||||
* bootstrap-typeahead.js v2.3.2
|
||||
* http://getbootstrap.com/2.3.2/javascript.html#typeahead
|
||||
* =============================================================
|
||||
* Copyright 2012 Twitter, Inc.
|
||||
* Copyright 2013 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
@@ -33,8 +33,8 @@
|
||||
this.sorter = this.options.sorter || this.sorter
|
||||
this.highlighter = this.options.highlighter || this.highlighter
|
||||
this.updater = this.options.updater || this.updater
|
||||
this.$menu = $(this.options.menu).appendTo('body')
|
||||
this.source = this.options.source
|
||||
this.$menu = $(this.options.menu)
|
||||
this.shown = false
|
||||
this.listen()
|
||||
}
|
||||
@@ -56,16 +56,18 @@
|
||||
}
|
||||
|
||||
, show: function () {
|
||||
var pos = $.extend({}, this.$element.offset(), {
|
||||
var pos = $.extend({}, this.$element.position(), {
|
||||
height: this.$element[0].offsetHeight
|
||||
})
|
||||
|
||||
this.$menu.css({
|
||||
top: pos.top + pos.height
|
||||
, left: pos.left
|
||||
})
|
||||
this.$menu
|
||||
.insertAfter(this.$element)
|
||||
.css({
|
||||
top: pos.top + pos.height
|
||||
, left: pos.left
|
||||
})
|
||||
.show()
|
||||
|
||||
this.$menu.show()
|
||||
this.shown = true
|
||||
return this
|
||||
}
|
||||
@@ -170,6 +172,7 @@
|
||||
|
||||
, listen: function () {
|
||||
this.$element
|
||||
.on('focus', $.proxy(this.focus, this))
|
||||
.on('blur', $.proxy(this.blur, this))
|
||||
.on('keypress', $.proxy(this.keypress, this))
|
||||
.on('keyup', $.proxy(this.keyup, this))
|
||||
@@ -181,6 +184,7 @@
|
||||
this.$menu
|
||||
.on('click', $.proxy(this.click, this))
|
||||
.on('mouseenter', 'li', $.proxy(this.mouseenter, this))
|
||||
.on('mouseleave', 'li', $.proxy(this.mouseleave, this))
|
||||
}
|
||||
|
||||
, eventSupported: function(eventName) {
|
||||
@@ -217,7 +221,7 @@
|
||||
}
|
||||
|
||||
, keydown: function (e) {
|
||||
this.suppressKeyPressRepeat = !~$.inArray(e.keyCode, [40,38,9,13,27])
|
||||
this.suppressKeyPressRepeat = ~$.inArray(e.keyCode, [40,38,9,13,27])
|
||||
this.move(e)
|
||||
}
|
||||
|
||||
@@ -254,28 +258,41 @@
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
, focus: function (e) {
|
||||
this.focused = true
|
||||
}
|
||||
|
||||
, blur: function (e) {
|
||||
var that = this
|
||||
setTimeout(function () { that.hide() }, 150)
|
||||
this.focused = false
|
||||
if (!this.mousedover && this.shown) this.hide()
|
||||
}
|
||||
|
||||
, click: function (e) {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
this.select()
|
||||
this.$element.focus()
|
||||
}
|
||||
|
||||
, mouseenter: function (e) {
|
||||
this.mousedover = true
|
||||
this.$menu.find('.active').removeClass('active')
|
||||
$(e.currentTarget).addClass('active')
|
||||
}
|
||||
|
||||
, mouseleave: function (e) {
|
||||
this.mousedover = false
|
||||
if (!this.focused && this.shown) this.hide()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* TYPEAHEAD PLUGIN DEFINITION
|
||||
* =========================== */
|
||||
|
||||
var old = $.fn.typeahead
|
||||
|
||||
$.fn.typeahead = function (option) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
@@ -297,13 +314,21 @@
|
||||
$.fn.typeahead.Constructor = Typeahead
|
||||
|
||||
|
||||
/* TYPEAHEAD DATA-API
|
||||
/* TYPEAHEAD NO CONFLICT
|
||||
* =================== */
|
||||
|
||||
$.fn.typeahead.noConflict = function () {
|
||||
$.fn.typeahead = old
|
||||
return this
|
||||
}
|
||||
|
||||
|
||||
/* TYPEAHEAD DATA-API
|
||||
* ================== */
|
||||
|
||||
$(document).on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) {
|
||||
var $this = $(this)
|
||||
if ($this.data('typeahead')) return
|
||||
e.preventDefault()
|
||||
$this.typeahead($this.data())
|
||||
})
|
||||
|
||||
|
||||
@@ -2,6 +2,12 @@ $(function () {
|
||||
|
||||
module("bootstrap-affix")
|
||||
|
||||
test("should provide no conflict", function () {
|
||||
var affix = $.fn.affix.noConflict()
|
||||
ok(!$.fn.affix, 'affix was set back to undefined (org value)')
|
||||
$.fn.affix = affix
|
||||
})
|
||||
|
||||
test("should be defined on jquery object", function () {
|
||||
ok($(document.body).affix, 'affix method is defined')
|
||||
})
|
||||
|
||||
@@ -2,6 +2,12 @@ $(function () {
|
||||
|
||||
module("bootstrap-alerts")
|
||||
|
||||
test("should provide no conflict", function () {
|
||||
var alert = $.fn.alert.noConflict()
|
||||
ok(!$.fn.alert, 'alert was set back to undefined (org value)')
|
||||
$.fn.alert = alert
|
||||
})
|
||||
|
||||
test("should be defined on jquery object", function () {
|
||||
ok($(document.body).alert, 'alert method is defined')
|
||||
})
|
||||
|
||||
@@ -2,6 +2,12 @@ $(function () {
|
||||
|
||||
module("bootstrap-buttons")
|
||||
|
||||
test("should provide no conflict", function () {
|
||||
var button = $.fn.button.noConflict()
|
||||
ok(!$.fn.button, 'button was set back to undefined (org value)')
|
||||
$.fn.button = button
|
||||
})
|
||||
|
||||
test("should be defined on jquery object", function () {
|
||||
ok($(document.body).button, 'button method is defined')
|
||||
})
|
||||
|
||||
@@ -2,6 +2,12 @@ $(function () {
|
||||
|
||||
module("bootstrap-carousel")
|
||||
|
||||
test("should provide no conflict", function () {
|
||||
var carousel = $.fn.carousel.noConflict()
|
||||
ok(!$.fn.carousel, 'carousel was set back to undefined (org value)')
|
||||
$.fn.carousel = carousel
|
||||
})
|
||||
|
||||
test("should be defined on jquery object", function () {
|
||||
ok($(document.body).carousel, 'carousel method is defined')
|
||||
})
|
||||
@@ -25,6 +31,18 @@ $(function () {
|
||||
.carousel('next')
|
||||
})
|
||||
|
||||
test("should fire slide event with direction", function () {
|
||||
var template = '<div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class="item active"><img alt=""><div class="carousel-caption"><h4>{{_i}}First Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Second Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Third Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div></div><a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a><a class="right carousel-control" href="#myCarousel" data-slide="next">›</a></div>'
|
||||
$.support.transition = false
|
||||
stop()
|
||||
$(template).on('slide', function (e) {
|
||||
e.preventDefault()
|
||||
ok(e.direction)
|
||||
ok(e.direction === 'right' || e.direction === 'left')
|
||||
start()
|
||||
}).carousel('next')
|
||||
})
|
||||
|
||||
test("should fire slide event with relatedTarget", function () {
|
||||
var template = '<div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class="item active"><img alt=""><div class="carousel-caption"><h4>{{_i}}First Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Second Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Third Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div></div><a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a><a class="right carousel-control" href="#myCarousel" data-slide="next">›</a></div>'
|
||||
$.support.transition = false
|
||||
|
||||
@@ -2,6 +2,12 @@ $(function () {
|
||||
|
||||
module("bootstrap-collapse")
|
||||
|
||||
test("should provide no conflict", function () {
|
||||
var collapse = $.fn.collapse.noConflict()
|
||||
ok(!$.fn.collapse, 'collapse was set back to undefined (org value)')
|
||||
$.fn.collapse = collapse
|
||||
})
|
||||
|
||||
test("should be defined on jquery object", function () {
|
||||
ok($(document.body).collapse, 'collapse method is defined')
|
||||
})
|
||||
|
||||
@@ -2,6 +2,12 @@ $(function () {
|
||||
|
||||
module("bootstrap-dropdowns")
|
||||
|
||||
test("should provide no conflict", function () {
|
||||
var dropdown = $.fn.dropdown.noConflict()
|
||||
ok(!$.fn.dropdown, 'dropdown was set back to undefined (org value)')
|
||||
$.fn.dropdown = dropdown
|
||||
})
|
||||
|
||||
test("should be defined on jquery object", function () {
|
||||
ok($(document.body).dropdown, 'dropdown method is defined')
|
||||
})
|
||||
@@ -104,7 +110,7 @@ $(function () {
|
||||
})
|
||||
|
||||
test("should remove open class if body clicked, with multiple drop downs", function () {
|
||||
var dropdownHTML =
|
||||
var dropdownHTML =
|
||||
'<ul class="nav">'
|
||||
+ ' <li><a href="#menu1">Menu 1</a></li>'
|
||||
+ ' <li class="dropdown" id="testmenu">'
|
||||
@@ -126,7 +132,7 @@ $(function () {
|
||||
, last = dropdowns.last()
|
||||
|
||||
ok(dropdowns.length == 2, "Should be two dropdowns")
|
||||
|
||||
|
||||
first.click()
|
||||
ok(first.parents('.open').length == 1, 'open class added on click')
|
||||
ok($('#qunit-fixture .open').length == 1, 'only one object is open')
|
||||
|
||||
@@ -2,6 +2,12 @@ $(function () {
|
||||
|
||||
module("bootstrap-modal")
|
||||
|
||||
test("should provide no conflict", function () {
|
||||
var modal = $.fn.modal.noConflict()
|
||||
ok(!$.fn.modal, 'modal was set back to undefined (org value)')
|
||||
$.fn.modal = modal
|
||||
})
|
||||
|
||||
test("should be defined on jquery object", function () {
|
||||
var div = $("<div id='modal-test'></div>")
|
||||
ok(div.modal, 'modal method is defined')
|
||||
@@ -111,4 +117,21 @@ $(function () {
|
||||
})
|
||||
.modal("toggle")
|
||||
})
|
||||
|
||||
test("should allow modal close with 'backdrop:false'", function () {
|
||||
stop()
|
||||
$.support.transition = false
|
||||
var div = $("<div>", { id: 'modal-test', "data-backdrop": false })
|
||||
div
|
||||
.bind("shown", function () {
|
||||
ok($('#modal-test').is(":visible"), 'modal visible')
|
||||
div.modal("hide")
|
||||
})
|
||||
.bind("hidden", function() {
|
||||
ok(!$('#modal-test').is(":visible"), 'modal hidden')
|
||||
div.remove()
|
||||
start()
|
||||
})
|
||||
.modal("show")
|
||||
})
|
||||
})
|
||||
@@ -2,6 +2,12 @@ $(function () {
|
||||
|
||||
module("bootstrap-popover")
|
||||
|
||||
test("should provide no conflict", function () {
|
||||
var popover = $.fn.popover.noConflict()
|
||||
ok(!$.fn.popover, 'popover was set back to undefined (org value)')
|
||||
$.fn.popover = popover
|
||||
})
|
||||
|
||||
test("should be defined on jquery object", function () {
|
||||
var div = $('<div></div>')
|
||||
ok(div.popover, 'popover method is defined')
|
||||
@@ -70,7 +76,7 @@ $(function () {
|
||||
ok(!$('.popover').length, 'popover was removed')
|
||||
$('#qunit-fixture').empty()
|
||||
})
|
||||
|
||||
|
||||
test("should respect custom classes", function() {
|
||||
$.support.transition = false
|
||||
var popover = $('<a href="#">@fat</a>')
|
||||
@@ -80,7 +86,7 @@ $(function () {
|
||||
, content: 'Test'
|
||||
, template: '<div class="popover foobar"><div class="arrow"></div><div class="inner"><h3 class="title"></h3><div class="content"><p></p></div></div></div>'
|
||||
})
|
||||
|
||||
|
||||
popover.popover('show')
|
||||
|
||||
ok($('.popover').length, 'popover was inserted')
|
||||
@@ -103,5 +109,5 @@ $(function () {
|
||||
ok($._data(popover[0],'events').click[0].namespace == 'foo', 'popover still has click.foo')
|
||||
ok(!$._data(popover[0], 'events').mouseover && !$._data(popover[0], 'events').mouseout, 'popover does not have any events')
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
@@ -2,6 +2,12 @@ $(function () {
|
||||
|
||||
module("bootstrap-scrollspy")
|
||||
|
||||
test("should provide no conflict", function () {
|
||||
var scrollspy = $.fn.scrollspy.noConflict()
|
||||
ok(!$.fn.scrollspy, 'scrollspy was set back to undefined (org value)')
|
||||
$.fn.scrollspy = scrollspy
|
||||
})
|
||||
|
||||
test("should be defined on jquery object", function () {
|
||||
ok($(document.body).scrollspy, 'scrollspy method is defined')
|
||||
})
|
||||
|
||||
@@ -2,6 +2,12 @@ $(function () {
|
||||
|
||||
module("bootstrap-tabs")
|
||||
|
||||
test("should provide no conflict", function () {
|
||||
var tab = $.fn.tab.noConflict()
|
||||
ok(!$.fn.tab, 'tab was set back to undefined (org value)')
|
||||
$.fn.tab = tab
|
||||
})
|
||||
|
||||
test("should be defined on jquery object", function () {
|
||||
ok($(document.body).tab, 'tabs method is defined')
|
||||
})
|
||||
|
||||
@@ -2,6 +2,12 @@ $(function () {
|
||||
|
||||
module("bootstrap-tooltip")
|
||||
|
||||
test("should provide no conflict", function () {
|
||||
var tooltip = $.fn.tooltip.noConflict()
|
||||
ok(!$.fn.tooltip, 'tooltip was set back to undefined (org value)')
|
||||
$.fn.tooltip = tooltip
|
||||
})
|
||||
|
||||
test("should be defined on jquery object", function () {
|
||||
var div = $("<div></div>")
|
||||
ok(div.tooltip, 'popover method is defined')
|
||||
@@ -16,9 +22,9 @@ $(function () {
|
||||
ok(!!$.fn.tooltip.defaults, 'defaults is defined')
|
||||
})
|
||||
|
||||
test("should remove title attribute", function () {
|
||||
test("should empty title attribute", function () {
|
||||
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').tooltip()
|
||||
ok(!tooltip.attr('title'), 'title tag was removed')
|
||||
ok(tooltip.attr('title') === '', 'title attribute was emptied')
|
||||
})
|
||||
|
||||
test("should add data attribute for referencing original title", function () {
|
||||
@@ -60,6 +66,83 @@ $(function () {
|
||||
ok(!$(".tooltip").length, 'tooltip removed')
|
||||
})
|
||||
|
||||
test("should fire show event", function () {
|
||||
stop()
|
||||
var tooltip = $('<div title="tooltip title"></div>')
|
||||
.bind("show", function() {
|
||||
ok(true, "show was called")
|
||||
start()
|
||||
})
|
||||
.tooltip('show')
|
||||
})
|
||||
|
||||
test("should fire shown event", function () {
|
||||
stop()
|
||||
var tooltip = $('<div title="tooltip title"></div>')
|
||||
.bind("shown", function() {
|
||||
ok(true, "shown was called")
|
||||
start()
|
||||
})
|
||||
.tooltip('show')
|
||||
})
|
||||
|
||||
test("should not fire shown event when default prevented", function () {
|
||||
stop()
|
||||
var tooltip = $('<div title="tooltip title"></div>')
|
||||
.bind("show", function(e) {
|
||||
e.preventDefault()
|
||||
ok(true, "show was called")
|
||||
start()
|
||||
})
|
||||
.bind("shown", function() {
|
||||
ok(false, "shown was called")
|
||||
})
|
||||
.tooltip('show')
|
||||
})
|
||||
|
||||
test("should fire hide event", function () {
|
||||
stop()
|
||||
var tooltip = $('<div title="tooltip title"></div>')
|
||||
.bind("shown", function() {
|
||||
$(this).tooltip('hide')
|
||||
})
|
||||
.bind("hide", function() {
|
||||
ok(true, "hide was called")
|
||||
start()
|
||||
})
|
||||
.tooltip('show')
|
||||
})
|
||||
|
||||
test("should fire hidden event", function () {
|
||||
stop()
|
||||
var tooltip = $('<div title="tooltip title"></div>')
|
||||
.bind("shown", function() {
|
||||
$(this).tooltip('hide')
|
||||
})
|
||||
.bind("hidden", function() {
|
||||
ok(true, "hidden was called")
|
||||
start()
|
||||
})
|
||||
.tooltip('show')
|
||||
})
|
||||
|
||||
test("should not fire hidden event when default prevented", function () {
|
||||
stop()
|
||||
var tooltip = $('<div title="tooltip title"></div>')
|
||||
.bind("shown", function() {
|
||||
$(this).tooltip('hide')
|
||||
})
|
||||
.bind("hide", function(e) {
|
||||
e.preventDefault()
|
||||
ok(true, "hide was called")
|
||||
start()
|
||||
})
|
||||
.bind("hidden", function() {
|
||||
ok(false, "hidden was called")
|
||||
})
|
||||
.tooltip('show')
|
||||
})
|
||||
|
||||
test("should not show tooltip if leave event occurs before delay expires", function () {
|
||||
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
|
||||
.appendTo('#qunit-fixture')
|
||||
@@ -150,4 +233,62 @@ $(function () {
|
||||
div.find('a').trigger('click')
|
||||
ok($(".tooltip").is('.fade.in'), 'tooltip is faded in')
|
||||
})
|
||||
})
|
||||
|
||||
test("should show tooltip when toggle is called", function () {
|
||||
var tooltip = $('<a href="#" rel="tooltip" title="tooltip on toggle"></a>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.tooltip({trigger: 'manual'})
|
||||
.tooltip('toggle')
|
||||
ok($(".tooltip").is('.fade.in'), 'tooltip should be toggled in')
|
||||
})
|
||||
|
||||
test("should place tooltips inside the body", function () {
|
||||
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.tooltip({container:'body'})
|
||||
.tooltip('show')
|
||||
ok($("body > .tooltip").length, 'inside the body')
|
||||
ok(!$("#qunit-fixture > .tooltip").length, 'not found in parent')
|
||||
tooltip.tooltip('hide')
|
||||
})
|
||||
|
||||
test("should place tooltip inside window", function(){
|
||||
var container = $("<div />").appendTo("body")
|
||||
.css({position: "absolute", width: 200, height: 200, bottom: 0, left: 0})
|
||||
, tooltip = $("<a href='#' title='Very very very very very very very very long tooltip'>Hover me</a>")
|
||||
.css({position: "absolute", top:0, left: 0})
|
||||
.appendTo(container)
|
||||
.tooltip({placement: "top", animate: false})
|
||||
.tooltip("show")
|
||||
|
||||
stop()
|
||||
|
||||
setTimeout(function(){
|
||||
ok($(".tooltip").offset().left >= 0)
|
||||
|
||||
start()
|
||||
container.remove()
|
||||
}, 100)
|
||||
})
|
||||
|
||||
test("should place tooltip on top of element", function(){
|
||||
var container = $("<div />").appendTo("body")
|
||||
.css({position: "absolute", bottom: 0, left: 0, textAlign: "right", width: 300, height: 300})
|
||||
, p = $("<p style='margin-top:200px' />").appendTo(container)
|
||||
, tooltiped = $("<a href='#' title='very very very very very very very long tooltip'>Hover me</a>")
|
||||
.css({marginTop: 200})
|
||||
.appendTo(p)
|
||||
.tooltip({placement: "top", animate: false})
|
||||
.tooltip("show")
|
||||
|
||||
stop()
|
||||
|
||||
setTimeout(function(){
|
||||
var tooltip = container.find(".tooltip")
|
||||
|
||||
start()
|
||||
ok(tooltip.offset().top + tooltip.outerHeight() <= tooltiped.offset().top)
|
||||
container.remove()
|
||||
}, 100)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -2,6 +2,12 @@ $(function () {
|
||||
|
||||
module("bootstrap-typeahead")
|
||||
|
||||
test("should provide no conflict", function () {
|
||||
var typeahead = $.fn.typeahead.noConflict()
|
||||
ok(!$.fn.typeahead, 'typeahead was set back to undefined (org value)')
|
||||
$.fn.typeahead = typeahead
|
||||
})
|
||||
|
||||
test("should be defined on jquery object", function () {
|
||||
ok($(document.body).typeahead, 'alert method is defined')
|
||||
})
|
||||
@@ -32,7 +38,9 @@ $(function () {
|
||||
})
|
||||
|
||||
test("should show menu when query entered", function () {
|
||||
var $input = $('<input />').typeahead({
|
||||
var $input = $('<input />')
|
||||
.appendTo('body')
|
||||
.typeahead({
|
||||
source: ['aa', 'ab', 'ac']
|
||||
})
|
||||
, typeahead = $input.data('typeahead')
|
||||
@@ -44,6 +52,7 @@ $(function () {
|
||||
equals(typeahead.$menu.find('li').length, 3, 'has 3 items in menu')
|
||||
equals(typeahead.$menu.find('.active').length, 1, 'one item is active')
|
||||
|
||||
$input.remove()
|
||||
typeahead.$menu.remove()
|
||||
})
|
||||
|
||||
@@ -52,7 +61,7 @@ $(function () {
|
||||
source: function () {
|
||||
return ['aa', 'ab', 'ac']
|
||||
}
|
||||
})
|
||||
}).appendTo('body')
|
||||
, typeahead = $input.data('typeahead')
|
||||
|
||||
$input.val('a')
|
||||
@@ -62,6 +71,7 @@ $(function () {
|
||||
equals(typeahead.$menu.find('li').length, 3, 'has 3 items in menu')
|
||||
equals(typeahead.$menu.find('.active').length, 1, 'one item is active')
|
||||
|
||||
$input.remove()
|
||||
typeahead.$menu.remove()
|
||||
})
|
||||
|
||||
@@ -70,7 +80,7 @@ $(function () {
|
||||
source: function (query, process) {
|
||||
process(['aa', 'ab', 'ac'])
|
||||
}
|
||||
})
|
||||
}).appendTo('body')
|
||||
, typeahead = $input.data('typeahead')
|
||||
|
||||
$input.val('a')
|
||||
@@ -80,13 +90,14 @@ $(function () {
|
||||
equals(typeahead.$menu.find('li').length, 3, 'has 3 items in menu')
|
||||
equals(typeahead.$menu.find('.active').length, 1, 'one item is active')
|
||||
|
||||
$input.remove()
|
||||
typeahead.$menu.remove()
|
||||
})
|
||||
|
||||
test("should not explode when regex chars are entered", function () {
|
||||
var $input = $('<input />').typeahead({
|
||||
source: ['aa', 'ab', 'ac', 'mdo*', 'fat+']
|
||||
})
|
||||
}).appendTo('body')
|
||||
, typeahead = $input.data('typeahead')
|
||||
|
||||
$input.val('+')
|
||||
@@ -96,6 +107,7 @@ $(function () {
|
||||
equals(typeahead.$menu.find('li').length, 1, 'has 1 item in menu')
|
||||
equals(typeahead.$menu.find('.active').length, 1, 'one item is active')
|
||||
|
||||
$input.remove()
|
||||
typeahead.$menu.remove()
|
||||
})
|
||||
|
||||
@@ -103,7 +115,7 @@ $(function () {
|
||||
stop()
|
||||
var $input = $('<input />').typeahead({
|
||||
source: ['aa', 'ab', 'ac']
|
||||
})
|
||||
}).appendTo('body')
|
||||
, typeahead = $input.data('typeahead')
|
||||
|
||||
$input.val('a')
|
||||
@@ -120,13 +132,14 @@ $(function () {
|
||||
start()
|
||||
}, 200)
|
||||
|
||||
$input.remove()
|
||||
typeahead.$menu.remove()
|
||||
})
|
||||
|
||||
test("should set next item when down arrow is pressed", function () {
|
||||
var $input = $('<input />').typeahead({
|
||||
source: ['aa', 'ab', 'ac']
|
||||
})
|
||||
}).appendTo('body')
|
||||
, typeahead = $input.data('typeahead')
|
||||
|
||||
$input.val('a')
|
||||
@@ -137,21 +150,38 @@ $(function () {
|
||||
equals(typeahead.$menu.find('.active').length, 1, 'one item is active')
|
||||
ok(typeahead.$menu.find('li').first().hasClass('active'), "first item is active")
|
||||
|
||||
// simulate entire key pressing event
|
||||
$input.trigger({
|
||||
type: 'keydown'
|
||||
, keyCode: 40
|
||||
})
|
||||
.trigger({
|
||||
type: 'keypress'
|
||||
, keyCode: 40
|
||||
})
|
||||
.trigger({
|
||||
type: 'keyup'
|
||||
, keyCode: 40
|
||||
})
|
||||
|
||||
ok(typeahead.$menu.find('li').first().next().hasClass('active'), "second item is active")
|
||||
|
||||
|
||||
$input.trigger({
|
||||
type: 'keydown'
|
||||
, keyCode: 38
|
||||
})
|
||||
.trigger({
|
||||
type: 'keypress'
|
||||
, keyCode: 38
|
||||
})
|
||||
.trigger({
|
||||
type: 'keyup'
|
||||
, keyCode: 38
|
||||
})
|
||||
|
||||
ok(typeahead.$menu.find('li').first().hasClass('active'), "first item is active")
|
||||
|
||||
$input.remove()
|
||||
typeahead.$menu.remove()
|
||||
})
|
||||
|
||||
@@ -159,21 +189,27 @@ $(function () {
|
||||
test("should set input value to selected item", function () {
|
||||
var $input = $('<input />').typeahead({
|
||||
source: ['aa', 'ab', 'ac']
|
||||
})
|
||||
}).appendTo('body')
|
||||
, typeahead = $input.data('typeahead')
|
||||
, changed = false
|
||||
, focus = false
|
||||
, blur = false
|
||||
|
||||
$input.val('a')
|
||||
typeahead.lookup()
|
||||
|
||||
$input.change(function() { changed = true });
|
||||
$input.focus(function() { focus = true; blur = false });
|
||||
$input.blur(function() { blur = true; focus = false });
|
||||
|
||||
$(typeahead.$menu.find('li')[2]).mouseover().click()
|
||||
|
||||
equals($input.val(), 'ac', 'input value was correctly set')
|
||||
ok(!typeahead.$menu.is(':visible'), 'the menu was hidden')
|
||||
ok(changed, 'a change event was fired')
|
||||
ok(focus && !blur, 'focus is still set')
|
||||
|
||||
$input.remove()
|
||||
typeahead.$menu.remove()
|
||||
})
|
||||
|
||||
@@ -181,7 +217,7 @@ $(function () {
|
||||
var $input = $('<input />').typeahead({
|
||||
source: ['aaaa', 'aaab', 'aaac'],
|
||||
minLength: 3
|
||||
})
|
||||
}).appendTo('body')
|
||||
, typeahead = $input.data('typeahead')
|
||||
|
||||
$input.val('aa')
|
||||
@@ -194,6 +230,7 @@ $(function () {
|
||||
|
||||
equals(typeahead.$menu.find('li').length, 3, 'has 3 items in menu')
|
||||
|
||||
$input.remove()
|
||||
typeahead.$menu.remove()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@@ -13,6 +13,10 @@
|
||||
background-color: @warningBackground;
|
||||
border: 1px solid @warningBorder;
|
||||
.border-radius(@baseBorderRadius);
|
||||
}
|
||||
.alert,
|
||||
.alert h4 {
|
||||
// Specified for the h4 to prevent conflicts of changing @headingsColor
|
||||
color: @warningText;
|
||||
}
|
||||
.alert h4 {
|
||||
@@ -36,17 +40,27 @@
|
||||
border-color: @successBorder;
|
||||
color: @successText;
|
||||
}
|
||||
.alert-success h4 {
|
||||
color: @successText;
|
||||
}
|
||||
.alert-danger,
|
||||
.alert-error {
|
||||
background-color: @errorBackground;
|
||||
border-color: @errorBorder;
|
||||
color: @errorText;
|
||||
}
|
||||
.alert-danger h4,
|
||||
.alert-error h4 {
|
||||
color: @errorText;
|
||||
}
|
||||
.alert-info {
|
||||
background-color: @infoBackground;
|
||||
border-color: @infoBorder;
|
||||
color: @infoText;
|
||||
}
|
||||
.alert-info h4 {
|
||||
color: @infoText;
|
||||
}
|
||||
|
||||
|
||||
// Block alerts
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
/*!
|
||||
* Bootstrap v2.2.0
|
||||
* Bootstrap v2.3.2
|
||||
*
|
||||
* Copyright 2012 Twitter, Inc
|
||||
* Copyright 2013 Twitter, Inc
|
||||
* Licensed under the Apache License v2.0
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||
* Designed and built with all the love in the world by @mdo and @fat.
|
||||
*/
|
||||
|
||||
// CSS Reset
|
||||
@import "reset.less";
|
||||
|
||||
// Core variables and mixins
|
||||
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
|
||||
@import "mixins.less";
|
||||
|
||||
// CSS Reset
|
||||
@import "reset.less";
|
||||
|
||||
// Grid system and page structure
|
||||
@import "scaffolding.less";
|
||||
@import "grid.less";
|
||||
|
||||
@@ -9,16 +9,16 @@
|
||||
list-style: none;
|
||||
background-color: #f5f5f5;
|
||||
.border-radius(@baseBorderRadius);
|
||||
li {
|
||||
> li {
|
||||
display: inline-block;
|
||||
.ie7-inline-block();
|
||||
text-shadow: 0 1px 0 @white;
|
||||
> .divider {
|
||||
padding: 0 5px;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
.divider {
|
||||
padding: 0 5px;
|
||||
color: #ccc;
|
||||
}
|
||||
.active {
|
||||
> .active {
|
||||
color: @grayLight;
|
||||
}
|
||||
}
|
||||
|
||||