揭秘Bootstrap Vue实战：10个实战Demo带你轻松入门界面设计

Bootstrap Vue 是一个基于 Bootstrap 4 的 Vue.js 框架，它允许开发者使用 Vue.js 的组件系统来构建响应式网页界面。通过使用 Bootstrap Vue，开发者可以快速构建美观、响应式的网页，同时保持代码的简洁和可维护性。本文将为你介绍 10 个实战 Demo，帮助你轻松入门界面设计。

Demo 1：基本布局

Bootstrap Vue 提供了丰富的布局组件，如容器（Container）、行（Row）和列（Col）。以下是一个简单的布局示例：

<template>
  <div>
    <b-container>
      <b-row>
        <b-col cols="12" md="6">
          <h1>标题</h1>
          <p>这是一段描述。</p>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

Demo 2：导航栏

导航栏是网页中常见的组件，Bootstrap Vue 提供了 b-navbar 组件来创建导航栏：

<template>
  <b-navbar toggleable="md" type="dark" variant="info">
    <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
    <b-collapse is-nav id="nav_collapse">
      <b-navbar-nav>
        <b-nav-item href="#">首页</b-nav-item>
        <b-nav-item href="#">关于</b-nav-item>
        <b-nav-item href="#">联系</b-nav-item>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</template>

Demo 3：表单

Bootstrap Vue 提供了丰富的表单组件，如输入框、单选按钮、复选框等。以下是一个简单的表单示例：

<template>
  <b-form>
    <b-form-group label="姓名" label-for="input-name">
      <b-form-input id="input-name" v-model="name" type="text" placeholder="请输入姓名"></b-form-input>
    </b-form-group>
    <b-form-group label="邮箱" label-for="input-email">
      <b-form-input id="input-email" v-model="email" type="email" placeholder="请输入邮箱"></b-form-input>
    </b-form-group>
    <b-button type="submit" variant="primary">提交</b-button>
  </b-form>
</template>

Demo 4：表格

Bootstrap Vue 提供了 b-table 组件来创建表格，以下是一个简单的表格示例：

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

<script>
export default {
  data() {
    return {
      fields: ['id', 'name', 'email'],
      items: [
        { id: 1, name: '张三', email: 'zhangsan@example.com' },
        { id: 2, name: '李四', email: 'lisi@example.com' }
      ]
    };
  }
};
</script>

Demo 5：模态框

模态框是 Bootstrap Vue 中常用的组件之一，以下是一个简单的模态框示例：

<template>
  <b-button @click="showModal = true">打开模态框</b-button>
  <b-modal title="标题" v-model="showModal">
    <p>这是一段描述。</p>
  </b-modal>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    };
  }
};
</script>

Demo 6：按钮

Bootstrap Vue 提供了丰富的按钮组件，如普通按钮、链接按钮、折叠按钮等。以下是一个简单的按钮示例：

<template>
  <b-button variant="primary">普通按钮</b-button>
  <b-button variant="outline-primary">链接按钮</b-button>
  <b-button v-b-toggle.collapse-1>折叠按钮</b-button>
  <b-collapse id="collapse-1">
    <b-card>折叠内容</b-card>
  </b-collapse>
</template>

Demo 7：轮播图

Bootstrap Vue 提供了 b-carousel 组件来创建轮播图，以下是一个简单的轮播图示例：

<template>
  <b-carousel>
    <b-carousel-slide img-src="image1.jpg"></b-carousel-slide>
    <b-carousel-slide img-src="image2.jpg"></b-carousel-slide>
    <b-carousel-slide img-src="image3.jpg"></b-carousel-slide>
  </b-carousel>
</template>

Demo 8：缩略图

Bootstrap Vue 提供了 b-thumbnail 组件来创建缩略图，以下是一个简单的缩略图示例：

<template>
  <b-row>
    <b-col cols="4">
      <b-thumbnail src="image1.jpg" alt="Image 1"></b-thumbnail>
    </b-col>
    <b-col cols="4">
      <b-thumbnail src="image2.jpg" alt="Image 2"></b-thumbnail>
    </b-col>
    <b-col cols="4">
      <b-thumbnail src="image3.jpg" alt="Image 3"></b-thumbnail>
    </b-col>
  </b-row>
</template>

Demo 9：下拉菜单

Bootstrap Vue 提供了 b-dropdown 组件来创建下拉菜单，以下是一个简单的下拉菜单示例：

<template>
  <b-dropdown text="下拉菜单">
    <b-dropdown-item href="#">选项 1</b-dropdown-item>
    <b-dropdown-item href="#">选项 2</b-dropdown-item>
    <b-dropdown-item href="#">选项 3</b-dropdown-item>
  </b-dropdown>
</template>

Demo 10：分页

Bootstrap Vue 提供了 b-pagination 组件来创建分页，以下是一个简单的分页示例：

<template>
  <b-pagination :total-rows="100" :per-page="10" v-model="currentPage"></b-pagination>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1
    };
  }
};
</script>

通过以上 10 个实战 Demo，相信你已经对 Bootstrap Vue 的界面设计有了初步的了解。在实际开发中，你可以根据自己的需求组合使用这些组件，构建出美观、响应式的网页界面。祝你在界面设计领域取得更好的成绩！

全部栏目