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.
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.
added 1 package in 4.051s
2.完成對
當我們輸入上述兩行後,會自動下載,然後記得相應的路徑不要錯誤。
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.效果