How to import bootstrap

There are four ways to import the Bootstrap framework: Add HTML code through CDN. Use npm to install and import the JavaScript files. Download Bootstrap and reference local CSS and JavaScript files. Install and import preprocessor files via Sass or Less.

How to Import Bootstrap

Bootstrap is a popular front-end framework that simplifies web development and creates responsive website. To import Bootstrap, there are multiple methods:

1. CDN (Content Delivery Network)

This is the easiest method. Add the following code to your HTML header:

<code class="html"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script></code>

2. Node.js Package Manager (npm)

If you use the JavaScript package manager npm, Then you can run the following command:

<code class="shell">npm install bootstrap --save</code>

Then reference Bootstrap in your code:

<code class="javascript">import 'bootstrap'</code>

3. Local download

Download the latest from the Bootstrap website version and copy its files into your project directory. Then reference them in your code:

<code class="html"><link href="/path/to/bootstrap.min.css" rel="stylesheet">
<script src="/path/to/bootstrap.bundle.min.js"></script></code>

4. Install via Sass or Less

If you use the Sass or Less preprocessor, you can install Bootstrap's Sass or Less version.

<code class="shell"># Sass
npm install bootstrap-sass --save

# Less
npm install bootstrap-less --save</code>

Then import Bootstrap into your Sass or Less file:

<code class="sass">@import 'bootstrap'</code>

Note:

• For Bootstrap 4 version, Replace 5.2.0-beta1 with 4.6.2.
• For Bootstrap 5 Alpha version, replace 5.2.0-beta1 with 5.0.0-alpha6.
• Make sure to place Bootstrap.css before your other CSS files.

The above is the detailed content of How to import bootstrap. For more information, please follow other related articles on the PHP Chinese website!