zoukankan      html  css  js  c++  java
  • TERSUS无代码开发(笔记25)-弹窗的样式设置

    视频教程(10分35秒)

    弹窗的样式和弹窗里面标签的设置

    general.less

    //general.less
    //标签.字段,样式类名为form-2lie,要放到主体样式中
    .form-2lie label.field
    {
     float:left;
     width:50%; //一行中两个标签,超过换行显示
        > *
        {
        //标签输入框
        display:inline-block;
        width:70%; //输入框的宽度70%
        }
        //标签标题
           >span:first-child
           {
              width:30%; //标题的宽度
            text-align:right;
           
           }
            
    }
    general.less

     

    模态对话框(弹窗)

    // Modals
    // --------------------------------------------------
    
    //1.背景 Background
    //背景幕布
    .modal-backdrop {
      position: fixed; //位置:固定
      top: 0; //上
      right: 0; //右
      bottom: 0; //下
      left: 0;// 左
      z-index: @zindexModalBackdrop;
      background-color: @black; //背景颜色
      // Fade for backdrop 淡入背景
      &.fade { opacity: 0; }
    }
    // 
    .modal-backdrop,
    //背景淡入
    .modal-backdrop.fade.in {
        //透明度
      .opacity(80);
    }
    
    //2.基本模式 Base modal
    //模态对话框
    .modal {
      position: fixed; //位置:固定
      top: 50%; //上
      left: 50%; //左
      z-index: @zindexModal;
      width: 560px; //宽
      margin: -250px 0 0 -280px; //外边距
      background-color: @white; //背景颜色
      border: 1px solid #999; //边线
      border: 1px solid rgba(0,0,0,.3);
      *border: 1px solid #999; /* IE6-7 */
      .border-radius(6px);//圆角
      .box-shadow(0 3px 7px rgba(0,0,0,0.3)); //方框阴影
      .background-clip(padding-box); //背景剪辑
      // Remove focus outline from opened modal 从打开的模式中删除焦点轮廓
      outline: none;
    
      &.fade {
        .transition(e('opacity .3s linear, top .3s ease-out')); //过渡
        top: -25%;
      }
      &.fade.in { top: 50%; } //淡入
    }
    
    //3.标题
    .modal-header {
      padding: 9px 15px; //内边距
      border-bottom: 1px solid #eee; //边框底部
      // Close icon 关闭图标
      .close { margin-top: 2px; }
      // Heading 标题
      h3 {
        margin: 0; //外边距
        line-height: 30px; //线条高度
      }
    }
    
    //4.表体
    //Body (where all modal content resides)所有模态对话框内容所在的位置
    .modal-body {
      //内容高度超过400px,会出现纵向滚动条.
      overflow-y: auto; //溢出:自动
      max-height: 400px; //高度
      padding: 15px; //外边距
    }
    // Remove bottom margin if need be 如果需要,请删除下边距.
    // 模态对话框形式
    .modal-form {
      margin-bottom: 0; //页边距底部
    }
    
    //5.页脚
    // Footer (for actions)用于操作
    .modal-footer {
      padding: 14px 15px 15px; //内边距
      margin-bottom: 0; //底部外边距
      text-align: right; // right align buttons 右对齐按钮
      background-color: #f5f5f5; //背景颜色
      border-top: 1px solid #ddd; //边框顶部
      .border-radius(0 0 6px 6px); //圆角
      .box-shadow(inset 0 1px 0 @white); //方框阴影
      .clearfix(); // clear it in case folks use .pull-* classes on buttons 清除浮动
    
      // Properly space out buttons 适当隔开按钮
      .btn + .btn {
        margin-left: 5px; //左边外边距
        margin-bottom: 0; //底部外边距 account for input[type="submit"] which gets the bottom margin like all other inputs
      }
      // but override that for button groups 但要覆盖按钮组
      .btn-group .btn + .btn {
        margin-left: -1px; //左边外边距
      }
      // and override it for block buttons as well 同时也覆盖块按钮
      .btn-block + .btn-block {
        margin-left: 0;//左边外边距
      }
    }
    024-modals.less

  • 相关阅读:
    Mysql连接错误:Lost connection to Mysql server at 'waiting for initial communication packet'
    linux基本命令(4) 查看文件相关
    linux基本命令(3) 文件操作相关
    php 验证码不显示
    linux基本命令(2) 修改文件所属人以及权限
    linux 修改开机欢迎文字
    Mysql 自定义HASH索引带来的巨大性能提升
    Maven依赖范围<scope>
    深入理解Java G1垃圾收集器
    Redis EXISTS命令耗时过长case排查
  • 原文地址:https://www.cnblogs.com/djtang/p/14810607.html
Copyright © 2011-2022 走看看