mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-08 17:22:31 +03:00
Remove jQuery from docs/repo.
Some of the snippets need to be updated later.
This commit is contained in:
XhmikosR
@@ -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>
|
||||
|
||||
@@ -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:
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 }}"
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user