zui实现的自适应简洁后台管理页面代码
代码语言:html
所属分类:响应式
代码描述:zui实现的自适应简洁后台管理页面代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>zui-admin</title> <!-- zui css --> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/zui/css/zui.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/zui/css/zui-theme.css"> <!-- app css --> <style> html, body { height: 100%; } .wrapper { position: relative; } ul, li { list-style: none; margin: 0; padding: 0; } .btn-round { border-radius: 1000px; } /* header */ .main-header .navbar { min-height: 50px; border-radius: 0; border: none; } .main-header .navbar-header { background: rgba(255, 255, 255, 0.07); } .main-header .navbar-brand { height: 50px; line-height: 30px; text-align: center; font-size: 20px; padding: 10px 0; color: #fff; } .main-header .navbar-brand .logo { width: 230px; display: inline-block; } .main-header .navbar-brand .logo-mini { width: 50px; display: none; } .sidebar-collapse .navbar-brand .logo { display: none; } .sidebar-collapse .navbar-brand .logo-mini { display: block; } .main-header .navbar-nav>li>a { height: 50px; line-height: 30px; color: #fff; } .main-header .navbar-nav>li>a:hover, .main-header .navbar-nav>li>a:focus { background: rgba(255, 255, 255, 0.07); } .main-header .navbar-right { margin-right: 0; } .main-header .avatar { height: 30px; width: 30px; border-radius: 50%; vertical-align: top; } .navbar-toggle { position: absolute; margin: 0; padding: 0; top: 15px; right: 15px; color: #fff; border: 0; } /* sidebar */ .main-sidebar { position: absolute; top: 0; left: 0; padding-top: 50px; min-height: 100%; width: 230px; z-index: 810; color: rgba(163, 175, 183, .9); background: #263238; transition: transform .3s ease-in-out, width .3s ease-in-out; } .main-sidebar .sidebar { padding-bottom: 10px; } .sidebar-menu>li { position: relative; } .sidebar-menu li.header { padding: 10px 25px 10px 15px; font-size: 12px; color: #76838f; } .sidebar-menu a { text-decoration: none; color: rgba(163, 175, 183, .9); } .sidebar-menu a>.icon { width: 20px; display: inline-block; } .sidebar-menu>li>a { padding: 12px 5px 12px 15px; display: block; position: relative; } .sidebar-menu>li:hover>a, .sidebar-menu>li:focus>a, .sidebar-menu>li.active>a, .sidebar-menu>li.menu-open>a { color: #fff; background: #242f35; } .sidebar-menu>li { border-left: 3px solid transparent; } .sidebar-menu>li.active { border-left-color: #039BE5; } .sidebar-menu li>a>.pull-right-container { position: absolute; right: 10px; top: 50%; margin-top: -9px; } .sidebar-menu li>a>.pull-right-container>.icon-angle-left { width: auto; height: auto; padding: 0; margin-right: 10px; transition: transform .5s ease; } .sidebar-menu .menu-open>a>.pull-right-container>.icon-angle-left::before { transform: rotate(-90deg); } .sidebar-menu>li>.treeview-menu { display: none; background: #242f35; } .sidebar-menu>li.active>.treeview-menu { display: block; } .treeview-menu { padding-left: 3px; } .treeview-menu>li>a { padding: 5px 5px 5px 15px; display: block; } .treeview-menu>li>a:hover, .treeview-menu>li>a:focus, .treeview-menu>li.active>a { color: #fff; background: rgba(0, 0, 0, .06); } /* sidebar collapse */ .sidebar-collapse .main-sidebar { transform: translate(0, 0); width: 50px !important; z-index: 850; } .sidebar-collapse .main-sidebar .user-panel>.info, .sidebar-collapse .sidebar-form, .sidebar-collapse .sidebar-menu>li>a>span, .sidebar-collapse .sidebar-menu>li>.treeview-menu, .sidebar-collapse .sidebar-menu li.header { display: none !important; } .sidebar-collapse .sidebar-menu>li:hover>a>span { top: 0; margin-left: -3px; padding: 12px 5px 12px 20px; background-color: inherit; } .sidebar-collapse .sidebar-menu>li:hover>a>span:not(.pull-right-container), .sidebar-collapse .sidebar-menu>li:hover>.treeview-menu { display: block !important; position: absolute; width: 180px; left: 50px; margin-left: -3px; } /* content wrapper */ .content-wrapper { min-height: 100%; padding-top: 50px; margin-left: 230px; z-index: 800; } .sidebar-collapse .content-wrapper { margin-left: 50px; } .content-header .breadcrumb { margin-bottom: 0; } /* info box */ .info-box { display: block; min-height: 90px; width: 100%; border-radius: 4px; margin-bottom: 15px; } .info-box-icon { border-top-left-radius: 4px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 4px; display: block; float: left; height: 90px; width: 90px; text-align: center; font-size: 45px; line-height: 90px; } .info-box-icon .icon { text-align: center; font-size: 45px; } .info-box-content { padding: 22px 10px; margin-left: 90px; } .info-box-text { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .info-box-number { display: block; font-weight: bold; font-size: 18px; } /* table info */ .table-info { margin-bottom: 0; } .table-info td:nth-child(2n-1) { font-weight: 600; } /* page */ .page-copyright { margin-top: 60px; font-size: .858rem; color: #37474f; letter-spacing: 1px; } .page-copyright.page-copyright-inverse { color: #fff; } /* login */ .page-login { padding: 30px; } .page-login .panel { width: 400px; margin: 0 auto; } .page-login .panel-body { padding: 50px 40px 40px; } .page-login .logo { font-size: 20px; text-align: center; } .page-login .logo img { width: 36px; height: 36px; } .page-login .logo a { text-decoration: none; margin-top: 8px; font-size: 28px; color: #37474f; text-shadow: rgba(0, 0, 0, .15) 0 0 1px; } .page-login form { margin-top: 45px; color: #76838f; } .page-login form .form-group { margin: 20px 0 40px 0; } .page-login form .form-control { height: 36px; border-top: 0; border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; } .page-login form .btn-lg { padding: 12px 16px; font-size: 15px; } @media (min-width: 767px) { .sidebar-toggle { display: none; } } /* 手机端 */ @media (max-width: 767px) { .navbar-nav:not(.navbar-right)>li:first-child { display: none; } .main-sidebar { transform: translate(-230px, 0); } .sidebar-open .main-sidebar { transform: translate(0, 0); } .content-wrapper { margin-left: 0; } .navbar-brand { width: 100%; } .sidebar-toggle { color: #fff; position: absolute !important; top: 15px; left: 15px; } .main-header .navbar-right { margin-right: -10px; } .page-login { padding: 10px; } .page-login .panel { width: 100%; } .page-login .panel .panel-body { padding: 25px 20px 20px; } } /* table */ .table td { vertical-align: middle; } /* page 404 */ .page-error { padding: 30px; color: #76838f; } .page-error header h1 { font-size: 10em; font-weight: 400; color: #37474f; } .page-error header p { margin-bottom: 30px; font-size: 30px; text-transform: uppercase; } .page-error .btn { padding: 6px 20px; } /* step */ .steps { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 0 22px; } .step { position: relative; padding: 12px 20px; margin: 0; font-size: inherit; color: #a3afb7; vertical-align: top; background-color: #f5f5f5; border-radius: 0; } .step-icon { float: left; margin-right: .5em; font-size: 20px; } .step-number { position: absolute; top: 50%; left: 20px; width: 40px; height: 40px; font-size: 24px; line-height: 40px; color: #fff; text-align: center; background: #ddd; border-radius: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .step-number~.step-desc { min-height: 40px; margin-left: 50px; } .step-title { margin-bottom: 0; font-size: 15px; color: #526069; } .step-desc { text-align: left; } .step-desc p { margin-bottom: 0; font-size: 11px; } .steps-vertical { -ms-flex-direction: column; flex-direction: column; } .step.current, .step.active { color: #fff; background-color: #039BE5; } .step.current .step-title, .step.active .step-title { color: #fff; } .step.current .step-number, .step.active .step-number { color: #039BE5; background-color: #fff; } .step.disabled { color: #ccd5db; pointer-events: none; cursor: auto; } .step.disabled .step-title { color: #ccd5db; } .step.disabled .step-number { background-color: #ccd5db; } .step.error { color: #fff; background-color: #ea644a; } .step.error .step-title { color: #fff; } .step.error .step-number { color: #ea644a; background-color: #fff; } .step.done { color: #fff; background-color: #38b03f; } .step.done .step-title { color: #fff; } .step.done .step-number { color: #38b03f; background-color: #fff; } /* pearls */ .pearls { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 0 22px; } .pearl { position: relative; padding: 0; margin: 0; text-align: center; } .pearl:before, .pearl:after { position: absolute; top: 18px; z-index: 0; width: 50%; height: 4px; content: ""; background-color: #f5f5f5; } .pearl:before { left: 0; } .pearl:after { right: 0; } .pearl:first-child:before, .pearl:last-child:after { display: none !important; } .pearl-number, .pearl-icon { position: relative; z-index: 1; display: inline-block; width: 36px; height: 36px; line-height: 32px; color: #fff; text-align: center; background: #ddd; border: 2px solid #ddd; border-radius: 50%; } .pearl-number { font-size: 18px; } .pearl-icon { font-size: 18px; } .pearl-title { display: block; margin-top: .5em; margin-bottom: 0; overflow: hidden; color: #526069; text-overflow: ellipsis; white-space: nowrap; } .pearl.current:before, .pearl.current:after, .pearl.active:before, .pearl.active:after { background-color: #039BE5; } .pearl.current .pearl-number, .pearl.current .pearl-icon, .pearl.active .pearl-number, .pearl.active .pearl-icon { color: #039BE5; background-color: #fff; border-color: #039BE5; -webkit-transform: scale(1.3); transform: scale(1.3); } .pearl.disabled { pointer-events: none; cursor: auto; } .pearl.disabled:before, .pearl.disabled:after { background-color: #f3f7f9; } .pearl.disabled .pearl-number, .pearl.disabled .pearl-icon { color: #fff; background-color: #ccd5db; border-color: #ccd5db; } .pearl.error:before { background-color: #039BE5; } .pearl.error:after { background-color: #f3f7f9; } .pearl.error .pearl-number, .pearl.error .pearl-icon { color: #ea644a; background-color: #fff; border-color: #ea644a; } .pearl.done:before, .pearl.done:after { background-color: #039BE5; } .pearl.done .pearl-number, .pearl.done .pearl-icon { color: #fff; background-color: #039BE5; border-color: #039BE5; } /* label */ .label-pill { padding: 1px 5px; } .label.up { position: relative; top: -10px; margin-left: -.9em; border-radius: 15px; } /* checkbox radio */ .radio-custom, .checkbox-custom { position: relative; display: block; margin-top: 10px; margin-bottom: 10px; } .radio-inline, .checkbox-inline{ display: inline-block; } .radio-custom label, .checkbox-custom label { min-height: 22px; margin-bottom: 0; font-weight: 300; cursor: pointer; } .radio-custom input[type="radio"], .checkbox-custom input[type="checkbox"] { position: absolute; margin-top: 0; margin-bottom: 0; margin-left: -20px; } .radio-custom.disabled label, fieldset[disabled] .radio-custom label, .checkbox-custom.disabled label, fieldset[disabled] .checkbox-custom label { cursor: not-allowed; } .input-group-addon .radio-custom, .input-group-addon .checkbox-custom { margin: 0; } .checkbox-custom { padding-left: 20px; } .checkbox-custom label { position: relative; display: inline-block; padding-left: 10px; vertical-align: middle; } .checkbox-custom label:empty { padding-left: 0; } .checkbox-custom label::before { position: absolute; left: 0; display: inline-block; width: 20px; height: 20px; margin-left: -20px; content: ""; background-color: #fff; border: 1px solid #e4eaec; border-radius: .215rem; transition: all .3s ease-in-out 0s; } .checkbox-custom label::after { position: absolute; top: 0; left: 0; display: inline-block; width: 20px; height: 20px; padding-top: 1px; margin-left: -20px; font-size: 12px; line-height: 20px; color: #76838f; text-align: center; } .checkbox-custom input[type="checkbox"], .checkbox-custom input[type="radio"] { z-index: 1; width: 20px; height: 20px; cursor: pointer; opacity: 0; } .checkbox-custom input[type="checkbox"]:checked+label::before, .checkbox-custom input[type="checkbox"]:checked+input[type="hidden"]+label::before, .checkbox-custom input[type="radio"]:checked+label::before, .checkbox-custom input[type="radio"]:checked+input[type="hidden"]+label::before { border-color: #e4eaec; border-width: 10px; transition: all 300ms ease-in-out 0s; } .checkbox-custom input[type="checkbox"]:checked+label::after, .checkbox-custom input[type="checkbox"]:checked+input[type="hidden"]+label::after, .checkbox-custom input[type="radio"]:checked+label::after, .checkbox-custom input[type="radio"]:checked+input[type="hidden"]+label::after { font-family: ZenIcon; content: "\e60d"; } .checkbox-custom input[type="checkbox"]:disabled, .checkbox-custom input[type="radio"]:disabled { cursor: not-allowed; } .checkbox-custom input[type="checkbox"]:disabled+label, .checkbox-custom input[type="checkbox"]:disabled+input[type="hidden"]+label, .checkbox-custom input[type="radio"]:disabled+label, .checkbox-custom input[type="radio"]:disabled+input[type="hidden"]+label { opacity: .65; } .checkbox-custom input[type="checkbox"]:disabled+label::before, .checkbox-custom input[type="checkbox"]:disabled+input[type="hidden"]+label::before, .checkbox-custom input[type="radio"]:disabled+label::before, .checkbox-custom input[type="radio"]:disabled+input[type="hidden"]+label::before { cursor: not-allowed; background-color: #f3f7f9; border-color: #e4eaec; border-width: 1px; } .checkbox-custom.checkbox-circle label::before { border-radius: 50%; } .checkbox-custom.checkbox-inline { display: inline-block; margin-top: 0; margin-bottom: 0; } .checkbox-inline+.checkbox-inline { margin-left: 20px; } .checkbox-default input[type="checkbox"]:checked+label::before, .checkbox-default input[type="checkbox"]:checked+input[type="hidden"]+label::before, .checkbox-default input[type="radio"]:checked+label::before, .checkbox-default input[type="radio"]:checked+input[type="hidden"]+label::before { background-color: #fff; border-color: #e4eaec; border-width: 1px; } .checkbox-default input[type="checkbox"]:checked+label::after, .checkbox-default input[type="checkbox"]:checked+input[type="hidden"]+label::after, .checkbox-default input[type="radio"]:checked+label::after, .checkbox-default input[type="radio"]:checked+input[type="hidden"]+label::after { color: #3280fc; } .checkbox-primary input[type="checkbox"]:checked+label::before, .checkbox-primary input[type="checkbox"]:checked+input[type="hidden"]+label::before, .checkbox-primary input[type="radio"]:checked+label::before, .checkbox-primary input[type="radio"]:checked+input[type="hidden"]+label::before { background-color: #3280fc; border-color: #3280fc; } .checkbox-primary input[type="checkbox"]:checked+label::after, .checkbox-primary input[type="checkbox"]:checked+input[type="hidden"]+label::after, .checkbox-primary input[type="radio"]:checked+label::after, .checkbox-primary input[type="radio"]:checked+input[type="hidden"]+label::after { color: #fff; } .checkbox-danger input[type="checkbox"]:checked+label::before, .checkbox-danger input[type="checkbox"]:checked+input[type="hidden"]+label::before, .checkbox-danger input[type="radio"]:checked+label::before, .checkbox-danger input[type="radio"]:checked+input[type="hidden"]+label::before { background-color: #ea644a; border-color: #ea644a; } .checkbox-danger input[type="checkbox"]:checked+label::after, .checkbox-danger input[type="checkbox"]:checked+input[type="hidden"]+label::after, .checkbox-danger input[type="radio"]:checked+label::after, .checkbox-danger input[type="radio"]:checked+input[type="hidden"]+label::after { color: #fff; } .checkbox-info input[type="checkbox"]:checked+label::before, .checkbox-info input[type="checkbox"]:checked+input[type="hidden"]+label::before, .checkbox-info input[type="radio"]:checked+label::before, .checkbox-info input[type="radio"]:checked+input[type="hidden"]+label::before { background-color: #03b8cf; border-color: #03b8cf; } .checkbox-info input[type="checkbox"]:checked+label::after, .checkbox-info input[type="checkbox"]:checked+input[type="hidden"]+label::after, .checkbox-info input[type="radio"]:checked+label::after, .checkbox-info input[type="radio"]:checked+input[type="hidden"]+label::after { color: #fff; } .checkbox-warning input[type="checkbox"]:checked+label::before, .checkbox-warning input[type="checkbox"]:checked+input[type="hidden"]+label::before, .checkbox-warning input[type="radio"]:checked+label::before, .checkbox-warning input[type="radio"]:checked+input[type="hidden"]+label::before { background-color: #f1a325; border-color: #f1a325; } .checkbox-warning input[type="checkbox"]:checked+label::after, .checkbox-warning input[type="checkbox"]:checked+input[type="hidden"]+label::after, .checkbox-warning input[type="radio"]:checked+label::after, .checkbox-warning input[type="radio"]:checked+input[type="hidden"]+label::after { color: #fff; } .checkbox-success input[type="checkbox"]:checked+label::before, .checkbox-success input[type="checkbox"]:checked+input[type="hidden"]+label::before, .checkbox-success input[type="radio"]:checked+label::before, .checkbox-success input[type="radio"]:checked+input[type="hidden"]+label::before { background-color: #38b03f; border-color: #38b03f; } .checkbox-success input[type="checkbox"]:checked+label::after, .checkbox-success input[type="checkbox"]:checked+input[type="hidden"]+label::after, .checkbox-success input[type="radio"]:checked+label::after, .checkbox-success input[type="radio"]:checked+input[type="hidden"]+label::after { color: #fff; } .checkbox-sm { padding-left: 18px; } .checkbox-sm label { padding-left: 8px; } .checkbox-sm label:empty { padding-left: 0; } .checkbox-sm label::before, .checkbox-sm label::after { width: 18px; height: 18px; margin-left: -18px; } .checkbox-sm label::after { font-size: 10px; line-height: 18px; } .checkbox-sm input[type="checkbox"], .checkbox-sm input[type="radio"] { width: 18px; height: 18px; } .checkbox-sm input[type="checkbox"]:checked+label::before, .checkbox-sm input[type="checkbox"]:checked+input[type="hidden"]+label::before, .checkbox-sm input[type="radio"]:checked+label::before, .checkbox-sm input[type="radio"]:checked+input[type="hidden"]+label::before { border-width: 9px; } .checkbox-lg { padding-left: 24px; } .checkbox-lg label { padding-left: 12px; } .checkbox-lg label:empty { padding-left: 0; } .checkbox-lg label::before, .checkbox-lg label::after { width: 24px; height: 24px; margin-left: -24px; } .checkbox-lg label::after { font-size: 14px; line-height: 24px; } .checkbox-lg input[type="checkbox"], .checkbox-lg input[type="radio"] { width: 24px; height: 24px; } .checkbox-lg input[type="checkbox"]:checked+label::before, .checkbox-lg input[type="checkbox"]:checked+input[type="hidden"]+label::before, .checkbox-lg input[type="radio"]:checked+label::before, .checkbox-lg input[type="radio"]:checked+input[type="hidden"]+label::before { border-width: 12px; } .radio-custom { padding-left: 20px; } .radio-custom label { position: relative; display: inline-block; padding-left: 10px; vertical-align: middle; } .radio-custom label:empty { padding-left: 0; } .radio-custom label::before { position: absolute; left: 0; display: inline-block; width: 20px; height: 20px; margin-left: -20px; content: ""; background-color: #fff; border: 1px solid #e4eaec; border-radius: 50%; transition: border 300ms ease-in-out 0s, color 300ms ease-in-out 0s; } .radio-custom label::after { position: absolute; top: 7px; left: 7px; display: inline-block; width: 6px; height: 6px; margin-left: -20px; content: " "; background-color: transparent; border: 2px solid #76838f; border-radius: 50%; transition: .1s cubic-bezier(.8, -0.33, .2, 1.33); -webkit-transform: scale(0, 0); transform: scale(0, 0); } .radio-custom input[type="radio"] { z-index: 1; width: 20px; height: 20px; cursor: pointer; opacity: 0; } .radio-custom input[type="radio"]:checked+label::before, .radio-custom input[type="radio"]:checked+input[type="hidden"]+label::before { border-color: #e4eaec; border-width: 10px; } .radio-custom input[type="radio"]:checked+label::after, .radio-custom input[type="radio"]:checked+input[type="hidden"]+label::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); } .radio-custom input[type="radio"]:disabled { cursor: not-allowed; } .radio-custom input[type="radio"]:disabled+label, .radio-custom input[type="radio"]:disabled+input[type="hidden"]+label { opacity: .65; } .radio-custom input[type="radio"]:disabled+label::before, .radio-custom input[type="radio"]:disabled+input[type="hidden"]+label::before { cursor: not-allowed; } .radio-custom.radio-inline { display: inline-block; margin-top: 0; margin-bottom: 0; } .radio-inline+.radio-inline { margin-left: 20px; } .radio-default input[type="radio"]:checked+label::before, .radio-default input[type="radio"]:checked+input[type="hidden"]+label::before { background-color: #fff; border-color: #e4eaec; border-width: 1px; } .radio-default input[type="radio"]:checked+label::after, .radio-default input[type="radio"]:checked+input[type="hidden"]+label::after { border-color: #3280fc; } .radio-primary input[type="radio"]:checked+label::before, .radio-primary input[type="radio"]:checked+input[type="hidden"]+label::before { border-color: #3280fc; } .radio-primary input[type="radio"]:checked+label::after, .radio-primary input[type="radio"]:checked+input[type="hidden"]+label::after { border-color: #fff; } .radio-danger input[type="radio"]:checked+label::before, .radio-danger input[type="radio"]:checked+input[type="hidden"]+label::before { border-color: #ea644a; } .radio-danger input[type="radio"]:checked+label::after, .radio-danger input[type="radio"]:checked+input[type="hidden"]+label::after { border-color: #fff; } .radio-info input[type="radio"]:checked+label::before, .radio-info input[type="radio"]:checked+input[type="hidden"]+label::before { border-color: #03b8cf; } .radio-info input[type="radio"]:checked+label::after, .radio-info input[type="radio"]:checked+input[type="hidden"]+label::after { border-color: #fff; } .radio-warning input[type="radio"]:checked+label::before, .radio-warning input[type="radio"]:checked+input[type="hidden"]+label::before { border-color: #f1a325; } .radio-warning input[type="radio"]:checked+label::after, .radio-warning input[type="radio"]:checked+input[type="hidden"]+label::after { border-color: #fff; } .radio-success input[type="radio"]:checked+label::before, .radio-success input[type="radio"]:checked+input[type="hidden"]+label::before { border-color: #38b03f; } .radio-success input[type="radio"]:checked+label::after, .radio-success input[type="radio"]:checked+input[type="hidden"]+label::after { border-color: #fff; } .radio-sm { padding-left: 18px; } .radio-sm label { padding-left: 8px; } .radio-sm label:empty { padding-left: 0; } .radio-sm label::before { width: 18px; height: 18px; margin-left: -20px; } .radio-sm label::after { top: 7px; left: 7px; width: 4px; height: 4px; margin-left: -20px; border-width: 2px; } .radio-sm input[type="radio"] { width: 18px; height: 18px; } .radio-sm input[type="radio"]:checked+label::before, .radio-sm input[type="radio"]:checked+input[type="hidden"]+label::before { border-width: 9px; } .radio-lg { padding-left: 24px; } .radio-lg label { padding-left: 12px; } .radio-lg label:empty { padding-left: 0; } .radio-lg label::before { width: 24px; height: 24px; margin-left: -20px; } .radio-lg label::after { top: 8px; left: 8px; width: 8px; height: 8px; margin-left: -20px; border-width: 2px; } .radio-lg input[type="radio"] { width: 24px; height: 24px; } .radio-lg input[type="radio"]:checked+label::before, .radio-lg input[type="radio"]:checked+input[type="hidden"]+label::before { border-width: 12px; } </style> <!-- jquery js --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script> </head> <body> <div class="wrapper"> <header class="main-header"> <nav class="navbar navbar-fixed-top bg-primary"> <div class="navbar-header"> <a class="navbar-toggle" href="javascript:;" data-toggle="collapse" data-target=".navbar-collapse"><i class="icon icon-th-large"></i></a> <a class="sidebar-toggle" href="javascript:;" data-toggle="push-menu"><i class="icon icon-bars"></i></a> <a class="navbar-brand" href="#"> <span class="logo">ZUIAdmin</span> <span class="logo-mini">ZA</span> </a> </div> <div class="collapse navbar-collapse"> <div class="container-fluid"> <ul class="nav navbar-nav"> <li><a href="javascript:;" data-toggle="push-menu"><i class="icon icon-bars"></i></a></li> </ul> <ul class="nav navbar-nav navbar-right"> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0