码迷,mamicode.com
首页 > 其他好文 > 详细

初识bootstrap

时间:2018-12-21 18:07:39      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:地址   mit   fun   ref   bootstra   origin   css   script   submit   

  • 搞一个初始用例

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

初识bootstrap

标签:地址   mit   fun   ref   bootstra   origin   css   script   submit   

原文地址:https://www.cnblogs.com/xxxuwentao/p/10157206.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!