1. 程式人生 > >JS中bootstrap和jquery引入

JS中bootstrap和jquery引入

1.在網路的情況下,啟動webstorm中的Terminal,輸入(黑體字)

 

F:\A-H5-GP9\test>npm i [email protected]

npm WARN saveError ENOENT: no such file or directory, open 'F:\A-H5-GP9\test\package.json'

npm notice created a lockfile as package-lock.json. You should commit this file.

npm WARN enoent ENOENT: no such file or directory, open 'F:\A-H5-GP9\test\package.json'

npm WARN test No description

npm WARN test No repository field.

npm WARN test No README data

npm WARN test No license field.

 

+ [email protected]

added 1 package in 6.441s

 

F:\A-H5-GP9\test>npm i jquery

npm WARN saveError ENOENT: no such file or directory, open 'F:\A-H5-GP9\test\package.json'

npm WARN enoent ENOENT: no such file or directory, open 'F:\A-H5-GP9\test\package.json'

npm WARN test No description

npm WARN test No repository field.

npm WARN test No README data

npm WARN test No license field.

 

+ [email protected]

added 1 package in 4.051s

 

2.完成對

bootstrapjquery的獲取 上述

當我們輸入上述兩行後,會自動下載,然後記得相應的路徑不要錯誤。

 

3.引入檔案

 

<linkhref="node_modules/bootstrap/dist/css/bootstrap-theme.css"rel="stylesheet">

<scriptsrc="node_modules/jquery/dist/jquery.js"></script>

<scriptsrc="node_modules/bootstrap/dist/js/bootstrap.js"></script>

 

測試:

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>Title</title>

<!--前期準備工作-->

<linkhref="node_modules/bootstrap/dist/css/bootstrap-theme.css"rel="stylesheet">

<scriptsrc="node_modules/jquery/dist/jquery.js"></script>

<scriptsrc="node_modules/bootstrap/dist/js/bootstrap.js"></script>

</head>

<body>

<buttonclass="btnbtn-default">XBL</button>

</body>

</html>

 

4.效果