如何在react中使用bootstrap而不使用任何额外的css文件，以及如何应用类名？
在React中使用Bootstrap而不使用任何额外的CSS文件，可以通过以下步骤实现：
- 安装Bootstrap：在React项目的根目录下，使用npm或者yarn命令安装Bootstrap依赖包。可以执行以下命令：npm install bootstrap或者yarn add bootstrap
- 导入Bootstrap样式：在React项目的入口文件（通常是index.js或App.js）中，导入Bootstrap的CSS样式。可以使用以下代码：import 'bootstrap/dist/css/bootstrap.min.css';
- 使用Bootstrap组件：在React组件中，可以直接使用Bootstrap提供的组件。例如，使用
<button>组件可以添加一个Bootstrap样式的按钮，如下所示：import React from 'react'; function MyComponent() { return ( <div> <button className="btn btn-primary">Click me</button> </div> ); } export default MyComponent;
在上述代码中，className属性用于添加Bootstrap的类名，例如btn和btn-primary。通过这种方式，可以应用Bootstrap的样式而不需要额外的CSS文件。
需要注意的是，以上方法只适用于使用Bootstrap的CSS样式，如果要使用Bootstrap的JavaScript组件（例如模态框、轮播图等），还需要额外导入Bootstrap的JavaScript文件，并按照官方文档的指引进行使用。
推荐的腾讯云相关产品：腾讯云云服务器（CVM），产品介绍链接地址：https://cloud.tencent.com/product/cvm
相关·内容
Webpack不更新我的包，我总是得到相同的老版本的网站时，使用npm run build。
我的目录：
-我的计划
？
-？
-WebPack.config.js
我试着重新安装webpack，它帮了一次忙，但是不管我重新安装了多少次，都不会再更新了。
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-c
浏览 0提问于2019-04-24得票数 3
回答已采纳
我有两个不同的页面和两个不同的css (每个html页面一个)，如果我在其中一个页面中修改.table{}，那么css将应用于所有页面。我使用react引导
我希望page1中有一个100%宽度的表，page2中33.3%宽度的表。
page2：
import React from 'react';
import Container from "react-bootstrap/Container";
import {Jumbotron} from "react-bootstrap";
import Row from "react-b
浏览 0提问于2019-04-19得票数 0
回答已采纳
我一直在遵循一个教程，我想保留按钮和导航栏的样式，但我也想为按钮等组件实现一些引导。但是，当我从bootstrap导入按钮时，它们的样式不在那里。我能做些什么来解决这个问题吗？ 此外，如果我在注册页面上导入bootstrap.min.css文件，按钮将恢复其样式，但整个网站都会受到引导css的影响。 HomepageButton SignupPageButton BootstrapButton When Bootstrap.min.css Is Imported 教程中的按钮组件 import React from 'react';
import './Button.
浏览 20提问于2021-03-17得票数 1
回答已采纳
我的“主”组件中有以下render：
import ComponentA from './component-a.js';
import ComponentB from './component-b.js';
const App = React.createClass({
render: function() {
return (
<div>
<ComponentA/>
<ComponentB/>
浏览 2提问于2016-10-25得票数 11
回答已采纳
我已经开始研究reactJS了。我正在看一个教程，其中Css被单独传递给jsx组件，我试着做同样的事情，但失败了。没有错误，但是CSS中的更改没有实现。
我甚至在这之后安装了装载机，但没有得到任何结果。
npm i css-loader style-loader --save-dev
yarn add --dev css-loader style-loader
App.js
import React, { Component } from 'react';
import{Form, FormControl, Button} from 'react-bootstrap&
浏览 0提问于2019-09-11得票数 0
回答已采纳
2回答
我对反应和引导都是新手，所以我已经开始用react-bootstrap和他们一起玩了。我听说覆盖引导CSS最简单的方法之一是在引导CSS之上应用您自己的CSS。所以我有下面的一页
我有下面的App.js
import React from 'react';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import Container from 'react-bootstrap/Container';
浏览 1提问于2020-04-26得票数 1
2回答
反应性组件CSS文件CSS代码不工作。组件文件CSS已导入।
import React from 'react';
import { Carousel } from 'react-bootstrap';
import './Banner';
浏览 5提问于2022-05-08得票数 0
我在尝试更改导航栏的颜色时遇到问题。我遗漏了什么步骤吗？
这是我试图呈现的组件：
import React from 'react';
import { Nav, Navbar } from 'react-bootstrap';
import styles from './MainMenu.module.css';
const Topbar = () => {
return(
<Navbar className={styles.mainBar}>
<Navbar.Brand&g
浏览 8提问于2021-06-04得票数 1
我从bootstrap获取了一个导航栏模板，并尝试配置react- router，url发生了变化，但页面没有呈现，我不确定这是否与我的导航栏或路由器有关 import React from "react";
import "./App.css";
import "bootstrap/dist/css/bootstrap.css";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Home from
浏览 46提问于2020-06-29得票数 1
我尝试安装react-bootstrap，并按照以下说明操作： https://react-bootstrap.github.io/getting-started/introduction 然而，在启动应用程序(通过Android Studio模拟设备)后，我收到以下错误： error: bundling failed: Error: Unable to resolve module `bootstrap/dist/css/bootstrap.min.css` from `index.js`: bootstrap/dist/css/bootstrap.min.css could not be
浏览 460提问于2020-01-30得票数 0
回答已采纳
1回答
嗨，我正在尝试设置一个基本的react示例，这是我用来显示页面的代码。你能推荐我怎样把这个元素写得更好吗？我要导入到应用程序中的Header.js有什么问题？
Header.js
import Jumbotron from "react-bootstrap/Jumbotron";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import Button from "react-bootstrap/Button";
export default class Header extend
浏览 9提问于2019-11-08得票数 0
回答已采纳
我在src文件夹中创建了组件文件夹，并试图编写简单的问候程序，为此我创建了3个文件：
index.jsxindex.html GreetUser.jsx GreetUser.jsx
在编译时，它显示无法找到所需的index.js文件。
我在组件文件夹中编写了3个文件，并在index.jsx文件中导入了index.jsx模块，在编译过程中显示无法找到所需的index.js文件。
1.GreetingUser.jsx
import React , {component} from 'react';
class GreetUser extends component
{
r
浏览 1提问于2019-10-06得票数 0
1回答
我目前正在使用默认的vite+react应用程序，并按照他们的文档显示的方式安装引导程序。
vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
浏览 4提问于2022-11-29得票数 -1
1回答
我试着通过 使用道具 函数，但它返回 this.props.isAuthed不是函数 ..。我的终极目标是能够通过 作为我的道具 App.js 制造 注销 按钮的出现和消失取决于用户是否登录。会有什么问题呢？ import React from "react";
import { Redirect } from "react-router-dom";
import firebaseConfig from "./firebaseconfig";
class Dashboard extends React.Component {
co
浏览 26提问于2021-03-01得票数 0
回答已采纳
我得到了这个错误，我已经使用npx-create-react-app创建了一个新项目，然后按照这里写下的说明操作:我已经使用：npm install react-bootstrap bootstrap安装了。然后把CDN复制到我的index.html上
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link
**rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap
浏览 0提问于2020-03-03得票数 7
我使用bootstrap-vue toast来显示成功消息。
<b-toast id="example-toast" title="BootstrapVue" static no-auto-hide>
Hello, world! This is a toast message.
</b-toast>
我添加了这个CSS以便在top: 90px上显示它。
.b-toaster.b-toaster-top-right,
.b-toaster.b-toaster-top-left,
.b-toaster.b-toaster-top-cent
浏览 0提问于2021-04-17得票数 0
1回答
使用多个样式表链接应对本地世博会
、、、、
这是安蒂卡。从几天前开始，我就开始学习编写代码了，我只熟悉HTML/CSS/JS，以及React的基础知识。
开发人员级别：初级项目类型和语言：，我正在为自己开发一个学习计划应用程序，使用React 。
Problem -我主要是用传统的方式进行编程- HTML、CSS和JS。并且最近转向了高级语言，比如React和React。如何导入多个样式表的列表，就像我们在中所做的那样，在react本机项目中
，这些是独立的CSS文件，-
<link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css
浏览 5提问于2022-02-14得票数 0
我是react的新手，我只想知道如何使用react js将nav-pills设置为活动状态我正在使用bootstrap和react js。
为此，我已经尝试过setState
我没有得到结果
浏览 1提问于2019-05-11得票数 0
1回答
用于引导和css模块的模板文字
、、、、
嗨，我想使用引导和css模块一起在反应，但我有困难，了解如何。我想我可以使用模板文字来达到这个目的。
下面的代码是: Login.tsx
import React from "react";
import LoginStyles from "../css/Login.module.css";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-boot
浏览 2提问于2020-02-27得票数 1
回答已采纳
如何在react中使用bootstrap而不使用任何额外的css文件，以及如何应用类名？
浏览 0提问于2018-07-16得票数 0
我正在尝试改变react-bootstrap中accordion元素移动的方向。目前它正在向下移动。有没有一种简单的方法让它朝上打开？
下面是我的一个组件的示例。我希望能够向上而不是向下打开它，原因是我把它放在了屏幕的底部，所以当我在默认设置下打开它时，它会向下而不是向上：
import React from 'react';
import { Accordion, Card, Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
cons
浏览 0提问于2019-10-21得票数 2
我正在尝试使用reactJS文件中的按钮。这是我的代码
export class Add extends React.Component {
render() {
return (
<div>
<Button bsStyle="primary" bsSize="large">
Add
</Button>
</div>
);
}
}
但react给我的是：
'Button' is not defined
浏览 13提问于2018-03-06得票数 2
回答已采纳
4回答
我是新手，我制作了一个简单的组件，并将一些数据呈现到这个组件中，但是我看不到浏览器上的任何输出，而且在控制台"react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render不是一个函数。
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
// import App from './App';
// import reportWebVit
浏览 4提问于2022-06-15得票数 0
回答已采纳
我刚刚开始在我的站点中实现React-Bootstrap，但是单击它时NavDropdown组件不会展开。
我做了什么：npm install -s react-bootstrap
添加css到html：<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
已创建我的Navigation组件：
import React from 'react';
import PropTypes fro
浏览 1提问于2017-11-19得票数 10
2回答
我是新来的。我想开始一个小小的你好世界的例子，我自己。
大多数教程都提供了如下内容：
app.js
var React = require('react');
var ReactDOM = require('react-dom');
var reactElement = React.createElement('h1', { className: 'header' },
'This is React');
ReactDOM.render(reactElement, document.getElementById(&
浏览 6提问于2017-01-24得票数 42
回答已采纳
如何在Modal中单击remove按钮时删除显示的内容。
当从数组中单击remove按钮时，我可以删除该对象，但该内容仍显示在屏幕上。
我认为从数组中删除对象将重新启动map函数，该函数将再次调用循环，新内容将可见
import React from "react";
import { Modal, Button } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
let data = [
{
Name: "COOL",
浏览 26提问于2020-07-31得票数 0
2回答
我刚刚开始学习如何使用ReactJS来呈现视图，但是我发现，如果我将属性直接插入到ReactJS组件中，那么引导CSS类就不能像预期的那样工作。例如，在下面的代码中，我希望生成一个具有类的面板:面板默认和面板标题；但是，生成的视图不带有引导样式。我在想，如果可能的话，为什么以及如何修复。请注意，我已经编译了我的ReactJS代码，并在HTML代码中包含了编译好的JS (参见底部)。
var taxonGroups = {
identifier: 'ABC-x981',
sources: [
{segmentName: 'segment1', le
浏览 3提问于2015-01-10得票数 25
回答已采纳
2回答
我使用bootstrap css和一个用less编写的额外模板。Im在我的react组件的根组件中导入两者。不幸的是，来自bootstrap的样式优先于较少的样式，即使导入的第二个文件较少。有没有办法保证和webpack的风格顺序。
这是根组件：
import React from "react";
import Dashboard from "./dashboard";
import 'bootstrap/dist/css/bootstrap.min.css'
import '../styles/less/pages.less'
浏览 2提问于2015-06-24得票数 20
回答已采纳
3回答
我刚学会了react，我试着用Bootstrap做一个网站。假设下面的图片是我的网页。当我浏览左上角路径为"/project/react“的链接时(导航栏标题的值为"React")，然后浏览路径为"/project/bootstrap”的链接，我希望左上角的路径为“/project/Bootstrap”(导航栏标题的值为"Bootstrap")。这有可能吗？因为我得到的标题仍然显示“反应”。谢谢
//MyPage.js
import 'bootstrap/dist/css/bootstrap.min.css';
import &#
浏览 1提问于2020-01-02得票数 2
每次我尝试使用来自'react-bootstrap‘的组件时，我都会遇到一些奇怪的错误。下面是我导入"HelpBlock“组件的一些小示例。 import PropTypes from 'prop-types';
import React from 'react';
import HelpBlock from 'react-bootstrap';
class RegisterFormDetails extends React.Component {
...
<HelpBlock>{va
浏览 36提问于2019-03-03得票数 0
1回答
我有一个app应用程序，它是使用创建的。我在我的项目中包括了react引导程序，当我启动/构建应用程序时，导入了引导css文件。如何用我的自定义css来更改这个css？我知道我可以在index.js中添加新的css，但是在这种情况下不能导入两个css文件吗？
由于我正在创建一个自定义引导主题，所以我更希望没有导入默认的引导css文件，因为我正在从我的自定义scss文件和引导scss文件构建新的css文件。
我的package.json：
{
"name": "reading-manager-app",
"version": "0.
浏览 0提问于2018-09-01得票数 1
回答已采纳
1回答
我正在构建一个简单的REACT应用程序，并使用react引导程序的列表组项。
App.js
import React from "react";
import "./App.css";
import { Container, Row } from "react-bootstrap";
import SimpleList from "./Containers/SimpleList";
function App() {
return (
<div className="App">
<
浏览 1提问于2020-08-08得票数 1
回答已采纳
1回答
有人能告诉我下面这两个例子之间的区别吗，上面的那个正确地呈现，而下面的一个根本没有呈现"XYZ“内容？您还能告诉我为什么它们的行为不同，以及我如何“包装”这样的组件吗？
import React from 'react';
import "antd/dist/antd.css";
import { Collapse } from "antd";
const { Panel } = Collapse;
export default function ScraperList({ scraper }) {
console.l
浏览 0提问于2020-03-13得票数 1
回答已采纳
我正在尝试使用css模块与typescript和创建-反应-应用程序反应应用程序。
我在我的App.tsx中执行了import './App.modules.css';，但是我得到了错误：Module not found: Can't resolve './App.modules.css' in 'C:\...\testapp\src'
然而，它适用于const styles = require('./App.module.css');，那么我显然必须为我的样式使用类(classNames)……
如果我只使用普通的标记名，
浏览 3提问于2021-05-21得票数 0
2回答
我想使用引导和其他jQuery插件(数据交换，旋转木马，.)在我使用create-react-app的React应用程序中。
下面是导入jQuery和引导程序的方法：
import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
window.jQuery = window.$ = $;
import 'bootstrap/dist/js/bootstrap.min';
浏览 3提问于2017-05-20得票数 12
回答已采纳
1回答
我正在学习反应和造型，我试图使用引导。
我被困在使用下拉列表。我浏览了几乎所有相同的堆叠溢出帖子，但无法解决。如果有人知道正确的解决方案，请帮助我。
我的组件类：
import React from "react";
function ExpenseFilter() {
return (
<div className="d-flex justify-content-around">
<div className="text-light">
浏览 1提问于2021-08-23得票数 1
回答已采纳
我有一个MVC5应用程序。
我在_Layout.cshtml中有这段代码
<head>
......
@Styles.Render("~/Content/estilos")
@RenderSection("styles", required: false)
</head>
我在视图中还有其他代码：
@section styles
{
@Styles.Render("~/Content/dataTables")
}
另一方面，我在BundleConfig.cs文件中有这个：
bundles.Add
浏览 2提问于2018-11-08得票数 0
3回答
我是使用ES6的reactJS的新手，读过很多关于CSS的文章，他们试图解决的问题是全局style.css，而不是使用
样式/index.js
var styles = {
transparentBg: {
background: 'transparent'
}
};
许多人认为，如果您没有数百个CSS类，则应该在每个类中编写CSS (我不知道CSS的反应名称是什么，上面的代码)，而不是一个单独的文件。感觉怪怪的。是真的吗？
许多CSS框架，作为流行的Bootstrap仍然是在“旧”的CSS。有关系吗？知道应用程序仍然可以工作，但react选择这样做肯定有某种原
浏览 0提问于2016-05-10得票数 4
我想在小屏幕设备上隐藏<Col></Col>。我查看了react-bootstrap文档，但它没有提到如何做到这一点。
在纯react + bootstrap中可以实现<div className="hidden-xs"></div>，但是使用库react-bootstrap就不再工作了。我试过了：<Col xs="0"></Col>和类似的，但都不起作用。
有人知道如何隐藏react-bootstrap列吗？
浏览 1提问于2019-04-07得票数 3
1回答
我正在学习反应和造型，我试图使用引导。
我被困在使用下拉列表。我浏览了几乎所有相同的堆叠溢出帖子，但无法解决。如果有人知道正确的解决方案，请帮助我。
我的组件类：
import React from "react";
function ExpenseFilter() {
return (
<div className="d-flex justify-content-around">
<div className="text-light">
浏览 2提问于2021-08-23得票数 0
回答已采纳
有没有办法添加外部的(例如.bootstrap)类以及反应-情感样式？
import React, { Component } from 'react';
import { css } from 'react-emotion';
const MyStyle = css`
STYLE
`
export default class MyComponent extends Component {
render() {
return (<button className={css`${MyStyle}` /* add in some way `b
浏览 15提问于2018-08-08得票数 5
回答已采纳
我使用了带有嵌入式CSS模块的Create React App，并安装了Bootstrap库。下面是一个示例代码： index.jsx import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
ReactDOM.r
浏览 11提问于2020-04-17得票数 1
回答已采纳
当我在控制台中运行webpack-dev-server的npm start脚本命令时，localhost:8080将在浏览器中打开，但不会呈现my ./src/index.js文件。相反，我得到一个指向引导文件的错误。
我的项目的树
My Project
/node_modules
/src
/components
Counter.js
index.html
index.css
index.js
package.json
package-lock.json
webpa
浏览 0提问于2019-01-14得票数 1
回答已采纳
1回答
我的主应用程序视图
import React from "react";
import Col from 'react-bootstrap/Col';
import Card from 'react-bootstrap/Card';
import "./Village.module.css";
const VillageItem = ({ label, fields, className }) => {
return (
<Col xs={12} sm={12} md={4} lg={4}&
浏览 1提问于2020-10-28得票数 1
回答已采纳
2回答
我试图建立与反应路由器和webpack.require.ensure函数加载模块，但方法不呈现组件。
在我的示例中，Button组件默认呈现(在主页上)。当我单击按钮时，路由器将我重定向到/admin url，我可以在我的web控制台中看到require.ensure加载了新的块，但是Label组件没有呈现。
index.jsx
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, useRouterHistory, bro
浏览 1提问于2016-10-31得票数 4
回答已采纳
在我的代码中，componentWillMount，并没有明确的使用，但是在运行webpack时仍然会看到一些警告。
react dom.Development.js:12386警告: componentWillMount已被重命名，不建议使用。详情请参见https:/fb.me/react-unsafe-component-lifecycles。
constructor.Rename 将具有副作用的代码移动到componentDidMount，并将componentWillMount中的初始状态设置为UNSAFE_componentWillMount，以在非严格模式下抑制此警告。在Rea
浏览 8提问于2019-11-08得票数 26
回答已采纳
我正在学习React，学习一个教程，并通过创建-反应-应用程序创建我的终端。
将引导程序导入到我的代码中会出现问题，我无法解决。我是如何安装引导程序的：
npm install bootstrap@4.1.3
App.js代码并导入引导程序：
import React, { Component } from 'react';
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css"
class App extends Component {
render() {
浏览 0提问于2018-11-23得票数 2
回答已采纳
我在我的项目中的许多页面上导入了一个加载组件，在这个组件中我使用的是一个模型，这个模型是我在这个组件中导入的CSS文件中重写了一些他的CSS样式的一个模式。我的问题是，这个CSS变化对我的项目中的其他模式产生了影响，我怎么能让这个CSS更改只与我的组件模式相关，而不影响其他的。
我的装货部件
import React, {Component, PropTypes} from 'react';
import {Modal} from "react-bootstrap";
import ReactLoading from 'react-loading'
浏览 4提问于2022-06-21得票数 1
回答已采纳
1回答
在我的react应用程序中，我使用useHistory钩子重定向到我的Home组件。为什么useHistory是未定义的，我该如何解决这个问题？ App.js import 'bootstrap/dist/css/bootstrap.css'
import React from "react";
import { Button } from 'react-bootstrap';
import { BrowserRouter, Route, useHistory} from 'react-router-dom';
import
浏览 12提问于2020-12-14得票数 0
1回答
首先，我使用npx create-react-app my-app安装了react。我还编写了npm run eject，在弹出它之后，我发现并不是所有的config.js都安装了，只有当我像这样编辑webpack.config.js时，webpack.config.js才被添加到created.Then的配置文件中。
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLo
浏览 7提问于2020-06-05得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
