Home > Article > Web Front-end > A brief summary after learning Bootstrap

A brief summary after learning Bootstrap

PHPzOriginal: 2018-09-17 11:44:392316browse

This chapter brings you a brief summary after learning Bootstrap, so that you can know the composition of Bootstrap, the advantages and disadvantages of Bootstrap, and how Bootstrap implements responsive layout (example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

【Related video recommendation: Bootstrap tutorial】

Bootstrap4 features: 1. Compatible with IE10 2. Use flexbox layout 3. Abandon Normalize.css 4. Provide layout and reboot version

Bootstrap consists of: 1. Basic style 2. Common components 3. JS plug-in

FAQ:

1. Advantages and disadvantages of Bootstrap

Advantages: The CSS code structure is reasonable, ready-made styles can be used directly

Disadvantages: Customization is cumbersome and large in size

2. How to implement responsive layout with Bootstrap

Principle: Set classes of different resolutions through media query

Usage: Select for different resolutions Different grid classes

3. How to customize your own style based on Bootstrap

1. Use css class override with the same name (used in simple scenarios)

2. Modify the source code and rebuild

3. Reference the scss source file and modify the variables

Knowledge points:

1. Basic usage

Making a simple login page

<!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>

Rendering: