React-bootstrap-table2React-bootstrap NavbarReact-bootstrap Carouselreact bootstrap教學React-bootstrap selectReact-bootstrap CardReact-bootstrap collapseReact-bootstrap tableReact-Bootstrap gridReact-bootstrap typescriptReact-bootstrap Spinner

Using Bootstrap 5 with React JS - Desi Programmer

文章推薦指數： 80 %
投票人數：10人

I am going to use react-bootstrap's current version v2.0.0-beta.6 (Bootstrap 5.1) . Although it is in beta , I will be using it as it uses Bootstrap 5.1. In ... Desi Programmer Contact Blogs More Login Signup UsingBootstrap5withReactJS SwitchTolightMode🌞 Share Follow@desiprogrammer_ TableOfContents UsingSimplyCSS UsingReact-Bootstrap UsingSimplyCSS AblogaboutusingthelatestBootstrap5withreactJSinCSSstyle.Iamnotgoingtousereact-bootstrapasitisstillinalpha(onthedayofwritingthis). SettingUp Willcreateaproject,addbootstrapandaddsasstocustomizebootstrap. npxcreate-react-appbootstrap5-react npmibootstrap npmisass Nowinoursrcfolder,wewillcreateamain.scssfileandaddthefollowingoverritetoit. /*makethecustomizations*/ $primary:#2f24c8; /*importbootstraptosetchanges*/ @import"../node_modules/bootstrap/scss/bootstrap.scss"; Now,importthisscssontopinyourindex.jsfile. import'./main.scss'; Iwillsimplyaddthefollowingcodetoshowthatourbootstrapsetupalongwithvariableoveriteisworkingcorrectly. import'./App.css'; functionApp(){ return(

Welcome

UsingBootstrap5withReactJS.

); } exportdefaultApp; UsingReactBootstrap Iamgoingtousereact-bootstrap'scurrentversionv2.0.0-beta.6(Bootstrap5.1). Althoughitisinbeta ,IwillbeusingitasitusesBootstrap5.1.  Inmylastblogpost,ItalkedaboutusingBootstrap5withcss,butitwillcausesomeissueswhenYouuseBootstrap'sJScomponentswithReact,suchasalerts. It'skindofthesameprocessforsettingup,justneedtoaddanextrareact-bootstrap. npminstallreact-bootstrap@[email protected] AddingSaastocustomizeBootstrap. /*makethecustomizations*/ $primary:#2f24c8; /*importbootstraptosetchanges*/ @import"../node_modules/bootstrap/scss/bootstrap.scss"; Ihaven'treallydigdeeperorworkedonanyexperimental/[email protected],butthebestpartisalotofcustomizationisavailableusingclassNameandotheraresimplyavailableviadocumentation. SomecodefromApp.js. import{useState}from"react"; import{Button,Container,Alert,Form,Row,Col}from"react-bootstrap"; functionApp(){ return(
Emailaddress We'llnevershareyouremailwithanyoneelse. Password Submit
); } functionAlertDismissibleExample(){ const[show,setShow]=useState(true); if(show){ return( setShow(false)}dismissible> Ohsnap!Yougotanerror!

WrongCredentials.

); } return<>>; } exportdefaultApp;

請為這篇文章評分？

延伸文章資訊