• 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>
  • 相关阅读:
    defineProperty的使用
    js题库全集
    如何将多个文件夹中的文件合并到一个文件夹中
    CYQ.Data V5 MDataTable 专属篇介绍
    读取和写入配置文件内容的方法
    面对代码中过多的if...else的解决方法
    SQL语句--删除掉重复项只保留一条
    获取当前时间
    Stopwatch 类用于计算程序运行时间
    正则表达式手册
  • 原文地址:https://www.cnblogs.com/god-for-speed/p/11622465.html
Copyright © 2020-2023  润新知