Question

我目前正在开发一个React单页面应用程序，我无法弄清楚在我的项目中将Bootstrap CDN置于何处以及如何放置工作。

此外，如果有人可以建议如何npm为您的项目安装bootstrap。

Answer 1

CDN

<HTML>
        <head>
    <!-- YOU CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        </head>
        <body></body>
        </HTML>

<强> NPM

npm install bootstrap@3

require（'bootstrap'）将所有Bootstrap的jQuery插件加载到jQuery对象上。引导程序模块本身不会导出任何内容。您可以通过在程序包的顶级目录下加载/js/*.js文件来单独手动加载Bootstrap的jQuery插件。

Bootstrap的package.json包含以下键下的一些额外元数据：

less - Bootstrap主要Less源文件的路径 style - 使用默认设置（无需自定义）预编译的Bootstrap非缩小CSS的路径

Answer 2

如果您使用create-react-app，则在public / index.html中有一个文件，或者让您在索引html页面中说出您首先使用cdn 像

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">  
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <title>React App</title>
  </head>

Answer 3

npm install --save bootstrap

此后在 App.js 中导入此内容

import 'bootstrap/dist/css/bootstrap.min.css';

我想在我的反应项目中使用bootstrap的cdn。在哪里以及如何插入cdn？

3 个答案: