作為Bootstrap中文站維護者-我們再次翻譯BootstrapVue項目

點擊立即進入BootstrapVue中文站 http://code.z01.com/bootstrap-Vue

Bootstrap-Vue 基於全球最流行的前端框架組合應用系統

項目介紹

BootstrapVue中文手冊，由Bootstrap中文站(http://code.z01.com/v4 ）官方團隊翻譯支持，一套將全球最流行的前端框架Bootstap與中國最流行的前端webpack庫Vue完美結合的框架，精良翻譯，服務國人。

Bootstrap是全球最流行的前端框架，基於twitter團隊的奉獻。
Vue是中國最火的webpack框架。
二者結合，誕生了BootstrapVue項目。

翻譯團隊：Zoomla!逐浪CMS

快速安裝方法

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產品典范。

點擊立即進入BootstrapVue中文站 http://code.z01.com/bootstrap-Vue