kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

Remove jQuery from docs/repo. 

Some of the snippets need to be updated later.
This commit is contained in:
XhmikosR 2019-02-19 16:19:02 +02:00
parent 1da5b9f76a
commit 7f7f858cb9
23 changed files with 30 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.github/CONTRIBUTING.md vendored
View File

@ -224,7 +224,6 @@ includes code changes) and under the terms of the
- 2 spaces (no tabs)
- strict mode
- "Attractive"
- Don't use [jQuery event alias convenience methods](https://github.com/jquery/jquery/blob/master/src/event/alias.js) (such as `$().focus()`). Instead, use [`$().trigger(eventType, ...)`](https://api.jquery.com/trigger/) or [`$().on(eventType, ...)`](https://api.jquery.com/on/), depending on whether you're firing an event or listening for an event. (For example, `$().trigger('focus')` or `$().on('focus', function (event) { /* handle focus event */ })`) We do this to be compatible with custom builds of jQuery where the event aliases module has been excluded.
### Checking coding style

2
README.md
View File

@ -101,7 +101,7 @@ bootstrap/
└── bootstrap.min.js.map
```
We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/), but not [jQuery](https://jquery.com/).
We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/).
## Bugs and feature requests

2
_config.yml
View File

@ -55,8 +55,6 @@ cdn:
js_hash: "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
js_bundle: "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
js_bundle_hash: "sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o"
jquery: "https://code.jquery.com/jquery-3.3.1.slim.min.js"
jquery_hash: "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
popper: "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
popper_hash: "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"

6
build/generate-sri.js
View File

@ -17,8 +17,6 @@ const fs = require('fs')
const path = require('path')
const sh = require('shelljs')
const pkg = require('../package.json')
sh.config.fatal = true
const configFile = path.join(__dirname, '../_config.yml')
@ -39,10 +37,6 @@ const files = [
file: 'dist/js/bootstrap.bundle.min.js',
configPropertyName: 'js_bundle_hash'
},
{
file: `site/docs/${pkg.version_short}/assets/js/vendor/jquery-slim.min.js`,
configPropertyName: 'jquery_hash'
},
{
file: 'node_modules/popper.js/dist/umd/popper.min.js',
configPropertyName: 'popper_hash'

1
nuget/bootstrap.nuspec
View File

@ -16,7 +16,6 @@
<copyright>Copyright 2017-2019</copyright>
<requireLicenseAcceptance>false</requireLicenseAcceptance>
<dependencies>
<dependency id="jQuery" version="[3.0.0,4)" />
<dependency id="popper.js" version="[1.14.0,2)" />
</dependencies>
<tags>css mobile-first responsive front-end framework web</tags>

1
nuget/bootstrap.sass.nuspec
View File

@ -16,7 +16,6 @@
<copyright>Copyright 2017-2019</copyright>
<requireLicenseAcceptance>false</requireLicenseAcceptance>
<dependencies>
<dependency id="jQuery" version="[3.0.0,4)" />
<dependency id="popper.js" version="[1.14.0,2)" />
</dependencies>
<tags>css sass mobile-first responsive front-end framework web</tags>

1
package.js
View File

@ -9,7 +9,6 @@ Package.describe({
Package.onUse(function (api) {
api.versionsFrom('METEOR@1.0');
api.use('jquery', 'client');
api.addFiles([
'dist/css/bootstrap.css',
'dist/js/bootstrap.js'

3
site/_layouts/examples.html
View File

@ -38,9 +38,6 @@
{{ content }}
{%- if page.include_js != false -%}
<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
{%- if jekyll.environment == "production" -%}
<script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/dist/js/bootstrap.bundle.min.js" integrity="{{ site.cdn.js_bundle_hash }}" crossorigin="anonymous"></script>
{%- else -%}

5
site/docs/4.3/assets/js/src/application.js
View File

@ -67,11 +67,10 @@
var exampleModal = document.getElementById('exampleModal')
if (exampleModal) {
exampleModal.addEventListener('show.bs.modal', function (event) {
var button = event.relatedTarget // Button that triggered the modal
var button = event.relatedTarget // Button that triggered the modal
var recipient = button.getAttribute('data-whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
// Update the modal's content.
var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')

2
site/docs/4.3/assets/js/vendor/jquery-slim.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
site/docs/4.3/browser-bugs.md
View File

@ -14,7 +14,6 @@ See also:
* [Chromium issue 536263: [meta] Issues affecting Bootstrap](https://bugs.chromium.org/p/chromium/issues/detail?id=536263)
* [Mozilla bug 1230801: Fix the issues that affect Bootstrap](https://bugzilla.mozilla.org/show_bug.cgi?id=1230801)
* [WebKit bug 159753: [meta] Issues affecting Bootstrap](https://bugs.webkit.org/show_bug.cgi?id=159753)
* [jQuery's browser bug workarounds](https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o)
<table class="bd-browser-bugs table table-bordered table-hover">
<thead>

2
site/docs/4.3/components/alerts.md
View File

@ -11,7 +11,7 @@ toc: true
## Examples
Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts jQuery plugin](#dismissing).
Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing).
{% capture example %}
{% for color in site.data.theme-colors %}

2
site/docs/4.3/components/collapse.md
View File

@ -41,7 +41,7 @@ You can use a link with the `href` attribute, or a button with the `data-target`
## Multiple targets
A `<button>` or `<a>` can show and hide multiple elements by referencing them with a JQuery selector in its `href` or `data-target` attribute.
A `<button>` or `<a>` can show and hide multiple elements by referencing them with a selector in its `href` or `data-target` attribute.
Multiple `<button>` or `<a>` can show and hide an element if they each reference it with their `href` or `data-target` attribute
{% capture example %}

7
site/docs/4.3/components/modal.md
View File

@ -498,7 +498,7 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w
### Varying modal content
Have a bunch of buttons that all trigger the same modal with slightly different contents? Use `event.relatedTarget` and [HTML `data-*` attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) (possibly [via jQuery](https://api.jquery.com/data/)) to vary the contents of the modal depending on which button was clicked.
Have a bunch of buttons that all trigger the same modal with slightly different contents? Use `event.relatedTarget` and [HTML `data-*` attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) to vary the contents of the modal depending on which button was clicked.
Below is a live demo followed by example HTML and JavaScript. For more information, [read the modal events docs](#events) for details on `relatedTarget`.
@ -542,8 +542,9 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
// If necessary, you could initiate an AJAX request here
// and then do the updating in a callback.
// Update the modal's content.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)

2
site/docs/4.3/components/popovers.md
View File

@ -192,7 +192,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
<td>html</td>
<td>boolean</td>
<td>false</td>
<td>Insert HTML into the popover. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
<td>Insert HTML into the popover. If false, <code>innerText</code> property will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
</tr>
<tr>
<td>placement</td>

6
site/docs/4.3/components/scrollspy.md
View File

@ -264,9 +264,9 @@ Navbar links must have resolvable id targets. For example, a `<a href="#home">ho
{% include callout.html content=callout type="danger" %}
{% capture callout %}
#### Non-`:visible` target elements ignored
#### Non-visible target elements ignored
Target elements that are not [`:visible` according to jQuery](https://api.jquery.com/visible-selector/) will be ignored and their corresponding nav items will never be highlighted.
Target elements that are not visible will be ignored and their corresponding nav items will never be highlighted.
{% endcapture %}
{% include callout.html content=callout type="info" %}
@ -310,7 +310,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>method</td>
<td>string</td>
<td>auto</td>
<td>Finds which section the spied element is in. <code>auto</code> will choose the best method get scroll coordinates. <code>offset</code> will use jQuery offset method to get scroll coordinates. <code>position</code> will use jQuery position method to get scroll coordinates.</td>
<td>Finds which section the spied element is in. <code>auto</code> will choose the best method get scroll coordinates. <code>offset</code> will use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect"><code>Element.getBoundingClientRect()</code></a> method to get scroll coordinates. <code>position</code> will use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop"><code>HTMLElement.offsetTop</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft"><code>HTMLElement.offsetLeft</code></a> properties to get scroll coordinates.</td>
</tr>
<tr>
<td>target</td>

2
site/docs/4.3/components/tooltips.md
View File

@ -188,7 +188,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
<td>false</td>
<td>
<p>Allow HTML in the tooltip.</p>
<p>If true, HTML tags in the tooltip's <code>title</code> will be rendered in the tooltip. If false, jQuery's <code>text</code> method will be used to insert content into the DOM.</p>
<p>If true, HTML tags in the tooltip's <code>title</code> will be rendered in the tooltip. If false, <code>innerText</code> property will be used to insert content into the DOM.</p>
<p>Use text if you're worried about XSS attacks.</p>
</td>
</tr>

7
site/docs/4.3/getting-started/contents.md
View File

@ -1,7 +1,7 @@
---
layout: docs
title: Contents
description: Discover what's included in Bootstrap, including our precompiled and source code flavors. Remember, Bootstrap's JavaScript plugins require jQuery.
description: Discover what's included in Bootstrap, including our precompiled and source code flavors.
group: getting-started
toc: true
---
@ -38,7 +38,7 @@ bootstrap/
└── bootstrap.min.js.map
{% endhighlight %}
This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/), but not [jQuery](https://jquery.com/).
This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/).
## CSS files
@ -97,7 +97,6 @@ Similarly, we have options for including some or all of our compiled JavaScript.
<tr>
<th scope="col">JS files</th>
<th scope="col">Popper</th>
<th scope="col">jQuery</th>
</tr>
</thead>
<tbody>
@ -107,7 +106,6 @@ Similarly, we have options for including some or all of our compiled JavaScript.
<div><code class="font-weight-normal text-nowrap">bootstrap.bundle.min.js</code></div>
</th>
<td class="text-success">Included</td>
<td class="bg-light text-muted">Not included</td>
</tr>
<tr>
<th scope="row">
@ -115,7 +113,6 @@ Similarly, we have options for including some or all of our compiled JavaScript.
<div><code class="font-weight-normal text-nowrap">bootstrap.min.js</code></div>
</th>
<td class="bg-light text-muted">Not included</td>
<td class="bg-light text-muted">Not included</td>
</tr>
</tbody>
</table>

7
site/docs/4.3/getting-started/download.md
View File

@ -13,7 +13,7 @@ Download ready-to-use compiled code for **Bootstrap v{{ site.current_version}}**
- Compiled and minified CSS bundles (see [CSS files comparison]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/contents/#css-files))
- Compiled and minified JavaScript plugins
This doesn't include documentation, source files, or any optional JavaScript dependencies (jQuery and Popper.js).
This doesn't include documentation, source files, or any optional JavaScript dependencies like Popper.js.
<a href="{{ site.download.dist }}" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download</a>
@ -37,10 +37,9 @@ Skip the download with [BootstrapCDN](https://www.bootstrapcdn.com/) to deliver
<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
{% endhighlight %}
If you're using our compiled JavaScript, don't forget to include CDN versions of jQuery and Popper.js before it.
If you're using our compiled JavaScript, don't forget to include Popper.js, via a CDN preferably, before our JS.
{% highlight html %}
<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
<script src="{{ site.cdn.popper }}" integrity="{{ site.cdn.popper_hash }}" crossorigin="anonymous"></script>
{% endhighlight %}
@ -56,7 +55,7 @@ Install Bootstrap in your Node.js powered apps with [the npm package](https://ww
npm install bootstrap
{% endhighlight %}
`require('bootstrap')` will load all of Bootstrap's jQuery plugins onto the jQuery object. The `bootstrap` module itself does not export anything. You can manually load Bootstrap's jQuery plugins individually by loading the `/js/*.js` files under the package's top-level directory.
`require('bootstrap')` will load all of Bootstrap's plugins onto the `window` object. The `bootstrap` module itself does not export anything. You can manually load Bootstrap's plugins individually by loading the `/js/*.js` files under the package's top-level directory.
Bootstrap's `package.json` contains some additional metadata under the following keys:

12
site/docs/4.3/getting-started/introduction.md
View File

@ -26,19 +26,16 @@ Copy-paste the stylesheet `<link>` into your `<head>` before all other styleshee
### JS
Many of our components require the use of JavaScript to function. Specifically, they require [jQuery](https://jquery.com/), [Popper.js](https://popper.js.org/), and our own JavaScript plugins. Place the following `<script>`s near the end of your pages, right before the closing `</body>` tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.
We use [jQuery's slim build](https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/), but the full version is also supported.
Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and [Popper.js](https://popper.js.org/). Place the following `<script>`s near the end of your pages, right before the closing `</body>` tag, to enable them. Popper.js must come first, and then our JavaScript plugins.
{% highlight html %}
<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
<script src="{{ site.cdn.popper }}" integrity="{{ site.cdn.popper_hash }}" crossorigin="anonymous"></script>
<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
{% endhighlight %}
Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you're at all unsure about the general page structure, keep reading for an example page template.
Curious which components explicitly require our JavaScript and Popper.js? Click the show components link below. If you're at all unsure about the general page structure, keep reading for an example page template.
Our `bootstrap.bundle.js` and `bootstrap.bundle.min.js` include [Popper](https://popper.js.org/), but not [jQuery](https://jquery.com/). For more information about what's included in Bootstrap, please see our [contents]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/contents/#precompiled-bootstrap) section.
Our `bootstrap.bundle.js` and `bootstrap.bundle.min.js` include [Popper](https://popper.js.org/). For more information about what's included in Bootstrap, please see our [contents]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/contents/#precompiled-bootstrap) section.
<details>
<summary class="text-primary mb-3">Show components requiring JavaScript</summary>
@ -77,8 +74,7 @@ Be sure to have your pages set up with the latest design and development standar
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
<!-- Popper.js first, then Bootstrap JS -->
<script src="{{ site.cdn.popper }}" integrity="{{ site.cdn.popper_hash }}" crossorigin="anonymous"></script>
<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
</body>

6
site/docs/4.3/getting-started/javascript.md
View File

@ -1,7 +1,7 @@
---
layout: docs
title: JavaScript
description: Bring Bootstrap to life with our optional JavaScript plugins built on jQuery. Learn about each plugin, our data and programmatic API options, and more.
description: Bring Bootstrap to life with our optional JavaScript plugins. Learn about each plugin, our data and programmatic API options, and more.
group: getting-started
toc: true
---
@ -14,7 +14,7 @@ If you use a bundler (Webpack, Rollup...), you can use `/js/dist/*.js` files whi
## Dependencies
Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that **all plugins depend on jQuery** (this means jQuery must be included **before** the plugin files). [Consult our `package.json`]({{ site.repo }}/blob/v{{ site.current_version }}/package.json) to see which versions of jQuery are supported.
Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs.
Our dropdowns, popovers and tooltips also depend on [Popper.js](https://popper.js.org/).
@ -117,7 +117,7 @@ $.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap funct
## Version numbers
The version of each of Bootstrap's jQuery plugins can be accessed via the `VERSION` property of the plugin's constructor. For example, for the tooltip plugin:
The version of each of Bootstrap's plugins can be accessed via the `VERSION` property of the plugin's constructor. For example, for the tooltip plugin:
{% highlight js %}
$.fn.tooltip.Constructor.VERSION // => "{{ site.current_version }}"

5
site/docs/4.3/getting-started/webpack.md
View File

@ -26,9 +26,8 @@ import 'bootstrap/js/dist/alert';
...
{% endhighlight %}
Bootstrap is dependent on [jQuery](https://jquery.com/) and [Popper](https://popper.js.org/),
these are defined as `peerDependencies`, this means that you will have to make sure to add both of them
to your `package.json` using `npm install jquery popper.js`.
Bootstrap dependends on [Popper](https://popper.js.org/), which is speicified in the `peerDependencies` property.
This means that you will have to make sure to add both of them to your `package.json` using `npm install popper.js`.
## Importing Styles

5
site/index.html
View File

@ -14,7 +14,7 @@ layout: home
Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.
</p>
<p class="lead mb-4">
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built with VanillaJS.
</p>
<div class="row mx-n2">
<div class="col-md px-2">
@ -63,9 +63,8 @@ gem install bootstrap -v {{ site.current_ruby_version }}
<link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
{% endhighlight %}
<h5>JS, Popper.js, and jQuery</h5>
<h5>JS and Popper.js</h5>
{% highlight html %}
<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
<script src="{{ site.cdn.popper }}" integrity="{{ site.cdn.popper_hash }}" crossorigin="anonymous"></script>
<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
{% endhighlight %}