自定义类-GJ-UI前端组件

发布时间::2018-06-03 09:25:00 已收录 阅读:525次

图片响应式:

给img加上 .gj-img 类即可;

<img src="images/gjui.jpg" class="gj-img" alt="" >

图片圆角:

给img加上 .img-yj 类即可;

<img src="images/gjui.jpg" class="img-yj" alt="" >

图片边框:

给img加上 .img-bk 类即可;

<img src="images/gjui.jpg" class="img-bk" alt="" >

图片圆形:

给img加上 .img-yx 类即可;

<img src="images/gjui.jpg" class="img-yx" alt="" >

内容居中:

给相应div加上 .gj-center 类即可;

<div class="gj-center">
    ...需要居中的内容部分
</div>

左浮动:

给相应div加上 .gj-left 类即可;

<div class="gj-left">
    ...需要左浮动的内容部分
</div

右浮动:

给相应div加上 .gj-right 类即可;

<div class="gj-right">
    ...需要右浮动的内容部分
</div

清除浮动:

给相应div加上 .gclear 类即可;

<div class="gclear">
    ...需要清除浮动的内容部分
</div

隐藏:

给相应div加上 .hidd 类即可;

<div class=".hidd">
    ...需要隐藏的内容部分
</div

显示:

给相应div加上 .show 类即可;

<div class="show">
    ...需要显示的内容部分
</div

响应式隐藏:

给相应div加上以下类即可:

.hidd-lg(大于等于1200px时隐藏)

.hidd-md(大于等于992px时隐藏)

.hidd-sm(屏幕大于等于768px时隐藏)

.hidd-xs(屏幕小于768px时隐藏)

<div class="hidd-lg">
    ...需要在大屏幕下隐藏的内容部分
</div>
<div class="hidd-md">
    ...需要在中等屏幕下隐藏的内容部分
</div>
<div class="hidd-sm">
    ...需要在平板屏幕下隐藏的内容部分
</div>
<div class="hidd-xs">
    ...需要在小屏幕下隐藏的内容部分
</div>