前端样式汇总

根据bootstrap编写的样式，用起来比较方便，不用写多余的样式。

给我自己保存下，耶！！！

/* 文本颜色 */
.text-primary {color: #007bff}
.text-secondary {color: #6c757d}
.text-success {color: #28a745}
.text-info {color: #17a2b8}
.text-warning {color: #ffc107}
.text-danger {color: #dc3545}
.text-light {color: #f8f9fa}
.text-dark {color: #343a40}
.text-muted {color: #6c757d}
.text-white {color: #ffffff}
.text-purple {color: #926dde}
.text-pink {color: #f96197}
.text-cyan {color: #57c7d4}
.text-yellow {color: #fdd501}
.text-brown {color: #8d6658}
.text-org {color:#c16307;}

/* 背景颜色 */
.bg-primary {background-color: #007bff}
.bg-secondary {background-color: #6c757d}
.bg-success {background-color: #28a745}
.bg-info {background-color: #17a2b8}
.bg-warning {background-color: #ffc107}
.bg-danger {background-color: #dc3545}
.bg-light {background-color: #f8f9fa}
.bg-dark {background-color: #343a40}
.bg-muted {background-color: #6c757d}
.bg-white {background-color: #ffffff}
.bg-purple {background-color: #926dde}
.bg-pink {background-color: #f96197}
.bg-cyan {background-color: #57c7d4}
.bg-yellow {background-color: #fdd501}
.bg-brown {background-color: #8d6658}
.bg-a {color:#ff5500;}

/* 字体大小 */
.font-38 {font-size: 38px}
.font-36 {font-size: 36px}
.font-32 {font-size: 32px}
.font-30 {font-size: 30px}
.font-26 {font-size: 26px}
.font-24 {font-size: 24px}
.font-22 {font-size: 22px}
.font-20 {font-size: 20px}
.font-18 {font-size: 18px}
.font-16 {font-size: 16px}
.font-14 {font-size: 14px}
.font-12 {font-size: 12px}

/* 头像样式 */
.postphoto { width: 40px; height: 40px;}
.postimage { width: 160px;height: 100px;}
.avatar-sm {width: 100px;height: 100px;border-radius: 50%}
.avatar {width: 120px;height: 120px;border-radius: 50%}
.avatar-lg {width: 160px;height: 160px;border-radius: 50%}

/*图片大小*/
.photo-10 { width:10px;height: 10px;}
.photo-20 { width:20px;height: 20px;}
.photo-30 { width:30px;height: 30px;}
.photo-40 {width:40px;height: 40px;}
.photo-60 { width:60px;height: 60px;}
.photo-80 { width:80px;height: 80px;}
.photo-100 { width:100px;height: 100px;}
.photo-140 { width:140px;height: 140px;}
.photo-lg {width: 165px;height: 220px;}

/* 文字位置 */
.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}

/*flex布局*/
.fl-t{ display: flex;justify-content: start;align-items: flex-start;}
.fl-c{ display: flex;justify-content: start;align-items: center;}
.fl-b{ display: flex;justify-content: start;align-items: flex-end;}
.fl-s{display: flex;justify-content: space-around}
.fc-t{ display: flex;justify-content: center;align-items: flex-start;}
.fc-c{ display: flex;justify-content: center;align-items: center;}
.fc-b{ display: flex;justify-content: center;align-items: flex-end;}

.fr-t{ display: flex;justify-content: end;align-items: start;}
.fr-c{ display: flex;justify-content: end;align-items: center;}
.fr-b{ display: flex;justify-content: end;align-items: end;}
.flex-container { height: 100%;display: flex;flex-direction: column}

/* 浮动 */
.float-left {float: left;}
.float-right {float: right;}

/* 宽度 */
.w-25 {width: 25%}
.w-30 {width: 30%}
.w-33 {width: 33.333333%}
.w-50 {width: 50%}
.w-75 {width: 75%}
.w-100 {width: 100%}
.f-25 {flex: 0 0 25%}
.f-30 {flex: 0 0 30%}
.f-33 {flex: 0 0 33.333333%}
.f-50 {flex: 0 0 25%}
.f-75 {flex: 0 0 75%}
.vw-25 {width: 25vw;}
.vw-30 {width: 30vw;}
.vw-33 {width: 33.333333vw;}
.vw-50 {width: 50vw;}
.vw-75 {width: 75vw;}
.vw-100 {width: 100vw;}

/* 高度 */
.h-25 {height: 25%}
.h-30 {height: 30%}
.h-33 {height: 33.333333%}
.h-50 {height: 50%}
.h-75 {height: 75%}
.h-100 {height: 100%}
.vh-25 {height: 25vh}
.vh-30 {height: 30vh}
.vh-33 {height: 33.333333vh}
.vh-50 {height: 50vh}
.vh-75 {height: 75vh}
.vh-100 {height: 100vh}

/* 内边距 */
.p-0 {padding: 0}
.p-10 {padding: 10px}
.p-15 {padding: 15px}
.p-20 {padding: 20px}
.p-25 {padding: 25px}
.p-30 {padding: 30px}
.p-35 {padding: 35px}
.px-0 {padding-left: 0;padding-right: 0}
.px-10 {padding-left: 10px;padding-right: 10px}
.px-15 {padding-left: 15px;padding-right: 15px;}
.px-20 {padding-left: 20px;padding-right: 20px;}
.px-25 {padding-left: 25px;padding-right: 25px;}
.px-30 {padding-left: 30px;padding-right: 30px;}
.px-40 {padding-left: 40px;padding-right: 40px;}
.py-0 {padding-top: 0;padding-bottom: 0}
.py-10 {padding-top: 10px;padding-bottom: 10px;}
.py-15 {padding-top: 15px;padding-bottom: 15px;}
.py-20 {padding-top: 20px;padding-bottom: 20px;}
.py-25 {padding-top: 25px;padding-bottom: 25px;}
.py-30 {padding-top: 30px;padding-bottom: 30px;}
.pt-0 {padding-top: 0}
.pt-10 {padding-top: 10px}
.pt-15 {padding-top: 15px}
.pt-20 {padding-top: 20px}
.pt-25 {padding-top: 25px}
.pt-30 {padding-top: 30px}
.pt-35 {padding-top: 35px}
.pr-0 {padding-right: 0}
.pr-10 {padding-right: 10px}
.pr-15 {padding-right: 15px}
.pr-20 {padding-right: 20px}
.pr-25 {padding-right: 25px}
.pr-30 {padding-right: 30px}
.pr-35 {padding-right: 35px}
.pb-0 {padding-bottom: 0}
.pb-10 {padding-bottom: 10px}
.pb-15 {padding-bottom: 15px}
.pb-20 {padding-bottom: 20px}
.pb-25 {padding-bottom: 25px}
.pb-30 {padding-bottom: 30px}
.pb-35 {padding-bottom: 35px}
.pb-50 {padding-bottom: 50px}
.pl-0 {padding-left: 0}
.pl-10 {padding-left: 10px}
.pl-15 {padding-left: 15px}
.pl-20 {padding-left: 20px}
.pl-25 {padding-left: 25px}
.pl-30 {padding-left: 30px}
.pl-35 {padding-left: 35px}

/* 外边距 */
.m-0-auo { margin:0 auto}
.m-0 {margin: 0}
.m-10 {margin: 10px}
.m-15 {margin: 15px}
.m-20 {margin: 20px}
.m-25 {margin: 25px}
.m-30 {margin: 30px}
.m-35 {margin: 35px}
.mx-0 {margin-left: 0;margin-right: 0}
.mx-10 {margin-left: 10px;margin-right: 10px}
.mx-15 {margin-left: 15px;margin-right: 15px;}
.mx-20 {margin-left: 20px;margin-right: 20px;}
.mx-25 {margin-left: 25px;margin-right: 25px;}
.mx-30 {margin-left: 30px;margin-right: 30px;}
.my-0 {margin-top: 0;margin-bottom: 0}
.my-10 {margin-top: 10px;margin-bottom: 10px;}
.my-15 {margin-top: 15px;margin-bottom: 15px;}
.my-20 {margin-top: 20px;margin-bottom: 20px;}
.my-25 {margin-top: 25px;margin-bottom: 25px;}
.my-30 {margin-top: 30px;margin-bottom: 30px;}
.mt-0 {margin-top: 0}
.mt-5 {margin-top: 5px}
.mt-10 {margin-top: 10px}
.mt-15 {margin-top: 15px}
.mt-20 {margin-top: 20px}
.mt-25 {margin-top: 25px}
.mt-30 {margin-top: 30px}
.mt-35 {margin-top: 35px}
.mt-50 {margin-top: 50px}
.mr-0 {margin-right: 0}
.mr-10 {margin-right: 10px}
.mr-15 {margin-right: 15px}
.mr-20 {margin-right: 20px}
.mr-25 {margin-right: 25px}
.mr-30 {margin-right: 30px}
.mr-35 {margin-right: 35px}
.mb-0 {margin-bottom: 0}
.mb-10 {margin-bottom: 10px}
.mb-15 {margin-bottom: 15px}
.mb-20 {margin-bottom: 20px}
.mb-25 {margin-bottom: 25px}
.mb-30 {margin-bottom: 30px}
.mb-35 {margin-bottom: 35px}
.ml-0 {margin-left: 0}
.ml-10 {margin-left: 10px}
.ml-15 {margin-left: 15px}
.ml-20 {margin-left: 20px}
.ml-25 {margin-left: 25px}
.ml-30 {margin-left: 30px}
.ml-35 {margin-left: 35px}

.p-x{position: fixed}

body,p,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,td,select,option,textarea，figure{
  margin:0;
  padding:0;
}
a{
  text-decoration:none;
}
ul,li{
  list-style:none;
}
em{
  font-style: normal;
}