bulmaCSS框架

<p class="is-size-7"> #文字大小，7是最小，1最大
class="box" #会形成卡片效果，且跟边框有间距
<hr> #分隔标签,中间会有线条

#弹性居中水平+锤子，加容器最小高度屏幕80%
class="is-flex" style="min-height: 80vh; align-items: center; justify-content: center;"
也可以这样：
class="is-flex is-justify-content-center" style="min-height: 80vh;"

#白色背景垂直居中也可以
class="notification"

#同行排版 靠左 中间 靠右内容

<div class="media">
    <div class="media-left">
        左边内容
    </div>
    <div class="media-content">
        居中内容									
    </div>
    <div class="media-right">
        靠右内容
    </div>
</div>

#同行，靠最左，和最右

<style>
    .is-flex {
        display: flex;
        justify-content: space-between;
    }
    .flex-left {
        text-align: left;
    }
    .flex-right {
        text-align: right;
    }
</style>

<div class="is-flex">
    <span class="flex-left">
        左边内容
    </span>
    <span class="flex-right">
        右边内容
    </span>
</div>

同行分左边和右边，移动端左右会自动换行

level: 主容器
level-left 左侧部分
level-right 右侧部分
level-item 左侧右侧内的元素

flask过滤器

{{ dingdan.jine|float }} #转换为浮点数，去掉小数最后的0

间距方法

style="margin-right: 0.3rem;

字体图标和文本不换行

<span class="icon-text">
    <span class="icon">
      <i class="fa fa-exclamation-triangle"></i>
    </span>
    <span>订单创建后，请在90分钟内付款，若超时，需重新提交订单</span>
  </span>

如果要将某个div水平居中

可以将它添加一个父元素columns is-centered
然后给它添加一个column，例如：

<div class="columns is-centered">
<div class="mx-2 column" style="max-width: 1230px;">
    这是居中的内容
</div>
</div>