引入bootstrap
<h3>在 React 项目中集成</h3>
<p>修改 React 项目的 public/index.html 文件，直接插入 CDN 链接</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot; /&gt;
&lt;link rel=&quot;icon&quot; href=&quot;%PUBLIC_URL%/favicon.ico&quot; /&gt;
&lt;!-- 添加 Bootstrap CSS --&gt;
&lt;link
href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css&quot;
rel=&quot;stylesheet&quot;
crossorigin=&quot;anonymous&quot;
&gt;
&lt;title&gt;React + Bootstrap&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
&lt;!-- 添加 Bootstrap JS --&gt;
&lt;script
src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js&quot;
crossorigin=&quot;anonymous&quot;
&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<h3>验证是否生效</h3>
<p>在组件中使用 Bootstrap 的样式和组件，例如：</p>
<pre><code>// src/App.js
function App() {
return (
&lt;div className=&quot;container mt-5&quot;&gt;
&lt;button className=&quot;btn btn-primary&quot;&gt;Bootstrap 按钮&lt;/button&gt;
&lt;/div&gt;
);
}</code></pre>
<p>如果按钮显示为蓝色并带有 Bootstrap 样式，则说明 CDN 加载成功。</p>
<h3><strong>注意事项</strong></h3>
<ol>
<li>
<p><strong>依赖问题</strong></p>
<ul>
<li>
<p>Bootstrap 5 <strong>不再依赖 jQuery</strong>，直接使用原生 JavaScript。</p>
</li>
<li>若需要旧版 Bootstrap 4，需额外引入 jQuery 和 Popper.js，但强烈建议使用 Bootstrap 5。</li>
</ul>
</li>
<li>
<p><strong>与 React 的兼容性</strong></p>
<ul>
<li>
<p><strong>交互组件问题</strong>：Bootstrap 的 JS 插件（如模态框、下拉菜单）依赖直接操作 DOM，可能与 React 的虚拟 DOM 冲突。</p>
</li>
<li><strong>推荐替代方案</strong>：使用 <a href="https://react-bootstrap.github.io/">React-Bootstrap</a> 或 <a href="https://reactstrap.github.io/">Reactstrap</a> 库，它们为 React 封装了 Bootstrap 组件。</li>
</ul>
</li>
<li>
<p><strong>生产环境建议</strong></p>
<ul>
<li>通过 npm 安装 Bootstrap（<code>npm install bootstrap</code>）并直接导入文件，避免依赖 CDN 的稳定性：
<pre><code>// 在 src/index.js 中导入 Bootstrap
import &quot;bootstrap/dist/css/bootstrap.min.css&quot;;
import &quot;bootstrap/dist/js/bootstrap.bundle.min.js&quot;;</code></pre></li>
</ul>
</li>
</ol>
<h3>总结</h3>
<p>短期快速使用：直接通过 CDN 引入，修改 public/index.html。
长期项目：通过 npm 安装 Bootstrap，或使用 React 专用封装库（如 React-Bootstrap）。</p>
<h3>React的Bootstrap学习链接</h3>
<p><code>https://reactstrap.github.io/?path=/docs/components-forms--input</code></p>
<p><code>https://react-bootstrap.github.io/</code></p>