Bulma Tracy 小笔记

https://bulma.zcopy.site/

column

cd C:\Program Files\nginx
start nginx.exe ## 启动服务

55555

cd front-account
cd service-gateway
cd service-cms

cd front-group
cd service-group

yarn run dev

cd front-admin
cd front-conference
cd service-conference
cd front-journal
cd service-journal

布局
Section
<section class="section">
  <div class="content">
  </div>
</section>


column

<div class="columns">
  <div class="column is-one-fifth">1/5</div>
  <div class="column is-two-fifths">2/5</div>
  <div class="column">Auto</div>
</div>

<div class="columns is-multiline">
  <div class="column is-1">1/12 多行</div>
</div>

<div class="columns is-mobile">
   <div class="column is-1">1/12 on both PC and mobile</div>
</div>

<div class="columns">
   <div class="column is-1-fullhd is-1-widescreen">ibm-column-12-1-xlarge(1216~all)</div>
   <div class="column is-1-desktop">ibm-column-12-1-large(1024~1215)</div>
   <div class="column is-1-tablet">ibm-column-12-1-medium(769px~1023px)</div>
   <div class="column is-one-fifth-mobile">ibm-column-5-1-small(0~768)</div>
</div>

<div class="columns is-gapless">
   <div class="column">无间隙 is-gapless == is-0 (默认是 is-3, 最大是 is-8)</div>
</div>

<div class="columns is-0-desktop">
   <div class="column">基于不同浏览器宽度的可变间隙</div>
</div>

<div class="columns is-vcentered">
  <div class="column is-8">
    <p>和右边垂直对齐</p>
  </div>
  <div class="column">
    <p>Second column with more content. This is so you can see the vertical alignment.</p>
  </div>
</div>


<div class="columns is-centered">
  <div class="column is-half">
    居中列
  </div>
  <div class="column is-narrow">
    多列居中
  </div>
</div>

Visible

ibm-hidden-small: is-hidden-mobile
ibm-show-small: is-hidden-tablet

ibm-hidden-small ibm-hidden-medium : is-hidden-mobile is-hidden-tablet-only
ibm-hidden-large ibm-hidden-xlarge: is-hidden-desktop-only is-hidden-widescreen-only is-hidden-fullhd

ibm-left ~= is-pulled-left
ibm-right ~= is-pulled-right or "is-flex is-flex-direction-row is-justify-content-flex-end"

ibm-center： has-text-centered
ibm-center-block: mx-auto
两边对齐： is-flex is-flex-direction-row is-justify-content-space-between


mobile：小于等于768px
tablet：大于等于769px @media only screen and (max-width: 769px) {}
desktop：大于等于1024px
widescreen：大于等于1216px
fullhd：大于等于1408px


Elements:
Block
<div class="block">
  block 就是加了一句 .block:not(:last-child) {
  margin-bottom: 1.5rem;
}
</div>

Box
<div class="box">
  创建一个四周带圆角边框的白色盒子，盒子边带阴影
</div>

Button
<button class="button is-white">White Button</button>
<button class="button is-small">small Button</button>
<button class="button is-responsive">电脑端小按钮</button>
<button class="button is-rounded">圆滚按钮</button>
<button class="button is-loading">Loading</button>

Content
<div class="content is-small">
  内部都是小字
  is-medium 中字
  is-large 打字
</div>

Color
has-background-light
has-text-white
has-text-grey

字体变细
has-text-weight-light

字号
is-size-7

鼠标滑过
kxb-pointer: is-clickable

class="is-relative" == position: relative

padding marging 等

kxb-margin-bottom-0: mb-0
kxb-margin-top-0: mt-0

margin-left:  ml-1 ml-2
margin-right: mr-1
margin-left + margin-right: mx-3
margin-top + margin-bottom: my-3

kxb-padding-top-0: pt-0
kxb-padding-bottom-0:pb-0
padding-left + padding-right: px-1

Image
<figure class="image is-128x128">
  <img src="https://bulma.zcopy.site/images/placeholders/128x128.png" class="is-rounded 圆图"> 
</figure>  
不同 size
is-16x16
is-24x24
is-32x32
is-48x48
is-64x64
is-96x96
is-128x128
</figure>

Notification
<div class="notification">
  给文字加一个灰色的背景色，card 是圆润的边角
</div>
<div class="notification is-primary">
  is-primary 绿色背景
  is-link 紫色背景等
</div>



<h1 class="title is-1">Title 1 is-1~6  6个size</h1>
<h1 class="subtitle is-1">SubTitle 1 is-1~6  6个size</h1>
<p class="title is-1 is-spaced">Title 和下面的文字增加一些距离</p>

ibm-bold: has-text-weight-semibold
is-ghost: 沒有下划线



overlay
this.$modal.show(editor, {
        title: '课题组活动',
        isCard: true,
        hasFooter: true,
      });


this.$modal.show('删除此条评论将删除失去所有评论下回复，是否删除？', {
        isCard: true,
        hasFooter: true,
        confirmHandler: (close) => {
          this.deleteComment(comment).then(() => {
            close();
            this.$notice.success('删除成功!')
          });
        }
      })