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
Libérer: 2023-06-12 10:58:01
original
765 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion
  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>
Copier après la connexion
  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>
Copier après la connexion
  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>
Copier après la connexion
  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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal