Skip to content

zoomla/bootstrapVue-cn

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation


Current version Bootstrap version Vue.js version Build status Dependencies status
Coverage Package quality npm downloads npm monthly downloads
Open Collective sponsors Open Collective backers Open Collective balance

Bootstrap-Vue 基于全球最流行的前端框架组合应用系统

项目介绍

BootstrapVue中文手册,由Bootstrap中文站(http://code.z01.com/v4 )官方团队翻译支持,一套将全球最流行的前端框架Bootstap与中国最流行的前端webpack库Vue完美结合的框架,精良翻译,服务国人。

Bootstrap是全球最流行的前端框架,基于twitter团队的奉献。 Vue是中国最火的webpack框架。 二者结合,诞生了BootstrapVue项目。

翻译团队:Zoomla!逐浪CMS

相关链接

BootStrap-Vue官方站:https://bootstrap-vue.org/

BootStrap-Vue官方Github库:https://github.com/bootstrap-vue/bootstrap-vue


BootStrap中文手册官方站:http://code.z01.com/bootstrap-vue

BootStrap中文手册Github官方库:https://github.com/zoomla/bootstrapVue-cn

BootStrap中文手册Gitee官方库:https://gitee.com/zoomla/Bootstrap-Vue

快速安装方法

npm i bootstrap-vue
#或者全栈生态
npm install vue bootstrap-vue bootstrap

快速使用

一个快速列偏移栅格示例:

<b-container fluid="xl" class="">
   <b-row>
   <b-col md="4" offset="2">left test
   </b-col>
   <b-col md="6">right test
   </b-col>
   </b-row>
</b-container>

图片引用方法:

<b-img src="../assets/images/name.png" alt=""></b-img>

button按钮引用方法:

<b-button variant="danger">Button</b-button>

form引用方法:

<b-form-input v-model="text" placeholder="Enter your name"></b-form-input>

nav头部导航引用:

   <b-navbar toggleable="lg" type="dark" variant="info">
   <b-navbar-brand href="#">NavBar</b-navbar-brand>
   <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
   <b-collapse id="nav-collapse" is-nav>
       <b-navbar-nav>
       <b-nav-item href="#">Link</b-nav-item>
       <b-nav-item href="#" disabled>Disabled</b-nav-item>
       </b-navbar-nav>
       <b-navbar-nav class="ml-auto">
       <b-nav-form>
       <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
       <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
      </b-nav-form>
      <b-nav-item-dropdown text="Lang" right>
          <b-dropdown-item href="#">EN</b-dropdown-item>
          <b-dropdown-item href="#">CN</b-dropdown-item>
      </b-nav-item-dropdown>
      <b-nav-item-dropdown right>
          <template v-slot:button-content>
          <em>User</em>
          </template>
          <b-dropdown-item href="#">Profile</b-dropdown-item>
          <b-dropdown-item href="#">Sign Out</b-dropdown-item>
      </b-nav-item-dropdown>
      </b-navbar-nav>
   </b-collapse>
   </b-navbar>

链接:

 <b-link href="#foo">Link</b-link>

输入框(input Group):

<div>
  <!-- Using props -->
  <b-input-group size="lg" prepend="$" append=".00">
    <b-form-input></b-form-input>
  </b-input-group>

  <!-- Using slots -->
  <b-input-group class="mt-3">
    <template v-slot:append>
      <b-input-group-text><strong class="text-danger">!</strong></b-input-group-text>
    </template>
    <b-form-input></b-form-input>
  </b-input-group>

  <!-- Using components -->
  <b-input-group prepend="Username" class="mt-3">
    <b-form-input></b-form-input>
    <b-input-group-append>
      <b-button variant="outline-success">Button</b-button>
      <b-button variant="info">Button</b-button>
    </b-input-group-append>
  </b-input-group>
</div>

表格用例:

<template>
  <div>
    <b-table striped hover :items="items"></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          { age: 89, first_name: 'Geneva', last_name: 'Wilson' },
          { age: 38, first_name: 'Jami', last_name: 'Carney' }
        ]
      }
    }
  }
</script>

下拉菜单:

<div>
  <b-dropdown id="dropdown-1" text="Dropdown Button" class="m-md-2">
    <b-dropdown-item>First Action</b-dropdown-item>
    <b-dropdown-item>Second Action</b-dropdown-item>
    <b-dropdown-item>Third Action</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item active>Active action</b-dropdown-item>
    <b-dropdown-item disabled>Disabled action</b-dropdown-item>
  </b-dropdown>
</div>

Zoomla!逐浪CMS团队卓越出品

CMS+AI智能+字库+图库全栈生态-->做中国最优秀的全栈门户服务商

Zoomla!逐浪CMS:中文业界alexa排名第一的CMS系统|专注.net与windows平台企业级研发,集成内容管理、webfont、商城、店铺、黄页、教育、考试、3D、三维全景、混合现实、CRM、ERP、OA、论坛、贴吧等为一体,打造国内高端的CMS产品典范。

官网:http://www.z01.com

免费下载:http://www.z01.com/mb

视频教程:http://www.z01.com/mtv

模板资源:http://www.z01.com/mb

zico中文图标库:http://ico.z01.com

Uni全球字码表:http://www.ziti163.com/uni

webfont: http://www.ziti163.com/webfont

字典: http://zd.ziti163.com

在线智写做字库: http://v.ziti163.com

方言语音项目: http://a.ziti163.com

智图: http://p.ziti163.com

QQ交流群号: 加入QQ群 加入QQ群 加入QQ群

官方QQ客服: 官方QQ客服1 官方QQ客服2

翻译日志

  • 20200201 启动翻译
  • 20200301 小米立同学加入
  • 20200425 正式完成翻译