技术笔记

编程 营销 外贸


引入bootstrap

<h3>在 React 项目中集成</h3> <p>修改 React 项目的 public/index.html 文件,直接插入 CDN 链接</p> <pre><code>&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&amp;quot;en&amp;quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&amp;quot;utf-8&amp;quot; /&amp;gt; &amp;lt;link rel=&amp;quot;icon&amp;quot; href=&amp;quot;%PUBLIC_URL%/favicon.ico&amp;quot; /&amp;gt; &amp;lt;!-- 添加 Bootstrap CSS --&amp;gt; &amp;lt;link href=&amp;quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css&amp;quot; rel=&amp;quot;stylesheet&amp;quot; crossorigin=&amp;quot;anonymous&amp;quot; &amp;gt; &amp;lt;title&amp;gt;React + Bootstrap&amp;lt;/title&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &amp;lt;div id=&amp;quot;root&amp;quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;!-- 添加 Bootstrap JS --&amp;gt; &amp;lt;script src=&amp;quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js&amp;quot; crossorigin=&amp;quot;anonymous&amp;quot; &amp;gt;&amp;lt;/script&amp;gt; &amp;lt;/body&amp;gt; &amp;lt;/html&amp;gt;</code></pre> <h3>验证是否生效</h3> <p>在组件中使用 Bootstrap 的样式和组件,例如:</p> <pre><code>// src/App.js function App() { return ( &amp;lt;div className=&amp;quot;container mt-5&amp;quot;&amp;gt; &amp;lt;button className=&amp;quot;btn btn-primary&amp;quot;&amp;gt;Bootstrap 按钮&amp;lt;/button&amp;gt; &amp;lt;/div&amp;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 &amp;quot;bootstrap/dist/css/bootstrap.min.css&amp;quot;; import &amp;quot;bootstrap/dist/js/bootstrap.bundle.min.js&amp;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>

页面列表

ITEM_HTML