O que é Bootstrap?

Bootstrap, um framework CSS gratuito, é uma ferramenta de design de código aberto. Você pode facilmente criar diferentes temas e designs para seu telefone, tablet e computadores desktop que fazem seu site aparecer em proporção ao tamanho do seu dispositivo. Ao projetar com Bootstrap, que inclui todos os elementos necessários para um site, ele permite que você faça projetos adequados para todos os dispositivos usando esses elementos prontos. Isso significa que é muito fácil e prático criar um novo design com códigos prontos para tudo. O Bootstrap possui previamente integrados estilos, imagens e JavaScript.

Áreas de uso de bootstrap

Com o Bootstrap, que contém todos os elementos necessários para criar um site, você pode projetar um site completo como um todo. Itens tipográficos, carrosséis, tabelas, controles deslizantes, imagens, menus suspensos, janelas modais, barra de navegação, botões, paginação, miniaturas, tags e barras de carregamento, balões de informação, etc. O usuários vê os elementos prontos. Tudo o que você precisa fazer é copiar e colar o código de que precisa.

Como usar o Bootstrap?

Como o Bootstrap é um sistema pronto, você pode lidar com tudo copiando e colando. Mas, em primeiro lugar, há coisas que você deve fazer com o seu arquivo. Por exemplo; Sua página deve ser Html5 e você deve adicionar o arquivo CSS e o script jquery para Bootstrap à página. Sua referência para todos os itens que você usará em sua página será getbootstrap.com. Você irá copiar e colar os códigos necessários para você nos campos de Introdução, CSS, Componente e JavaScript no menu superior onde você entra no site.

A lógica de design básico do Bootstrap é que uma linha é dividida em 12 colunas e essas colunas podem ser reduzidas e esticadas de acordo com dispositivos de diferentes larguras. Assim, a forma como essas colunas são exibidas em diferentes dispositivos também pode ser alterada. Por exemplo, você está pensando em uma estrutura de coluna tripla para um dispositivo de tela grande. Se você dividir as 12 linhas oferecidas pelo Bootstrap em colunas de quatro, poderá criar uma estrutura de coluna tripla.

Se você deseja que as colunas se comportem de maneira diferente em dispositivos diferentes, você pode escrever essas larguras juntas no mesmo rótulo de classe, pois as colunas devem se comportar de acordo com o dispositivo a ser usado. Por exemplo; Com a classe .col-md-3 para computadores desktop, você pode querer que as linhas divididas em quatro apareçam como duas colunas duplas nos tablets. Em outras palavras, a linha que aparece como quatro colunas no computador desktop pode ser convertida em duas linhas nos tablets e você pode fazer com que se comporte como uma coluna dupla em cada linha.

Configuração de Página

No topo do site de amostra que iremos projetar, deve haver o menu principal na área do cabeçalho, um carrossel abaixo dele, uma área de coluna tripla abaixo dele e um rodapé abaixo dele. Primeiro, extraia os arquivos bootstrap-3.0.1-dist.zip e bootstrap-3.0.1.zip do zip, copie o arquivo index.html e cole-o na pasta bootstrap-3.0.1-dist para usar o exemplo na Navbar na pasta Exemplos como um modelo. No entanto, o design não aparecerá corretamente quando aberto pela primeira vez. Isso ocorre porque o link para o arquivo CSS não está no lugar certo. Salvamos os arquivos CSS e Bootstrap js no index.html que copiamos, excluindo a parte que os define nas duas pastas superiores. O modelo agora aparece quando o arquivo é aberto. A área do cabeçalho também está pronta. .jumbotron divi não é necessário, então o excluímos. Getbootstrap em andamento.

Cada código de slide no carrossel deve ser colocado na seção abaixo. Isso significa que temos que duplicar o código abaixo para cada slide. Se você tiver um conhecimento básico de HTML, poderá fazer essas edições facilmente. A classe.active necessária para o slide ativo deve existir apenas no primeiro div do slide, você deve excluí-la dos outros. Além disso, você deve editar o caminho do arquivo para imagens e o texto a ser usado no slide no código.

A seguir está o processo de adição de coluna tripla. Para isso, vamos ao site oficial e copiar e colar o código Componentes> Miniatura> Conteúdo Personalizado. Como queremos fazer uma coluna tripla, duplicamos o div na linha div. Assim, adicionamos a coluna tripla ao nosso site.

Para completar o site, basta adicionar o campo de rodapé. Para isso, copiamos o código da pasta Sticky Footer na pasta Exemplos que baixamos anteriormente e colamos onde queremos que apareça em nossa página. Nossa página está pronta agora.

Você também pode criar seu site em um tempo muito curto graças ao Bootstrap. No entanto, há um problema muito importante a ser considerado no Bootstrap. As dimensões de largura e altura das imagens nunca são escritas. O Bootstrap administra-se responsavelmente às dimensões da imagem e aumenta e diminui de acordo com o site que você prepara.

Gostou de saber o que é Bootstrap? Deixe seu comentário!

Leia mais:

Sistemas da Informação: Qual o salário? Quanto ganha um iniciante?

O que é Programação Orientada a Objetos (POO)?

You may also like...

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *