Saltar al contenido

ejemplo de código de barra de navegación lateral de bootstrap de reacción

Nuestro equipo de trabajo ha estado por horas investigando para dar resolución a tu duda, te dejamos la soluciones por eso nuestro deseo es servirte de gran ayuda.

Ejemplo: reactboostrap navbar responsive

importReactfrom'react'importBrowserRouterasRouter,Switch,Route,
    useParams,from"react-router-dom";importNavbar,Nav,NavDropdown,Form,FormControl,Buttonfrom'react-bootstrap'importHomefrom'./Home';importAboutUsfrom'./AboutUs';importContactUsfrom'./ContactUs';classBootstrapNavbarextendsReact.Componentrender()return(<div><div className="row"><div className="col-md-12"><Router><Navbar bg="dark" variant="dark" expand="lg" sticky="top"><Navbar.Brand href="#home">ReactBootstrapNavbar</Navbar.Brand><Navbar.Toggle aria-controls="basic-navbar-nav"/><Navbar.Collapse id="basic-navbar-nav"><Nav className="mr-auto"><Nav.Link href="/">Home</Nav.Link><Nav.Link href="/about-us">ContactUs</Nav.Link><Nav.Link href="/contact-us">AboutUs</Nav.Link><NavDropdown title="Dropdown" id="basic-nav-dropdown"><NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item><NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item><NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item><NavDropdown.Divider/><NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item></NavDropdown></Nav><Form inline><FormControl type="text" placeholder="Search" className="mr-sm-2"/><Button variant="outline-success">Search</Button></Form></Navbar.Collapse></Navbar><br /><Switch><Route exact path="/"><Home/></Route><Route path="/about-us"><AboutUs/></Route><Route path="/contact-us"><ContactUs/></Route></Switch></Router></div></div></div>)exportdefaultBootstrapNavbar;

Si sostienes alguna desconfianza y capacidad de limar nuestro sección puedes escribir un exégesis y con deseo lo leeremos.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *