Richard
Bonnegent

Bootstrap inclut des composants interactifs comme les modales, les carrousels et les tooltips. Ces composants peuvent être contrôlés avec JavaScript natif ou des frameworks modernes comme React ou Vue.js.

Bootstrap utilise des attributs data-* pour initialiser les composants interactifs.

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">

    Ouvrir la Modale

</button>

<div class="modal fade" id="exampleModal" tabindex="-1">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">Titre de la Modale</h5>

                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>

            </div>

            <div class="modal-body">

                Contenu de la modale.

            </div>

        </div>

    </div>

</div>

Vous pouvez contrôler les composants Bootstrap avec JavaScript natif.

import { Modal } from 'bootstrap';

const modalElement = document.getElementById('exampleModal');

const modal = new Modal(modalElement);

// Ouvrir la modale

modal.show();

Bootstrap peut être utilisé avec React via des bibliothèques comme react-bootstrap.

import { Modal, Button } from 'react-bootstrap';

function App() {

    const [show, setShow] = useState(false);

    return (

        <>

            <Button variant="primary" onClick={() => setShow(true)}>

                Ouvrir la Modale

            </Button>

            <Modal show={show} onHide={() => setShow(false)}>

                <Modal.Header closeButton>

                    <Modal.Title>Titre de la Modale</Modal.Title>

                </Modal.Header>

                <Modal.Body>Contenu de la modale.</Modal.Body>

            </Modal>

        </>

    );

}

Bootstrap s'intègre parfaitement avec JavaScript moderne et les frameworks comme React. Cela permet de créer des interfaces interactives et dynamiques tout en conservant la simplicité de Bootstrap.