bootstrap4 常用类

- 日理万妓 2022-05-31 03:10 459阅读 0赞

字体类

  1. .lead { font-size: 1.25rem; font-weight: 300; }
  3. .display-1 { font-size: 6rem; font-weight: 300; line-height: 1.2; }
  5. .display-2 { font-size: 5.5rem; font-weight: 300; line-height: 1.2; }
  7. .display-3 { font-size: 4.5rem; font-weight: 300; line-height: 1.2; }
  9. .display-4 { font-size: 3.5rem; font-weight: 300; line-height: 1.2; }
  10. small,
  11. .small { font-size: 80%; font-weight: 400; }
  12. .initialism { font-size: 90%; text-transform: uppercase; }
  14. .align-baseline { vertical-align: baseline !important; }
  16. .align-top { vertical-align: top !important; }
  18. .align-middle { vertical-align: middle !important; }
  20. .align-bottom { vertical-align: bottom !important; }
  22. .align-text-bottom { vertical-align: text-bottom !important; }
  24. .align-text-top { vertical-align: text-top !important; }

列表类

  1. .list-unstyled { padding-left: 0; list-style: none; }
  3. .list-inline { padding-left: 0; list-style: none; }
  5. .list-inline-item { display: inline-block; }
  7. .list-inline-item:not(:last-child) { margin-right: 0.5rem; }

图片类

  1. .img-fluid { //以前是.img-responsive
  2.   max-width: 100%;
  3.   height: auto;
  4. }
  6. .img-thumbnail {  //不是说移除了吗，怎么还有.之前是.thumbnail
  7.   padding: 0.25rem;
  8.   background-color: #fff;
  9.   border: 1px solid #dee2e6;
  10.   border-radius: 0.25rem;
  11.   max-width: 100%;
  12.   height: auto;
  13. }
  15. .figure {
  16.   display: inline-block;
  17. }

容器类

  1. .container {
  2.   width: 100%;
  3.   padding-right: 15px;
  4.   padding-left: 15px;
  5.   margin-right: auto;
  6.   margin-left: auto;
  7. }
  9. @media (min-width: 576px) { 
  10.   .container {
  11.     max-width: 540px;
  12.   }
  13. }
  15. @media (min-width: 768px) { 
  16.   .container {
  17.     max-width: 720px;
  18.   }
  19. }
  21. @media (min-width: 992px) { 
  22.   .container {
  23.     max-width: 960px;
  24.   }
  25. }
  27. @media (min-width: 1200px) { 
  28.   .container {
  29.     max-width: 1140px;
  30.   }
  31. }
  33. .container-fluid {
  34.   width: 100%;
  35.   padding-right: 15px;
  36.   padding-left: 15px;
  37.   margin-right: auto;
  38.   margin-left: auto;
  39. }
  41. .order-12 {  //flex 方式order属性用于更改在主轴方向上排列顺序。
  42.             //order数值越小，排列越靠前，默认为0，可以为负数
  43.   -webkit-box-ordinal-group: 13;
  44.   -ms-flex-order: 12;
  45.   order: 12;
  46. }
  48. .offset-1 { //margin方式
  49.   margin-left: 8.333333%;
  50. }

table类

  1. //表格可以写入的类 *-active *-default *-primary secondary success danger warning
  2. //info light dark
  4. //响应式表格.table-responsive，使 Viewport 符合任何表格。或者 .table 中加 .table-responsive{-sm|-md|-lg|-xl}
  6. .table-responsive {
  7.   display: block;
  8.   width: 100%;
  9.   overflow-x: auto;
  10.   -webkit-overflow-scrolling: touch;
  11.   -ms-overflow-style: -ms-autohiding-scrollbar;
  12. }
  14. .table-responsive > .table-bordered {
  15.   border: 0;
  16. }

border类

  1. .border { border: 1px solid #dee2e6 !important; }
  3. .border-top { border-top: 1px solid #dee2e6 !important; }
  5. .border-right { border-right: 1px solid #dee2e6 !important; }
  7. .border-bottom { border-bottom: 1px solid #dee2e6 !important; }
  9. .border-left { border-left: 1px solid #dee2e6 !important; }
  11. .border-0 { border: 0 !important; }
  13. .border-top-0 { border-top: 0 !important; }
  15. .border-right-0 { border-right: 0 !important; }
  17. .border-bottom-0 { border-bottom: 0 !important; }
  19. .border-left-0 { border-left: 0 !important; }
  21. 边框颜色
  22. .border-primary { border-color: #007bff !important; }
  24. .border-secondary { border-color: #6c757d !important; }
  26. .border-success { border-color: #28a745 !important; }
  28. .border-info { border-color: #17a2b8 !important; }
  30. .border-warning { border-color: #ffc107 !important; }
  32. .border-danger { border-color: #dc3545 !important; }
  34. .border-light { border-color: #f8f9fa !important; }
  36. .border-dark { border-color: #343a40 !important; }
  38. .border-white { border-color: #fff !important; }
  40. 边框圆角
  42. .rounded { border-radius: 0.25rem !important; }
  44. .rounded-top { border-top-left-radius: 0.25rem !important; border-top-right-radius: 0.25rem !important; }
  46. .rounded-right { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; }
  48. .rounded-bottom { border-bottom-right-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; }
  50. .rounded-left { border-top-left-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; }
  52. .rounded-circle { border-radius: 50% !important; }
  54. .rounded-0 { border-radius: 0 !important; }

显示状态类

  1. .d-none { display: none !important; }
  3. .d-inline { display: inline !important; }
  5. .d-inline-block { display: inline-block !important; }
  7. .d-block { display: block !important; }
  9. .d-table { display: table !important; }
  11. .d-table-row { display: table-row !important; }
  13. .d-table-cell { display: table-cell !important; }
  15. .d-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; }
  17. .d-inline-flex { display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; }
  19. 在固定大小显示隐藏
  20. .d-sm-none { //只提供一个例子 display: none !important; }

浮动类

  1. .float-left { float: left !important; }
  3. .float-right { float: right !important; }
  5. .float-none { float: none !important; }
  6. .float-xl-none { float: none !important; }

定位类

  1. .position-static { position: static !important; }
  3. .position-relative { position: relative !important; }
  5. .position-absolute { position: absolute !important; }
  7. .position-fixed { position: fixed !important; }
  9. .position-sticky { position: -webkit-sticky !important; position: sticky !important; }
  11. .fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; }
  13. .fixed-bottom { position: fixed; right: 0; bottom: 0; left: 0; z-index: 1030; }

判断浏览器是否支持

  1. @supports ((position: -webkit-sticky) or (position: sticky)) {
  2.   .sticky-top { position: -webkit-sticky; position: sticky; top: 0; z-index: 1020; }
  3. }

其他类

  1. .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; }
  2. .w-25 { width: 25% !important; }
  4. .w-50 { width: 50% !important; }
  6. .w-75 { width: 75% !important; }
  8. .w-100 { width: 100% !important; }
  10. .h-25 { height: 25% !important; }
  12. .h-50 { height: 50% !important; }
  14. .h-75 { height: 75% !important; }
  16. .h-100 { height: 100% !important; }
  18. .mw-100 { max-width: 100% !important; }
  20. .mh-100 { max-height: 100% !important; }
  21. .m-0 { margin: 0 !important; }
  23. .mt-0,
  24. .my-0 { margin-top: 0 !important; }
  26. .mr-0,
  27. .mx-0 { margin-right: 0 !important; }
  29. .mb-0,
  30. .my-0 { margin-bottom: 0 !important; }
  32. .ml-0,
  33. .mx-0 { margin-left: 0 !important; }
  35. .m-1 { margin: 0.25rem !important; }
  37. .mt-1,
  38. .my-1 { margin-top: 0.25rem !important; }
  40. .mr-1,
  41. .mx-1 { margin-right: 0.25rem !important; }
  43. .mb-1,
  44. .my-1 { margin-bottom: 0.25rem !important; }
  46. .ml-1,
  47. .mx-1 { margin-left: 0.25rem !important; }
  49. .m-2 { margin: 0.5rem !important; }
  50. .p-0 { padding: 0 !important; }
  52. .pt-0,
  53. .py-0 { padding-top: 0 !important; }
  55. .pr-0,
  56. .px-0 { padding-right: 0 !important; }
  58. .pb-0,
  59. .py-0 { padding-bottom: 0 !important; }
  61. .pl-0,
  62. .px-0 { padding-left: 0 !important; }
  64. .p-1 { padding: 0.25rem !important; }
  66. .pt-1,
  67. .py-1 { padding-top: 0.25rem !important; }
  69. .pr-1,
  70. .px-1 { padding-right: 0.25rem !important; }
  71. .m-sm-0 { margin: 0 !important; }
  73.  .m-auto{ margin:auto !important; }

文字类

  1. .text-justify { text-align: justify !important; }
  3. .text-nowrap { white-space: nowrap !important; }
  5. .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  7. .text-left { text-align: left !important; }
  9. .text-right { text-align: right !important; }
  11. .text-center { text-align: center !important; }
  14. .text-lowercase { text-transform: lowercase !important; }
  16. .text-uppercase { text-transform: uppercase !important; }
  18. .text-capitalize { text-transform: capitalize !important; }
  20. .font-weight-light { font-weight: 300 !important; }
  22. .font-weight-normal { font-weight: 400 !important; }
  24. .font-weight-bold { font-weight: 700 !important; }
  26. .font-italic { font-style: italic !important; }
  28. .text-white { color: #fff !important; }
  30. .text-primary { color: #007bff !important; }
  31. .text-dark { color: #343a40 !important; }
  33. a.text-dark:hover, a.text-dark:focus { color: #1d2124 !important; }
  35. .text-muted { color: #6c757d !important; }
  37. .text-hide { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; }

显示与隐藏

  1. .visible { visibility: visible !important; }
  3. .invisible { visibility: hidden !important; }

发表评论

表情：
评论列表 （有 0 条评论，459人围观）

还没有评论，来说两句吧...

相关阅读

    相关 常用类

         字符串相关类：                "hello" 在编译期main()方法之前通过加载器加载进内存；它是字符串常量对象 。              

    骑猪看日落骑猪看日落/ 0 赞/ 301 阅读

    相关 常用类

    包装类(Wrapper) 装箱：包装类使得一个基本数据类型的数据变成了类。 拆箱：将数字包装类中内容变为基本数据类型。 有了类的特点，可以调用类中的方法。 对于8

    本是古典 何须时尚本是古典 何须时尚/ 0 赞/ 335 阅读

    相关 常用类

    1. String类：不可变的字符序列（如：String str = "atguigu"; str += "javaEE"）     1.关注于String常用的方法！

    青旅半醒青旅半醒/ 0 赞/ 323 阅读

    相关 Bootstrap 常用表单

    表单        单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将

    蔚落蔚落/ 0 赞/ 464 阅读