Saltar al contenido

Cómo integrar Bootstrap con ReactJS

Ahora que estamos familiarizados con reactstrap y cómo funciona, hay numerosos componentes de Bootstrap 4 que pueden ser usados con React usando reactstrap. Veremos algunos de los componentes importantes en esta guía.

Barra de navegación

reactstrap Navbars puede ser usado para las barras de navegación y proporcionar una respuesta. Para organizar los enlaces de navegación de forma más eficiente, una barra de navegación consta de subcomponentes como Nav, NavItem, NavbarBrand, etc.Una barra de navegación receptiva puede crearse añadiendo una dentro de nuestro componente y luego envolviéndola en un componente:

Cómo integrar Bootstrap con ReactJS
Cómo integrar Bootstrap con ReactJS
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859exportdefaultclassNavBarEjemploextendsReact. Componente{constructor(estribo){super(estribo);esto.toggleOpenState=esto.toggleOpenState.bind(esto);este.state={ isOpen:false};}toggleOpenState(){esto. setState({ isOpen:!this.state.isOpen});}render(){return(<div><Navbar color="#ffffffff" light expand="md"<NavbarBrand >This is a NavbarDemo</NavbarBrand >{/* A continuación, añadiremos el toggler para el auto-colapso */}<NavbarToggler onClick={this. toggleOpenState}/;<Collapse isOpen={this.state. isOpen} navbar} {/*Tirar hacia la izquierda */}<Nav className="ml-auto" navbar=;<NavItem=;<NavLink=;LeftNavigationLink</NavLink=;/NavItem=; Tire hacia la derecha */}<Nav className="mr-auto" navbar;²;¢;¢;¢;DescontroladoDropdown nav inNavbar;¢;¢;DropdownToggle nav caret;¢;Chris< /DropdownToggle</DropdownMenu&&&;DropdownItem&;MyAccount</DropdownItem&&&;PageSettings</DropdownItem&&&;DropdownItem divisor&&&;
javascript

Ventana Modal

El componente modal de reactstrap puede utilizarse para generar un modal de Bootstrap con un encabezado, un cuerpo y un pie de página.Un componente modal puede utilizarse con algunos apoyos y devoluciones de llamada para que la ventana sea interactiva y también para que se pueda cerrar. Para decidir si el modal debe ser visible o no, se utiliza la propiedad isOpen. La retrollamada de conmutación se utiliza para cambiar el valor de isOpen en el componente.Hay algunos otros accesorios que se utilizan para animar las transiciones. Las llamadas de retorno disponibles incluyen onEnter, onExit, onOpened y onClosed:

1234567891011121314151617{/*Para abrir la ventana modal, este.state.show necesita ser verdadero, lo que generalmente se establece mediante un evento "onClick" */}{/* toggleModal actualiza el estado de "show" a falso onClose*/}<ModalisOpen={this. state.show}toggle={this.toggleModal};<ModalHeadertoggle={this.toggle};Modal title=;/ModalHeader={N-CuerpoModal};Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper tristique suscipit. In ultrices sagittis iaculis. Maecenas porttitor elit eget neque molestie, id sodales diam consectetur. Fusce cursus justo quis eros commodo pellentesque. Aenean eget egestas augue Vivamus sit amet rhoncus lorem, vel pulvinar tellus. toggle};Click on Me!</Button;};Buttoncolor="sec "onClick={this.toggle};Cancel</Button
html

Formas

Una forma de reactivación puede ser en línea u horizontal. El elemento de entrada se renderiza mediante un componente de entrada. Múltiples componentes de entrada pueden ser envueltos en un FormGroup para la validación de estado, el espaciado apropiado, y para usar otras características de FormGroup.para establecer cualquier etiqueta, podemos hacerlo usando . Hay muchas cosas que se pueden hacer usando los formularios. Puedes revisar la documentación de React en los formularios para más detalles.Abajo está el código de nuestro formulario:

123456789101112131415161718192021222324252627282930313233343536<Form ;/FormGroup=;FormGrouprow=;Labelfor="examplePassword "sm={2};Password</Labelgdomgdomgdomgdom;<Colsm={10};<Inputtype="password "name="password "placeholder="password placeholder"/m2;/Colmph;</FormGroup=;<FormGrouprow=; Labelfor="exampleSelect "sm={2};Select</Label --> --> --> Colsm={10};<Inputtype="select "name="select"/mph;/Col>/FormGroup --> -->;FormGrouprow --> -->;Labelfor="exampleSelectMulti "sm={2};Select Multiple</Label --> -->;Colsm={10};< Inputtype="select "name="selectMulti "multiple/{{1};/Col>/FormGroup=;<FormGrouprow=;<Labelfor="exampleText "sm={2};*; Área de texto</Etiqueta={10};Colsm={10};;Inputtype="textarea "name="text"/;/Col>/FormGroup=;

html

ListGroup

El estilo y el control de los elementos de la lista se puede hacer fácilmente usando el reactstrap ListGroup. Los elementos de la lista ListGroup están envueltos en ListGroup. La devolución de llamada onClick puede ser usada para hacerla interactiva. A continuación se muestra el código para ListGroup;

12345<ListGroup;<ListGroupItem;;Item 1</ListGroupItem;;ListGroupItem;;Item 2</ListGroupItem;;ListGroupItem;;

html

Botones

Los botones pueden ser el componente más importante para cualquier marco de diseño. Hay un componente de Botón de Reacción para los botones. Además de las propiedades generales de activo y desactivado, podemos usar el color y el tamaño para establecer el estilo (primario, exitoso, etc.) y el tamaño (lg, sm, etc.) de los botones:

12345678910{/*La barra de herramientas ayuda a organizar los botones */} ;div>};Buttoncolor="primary"``Primaria btn</Button {$0027 $0027} <Buttoncolor="peligro"};Peligro btn</Button {$0027 $0027} <Buttoncolor="info"|;info btn</Button
html