Você deseja criar facilmente aplicativos online impressionantes e responsivos? Com BootstrapVue, você pode criar rapidamente interfaces bonitas e fáceis de usar. Este kit de ferramentas de código aberto é baseado em Vue.js e Bootstrap, tornando-o ideal para o desenvolvimento de aplicativos web modernos. Este artigo cobre o básico para que você possa começar a usar esta estrutura poderosa.
BootstrapVue é uma estrutura de front-end de código aberto popular que combina Bootstrap (uma estrutura de UI de front-end) e vue.js (uma estrutura de JavaScript progressiva) para criar componentes de UI e aplicativos da web reutilizáveis.
Ele foi projetado para ser altamente personalizável, permitindo que os desenvolvedores modifiquem facilmente a aparência e o comportamento dos componentes para atender às necessidades específicas de seus projetos. Também inclui suporte para pré-processadores CSS como Sass e Less, facilitando a personalização do estilo dos componentes.
Por que usar BootstrapVue?
Desenvolvimento rápido: um dos principais motivos para usar o BootstrapVue é que ele fornece muitos componentes de UI pré-construídos (como botões, formulários, modais e dicas de ferramentas) que podem ser facilmente integrados ao seu aplicativo da web.
Grande comunidade: Outro benefício de usar o BootstrapVue é que ele possui uma comunidade grande e ativa de desenvolvedores que contribuem com a estrutura e fornecem suporte aos usuários.
Migração fácil: BootstrapVue permite que os desenvolvedores mudem facilmente de JavaScript nativo para Vue.js sem se preocupar com a forte dependência do Bootstrap em JQuery.
Integre BootstrapVue com Vue.js
A primeira etapa é criar um projeto Vue.js. Isso é essencial para você integrar o BootstrapVue. Crie um projeto Vue.js executando o seguinte comando no terminal.
vue create my-project
Nota: BootstrapVue atualmente não oferece suporte à versão estável do Vue.js 3. Você precisa integrá-lo com a compilação de migração vue2-3 para que isso funcione. No entanto, devido às limitações conhecidas deste método, isto não é recomendado. No entanto, você pode seguir as etapas aqui para criar um novo aplicativo usando a compilação de migração vue2-3.
https://v3-migration.vuejs.org/migration-build.html
Em seguida, navegue até o diretório do seu projeto com cd my-project. Agora você pode prosseguir para a integração do BootstrapVue. Existem duas maneiras de integrar o BootstrapVue ao seu projeto Vue.js:
Use um gerenciador de pacotes como NPM e Yarn
Use um link CDN
Use NPM ou Fio
Execute um dos seguintes comandos dependendo do gerenciador de pacotes que você está usando:
# With npm
npm install bootstrap bootstrap-vue
# With yarn
yarn add bootstrap bootstrap-vueusar um CDN
Visite o site do CdnJS para obter o link do CDN atual, abra o arquivo index.html na pasta pública e adicione o seguinte código:
<!-- Add Bootstrap and Bootstrap-Vue CSS in the <head> section -->
<link
rel="stylesheet"
href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.min.css"
/>
<!-- Add Vue and BootstrapVue scripts just before the closing </body> tag -->
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>O código acima irá puxar a versão minificada e mais recente de cada pacote para o nosso projeto, de forma limpa e simples!
Neste artigo, usaremos um gerenciador de pacotes. Vamos prosseguir com a configuração do pacote BootstrapVue instalado.
Configurar BootstrapVue
Para configurar o Bootstrap e o pacote BootstrapVue que acabamos de instalar. Dentro da pasta src, você encontrará o arquivo main.js. Importe BootstrapVue e seus arquivos CSS da seguinte forma:
import Vue from 'vue'
// Import BootstrapVue
import { BootstrapVue } from 'bootstrap-vue'
// Import Bootstrap and BootstrapVue CSS files ( ensure to follow the order)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)No código acima, registramos BootstrapVue no ponto de entrada da aplicação usando a função Vue.use() para que nossa aplicação possa reconhecê-lo.
Componentes BootstrapVue
Se você já usou o Bootstrap, sabe que ele usa alguns componentes pré-construídos. O mesmo vale para BootstrapVue. Os componentes BootstrapVue são desenvolvidos especificamente para Vue.js, tornando-os mais fáceis de usar e integrar em seus aplicativos Vue.js.
Alguns dos componentes populares do BootstrapVue incluem botões, formulários, modais, dicas de ferramentas, menus de navegação, carrosséis e muito mais. BootstrapVue também inclui alguns componentes exclusivos não disponíveis no Bootstrap padrão, como o componente BTable para criação de tabelas dinâmicas e interativas.
BootstrapVue também inclui uma série de classes utilitárias e mixin que podem personalizar ainda mais a aparência e o comportamento dos componentes. Isso torna possível criar sites e aplicativos altamente personalizados e exclusivos que se destacam da multidão.
Vamos explorar alguns componentes básicos do BootstrapVue, incluindo botões, formulários e cartões.
Botão de botões
BootstrapVue fornece uma variedade de componentes de botão que podem ser usados para criar diferentes tipos de botões com diferentes estilos e funções. O componente de botão mais básico é o botão b, que pode ser usado para criar um botão clicável simples.
Aqui está um exemplo:
<template>
<div class="m-5 d-flex justify-content-center">
-<b-button variant="primary">Click me!</b-button>
</div>
</template>;O código acima criará um botão primário com o texto “Clique em mim!” porque o atributo variante está definido como primário. Você pode alterar a cor e o estilo do botão especificando outros valores variantes, como perigo ou sucesso.
BootstrapVue também fornece outros componentes de botão que podem ser usados para criar menus suspensos, botões de alternância e muito mais. Você pode aprender mais sobre o componente de botão na documentação do BootstrapVue.
https://bootstrap-vue.org/docs/components/button
Formulário de formulários
BootstrapVue fornece vários componentes de formulário que podem ser usados para criar formulários com diferentes tipos de campos de entrada, rótulos e validações. O componente mais básico do formulário é o b-form-input, que pode ser usado para criar campos de entrada de texto simples.
Aqui está um exemplo:
<template>
<div class="m-5">
<b-form @submit="onSubmit" @reset="onReset" v-if="show">
<b-form-group
id="input-group-1"
label="Email address:"
label-for="input-1"
description="We'll never share your email with anyone else."
>
<b-form-input
id="input-1"
v-model="form.email"
type="email"
placeholder="Enter email"
required
></b-form-input>
</b-form-group>
<b-form-group id="input-group-2" label="Your Name:" label-for="input-2">
<b-form-input
id="input-2"
v-model="form.name"
placeholder="Enter name"
required
></b-form-input>
</b-form-group>
<b-form-group id="input-group-3" label="Food:" label-for="input-3">
<b-form-select
id="input-3"
v-model="form.food"
:options="foods"
required
></b-form-select>
</b-form-group>
<b-form-group id="input-group-4" v-slot="{ ariaDescribedby }">
<b-form-checkbox-group
v-model="form.checked"
id="checkboxes-4"
:aria-describedby="ariaDescribedby"
>
<b-form-checkbox value="me">Check me out</b-form-checkbox>
<b-form-checkbox value="that">Check that out</b-form-checkbox>
</b-form-checkbox-group>
</b-form-group>
<b-button type="submit" variant="primary">Submit</b-button>
<b-button type="reset" variant="danger">Reset</b-button>
</b-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
email: "",
name: "",
food: null,
checked: [],
},
foods: [
{ text: "Select One", value: null },
"Carrots",
"Beans",
"Tomatoes",
"Corn",
],
show: true,
};
},
methods: {
onSubmit(event) {
event.preventDefault();
alert(JSON.stringify(this.form));
},
onReset(event) {
event.preventDefault();
// Reset our form values
this.form.email = "";
this.form.name = "";
this.form.food = null;
this.form.checked = [];
// Trick to reset/clear native browser form validation state
this.show = false;
this.$nextTick(() => {
this.show = true;
});
},
},
};
</script>O código acima criará um formulário simples solicitando o e-mail, o nome e as opções alimentares do usuário. Podemos personalizar este formulário quantas vezes quisermos.
BootstrapVue fornece outros componentes de formulário que podem ser usados para criar botões de opção, caixas de seleção, menus suspensos, etc. Ele fornece funcionalidade de validação de formulário por meio da diretiva v-validate, dos componentes ValidationProvider e ValidationObserver.
Cartões
BootstrapVue fornece uma variedade de componentes de cartão que podem ser usados para estilizar texto, títulos e imagens. O componente mais básico do cartão é o cartão b, que pode ser usado para exibir imagens, títulos e texto.
<template>
<div class="m-5 d-flex justify-content-center">
<b-card
title="Card Title"
img-src="https://images.unsplash.com/photo-1653387137517-fbc54d488ed8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fHZ1ZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60"
img-alt="Image"
img-top
tag="article"
style="max-width: 20rem"
class="mb-2"
>
<b-card-text>
You can add some text in your card to suit your use case
</b-card-text>
<b-button href="#" variant="primary">Go somewhere</b-button>
</b-card>
</div>
</template>O código acima usará o componente b-card para criar um componente de cartão com imagem, título e algum texto.
BootstrapVue fornece outros componentes de cartão que podem ser usados para criar títulos, parágrafos, listas e muito mais. BootstrapVue também fornece um sistema de classes utilitárias para estilos relacionados a cartões, e você pode aplicar estilos comuns como cor do texto, espessura da fonte e alinhamento do texto.
componentes avançados
Modais
As caixas modais são uma forma popular de exibir conteúdo na página atual. BootstrapVue fornece um componente que pode ser usado para criar modais com diversas funções, como mostrar/ocultar o modal, alterar seu tamanho e adicionar conteúdo personalizado.
<template>
<div
class="d-flex justify-content-center align-items-center"
style="height: 100vh"
>
<b-button variant="primary" @click="showModal = true">Open Modal</b-button>
<b-modal v-model="showModal" title="My Modal">
<p>Hello, world!</p>
</b-modal>
</div>
</template>
<script>
export default {
data() {
return {
showModal: false,
};
},
};
</script>O código acima criará um botão que, ao ser clicado, exibirá uma caixa de diálogo modal com o título "My Modal Box" e o texto "Hello World!".
BootstrapVue também fornece outros componentes relacionados a modais que podem ser usados para criar caixas de diálogo de confirmação, modais roláveis e muito mais. BootstrapVue também fornece eventos que acionam ações antes e depois do modal ser mostrado ou oculto.
Carrosséis
Um carrossel (apresentação de slides) é uma forma popular de exibir uma série de imagens ou outro conteúdo em um carrossel giratório. BootstrapVue fornece um componente que pode ser usado para criar carrosséis com vários recursos, como reprodução automática, controles de navegação e indicadores.
<template>
<div
class="d-flex justify-content-center align-items-center"
style="height: 100vh"
>
<b-carousel
id="carousel-1"
v-model="slide"
:interval="4000"
controls
indicators
background="#ababab"
img-width="1024"
img-height="480"
style="text-shadow: 1px 1px 2px #333"
@sliding-start="onSlideStart"
@sliding-end="onSlideEnd"
class="w-75"
>
<!-- Text slides with image -->
<b-carousel-slide
caption="Our First slide"
text="A beautiful day in the streets"
img-src="https://picsum.photos/1024/480/?image=57"
></b-carousel-slide>
<!-- Slides with custom text -->
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=62">
<h1>Welcome to BootstrapVue</h1>
</b-carousel-slide>
<!-- Slides with just an image -->
<b-carousel-slide
text="my text"
img-src="https://picsum.photos/1024/480/?image=64"
></b-carousel-slide>
<!-- Slides with img slot -->
<!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
<b-carousel-slide>
<template #img>
<img
class="d-block img-fluid w-100"
width="1024"
height="480"
src="https://picsum.photos/1024/480/?image=50"
alt="image slot"
/>
</template>
</b-carousel-slide>
</b-carousel>
</div>
</template>Este código criará um carrossel com três slides, cada um contendo uma imagem e um título. BootstrapVue também fornece outros componentes relacionados ao carrossel que podem ser usados para criar transições de slides, transições de fade e fornecer eventos que podem acionar ações antes e depois de cada slide ser exibido.
dica de ferramenta
As dicas de ferramentas são uma forma popular de exibir informações adicionais quando um usuário passa o mouse sobre um elemento. BootstrapVue fornece um componente b-tooltip que pode ser usado para criar dicas de ferramentas com vários recursos, como alterar posição, adicionar conteúdo personalizado e controlar quando as dicas de ferramentas são exibidas.
<template>
<div
class="d-flex justify-content-center align-items-center"
style="height: 100vh"
>
<b-button variant="primary" v-b-tooltip.hover.top="'Hello, world!'"
>Hover me!</b-button
>
</div>
</template>Este código criará um botão que, ao passar o mouse, exibirá uma dica de ferramenta com o texto "Olá, mundo!".
BootstrapVue também fornece outros componentes relacionados a dicas de ferramentas que podem ser usados para criar dicas de ferramentas com conteúdo HTML, mostrar/ocultar dicas de ferramentas programaticamente, etc.
Componentes BootstrapVue personalizados
Os componentes personalizados do BootstrapVue permitem ajustar a aparência e o comportamento dos componentes de acordo com suas necessidades específicas. Agora, vamos usar um exemplo para aprender como customizar dois componentes do BootstrapVue: botão e modal.
botão personalizado
BootstrapVue oferece muitas opções de personalização para botões, como alterar tamanho, cor e forma e adicionar classes ou estilos personalizados.
Aqui está um exemplo de uso da classe BootstrapVue para alterar a cor e o formato de um botão:
<template>
<div class="m-5">
<b-button variant="primary" class="rounded-pill"
>Primary Pill Button</b-button
>
<b-button variant="danger" class="rounded-0">Danger Square Button</b-button>
</div>
</template>Este código criará dois botões, um com a cor primária e formato de círculo, e outro com cor de perigo e formato quadrado. As classes round-pil e round-0 são classes BootstrapVue que controlam o raio da borda do botão.
Você também pode adicionar uma classe ou estilo personalizado ao botão usando o atributo class ou style
<template>
<div class="m-5 d-flex justify-content-center">
<b-button
variant="success"
class="my-custom-class"
style="font-size: 1.2rem"
>Customized Button</b-button
>
</div>
</template>Este código criará um botão de sucesso com a classe personalizada my-custom-class e o estilo personalizado font-size: 1.2rem;.
modal personalizado
BootstrapVue oferece muitas opções de personalização para caixas modais, como alterar tamanho, posição, plano de fundo e adicionar conteúdo ou estilos personalizados.
Aqui está um exemplo que usa propriedades BootstrapVue para alterar o tamanho e a posição do modal:
<template>
<div
class="d-flex justify-content-center align-items-center"
style="height: 100vh"
>
<b-button variant="primary" @click="showModal = true">Open Modal</b-button>
<b-modal v-model="showModal" title="My Modal" size="lg" centered>
<p>Hello, world!</p>
</b-modal>
</div>
</template>
<script>
export default {
data() {
return {
showModal: false,
};
},
};
</script>Ao ser clicado, este código criará um botão que exibirá uma caixa de diálogo modal intitulada "Minha Caixa Modal" com o texto "Olá, Mundo!", de tamanho grande e posição centralizada.
Você também pode adicionar conteúdo ou estilos personalizados à caixa modal usando slots ou o atributo style
<template>
<div class="d-flex justify-content-center m-5">
<b-button variant="primary" @click="showModal = true">Open Modal</b-button>
<b-modal v-model="showModal" title="My Modal">
<template #default>
<h2>Custom Heading</h2>
<p>This is some custom content.</p>
</template>
<template #modal-footer="{ ok }">
<b-button @click="ok()">Custom OK Button</b-button>
</template>
<template #modal-body="{ css }">
<p :style="css">This paragraph has custom CSS.</p>
</template>
</b-modal>
</div>
</template>
<script>
export default {
data() {
return {
showModal: false,
};
},
};
</script>Este código criará uma caixa de diálogo modal com título e conteúdo personalizados, um botão OK e um parágrafo com CSS personalizado.
Estilizando com BootstrapVue
BootstrapVue fornece recursos de estilo poderosos que permitem usar CSS facilmente para adicionar estilos aos componentes. Neste artigo, explicaremos como usar CSS para estilizar componentes BootstrapVue.
estilo de componente
Os componentes do BootstrapVue vêm com um conjunto de estilos padrão que você pode personalizar facilmente. Você pode aplicar estilos adicionando atributos de classe ou estilo aos componentes:
<template>
<div class="m-5">
<b-button
variant="primary"
class="my-custom-class"
style="background-color: red"
>Custom Button</b-button
>
</div>
</template>No código acima, adicionamos uma classe personalizada my-custom-class e um estilo personalizado background-color: red ao botão. Isso mudará a cor de fundo do botão para vermelho.
Pré-processador CSS
BootstrapVue também suporta o uso de pré-processadores CSS como Sass e Less. Use pré-processadores para escrever código CSS mais poderoso e modular. Para usar um pré-processador com BootstrapVue, basta incluir o arquivo do pré-processador em seu projeto e importá-lo para seu código:
/* In your main.scss file */
@import "~bootstrap/scss/bootstrap";
@import "~bootstrap-vue/src/index.scss";Depois que os arquivos do pré-processador forem importados, você poderá usar suas funções para estilizar os componentes. Por exemplo, no Sass você pode usar variáveis para definir cores e outras propriedades:
$primary-color: #007bff;
.custom-button {
background-color: $primary-color;
border-radius: 0.25rem;
}Neste exemplo, definimos uma variável para representar a cor primária e a usamos para estilizar um botão de uma classe personalizada. Isso dará ao botão uma cor de fundo #007bff (a cor principal) e um raio de borda de 0,25rem.
estilo de escopo
Às vezes, você pode querer aplicar estilos a um componente, mas deseja que esses estilos afetem apenas esse componente e não outros componentes na página. Nesses casos, você pode usar estilos com escopo definido, que se aplicam somente a um componente específico e seus filhos.
Para usar estilos com escopo no BootstrapVue, você pode adicionar o atributo com escopo à tag <style> do componente
<template>
<div class="m-5">
<b-button variant="primary" class="my-custom-class m-2"
>Custom Button</b-button
>
<b-button variant="primary">Custom Button</b-button>
<b-button variant="primary">Custom Button</b-button>
</div>
</template>
<style scoped>
.my-custom-class {
background-color: red;
}
</style>Neste exemplo, adicionamos o atributo com escopo à tag <style> e definimos estilos para a classe my-custom-class. Este estilo será aplicado apenas ao botão neste componente, e não a outros botões da página.
Terminar
Neste artigo, cobrimos os fundamentos do BootstrapVue, incluindo instalação e configuração, configuração e uso. Exploramos alguns componentes principais, como botões, modais, dicas de ferramentas e muito mais.
BootstrapVue é uma ferramenta poderosa que ajuda os desenvolvedores a criar aplicativos da web bonitos e responsivos de maneira rápida e fácil. Esteja você criando um site simples ou um aplicativo da Web complexo, ele pode ajudá-lo a começar e facilitar a criação de interfaces de usuário.
Devido ao espaço limitado do artigo, o conteúdo de hoje será compartilhado aqui. Ao final do artigo, gostaria de lembrar que a criação de artigos não é fácil. Se você gosta do meu compartilhamento, não se esqueça de curta e encaminhe, para que mais pessoas necessitadas vejam. Ao mesmo tempo, se você deseja adquirir mais conhecimento em tecnologia front-end, seja bem-vindo para me seguir, seu apoio será a maior motivação para eu compartilhar. Continuarei produzindo mais conteúdo, fique ligado.
Benefícios para os fãs
Compartilhe o código-fonte de 9 modelos de cartão TailwindCSS comumente usados, se você gostar, baixe-o e colete-o