作为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
作为Bootstrap中文站维护者-我们再次翻译BootstrapVue项目的更多相关文章
- 我花了 8 小时,"掌握"了一下 Flutter | Flutter 中文站上线
Hi,大家好,我是承香墨影! 距离 Google 在 2018 世界移动大会上发布 Flutter 的 Beta 版本,Flutter 是 Google 用以帮助开发者在 Android 和 iOS ...
- Twitter Bootstrap 中文帮助文档
http://wrongwaycn.github.io/bootstrap/docs/index.htmlTwitter Bootstrap 中文帮助文档 翻译得很不错~~~ 但是,还是要看英文文档 ...
- Bootstrap中文参考手册
Bootstrap是推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstrap提供了优雅的 ...
- InfoQ中文站特供稿件:Rust编程语言的核心部件
本文为InfoQ中文站特供稿件.首发地址为: http://www.infoq.com/cn/articles/rust-core-components .如需转载.请与InfoQ中文站联系. 原文发 ...
- 中文站最好WordPress主题,自媒体,博客,企业,商城主题一网打尽
时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform.W ...
- 《Dotnet9》系列之建站-中文站最好WordPress主题,自媒体,博客,企业,商城主题一网打尽
大家好,我是Dotnet9小编,一个从事dotnet开发8年+的程序员.本文介绍WordPress主题JustNews,本站Dotnet9既是使用WordPress + JustNews主题搭建而成的 ...
- 建站手册-浏览器信息:Mozilla 项目
ylbtech-建站手册-浏览器信息:Mozilla 项目 1.返回顶部 1. http://www.w3school.com.cn/browsers/browsers_mozilla.asp 2. ...
- DecimalFormat 中的 # 与 0 的区别(中文帮助文档中翻译可能是错误的)
想对数字进行格式化的时候,可能会使用到 java.text.DecimalFormat 类.中文帮助文档中,有如下符号 位置 本地化 含义 0 数字 是 阿拉伯数字 # 数字 是 阿拉伯数字,如果不存 ...
- sphinx中文入门指南 (转自sphinx中文站)
Sphinx中文入门指南 wuhuiming<blvming在gmail.com>,转载请注明来源和作者 最后修改:2010年1月23日 1.简介 1.1.Sphinx是什么 1.2.Sp ...
随机推荐
- P4480-[BJWC2018]餐巾计划问题【三分,贪心】
正题 题目链接:https://www.luogu.com.cn/problem/P4480 题目大意 \(n\)天,第\(i\)天需要\(a_i\)个餐巾. 每个餐巾价格为\(p\),使用完后有两种 ...
- python3之cx_Freeze使用(PyQt5)
1. cx_Freeze简介 Python脚本在装有Python的系统中可以直接双击运行,但绝大多数普通用户并没有配置此类环境,而编译为可执行二进制文件后,用户无需预先安装Python及依赖库即可 ...
- HTML的一些技巧
清除form表单 this.$refs.formName.resetFields() 验证表单 this.$refs.createForm.validate((valid) => {}) 当im ...
- 简单介绍session,cookie,token以及区别
Cookie简介 ①.是由服务器发给客户端的特殊信息,以文本的形式存放在客户端 ②.客户端再次请求的时候,会把Cookie回发给服务器 ③.服务器接收到后,会解析Cookie生成与客户端相对应的内容 ...
- Java到底怎么学?
你现在是不是想学Java,但很迷茫不知该从何下手,那么请认真看完这篇文章,希望对你有所帮助! 作为零基础刚刚接触Java的朋友们来说,我的建议还是先看视频,虽然有很多人说看视频学习慢,建议直接买优秀的 ...
- dev分支和release是什么
master(主分支) 存在一条主分支(master).所有用户可见的正式版本,都从master发布(也是用于部署生产环境的分支,确保master分支稳定性).主分支作为稳定的唯一代码库,不做任何开发 ...
- Django序列化页和过滤页规范
序列化类:serializers.py from rest_framework import serializers from goods.models import Goods, GoodsCate ...
- jmeter基础功能及认识
1.基础知识: JMeter是免费开源的,纯java开发的性能测试工具,可以测试静态和动态的资源,例如:静态文件.java服务小程序.CGI脚本.java对象.数据库.FTP服务器.邮件服务器和Per ...
- Convolutional Neural Network-week2编程题1(Keras tutorial - 笑脸识别)
本次我们将: 学习到一个高级的神经网络的框架,能够运行在包括TensorFlow和CNTK的几个较低级别的框架之上的框架. 看看如何在几个小时内建立一个深入的学习算法. 为什么我们要使用Keras框架 ...
- ruby基本图片上传
图片上传问题 在我们的项目里,需要实现海报的图片上传,便于更好地向外界展示一个社团活动的基本内容,但是在处理中间件相关问题时遇到了一点小小的挫折.不过这并不要紧,OSS对象存储服务固然好,但是本着交完 ...