/*：这是演示代码,不是源代码。源码下载唯一地址: http://www.bootstrapmb.com/item/3398(此说明只在演示页面有,不在下载的源码里)*//* ==========================================================================   Chrome Frame prompt   ========================================================================== */.chromeframe {    margin: 0.2em 0;    background: #fff;    color: #000;    padding: 0.2em 0;}/* ==========================================================================   Author's custom styles   ========================================================================== */#loader-wrapper {    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%;    z-index: 1000;}#loader {    display: block;    position: relative;    left: 50%;    top: 50%;    width: 150px;    height: 150px;    margin: -75px 0 0 -75px;    border-radius: 50%;    border: 3px solid transparent;    border-top-color: #ff1949;    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */    z-index: 1001;}    #loader:before {        content: "";        position: absolute;        top: 5px;        left: 5px;        right: 5px;        bottom: 5px;        border-radius: 50%;        border: 3px solid transparent;        border-top-color: #ff1949;        -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */        animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */    }    #loader:after {        content: "";        position: absolute;        top: 15px;        left: 15px;        right: 15px;        bottom: 15px;        border-radius: 50%;        border: 3px solid transparent;        border-top-color: #ff1949;        -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */          animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */    }    @-webkit-keyframes spin {        0%   {             -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */            -ms-transform: rotate(0deg);  /* IE 9 */            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */        }        100% {            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */            -ms-transform: rotate(360deg);  /* IE 9 */            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */        }    }    @keyframes spin {        0%   {             -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */            -ms-transform: rotate(0deg);  /* IE 9 */            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */        }        100% {            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */            -ms-transform: rotate(360deg);  /* IE 9 */            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */        }    }    #loader-wrapper .loader-section {        position: fixed;        top: 0;        width: 51%;        height: 100%;        background: #ffffff;        z-index: 1000;        -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */        -ms-transform: translateX(0);  /* IE 9 */        transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */    }    #loader-wrapper .loader-section.section-left {        left: 0;    }    #loader-wrapper .loader-section.section-right {        right: 0;    }    /* Loaded */    .loaded #loader-wrapper .loader-section.section-left {        -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */            -ms-transform: translateX(-100%);  /* IE 9 */                transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);                  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);    }    .loaded #loader-wrapper .loader-section.section-right {        -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */            -ms-transform: translateX(100%);  /* IE 9 */                transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);          transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);    }        .loaded #loader {        opacity: 0;        -webkit-transition: all 0.3s ease-out;                  transition: all 0.3s ease-out;    }    .loaded #loader-wrapper {        visibility: hidden;        -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */            -ms-transform: translateY(-100%);  /* IE 9 */                transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */        -webkit-transition: all 0.3s 1s ease-out;                  transition: all 0.3s 1s ease-out;    }        /* JavaScript Turned Off */    .no-js #loader-wrapper {        display: none;    }    .no-js h1 {        color: #222222;    }    #content {        margin: 0 auto;        padding-bottom: 50px;        width: 80%;        max-width: 978px;    }  /* ==========================================================================   Helper classes   ========================================================================== *//* * Image replacement */.ir {    background-color: transparent;    border: 0;    overflow: hidden;    /* IE 6/7 fallback */    *text-indent: -9999px;}.ir:before {    content: "";    display: block;    width: 0;    height: 150%;}/* * Hide from both screenreaders and browsers: h5bp.com/u */.hidden {    display: none !important;    visibility: hidden;}/* * Hide only visually, but have it available for screenreaders: h5bp.com/v */.visuallyhidden {    border: 0;    clip: rect(0 0 0 0);    height: 1px;    margin: -1px;    overflow: hidden;    padding: 0;    position: absolute;    width: 1px;}/* * Extends the .visuallyhidden class to allow the element to be focusable * when navigated to via the keyboard: h5bp.com/p */.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus {    clip: auto;    height: auto;    margin: 0;    overflow: visible;    position: static;    width: auto;}/* * Hide visually and from screenreaders, but maintain layout */.invisible {    visibility: hidden;}/* * Clearfix: contain floats * * For modern browsers * 1. The space content is one way to avoid an Opera bug when the *    `contenteditable` attribute is included anywhere else in the document. *    Otherwise it causes space to appear at the top and bottom of elements *    that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using *    `:before` to contain the top-margins of child elements. */.clearfix:before,.clearfix:after {    content: " "; /* 1 */    display: table; /* 2 */}.clearfix:after {    clear: both;}/* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */.clearfix {    *zoom: 1;}/* ==========================================================================   EXAMPLE Media Queries for Responsive Design.   These examples override the primary ('mobile first') styles.   Modify as content requires.   ========================================================================== */@media only screen and (min-width: 35em) {    /* Style adjustments for viewports that meet the condition */}@media print,       (-o-min-device-pixel-ratio: 5/4),       (-webkit-min-device-pixel-ratio: 1.25),       (min-resolution: 120dpi) {    /* Style adjustments for high resolution devices */}/* ==========================================================================   Print styles.   Inlined to avoid required HTTP connection: h5bp.com/r   ========================================================================== */@media print {    * {        background: transparent !important;        color: #000 !important; /* Black prints faster: h5bp.com/s */        box-shadow: none !important;        text-shadow: none !important;    }    a,    a:visited {        text-decoration: underline;    }    a[href]:after {        content: " (" attr(href) ")";    }    abbr[title]:after {        content: " (" attr(title) ")";    }    /*     * Don't show links for images, or javascript/internal links     */    .ir a:after,    a[href^="javascript:"]:after,    a[href^="#"]:after {        content: "";    }    pre,    blockquote {        border: 1px solid #999;        page-break-inside: avoid;    }    thead {        display: table-header-group; /* h5bp.com/t */    }    tr,    img {        page-break-inside: avoid;    }    img {        max-width: 100% !important;    }    @page {        margin: 0.5cm;    }    p,    h2,    h3 {        orphans: 3;        widows: 3;    }    h2,    h3 {        page-break-after: avoid;    }}/* 	Ok so you have made it this far, that means you are very keen to on my code. 	Anyway I don't really mind it. This is a great way to learn so you actually doing the right thing:)	Follow me @ihatetomatoes*//*：这是演示代码,不是源代码。源码下载唯一地址: http://www.bootstrapmb.com/item/3398(此说明只在演示页面有,不在下载的源码里)*/