Maison >développement back-end >tutoriel php >Quelles sont les opérations Bootstrap courantes dans la programmation PHP ?

Quelles sont les opérations Bootstrap courantes dans la programmation PHP ?

WBOY
WBOYoriginal
2023-06-12 09:37:40766parcourir

Bootstrap est une bibliothèque frontale permettant de développer des conceptions Web réactives. Il fournit des frameworks CSS et JS matures, rendant le développement de sites Web plus facile et plus rapide. Pour les programmeurs PHP, il est très utile de se familiariser avec le fonctionnement de Bootstrap. Alors, quelles sont les opérations Bootstrap courantes dans la programmation PHP ? Discutons-en ensemble.

  1. Présentation de la bibliothèque Bootstrap
    Pour utiliser Bootstrap dans la programmation PHP, vous devez d'abord présenter la bibliothèque Bootstrap. Lorsque vous utilisez CDN pour charger les fichiers de la bibliothèque Bootstrap, il vous suffit d'ajouter le code suivant dans l'en-tête HTML :
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Si vous utilisez des fichiers de ressources locales, vous pouvez télécharger le fichier dans le projet et ajouter le code suivant dans l'en-tête :

<link rel="stylesheet" href="path/to/bootstrap.min.css">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/bootstrap.min.js"></script>
  1. Menu de navigation Bootstrap
    Dans le développement Web PHP, le menu de navigation Bootstrap est souvent utilisé pour créer et afficher rapidement la navigation principale du site Web. Le menu de navigation Bootstrap se compose de plusieurs onglets, qui peuvent être implémentés via le code suivant :
<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
</ul>
  1. Bootstrap table
    Bootstrap fournit des tableaux dans une variété de styles et de présentations, permettant aux développeurs de choisir facilement les styles de tableau appropriés et de créer rapidement module d'interaction de données complexe. Ce qui suit est un morceau de code qui utilise les formulaires Bootstrap :
<table class="table table-striped">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>
  1. Formulaires Bootstrap
    Les formulaires Bootstrap peuvent permettre aux développeurs de créer plus facilement des éléments de formulaire et d'implémenter la validation du formulaire. Ce qui suit est un morceau de code qui utilise un formulaire Bootstrap :
<form>
    <div class="form-group">
        <label for="exampleInputName1">Name</label>
        <input type="text" class="form-control" id="exampleInputName1" placeholder="Enter name">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail1">Email</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> Check me out
        </label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>
  1. Boîte modale Bootstrap
    La boîte modale Bootstrap est généralement utilisée pour afficher des informations ou obtenir des actions de l'utilisateur. Nous pouvons utiliser le code suivant pour implémenter une boîte modale Bootstrap de base :
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Ce qui précède sont des opérations Bootstrap courantes dans la programmation PHP. À mesure que Bootstrap continue d'être mis à jour, nous pouvons également apprendre une utilisation plus avancée pour nous adapter à l'évolution des besoins de développement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn