初识bootstrap

  • 搞一个初始用例

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BootStrap</title>
    <style>
        #result {
            display: none;
        }
    </style>
</head>

<body>
    <h2 class="title">注册</h2>
    <form action="" id="myForm">
        <div>
            <label>姓名</label>
            <input type="text" name="name">
        </div>
        <div>
            <label>密码</label>
            <input type="text" name="password">
        </div>

        <div>
            <label>电话</label>
            <input type="text" name="cellphone">
        </div>
        <div>
            <label>地址</label>
            <input type="text" name="address">
        </div>

        <div id="result">

        </div>

        <div class="operate">
            <input type="submit">
        </div>
    </form>

    <script>
        var form = document.querySelector('#myForm');
        var result = document.querySelector('#result');
        form.addEventListener('submit', function(e) {
            if (!document.querySelector('[name=password]').value) {
                result.style.display = 'block'; // 块级显示
                result.innerHTML = "密码为空";
                e.preventDefault(); // 阻止表单的提交。
            } else {
                result.style.display = 'none';
            }
        })
    </script>
</body>
</html>

  • 使用bootstrap

    head中添加bootstrap的引用 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    • 添加class类

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>BootStrap</title>
    <style>
        #result {
            display: none;
        }
        .title {
            margin-top: 50px;
            margin-bottom: 50px;
        }
        .operate input {
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <h2 class="title col-6 offset-3">注册</h2>
    <form action="" id="myForm" class="col-6 offset-3">
        <div class="form-group row">
            <label class="col-2 col-form-label">姓名</label>
            <div class="col-10">
                <input  class="form-control" type="text" name="name">
            </div>
        </div>
        <div class="form-group row">
            <label class="col-2 col-form-label">密码</label>
            <div class="col-10">
                <input  class="form-control" type="text" name="password">
            </div>
        </div>

        <div class="form-group row">
            <label class="col-2 col-form-label">电话</label>
            <div class="col-10">
                <input  class="form-control" type="text" name="cellphone">
            </div>
        </div>
        <div class="form-group row">
            <label class="col-2 col-form-label">地址</label>
            <div class="col-10">
                <input  class="form-control" type="text" name="address">
            </div>
        </div>

        <div  class="alert alert-danger" id="result">

        </div>

        <div class="operate form-group row">
            <input  class="btn btn-primary" type="submit">
        </div>
    </form>

    <script>
        var form = document.querySelector('#myForm');
        var result = document.querySelector('#result');
        form.addEventListener('submit', function(e) {
            if (!document.querySelector('[name=password]').value) {
                result.style.display = 'block'; // 块级显示
                result.innerHTML = "密码为空";
                e.preventDefault(); // 阻止表单的提交。
            } else {
                result.style.display = 'none';
            }
        })
    </script>
</body>
</html>

    • 关于响应式布局，可以直接使用

      Extra small <576px Small ≥576px Medium ≥768px Large ≥992px Extra large ≥1200px
      Max container width None (auto) 540px 720px 960px 1140px
      Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
      # of columns 12
      Gutter width 30px (15px on each side of a column)
      Nestable Yes
      Column ordering Yes
posted @ 2018-12-21 17:46  麦兜爱学习  阅读(137)  评论(0)  编辑  收藏  举报