search
HomeWeb Front-endBootstrap TutorialHow to import bootstrap after downloading it with npm

How to import bootstrap after downloading it with npm

1. The first step, of course, is to use npm to install bootstrap.
npm install bootstrap@4
The function of @4 here is to specify that the installed version is version 4.x. If you don’t write it, the latest version will be installed by default. I still like to write it.

2. Through the previous steps, we have installed bootstrap, and then we need to install jquery, because bootstrap depends on jquery. We also use npm to install jquery.
npm install jquery

Related recommendations: "bootstrap Getting Started Tutorial"

3. Okay, next we will introduce jquery and bootstrap into the file. Let’s create a file first, let’s call it init.js.
import $ from 'jquery'
import 'bootstrap'

4. Next, we need to attach jquery to the window object.
window.jQuery=$
jQuery=$
window.$=window.jQuery

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

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
10款好看又实用的Bootstrap后台管理系统模板(快来下载)10款好看又实用的Bootstrap后台管理系统模板(快来下载)Aug 06, 2021 pm 01:55 PM

一个好的网站,不能只看外表,网站后台同样很重要。本篇文章给大家分享10款好看又实用的Bootstrap后台管理系统模板,可以帮助大家快速建立强大有美观的网站后台,欢迎下载使用!如果想要获取更多后端模板,请关注php中文网后端模板栏目!

npm react 安装报错怎么办npm react 安装报错怎么办Dec 27, 2022 am 11:25 AM

npm react安装报错的解决办法:1、打开项目中的“package.json”文件,找到dependencies对象;2、将其中的“react.json”移动到“devDependencies”;3、在终端中运行“npm audit --production”即可修复警告。

JavaScript包管理器比较:Npm vs Yarn vs PnpmJavaScript包管理器比较:Npm vs Yarn vs PnpmAug 09, 2022 pm 04:22 PM

本篇文章带大家了解一下三种JavaScript包管理器(npm、yarn、pnpm),并将这三种包管理器进行对比,聊聊npm、yarn、pnpm三者的区别和关联,希望对大家有所帮助,如有问题欢迎指出!

7款实用响应式Bootstrap电商源码模板(快来下载)7款实用响应式Bootstrap电商源码模板(快来下载)Aug 31, 2021 pm 02:13 PM

好看又实用的Bootstrap电商源码模板可以提高建站效率,下面本文给大家分享7款实用响应式Bootstrap电商源码,均可免费下载,欢迎大家使用!更多电商源码模板,请关注php中文网电商源码​栏目!

一文解析package.json和package-lock.json一文解析package.json和package-lock.jsonSep 01, 2022 pm 08:02 PM

本篇文章带大家详解package.json和package-lock.json文件,希望对大家有所帮助!

8款Bootstrap企业公司网站模板(源码免费下载)8款Bootstrap企业公司网站模板(源码免费下载)Aug 24, 2021 pm 04:35 PM

好看又实用的企业公司网站模板可以提高您的建站效率,下面PHP中文网为大家分享8款Bootstrap企业公司网站模板,均可免费下载,欢迎大家使用!更多企业站源码模板,请关注php中文网企业站源码栏目!

node无法用npm命令怎么办node无法用npm命令怎么办Feb 08, 2023 am 10:09 AM

node无法用npm命令是因为没有正确配置环境变量,其解决办法是:1、打开“系统属性”;2、找到“环境变量”->“系统变量”,然后编辑环境变量;3、找到nodejs所在的文件夹;4、点击“确定”即可。

bootstrap中sm是什么意思bootstrap中sm是什么意思May 06, 2022 pm 06:35 PM

在bootstrap中,sm是“小”的意思,是small的缩写;sm常用于表示栅格类“.col-sm-*”,是小屏幕设备类的意思,表示显示大小大于等于768px并且小于992px的屏幕设备,类似平板设备。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!