Comment créer une mise en page de formulaire à l'aide de Bootstrap

Bootstrap fournit trois types de présentations de formulaires : les formulaires verticaux, les formulaires horizontaux et les formulaires en ligne ; ils sont définis en introduisant en externe des fichiers JavaScript et CSS dans Bootstrap et en ajoutant des noms de classe aux éléments Contrôles de formulaire

Les formulaires HTML font partie intégrante des pages Web et des applications, mais la configuration manuelle des contrôles de formulaire un par un en utilisant uniquement CSS est souvent lourde et fastidieuse. De nos jours, avec l'émergence du bootstrap, le processus de style et d'alignement des contrôles de formulaire tels que les étiquettes, les champs de saisie, les zones de sélection et les zones de soumission du formulaire a été considérablement simplifié. Ensuite, dans l'article, nous présenterons en détail le style de mise en page des formulaires dans Bootstrap

[Cours recommandé : Cours Bootstrap]

Il existe trois types différents de présentations de formulaire fournies dans Bootstrap :

• Formulaire vertical (disposition de tableau par défaut)

• Formulaire horizontal

• Formulaire en ligne

Dans l'article suivant, je présenterai ces dispositions et détails de formulaire un par un . Divers composants Bootstrap liés au formulaire

Présentation de Bootstrap en externe

<link rel="stylesheet" type="text/css" href=".\bootstrap-3.3.7-dist\css\bootstrap.css">
<script type="text/javascript" src=".\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>

Création d'une disposition de formulaire verticale

C'est. La disposition du formulaire Bootstrap par défaut, dans laquelle les styles sont appliqués aux contrôles de formulaire sans ajouter de classes de base à l'élément

Les contrôles de formulaire dans cette mise en page ont des étiquettes alignées à gauche empilées en haut

Exemple :

<div style="margin:20px;">
    <form action="#" method="post">
        <div class="form-group">
            <label for="inputName">用户名</label>
            <input type="username" class="form-control" id="inputName" placeholder="username" required>
        </div>
        <div class="form-group">
            <label for="inputPassword">密码</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
        </div>
        <div class="checkbox">
            <label><input type="checkbox">记住密码</label>
        </div>
        <button type="submit" class="btn btn-primary">登录</button>
    </form>
</div>

Rendu :

Créer une disposition de tableau en mode paysage

Au format paysage, les étiquettes de mise en page sont alignées à droite et flottent vers la gauche afin qu'elles apparaissent sur la même ligne que le formulaire contrôles. La mise en page du formulaire en mode paysage nécessite diverses modifications de balisage dans la mise en page du formulaire par défaut. Voici les étapes spécifiques pour implémenter la disposition horizontale du formulaire :

(1) Ajoutez la classe .form-horizontal à l'élément de formulaire

(2) Implémentez les balises d'emballage et les contrôles de formulaire dans le div et ajoutez la classe .form-group

(3) Utilisez la classe de grille prédéfinie de Bootstrap pour aligner les étiquettes et les contrôles de formulaire

(4) Ajoutez .control-label à l'élément label dans le < label> ; Classe

<div>
    <form class="form-horizontal" action="#" method="post">
        <div class="form-group">
            <label for="inputName" class="control-label col-xs-2">用户名</label>
            <div class="col-xs-10">
                <input type="username" class="form-control" id="inputName" placeholder="username" required>
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword" class="control-label col-xs-2">密码</label>
            <div class="col-xs-10">
                <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <div class="checkbox">
                    <label><input type="checkbox">记住密码</label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <button type="submit" class="btn btn-primary">登录</button>
            </div>
        </div>
    </form>
</div>

Rendu :

Créer une mise en page de formulaire en ligne

Oui Parfois lors de la création d'un formulaire, vous devez placer les contrôles de formulaire côte à côte pour compresser la mise en page. Si vous souhaitez obtenir cet effet, vous pouvez ajouter la classe form-inline à l'élément form.

<div   style="max-width:90%">
    <form class="form-inline" action="#" method="post">
        <div class="form-group">
            <label class="sr-only" for="inputName">用户名</label>
            <input type="username" class="form-control" id="inputName" placeholder="username" required>
        </div>
        <div class="form-group">
            <label class="sr-only" for="inputPassword">密码</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
        </div>
        <div class="checkbox">
            <label><input type="checkbox">记住密码</label>
        </div>
        <button type="submit" class="btn btn-primary">登录</button>
    </form>
</div>

Rendu :

Résumé : Ce qui précède est l'intégralité du contenu de cet article, j'espère que cela aidera tout le monde à apprendre les formulaires dans l'aide des styles de mise en page Bootstrap.

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!