Desenvolvimento Web II

Notas de aula do prof. Eduardo da disciplina de Desenvolvimento Web II (curso técnico)

View on GitHub

Integração com o Bootstrap

O Bootstrap é um framework CSS que facilita a criação de interfaces web responsivas. Ele é muito utilizado em projetos web e é um dos frameworks mais populares do mercado.

O VueJS possui uma integração com o Bootstrap que facilita a criação de interfaces web com o Bootstrap.

Instalação

Para instalar o Bootstrap no projeto VueJS, basta executar o comando abaixo:

npm install bootstrap
npm install @popperjs/core

Configuração

Para configurar o Bootstrap no projeto VueJS, basta adicionar o código abaixo no arquivo main.js:

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap';

Uso

Para utilizar o Bootstrap no projeto VueJS, basta adicionar as classes CSS do Bootstrap nos elementos HTML.

Por exemplo, para criar um botão com o Bootstrap, basta adicionar a classe btn e a classe btn-primary no elemento button:

<button class="btn btn-primary">Botão</button>

Esse código acima pode ser utilizado em qualquer componente VueJS, no bloco template.

< Início Tutorial para formulário com Bootstrap >