为什么我不能在VS代码/React中使用Bootstrap代码？

发布于 2025-02-13 23:24:27 字数 654 浏览 1 评论 0原文

嗨，我试图在我的VS Studio项目中使用此代码，我无法弄清楚如何显示它。我知道这是一个自举代码，基本上是CSS代码。那么，我可以将此代码保存为card.css类吗？然后如何在代码中显示它？尤其是我想使其响应迅速（单击时更改边框颜色以标记为选定）。

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div> 
}

我是前端的新手，我正在进行一门Udemy课程以了解更多信息，但仍会提出解释。

太感谢了

原文

Hi im trying to use this code in my VS Studio project and i cant figure out how to display it. I know it is a Bootstrap Code which is basically a CSS Code. So can i just save this code as a Card.css class? And how do i display it then in my Code?
Especially as i want to make it responsive (change border colour on click to mark as selected).

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div> 
}

Im new to front end and im doing a an udemy course to learn more but would still aprecciate an explanation.

Thank you so much

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一束光，穿透我孤独的魂 2025-02-20 23:24:27

您应该在React中使用className，而不是class您可以在此处检查 https://reactjs.org/docs/faq-styling.html
而且，如果您想使用内联样式，它看起来像stye = {{width：'18rem'}}

回复收藏 0 原文

烟花易冷人易散 2025-02-20 23:24:27

如果要使用Bootstrap进行样式组件，则需要将Bootstrap模块导入项目。

package.json

{
  "dependencies": {
    ...
    "bootstrap": "^4.6.0",
    ...
    "react": "^17.0.1",
    "react-body-classname": "^1.3.1",
    "react-dom": "^17.0.1",
    }
}

然后您可以在组件中使用bootstrap类名称。
testcomponent.js


function TestComponent(props){
    return (
        <div className="row">
           <div className="col-lg-3 col-sm-6">
               <a
                className="btn btn-primary"
                href="https://test.com/dashboard#/signup"
               >
                  Try now
               </a>
           </div>
           <div className="col-lg-9 col-sm-6">
               <a
                className="btn btn-second"
                href="https://test.com/dashboard#/signin"
               >
                  Sign In
               </a>
           </div>
        </div>
    )

}

If you want to use bootstrap for styling components, you need to import bootstrap module into your project.

package.json

{
  "dependencies": {
    ...
    "bootstrap": "^4.6.0",
    ...
    "react": "^17.0.1",
    "react-body-classname": "^1.3.1",
    "react-dom": "^17.0.1",
    }
}

Then you can use bootstrap class names in your component.
TestComponent.js


function TestComponent(props){
    return (
        <div className="row">
           <div className="col-lg-3 col-sm-6">
               <a
                className="btn btn-primary"
                href="https://test.com/dashboard#/signup"
               >
                  Try now
               </a>
           </div>
           <div className="col-lg-9 col-sm-6">
               <a
                className="btn btn-second"
                href="https://test.com/dashboard#/signin"
               >
                  Sign In
               </a>
           </div>
        </div>
    )

}

回复收藏 0 原文