react项目使用bootstrap

最新推荐文章于 2024-05-12 07:39:34 发布
最新推荐文章于 2024-05-12 07:39:34 发布
阅读量2.1k 收藏
点赞数 1
文章标签： javascript ViewUI

曾经对于react项目怎么使用bootstrap纠结了很久，网上也查了好多的资料，有的用react-bootstrap，只要npm install 以后，import就可以使用里面的css了。但是这个样式跟我想要的bootstrap还是有点不一样的。我希望用http://www.bootcss.com/里的，最近才发现，自己真的有的时候瞎想太多了，就跟之前一样，把bootstrap的css以及js引用直接放在index.html里面引用就可以了，真是为以前的愚蠢汗颜！！！

附引用代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <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="stylesheet" href="./css/bootstrap.min.css" rel="stylesheet">
    <title>React App</title>
  </head>
  <body>
    <div id="root">
     
    </div>
    <script src="js/jquery-3.2.1.slim.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

 

weixin_34356138
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React应用中使用Bootstrap的方法
08-29
本篇文章主要介绍了React应用中使用Bootstrap的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
create-react-app搭建的项目中添加bootstrap
weixin_34163741的博客
12-06 498
react-bootstrap是一个非常受欢迎的针对react封装过的bootstrap，它本身不包含css，所以也是需要使用bootstrap原生库。 在create-react-app建的项目目录中安装react-bootstrap。 npm install react-bootstrap --save 安装bootstrap。 npm install bootstrap@...
react入门之使用react-bootstrap当轮子造车（二）
ddez46767的博客
08-14 555
react入门之使用react-bootstrap当轮子造车（二） 上一篇我们谈了谈如何配置react的webpack环境 react入门之搭配环境（一） 可能很多人已经打开过官方文档学习了react的基础知识 不管有没有，在介绍react之前，我想先介绍一下react-bootstrap 先懂得使用别人造的轮子，就能更快成为老司机。 好的，源代码奉上： ...
在React中使用Bootstrap
weixin_30628077的博客
11-06 187
这几天想在react中用一下bootstrap，尽管有一个适配react的很好的库叫react-bootstrap，但我还是想直接使用bootstrap 可以在react项目中执行以下命令安装bootstrap npm install bootstrap@3 --save 或是在bootstrap官网下载打包好的包直接放在react项目的src目录下 在使用的时候，直接在入...
用React构建的Bootstrap组件-React开发
05-27
从Bootstrap 3迁移到Bootstrap 4如果您想在现有项目中更新React-Bootstrap以使用Bootstrap 4，请阅读我们的文档以迁移到React-Bootstrap V1。 相关模块react-router-bootstrap –与React Router Aweso集成
react-bootstrap-icons：用于Bootstrap图标的React组件
01-31
React Bootstrap图标 全新的用作React组件。 当前v1.3.0，有1265个图标！ 安装 npm install react-bootstrap-icons --save 要么 yarn add react-bootstrap-icons 用法 import React from ' react ' ; import { ...
使用 React 构建的 Bootstrap 组件
06-08
从 Bootstrap 3 迁移到 Bootstrap 4 如果您想在现有项目中更新 React-Bootstrap 以使用 Bootstrap 4，请阅读我们的文档以迁移到 React-Bootstrap V1。 相关模块 react-router-bootstrap – 与 React Router 集成 ...
react-bootstrap：用React构建的Bootstrap组件
01-30
从Bootstrap 3迁移到Bootstrap 4 如果您想在现有项目中更新React-Bootstrap以使用Bootstrap 4，请阅读我们的文档以 。相关模块 –与集成-其他组件，例如画布导航栏，开关和滑块。本地设置在这里，Yarn是我们选择的...
vue.config.js备份一个
woflyoycm的博客
02-26 159
const webpack = require("webpack"); module.exports = { //打包要放在根目录的mobile文件夹下面 所以加入publicPath配置 publicPath: process.env.NODE_ENV === 'production' ? '/mobile/' : '/', configureWebpack: { //֧��jquery plugins: [ .
react-bootstrap4 bootstrap4的react代码实现实例
11-24
react-bootstrap4 bootstrap4的react代码实现实例 npm
bootstrap 下拉列表_Bootstrap在React中的实现，易于使用的React组件——Reactstrap
weixin_39812046的博客
11-28 189
介绍众所周知，Bootstrap是非常受欢迎的前端库，因为其美观的UI以及使用方式的简单而深受广大的前端爱好者的喜爱，但近年来各类前端框架大行其道，要想将Bootstrap尤其是其组件部分很优雅的使用到这些框架不一定很方便，在之前的文章中已经介绍过Vue的实现版本，本文就介绍以下React的版本——ReactstrapGithubhttps://reactstrap.github.io/https...
React引入Bootstrap
宇智波带土
06-12 1454
第一步： cd到项目文件夹下 第二步： 命令：npm install bootstrap --save 第三步： 在index.js引入Bootstrap import React from 'react'; import ReactDOM from 'react-dom'; import App from './App/App'; import 'bootstrap/dist/css/bootstrap.min.css' ReactDOM.render(<App />,do.
react-bootstrap入门
徐同保的专栏
12-18 928
安装包： yarn add react-bootstrap bootstrap 引入样式： import 'bootstrap/dist/css/bootstrap.min.css' js： import React from 'react' import { Button, Row, Col } from 'react-bootstrap' const App = () => ( <> <Row className="mx-0"> &
TypeScript中的函数类型注解：精确定义行为与意图
逐星的博客
05-11 367
在TypeScript中，函数不仅是一段执行特定任务的代码块，它们还可以拥有自己的类型。函数类型注解允许开发者定义函数的参数类型和返回值类型，从而提高代码的可读性和可维护性。函数类型注解是TypeScript中定义函数时的重要特性，它有助于确保函数参数和返回值符合预期，从而提高代码的准确性和安全性。
使用 js 类封装项目中音频播放功能的工具方法utils
qq_40868156的博客
05-07 209
封装音频播放功能的工具方法，js，es6，前端，工程化
ts函数？
FENGZXCjjjjj的博客
05-11 211
只要参数类型是匹配的，那么就认为它是有效的函数类型，而不在乎参数名是否正确。第二部分是返回值类型。对于返回值，我们在函数和返回值类型之前使用( =>)符号，使之清晰明了。如之前提到的，返回值类型是函数类型的必要部分，如果函数没有返回任何值，你也必须指定返回值类型为 void而不能留空。函数的类型只是由参数类型和返回值组成的。函数中使用的捕获变量不会体现在类型里。实际上，这些变量是函数的隐藏状态并不是组成API的一部分。
vue3引入element-plus完整步骤
zzx262625的博客
05-06 443
如果你的项目需要在低版本浏览器上运行，你可能需要使用一些转换工具（如Babel、ESBuild）和polyfill来确保兼容性。在你的Vue项目中配置一个编译器（如Vue CLI、Vite等），然后运行你的项目。你可以尝试在你的组件中使用一些Element Plus的组件来确保它们正常工作。使用npm（或cnpm，如果你在中国并且希望使用淘宝的npm镜像）来安装Element Plus。这样，你就可以在你的Vue组件中使用Element Plus的图标了。在你的Vue 3项目的入口文件（通常是。
vue3vue3vue3vue3vue3vue3vue3vue3vue3vue3vue3vue3
最新发布
口袋的天空的博客
05-12 861
vue3,elementui-plus,pinia
react项目中使用bootstrap
05-29
要在 React 项目中使用 Bootstrap，可以按照以下步骤操作： 1. 在项目中安装 Bootstrap，可以使用 npm 或 yarn 安装： ``` npm install bootstrap ``` 或者 ``` yarn add bootstrap ``` 2. 在项目的入口文件中（通常是 index.js 或 App.js）引入 Bootstrap 样式： ``` import 'bootstrap/dist/css/bootstrap.min.css'; ``` 3. 现在可以在 React 组件中使用 Bootstrap 的组件和样式了。例如，在组件中使用 Bootstrap 的按钮： ``` import React from 'react'; import Button from 'react-bootstrap/Button'; function MyButton() { return ( <Button variant="primary">Click me</Button> ); } ``` 或者在 JSX 中使用 Bootstrap 的类名： ``` function MyComponent() { return ( <div className="container"> <h1>Hello, world!</h1> </div> ); } ``` 这样就可以在 React 项目中使用 Bootstrap 了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值