插件名称 | vue-grid-sensitive |
---|---|
发布时间 | 2020年7月24日 |
插件作者 | andrelmlins |
基于Bootstrap框架的Vue.js响应网格系统。
v0.2.0(08/04/2020)
# Yarn
$ yarn add vue-grid-responsive
# NPM
$ npm i vue-grid-responsive --save
1.从响应vue-grid的组件中导入组件。
import Vue from 'vue';
import { Row, Column } from 'vue-grid-responsive';
2.注册组件。
Vue.component('row', Row);
Vue.component('column', Column);
3.用HTML创建一个响应式网格系统。
<row container gutter="{12}">
<column xs="{12}" md="{4}" lg="{3}">
xs=12 md=4 lg=3
</column>
<column xs="{12}" md="{4}" lg="{3}">
xs=12 md=4 lg=3
</column>
<column xs="{12}" md="{4}" lg="{3}">
xs=12 md=4 lg=3
</column>
<column xs="{12}" md="{4}" lg="{3}">
xs=12 md=4 lg=3
</column>
</row>
官网:https://github.com/andrelmlins/vue-grid-responsive
演示:https://www.vue365.cn/code_demo.php?id=1480
GitHub下载:https://github.com/andrelmlins/vue-grid-responsive/archive/master.zip