python之bootstrap（基本） 

导入：
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
    
    
    
    
移动设备优先：    
    为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
常用样式类
            1. 容器
                1. container
                2. container-fluid
            2. 栅格系统
                把一行均分成最多12列
                可以设置标签占多少列
                1. row表示一行
                2. col-xx-**表示一列
                    xx: 表示样式适用的屏幕尺寸
                        - xs  手机
                        - sm  平板
                        - md  桌面显示器
                        - lg  超大屏幕
                    **：表示占多少份
                        - 取值范围： 1~12
                3. col-xx-offset-**:
                    表示左侧空几份！
                4. 列支持再嵌套（再写一行，分成12份）
                5. 列排序
                    1. col-xx-push-*  --> 往右推
                    2. col-xx-pull-*  --> 往左拉
                6.clearfix：如果同一行中的标签高度不同，加上这个属性可以以最高高度的标签为准统一各个标签的高度
            3. 布局样式
            4. 表格
            5. 表单            6. 按钮
            7. 图片
            8. 辅助类
                1. 文本颜色
                2. 背景颜色
                3. 快速浮动
                4. 清除浮动
                
                
#--登录验证简单实例
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="content-Type" charset="UTF-8">
        <meta http-equiv="X-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
        <title>Title</title>
        <style>
            body{
                background-color: #dddddd;

            }
            .login-box {
                margin-top: 50px;
            }
        </style>
    </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4 login-box">
            <form>
                <h2 class="text-center">请登录</h2>
              <div class="form-group">
                <label for="exampleInputEmail1">用户名</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                  <span></span>
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">密码</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                 <span></span>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox"> 记住我
                </label>
              </div>
              <button type="button" class="btn btn-default" id="b1">提交</button>
            </form>
            </div>
        </div>
    </div>
    <script src="../JQtest/jquery-3.4.1.min.js"></script>
    <script>
        $("#b1").click(function () {
            $("input:not([type='checkbox'])").each(function () {
                if($(this).val().length === 0){
                    var keyWord=$(this).prev().text();
                    $(this).next().text(keyWord+"不能为空");
                    $(this).parent().addClass("has-error");
                }
            });
        });
        //获取焦点，输入的时候输入框不变成警告色
        $("input:not([type='checkbox'])").focus(function () {
            $(this).next().text("");
            $(this).parent().removeClass("has-error");
        });
    </script>
    </body>
    </html>

 

posted @ 2019-10-04 16:39  LBC不认输  阅读(2427)  评论(0)    收藏  举报