弘帝自研前端框架开发参考

admin

作为全球最为流行的框架，Bootstrap4.0框架于2016年5月16日上线，它给前端开发全球统一设计带来了的较好的示范。
但好的框架并不一定适用于每家企业，对于弘帝建站系统的业务与逻辑而言极具多变性，再好的框架也无法满足弘帝的需要，但值得借鉴。
弘帝就志立于开发设计属于自己的建站系统及前端框架始于2012年，这已经在本平台示范代码中得以体现。
2018年起，弘帝框架将参考Bootstrap等国内外前端框架精髓。第一步，努力把越来越多的Bootstrap等思想在弘帝建站系统得以体现，让Bootstrap前端设计的工作量更加轻松。

以下为弘帝Bootstrap框架系统，需要进入后台-->整站布局管理-->高级-->前端框架，然后选中Bootstrap按纽，即可体验弘帝建站系统的Bootstrap框架设计带来的便捷。

重要参考:
Bootstrap4.0开发思路参考
http://wh.ac.cn/forum.php?mod=viewthread&tid=2364&fromuid=1

以下为弘帝自主研发的前端框架，将用于所有弘帝前端产品，我们将根据弘帝软件的特色研究设计属于弘帝自己特色的框架系统，未来研发方向将与Bootstrap完全脱离，并充分吸取全球优秀前端技术与技巧。

常备类:
body{font-size:1rem; color:#212529;margin:0; padding:0; font-family:Microsoft YaHei,SimSun,Airal,sans-serif;}
h1{ font-size:72px;}
h2{ font-size:48px;}
h3{ font-size:32px;}
h4{ font-size:28px;}
h5{ font-size:22px;}
h6{ font-size:18px;}
h7{ font-size:16px;}
section{margin-bottom: 20px;}

导航菜单
nav,menu,.nav-inline{ display:inline;}
.nav-inline ul{ display: inline; padding-left: 0;}
.nav-inline ul li{ display:inline; list-style: none;}
.nav-inline ul li a{ padding:0 10px;}

边距设计
设计思路：m=margin,p=padding,l=left,r=right,t=top,b=bottom,5=5px,5p=5%,x=left+right,y=top+bottom
.m-5{margin:5px;}
.m-t-b-10,m-y-10{margin-top:10px;margin-bottom:10px;}
.p-10{padding:10px}
.p-l-r-20p,p-x-20p{padding-left:20%;padding-right:20%}

兼容设备
.container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}
@media (min-width: 576px) { .container { max-width: 540px; }}
@media (min-width: 768px) { .container { max-width: 720px;  }}
@media (min-width: 992px) { .container { max-width: 960px;  }}
@media (min-width: 1200px) { .container { max-width: 1140px;  }}

弘帝专用，保持先后顺序
@media (max-width: 1200px) {

}
@media (max-width: 992px) {

}
@media (max-width: 768px) {

}
@media (max-width: 576px) {

}

表单设计
form{ margin: 10px auto;}
input{ width: 50%; min-width: 200px;}
input,textarea{border-radius: 3px; border:1px solid #aaa; padding: 2px;}
input[type=checkbox],input[type=radio],input[type=submit],input[type=reset],input[type=button],button{width:auto; min-width: auto; margin-right:5px;}
input[type=submit],input[type=reset],input[type=button],button{ padding:5px 20px;}
textarea{ width: 90%; min-height: 100px;}
/*.rows是多行，.row适用单行*/
.rows,.row{display: flex; flex-flow:row nowrap;}
.rows:nth-child(2n){background: #f8f8f8;}
.rows .title{ width: 20%; padding: 5px 10px; background: inherit;}
.rows .input{ width: 80%; padding: 5px 10px; border: 0;}
.rows:hover{ background:#72CDE0;}

表格:
table{ border: 1px solid #ccc; padding:10px; width: 100%;}
tr:nth-child(2n){ background: #eee;}
tr:hover{ background: #ccc;}
td,.td{padding: 5px 10px;}

宽度:
.w0{ width:20px;}
.w1{ width:60px;}
.w2{ width:90px;}
.w3{ width:120px;}
.w4{ width:150px;}
.w5{ width:180px;}
.w6{ width:200px;}
.w8{ width:300px;}
.w9{ width:480px;}
.w10{ width:680px;}

行为:
.del{background:#f8f8f8; color:#ccc;}
.del *{ color:#ccc;}

admin

.no-gutters{margin-right:0;margin-left:0}
.no-gutters>.col,.no-gutters>[class*=col-]{padding-right:0;padding-left:0}
.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto{position:relative;width:100%;min-height:1px;padding-right:15px;padding-left:15px}
.col{-ms-flex-preferred-size:0;flex-basis:0;box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}
.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}
.col-1,.col-auto{box-flex:0}
.col-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}
.col-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}
.col-2,.col-3{box-flex:0}
.col-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}
.col-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}
.col-4,.col-5{box-flex:0}
.col-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}
.col-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}
.col-6,.col-7{box-flex:0}
.col-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}
.col-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}
.col-8,.col-9{box-flex:0}
.col-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}
.col-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}
.col-10,.col-11{box-flex:0}
.col-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}
.col-12{box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
.order-first{box-ordinal-group:0;-ms-flex-order:-1;order:-1}
.order-last{box-ordinal-group:14;-ms-flex-order:13;order:13}
.order-0{box-ordinal-group:1;-ms-flex-order:0;order:0}
.order-1{box-ordinal-group:2;-ms-flex-order:1;order:1}
.order-2{box-ordinal-group:3;-ms-flex-order:2;order:2}
.order-3{box-ordinal-group:4;-ms-flex-order:3;order:3}
.order-4{box-ordinal-group:5;-ms-flex-order:4;order:4}
.order-5{box-ordinal-group:6;-ms-flex-order:5;order:5}
.order-6{box-ordinal-group:7;-ms-flex-order:6;order:6}
.order-7{box-ordinal-group:8;-ms-flex-order:7;order:7}
.order-8{box-ordinal-group:9;-ms-flex-order:8;order:8}
.order-9{box-ordinal-group:10;-ms-flex-order:9;order:9}
.order-10{box-ordinal-group:11;-ms-flex-order:10;order:10}
.order-11{box-ordinal-group:12;-ms-flex-order:11;order:11}
.order-12{box-ordinal-group:13;-ms-flex-order:12;order:12}
.offset-1{margin-left:8.333333%}
.offset-2{margin-left:16.666667%}
.offset-3{margin-left:25%}
.offset-4{margin-left:33.333333%}
.offset-5{margin-left:41.666667%}
.offset-6{margin-left:50%}
.offset-7{margin-left:58.333333%}
.offset-8{margin-left:66.666667%}
.offset-9{margin-left:75%}
.offset-10{margin-left:83.333333%}
.offset-11{margin-left:91.666667%}
@media (min-width:576px){
.col-sm{-ms-flex-preferred-size:0;flex-basis:0;box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}
.col-sm-auto{box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}
.col-sm-1{box-flex:0;-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}
.col-sm-2{box-flex:0;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}
.col-sm-3{box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}
.col-sm-4{box-flex:0;-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}
.col-sm-5{box-flex:0;-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}
.col-sm-6{box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}
.col-sm-7{box-flex:0;-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}
.col-sm-8{box-flex:0;-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}
.col-sm-9{box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}
.col-sm-10{box-flex:0;-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}
.col-sm-11{box-flex:0;-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}
.col-sm-12{box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
.order-sm-first{box-ordinal-group:0;-ms-flex-order:-1;order:-1}
.order-sm-last{box-ordinal-group:14;-ms-flex-order:13;order:13}
.order-sm-0{box-ordinal-group:1;-ms-flex-order:0;order:0}
.order-sm-1{box-ordinal-group:2;-ms-flex-order:1;order:1}
.order-sm-2{box-ordinal-group:3;-ms-flex-order:2;order:2}
.order-sm-3{box-ordinal-group:4;-ms-flex-order:3;order:3}
.order-sm-4{box-ordinal-group:5;-ms-flex-order:4;order:4}
.order-sm-5{box-ordinal-group:6;-ms-flex-order:5;order:5}
.order-sm-6{box-ordinal-group:7;-ms-flex-order:6;order:6}
.order-sm-7{box-ordinal-group:8;-ms-flex-order:7;order:7}
.order-sm-8{box-ordinal-group:9;-ms-flex-order:8;order:8}
.order-sm-9{box-ordinal-group:10;-ms-flex-order:9;order:9}
.order-sm-10{box-ordinal-group:11;-ms-flex-order:10;order:10}
.order-sm-11{box-ordinal-group:12;-ms-flex-order:11;order:11}
.order-sm-12{box-ordinal-group:13;-ms-flex-order:12;order:12}
.offset-sm-0{margin-left:0}
.offset-sm-1{margin-left:8.333333%}
.offset-sm-2{margin-left:16.666667%}
.offset-sm-3{margin-left:25%}
.offset-sm-4{margin-left:33.333333%}
.offset-sm-5{margin-left:41.666667%}
.offset-sm-6{margin-left:50%}
.offset-sm-7{margin-left:58.333333%}
.offset-sm-8{margin-left:66.666667%}
.offset-sm-9{margin-left:75%}
.offset-sm-10{margin-left:83.333333%}
.offset-sm-11{margin-left:91.666667%}
}
@media (min-width:768px){
.col-md{-ms-flex-preferred-size:0;flex-basis:0;box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}
.col-md-auto{box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}
.col-md-1{box-flex:0;-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}
.col-md-2{box-flex:0;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}
.col-md-3{box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}
.col-md-4{box-flex:0;-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}
.col-md-5{box-flex:0;-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}
.col-md-6{box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}
.col-md-7{box-flex:0;-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}
.col-md-8{box-flex:0;-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}
.col-md-9{box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}
.col-md-10{box-flex:0;-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}
.col-md-11{box-flex:0;-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}
.col-md-12{box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
.order-md-first{box-ordinal-group:0;-ms-flex-order:-1;order:-1}
.order-md-last{box-ordinal-group:14;-ms-flex-order:13;order:13}
.order-md-0{box-ordinal-group:1;-ms-flex-order:0;order:0}
.order-md-1{box-ordinal-group:2;-ms-flex-order:1;order:1}
.order-md-2{box-ordinal-group:3;-ms-flex-order:2;order:2}
.order-md-3{box-ordinal-group:4;-ms-flex-order:3;order:3}
.order-md-4{box-ordinal-group:5;-ms-flex-order:4;order:4}
.order-md-5{box-ordinal-group:6;-ms-flex-order:5;order:5}
.order-md-6{box-ordinal-group:7;-ms-flex-order:6;order:6}
.order-md-7{box-ordinal-group:8;-ms-flex-order:7;order:7}
.order-md-8{box-ordinal-group:9;-ms-flex-order:8;order:8}
.order-md-9{box-ordinal-group:10;-ms-flex-order:9;order:9}
.order-md-10{box-ordinal-group:11;-ms-flex-order:10;order:10}
.order-md-11{box-ordinal-group:12;-ms-flex-order:11;order:11}
.order-md-12{box-ordinal-group:13;-ms-flex-order:12;order:12}
.offset-md-0{margin-left:0}
.offset-md-1{margin-left:8.333333%}
.offset-md-2{margin-left:16.666667%}
.offset-md-3{margin-left:25%}
.offset-md-4{margin-left:33.333333%}
.offset-md-5{margin-left:41.666667%}
.offset-md-6{margin-left:50%}
.offset-md-7{margin-left:58.333333%}
.offset-md-8{margin-left:66.666667%}
.offset-md-9{margin-left:75%}
.offset-md-10{margin-left:83.333333%}
.offset-md-11{margin-left:91.666667%}
}
@media (min-width:992px){
.col-lg{-ms-flex-preferred-size:0;flex-basis:0;box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}
.col-lg-auto{box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}
.col-lg-1{box-flex:0;-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}
.col-lg-2{box-flex:0;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}
.col-lg-3{box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}
.col-lg-4{box-flex:0;-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}
.col-lg-5{box-flex:0;-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}
.col-lg-6{box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}
.col-lg-7{box-flex:0;-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}
.col-lg-8{box-flex:0;-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}
.col-lg-9{box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}
.col-lg-10{box-flex:0;-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}
.col-lg-11{box-flex:0;-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}
.col-lg-12{box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
.order-lg-first{box-ordinal-group:0;-ms-flex-order:-1;order:-1}
.order-lg-last{box-ordinal-group:14;-ms-flex-order:13;order:13}
.order-lg-0{box-ordinal-group:1;-ms-flex-order:0;order:0}
.order-lg-1{box-ordinal-group:2;-ms-flex-order:1;order:1}
.order-lg-2{box-ordinal-group:3;-ms-flex-order:2;order:2}
.order-lg-3{box-ordinal-group:4;-ms-flex-order:3;order:3}
.order-lg-4{box-ordinal-group:5;-ms-flex-order:4;order:4}
.order-lg-5{box-ordinal-group:6;-ms-flex-order:5;order:5}
.order-lg-6{box-ordinal-group:7;-ms-flex-order:6;order:6}
.order-lg-7{box-ordinal-group:8;-ms-flex-order:7;order:7}
.order-lg-8{box-ordinal-group:9;-ms-flex-order:8;order:8}
.order-lg-9{box-ordinal-group:10;-ms-flex-order:9;order:9}
.order-lg-10{box-ordinal-group:11;-ms-flex-order:10;order:10}
.order-lg-11{box-ordinal-group:12;-ms-flex-order:11;order:11}
.order-lg-12{box-ordinal-group:13;-ms-flex-order:12;order:12}
.offset-lg-0{margin-left:0}
.offset-lg-1{margin-left:8.333333%}
.offset-lg-2{margin-left:16.666667%}
.offset-lg-3{margin-left:25%}
.offset-lg-4{margin-left:33.333333%}
.offset-lg-5{margin-left:41.666667%}
.offset-lg-6{margin-left:50%}
.offset-lg-7{margin-left:58.333333%}
.offset-lg-8{margin-left:66.666667%}
.offset-lg-9{margin-left:75%}
.offset-lg-10{margin-left:83.333333%}
.offset-lg-11{margin-left:91.666667%}
}
@media (min-width:1200px){
.col-xl{-ms-flex-preferred-size:0;flex-basis:0;box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}
.col-xl-auto{box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}
.col-xl-1{box-flex:0;-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}
.col-xl-2{box-flex:0;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}
.col-xl-3{box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}
.col-xl-4{box-flex:0;-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}
.col-xl-5{box-flex:0;-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}
.col-xl-6{box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}
.col-xl-7{box-flex:0;-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}
.col-xl-8{box-flex:0;-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}
.col-xl-9{box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}
.col-xl-10{box-flex:0;-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}
.col-xl-11{box-flex:0;-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}
.col-xl-12{box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
.order-xl-first{box-ordinal-group:0;-ms-flex-order:-1;order:-1}
.order-xl-last{box-ordinal-group:14;-ms-flex-order:13;order:13}
.order-xl-0{box-ordinal-group:1;-ms-flex-order:0;order:0}
.order-xl-1{box-ordinal-group:2;-ms-flex-order:1;order:1}
.order-xl-2{box-ordinal-group:3;-ms-flex-order:2;order:2}
.order-xl-3{box-ordinal-group:4;-ms-flex-order:3;order:3}
.order-xl-4{box-ordinal-group:5;-ms-flex-order:4;order:4}
.order-xl-5{box-ordinal-group:6;-ms-flex-order:5;order:5}
.order-xl-6{box-ordinal-group:7;-ms-flex-order:6;order:6}
.order-xl-7{box-ordinal-group:8;-ms-flex-order:7;order:7}
.order-xl-8{box-ordinal-group:9;-ms-flex-order:8;order:8}
.order-xl-9{box-ordinal-group:10;-ms-flex-order:9;order:9}
.order-xl-10{box-ordinal-group:11;-ms-flex-order:10;order:10}
.order-xl-11{box-ordinal-group:12;-ms-flex-order:11;order:11}
.order-xl-12{box-ordinal-group:13;-ms-flex-order:12;order:12}
.offset-xl-0{margin-left:0}
.offset-xl-1{margin-left:8.333333%}
.offset-xl-2{margin-left:16.666667%}
.offset-xl-3{margin-left:25%}
.offset-xl-4{margin-left:33.333333%}
.offset-xl-5{margin-left:41.666667%}
.offset-xl-6{margin-left:50%}
.offset-xl-7{margin-left:58.333333%}
.offset-xl-8{margin-left:66.666667%}
.offset-xl-9{margin-left:75%}
.offset-xl-10{margin-left:83.333333%}
.offset-xl-11{margin-left:91.666667%}
}