Maison > Article > interface Web > Un bref résumé après avoir appris Bootstrap

Un bref résumé après avoir appris Bootstrap

PHPzoriginal: 2018-09-17 11:44:392259parcourir

Ce chapitre vous apporte un bref résumé après avoir appris Bootstrap, afin que vous puissiez connaître la composition de Bootstrap, les avantages et les inconvénients de Bootstrap, et comment Bootstrap implémente une mise en page réactive (exemple). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

[Recommandations vidéo associées : Tutoriel Bootstrap]

Fonctionnalités Bootstrap4 : 1. Compatible avec IE10+ 2. Utiliser la disposition flexbox 3. Abandonner la normalisation. css 4. Fournir la mise en page et la version de redémarrage

Composition du bootstrap : 1. Style de base 2. Composants communs 3. Plug-in JS

FAQ :

1. Avantages et inconvénients de Bootstrap

Avantages : La structure du code CSS est raisonnable et les styles prêts à l'emploi peuvent être utilisés directement

Inconvénients : La personnalisation est lourde et volumineuse

2. Comment implémenter une mise en page réactive avec Bootstrap

Principe : définir des classes de différentes résolutions via une requête multimédia

Utilisation : sélectionnez pour différentes résolutions Différentes classes de grille

3 Comment personnaliser votre propre style basé sur Bootstrap

1. pour des scénarios simples)

2. Modifier le code source et reconstruire

3. Référencer le fichier source scss et modifier les variables

Points de connaissance :

1. Utilisation de base

Créer une page de connexion simple

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <title>Bootstrap</title>
    <style>
        #result{
            display: none;
        }
        .title{
            margin-top: 50px;
            margin-bottom: 50px;
        }
        .operate button{
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <h2 class="title col-6 offset-3">注册</h1>
    <form id="myForm" class="col-6 offset-3">
        <div class="form-group row">
            <label class="col-2 col-form-label">姓名</label>
            <div>
                <input name="name" type="text" />
            </div>
        </div>
        <div class="form-group row">
            <label class="col-2 col-form-label">密码</label>
            <div>
                <input name="password" type="password" />
            </div>
        </div>
        <div class="form-group row">
            <label class="col-2 col-form-label">电话</label>
            <div>
                <input name="cellphone" type="text" />
            </div>
        </div>
        <div class="form-group row">
            <label class="col-2 col-form-label">地址</label>
            <div>
                <input name="address" type="text" />
            </div>
        </div>
        <div id="result" class="alert alert-danger">
             
        </div>
        <div class="operate form-group row">
            <button class="btn btn-primary" type="submit">提交</button>
        </div>
    </form>
    <script>
        var form = document.querySelector(&#39;#myForm&#39;);
        var result = document.querySelector(&#39;#result&#39;);
        form.addEventListener(&#39;submit&#39;, function(e){
            if(!document.querySelector(&#39;[name=password]&#39;).value){
                result.style.display = &#39;block&#39;;
                result.innerHTML = &#39;密码为空&#39;;
            }else{
                result.style.display = &#39;none&#39;;
            }
            e.preventDefault();
        });
    </script>
</body>
</html>

Rendu :