reset.less

.f-reset(){
    //  @名称: reset.less
    //  @功能: 初始化各html标签，使其在所有浏览器下保持一致

    // 配置文件定义在config.less里

    // 防止用户自定义背景颜色对网页的影响
    html{
        color:@baseColor;
        background:#fff;
        font-size: 100%;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: none;
        .f-wordBreak();
    }

    // 内外边距通常让各个浏览器样式的表现位置不同
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
        margin:0;padding:0;
    }
    // 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG)
    article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}
    // HTML5 媒体文件跟 img 保持一致
    audio,canvas,video {display: inline-block;*display: inline;*zoom:1;}
    audio:not([controls]) {display: none;}
    // 要注意表单元素并不继承父级 font 的问题
    body,button,input,select,textarea{font:@baseFontSize~"/@{baseLineHeight}" @baseFontFamily;}
    input,select,textarea{font-size:100%;background:#fff;}
    // 去掉各Table  cell 的边距并让其边重合，防止表格内文字不能换行
    table{border-collapse:collapse;border-spacing:0;table-layout:fixed;word-wrap:break-word;word-break:break-all;width:100%;vertical-align:top}
    th,td{vertical-align: top}

    // IE bug fixed: th 不继承 text-align
    th{text-align:inherit;}
    // 去除默认边框
    fieldset,img{border:none;}
    // ie6 7 8(q) bug 显示为行内表现
    iframe{display:block;}
    // 去掉 firefox 下此元素的边框
    abbr,acronym{border:none;font-variant:normal;}
    // 一致的 del 样式
    del {text-decoration:line-through;}
    address,caption,cite,code,dfn,em,th,var {font-style:normal;font-weight:500;}
    // 去掉列表前的标识, li 会继承(在ie7下有时会不继承)
    ol,ul,li {list-style:none;}
    // 对齐是排版最重要的因素, 别让什么都居中
    caption,th {text-align:left;}
    // 让标题都自定义, 适应多个系统应用
    h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:700;}
    q:before,q:after {content:'';}
    // 统一上标和下标
    sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
    sup {top: -0.5em;}
    sub {bottom: -0.25em;}

    // 默认不显示下划线，保持页面简洁
    ins,a { text-decoration:none;}
    a{color:@linkColor;}
    a:focus {outline: thin dotted #333;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}
    a:hover,a:active {outline: 0;text-decoration:underline;}
    a:hover{color:@linkColorHover;}
    //单字母勾子元素
    s,u,q,i,b{text-decoration:none;font-style:normal;font-weight:normal}

    //文本框美化 增加高级浏览器呼吸效果（textarea同样适用)
    .text,textarea{ border:1px solid #ccc;vertical-align:top;color:#333}
    .text{height:25px;padding-left:6px;line-height:~"25px\9"}
    textarea{padding:4px 0 7px 6px;overflow:auto}
    .text:hover,textarea:hover{border-color:#999}
    .text:focus, textarea:focus {border-color:#d1ba8a;.f-transition("border linear .2s,-moz-box-shadow linear .5s");.f-boxShadow("0 0 3px rgba(209,187,138,.3)");}
    .text.grey,textarea.grey{color:#ccc !important}
     //文本框readonly样式
     .text.readonly, textarea.readonly{border-color:#ccc;background:#F1F1F1;color:#ccc;cursor:default;resize:none;.f-boxShadow("0 0 0");}

     //按钮
     button,.btn{border:none;cursor: pointer;}
    ::selection {
        text-shadow:none;
        background: @blue;
        color:@white;
    }

    .clear{.f-clearfix();}
    // 居中盒容器
    .-box-fluid,.-box{
        margin:0 auto;
        .f-clearfix();
        .-left{float:left;}
        .-right{float: right}
        .inline{.f-inlineBlock}
    }

    .-box-fluid{
        width:95%;
        max-width:@maxWidth;
        min-width:@minWidth;
    }
    .-box{
        width: @minWidth;
        max-width:@minWidth;
    }
    // // 流式列布局
    // .makeFluid();

    //圣杯布局
    .-fluid-cup{
        @leftWidth:260px;
        width:100%;
        .f-clearfix();
        .-main{
            float: left;
            width: 100%;
        }
        .-main-wrap{
            // border: 1px solid #f00;
            margin-left:@leftWidth;
        }
        .-sub{
            width:@leftWidth;
            float:left;
            margin-left: -100%
        }
        .-extra{

        }
    }

    .input-block-level() {
        display: block;
        width: 100%;
        // min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
        // .f-box-sizing(border-box); // Makes inputs behave like true block-level elements
    }


    //
    // Grid system
    // --------------------------------------------------
    #grid {

        .core (@gridColumnWidth, @gridGutterWidth) {

        .spanX (@index) when (@index > 0) {
            .span@{index} { .span(@index); }
            .spanX(@index - 1);
        }
        .spanX (0) {}

        .offsetX (@index) when (@index > 0) {
            .offset@{index} { .offset(@index); }
            .offsetX(@index - 1);
        }
        .offsetX (0) {}

        .offset (@columns) {
            margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
        }

        .span (@columns) {
            width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
        }

        .row {
            margin-left: @gridGutterWidth * -1;
            .f-clearfix();
        }

        [class*="span"] {
            float: left;
            min-height: 1px; // prevent collapsing columns
            margin-left: @gridGutterWidth;
        }

        // Set the container width, and override it for fixed navbars in media queries
        .container,
        .navbar-static-top .container,
        .navbar-fixed-top .container,
        .navbar-fixed-bottom .container { .span(@gridColumns); }

        // generate .spanX and .offsetX
        .spanX (@gridColumns);
        .offsetX (@gridColumns);

        }

        .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {

        .spanX (@index) when (@index > 0) {
            .span@{index} { .span(@index); }
            .spanX(@index - 1);
        }
        .spanX (0) {}

        .offsetX (@index) when (@index > 0) {
            .offset@{index} { .offset(@index); }
            .offset@{index}:first-child { .offsetFirstChild(@index); }
            .offsetX(@index - 1);
        }
        .offsetX (0) {}

        .offset (@columns) {
            margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2);
            *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%);
        }

        .offsetFirstChild (@columns) {
            margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
            *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
        }

        .span (@columns) {
            width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
            *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
        }

        .row-fluid {
            width: 100%;
            .f-clearfix();
            [class*="span"] {
            // .input-block-level();
            float: left;
            margin-left: @fluidGridGutterWidth;
            *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
            }
            [class*="span"]:first-child {
            margin-left: 0;
            }

            // Space grid-sized controls properly if multiple per line
            .controls-row [class*="span"] + [class*="span"] {
            margin-left: @fluidGridGutterWidth;
            }

            // generate .spanX and .offsetX
            .spanX (@gridColumns);
            .offsetX (@gridColumns);
        }

        }

        .input(@gridColumnWidth, @gridGutterWidth) {

        .spanX (@index) when (@index > 0) {
            input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index} { .span(@index); }
            .spanX(@index - 1);
        }
        .spanX (0) {}

        .span(@columns) {
            width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 14;
        }

        input,
        textarea,
        .uneditable-input {
            margin-left: 0; // override margin-left from core grid system
        }

        // Space grid-sized controls properly if multiple per line
        .controls-row [class*="span"] + [class*="span"] {
            margin-left: @gridGutterWidth;
        }

        // generate .spanX
        .spanX (@gridColumns);

        }
    }
    // Fixed (940px)
    #grid > .core(@gridColumnWidth, @gridGutterWidth);
    // Fluid (940px)
    #grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth);

    .pull-left{
        float: left;
    }
    .pull-right{
        float: right;
    }
}