vue bootstrap_基于Bootstrap for Vue的响应式网格系统

vue bootstrap

Vue网格响应式 (Vue Grid Responsive)

Responsive grid system based on Bootstrap for Vue.

基于Bootstrap for Vue的响应网格系统。

View Demo 查看演示 Download Source 下载源

安装 (Installation)

NPM (NPM)

npm i vue-grid-responsive
// OR
yarn add vue-grid-responsive

CDN (CDN)

<script src="https://unpkg.com/vue-grid-responsive"></script>

手册 (Manual)

You can also download and import it manually

您也可以手动下载和导入

<script src="/vue-grid-responsive/dist/vue-grid-reponsive.min.js"></script>

模块导入 (Module import)

import Vue from 'vue';
import { Row, Column } from 'vue-grid-responsive';

Vue.component('row', Row);
Vue.component('column', Column);

例子 (Examples)

An example of how to use the library:

有关如何使用该库的示例：

<template>
  <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>
</template>

演示版 (Demo)

Local demo:

本地演示：

git clone https://github.com/andrelmlins/vue-grid-responsive.git
cd vue-grid-responsive
npm && npm run dev

物产 (Properties)

Component props:

组成道具：

行组件道具 (Row Component props)

Prop	Default	Type	Description
gutter	-	number	Grid spacing in the container
columns	12	number	Setting columns count in the container

Struts	默认	类型	描述
排水沟	--	数	容器中的网格间距
列	12	数	设置容器中的列数

列组件道具 (Column Component props)

Prop	Default	Type	Description
xs	-	number	Size in extra small screen
sm	-	number	Size in small screen
md	-	number	Size in medium screen
lg	-	number	Size in large screen
xl	-	number	Size in extra large screen

Struts	默认	类型	描述
xs	--	数	小屏幕尺寸
短信	--	数	小屏幕尺寸
md	--	数	中屏尺寸
lg	--	数	大屏幕尺寸
l	--	数	大屏幕尺寸

NPM统计 (NPM Statistics)

Download stats for this NPM package

下载此NPM软件包的统计信息

翻译自: https://vuejsexamples.com/responsive-grid-system-based-on-bootstrap-for-vue/

vue bootstrap