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>
<b-button variant="danger">Button</b-button>
<b-form-input v-model="text" placeholder="Enter your name"></b-form-input>
<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>
<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>
CMS+AI智能+字库+图库全栈生态-->做中国最优秀的全栈门户服务商
Zoomla!逐浪CMS:中文业界alexa排名第一的CMS系统|专注.net与windows平台企业级研发,集成内容管理、webfont、商城、店铺、黄页、教育、考试、3D、三维全景、混合现实、CRM、ERP、OA、论坛、贴吧等为一体,打造国内高端的CMS产品典范。
zico中文图标库:http://ico.z01.com
Uni全球字码表:http://www.ziti163.com/uni
webfont: http://www.ziti163.com/webfont
在线智写做字库: http://v.ziti163.com
方言语音项目: http://a.ziti163.com
- 20200201 启动翻译
- 20200301 小米立同学加入
- 20200425 正式完成翻译