bootstrap.css用法布局小总结 xiuno建站日记

已认证 修罗大仙 7月前 1894

容器建立:

.d-flex {display: flex !important}
//将对象作为弹性伸缩盒显示
.d-inline-flex display: inline-flex !important}
//将对象作为内联块级弹性伸缩盒显示
flex-directio:colum; //一行一个

水平与竖直方向控制

.flex-row {flex-direction: row !important;
}
//默认值。灵活的项目将水平显示,正如一个行一样。

.flex-column {
  flex-direction: column !important;
}
//灵活的项目将垂直显示,正如一个列一样。

.flex-row-reverse {
  flex-direction: row-reverse !important;
}
//与 row 相同,但是以相反的顺序。

.flex-column-reverse {
  flex-direction: column-reverse !important;
}
//与 column 相同,但是以相反的顺序

换行问题

.flex-wrap {
  flex-wrap: wrap !important;
}
//规定灵活的项目在必要的时候拆行或拆列。

.flex-nowrap {
  flex-wrap: nowrap !important;
}
//默认值。规定灵活的项目不拆行或不拆列。

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}
//规定灵活的项目在必要的时候拆行或拆列,但是以相反的顺序。

排序问题

.justify-content-start {
  justify-content: flex-start !important;
}
//默认(从左到右)
.justify-content-end {
  justify-content: flex-end !important;
}
//项目位于容器的结尾(从右到左)
.justify-content-center {
  justify-content: center !important;
}
//项目位于容器的中心。(居中)
.justify-content-between {
  justify-content: space-between !important;
}
//项目位于各行之间留有空白的容器内。(分散,左右不留间距)
.justify-content-around {
  justify-content: space-around !important;
}
//项目位于各行之前、之间、之后都留有空白的容器内。




占比问题

//x-2>16.6 x-3>25  x-4>33.3  x-5>41.6 x-6>50 x-7>25.3  x-8>66.6  x-9>75 x-10>83.3  x-11>91.6 x-12>100
 
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col.col-auto, 
//.col-auto {flex: 0 0 auto; width: auto ; max-width: none}
//.col-1    {flex: 0 0 8.333333%; max-width: 8.333333}

.col-sm-1, .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-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto,

/* 小屏: only small screen */
@media (min-width: 576px) {
  .col-sm {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-sm-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
}

.col-md-1, .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-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, 

/* 中屏: only middle screen */
@media (min-width: 768px) {
  .col-md {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-md-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
 }

.col-lg-1, .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-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto,
 
/* 大屏+: big screen */ 
@media (min-width: 992px) {
  .col-lg {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-lg-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
}

.col-xl-1, .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-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto 

@media (min-width: 1200px) {
  .col-xl {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-xl-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
}

//公用属性
{
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}


举例(电脑4列,手机2列)

class="col-lg-3  col-6"


显示问题:

class="d-none d-lg-block" //电脑显示,手机不显

/* 小屏: only small screen */
@media (max-width: 576px) {
  .hidden-sm {
    display: none !important;
  }
}
/* 中屏: only middle screen */
@media (min-width: 576px) and (max-width: 992px) {
  .hidden-md {
    display: none !important;
  }
}
/* 大屏+: big screen */
@media (min-width: 992px) {
  .hidden-lg {
    display: none !important;
  }
}


间距问题:

//x-auto>auto   x-0>0 x-1>0.5rem x-2>0.5rem x-3>1rem  x-4>1.5rem  x-5>3rem
//实例 p-1  pl-1     px(x轴方向)    py(y轴方向) 
@media (min-width: 576px)  m-sm-0    mt-sm-0    my-sm-0 
@media (min-width: 768px)  m-md-1    mt-md-1    my-md-1
@media (min-width: 992px)  m-lg-2    mt-lg-2    my-lg-2
@media (min-width: 1200px) m-xl-3    mt-xl-3    my-xl-3
//实例
.w-25 {width: 25% !important}
.w-50 
.w-75 
.w-100 
.h-25 
.h-50 
.h-75 
.h-100 

.mw-100 {
  max-width: 100% !important;
}
.mh-100 {
  max-height: 100% !important;
}


文字处理

.text-justify {
  text-align: justify !important;
}
//实现两端对齐文本效果

.text-nowrap {
  white-space: nowrap !important;
}
//文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis; //显示省略符号来代表被修剪的文本。
  white-space: nowrap;
}
.text-left {
  text-align: left !important;
}
.text-right {
  text-align: right !important;
}
.text-center {
  text-align: center !important;
}


打赏记录:该主题共收到 1笔打赏。

用户 时间 经验 金币 人民币
 八彩五月 04-07 0 0 9.99
最新回复 (2)
  • 已认证 八彩五月 7月前
    0 2
    每天总结。
返回
首页
插件
搜索