Em 2011, o Twitter introduziu o framework Bootstrap. Desde então, esse framework CSS passou por duas grandes reescritas, com a mais recente (Bootstrap 3) lançada em 2013. O Bootstrap 3 transformou a biblioteca CSS implementando uma abordagem mobile-first que deixou o framework completamente responsivo.
A partir de 2022, o Bootstrap está na versão cinco e é um dos frameworks de front-end mais populares. Possui uma extensa lista de componentes pré-construídos e uma impressionante coleção de plugins JavaScript. Neste artigo, você aprenderá como usar o Bootstrap e aproveitar ao máximo seus recursos.
Instalando o Bootstrap em seu projeto
Existem três maneiras de use Bootstrap em seu projeto. Você pode baixar e hospedar os arquivos CSS e JavaScript, instalá-los em seu projeto usando npm ou copiar e colar os links cdn apropriados em seu projeto.
Com a abordagem cdn, você precisa se lembrar de colocar o link Bootstrap antes de qualquer outro link CSS na tag head do seu arquivo HTML.
Alguns componentes do Bootstrap possuem atividades funcionais, como alternância e posicionamento de botões que requerem a importação de JavaScript e script Popper. Portanto, se você pretende utilizar algum componente funcional, também precisará adicionar a tag de script ao seu arquivo HTML.
A última coisa que você precisa para começar a usar o Bootstrap é o janela de exibição marcação.
Como o Bootstrap é uma tecnologia mobile-first, o janela de exibição marcação ajudará no design responsivo. Uma maneira simples de usar bootstrap em seu projeto é apenas copiar Modelo inicial do Bootstrap.
Criando um site com Bootstrap
Quando você está criando um novo site, uma das primeiras coisas que você precisa considerar é o layout. Depois disso, você pode passar para outros componentes, como botões e tipografia.
Bootstrap tem uma coleção de componentes estruturais que você pode usar para organizar elementos em uma página da web. Essas estruturas de layout incluem:
- Containers
- Rede
- Colunas
- Calhas
- Pontos de interrupção
Usando uma versão ligeiramente alterada do modelo inicial do Bootstrap, você pode começar a delinear a estrutura da sua página da Web e adicionar novos componentes.
O arquivo index.html
Metatags obrigatóriasCSS de inicialização
Bootstrap
Separe o Popper e o Bootstrap JS
A classe de contêiner Bootstrap
O Bootstrap recipiente class pads, contém e alinha os elementos em sua página da web. Se você planeja usar o Bootstrap grade padrão, então você também precisará usar o Bootstrap's recipiente classe. Existem três tipos de recipiente Aulas; recipiente, fluido-contêiner, e container-{breakpoint}. A classe de contêiner é o contêiner padrão; ele é responsivo e tem uma largura de correção em cada um dos seis pontos de interrupção do Bootstraps.
Os seis pontos de interrupção padrão do Bootstrap incluem:
- Muito pequeno: Menos de 576px.
- Pequeno: Maior ou igual a 576px.
- Médio: Maior ou igual a 768px.
- Grande: Maior ou igual a 992px.
- Extra grande: Maior ou igual a 1200px.
- XX-Grande: Maior ou igual a 1400px.
Para usar o Bootstrap recipiente em seu projeto, você pode simplesmente adicionar a classe de contêiner desejada ao div em sua página da web.
Usando o Container do Bootstrap
coloque os elementos do site aqui A inserção do código acima no corpo do arquivo HTML existente tornará sua página da Web responsiva e também criará preenchimento em cada lado da página da Web.
O Sistema de Grade Bootstrap
A grade do Bootstrap usa um sistema de doze colunas que se baseia no fila e colo classes de grade, bem como a classe de contêiner. Cada linha tem doze colunas e qualquer elemento pode abranger uma ou mais dessas colunas. A classe de coluna indicará quantas colunas um elemento deve ocupar. Por exemplo, um elemento usando o col-2 classe se estenderá por duas colunas, um elemento usando o col-3 class se estenderá por três colunas e assim por diante.
O sistema de grade Bootstrap é baseado no módulo flexbox. Se apenas duas colunas ocuparem uma linha, elas dividirão o espaço igualmente entre si. O calha A classe é um dos elementos estruturais do Bootstrap e controla o espaçamento entre cada coluna no sistema de rede. Cada rede coluna tem 12px de preenchimento em ambos os lados.
Usando o sistema de grade do Bootstrap
conteúdo principal em uma página da web
Artigo
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae
obcaecati illo laboriosam a, voluptate molestias eum velit, distinctio impedit
ratione facere numquam, optio eligendi delectus cumque quos.
A inserção do código acima na div do contêiner criará um sistema de grade Bootstrap de três linhas e duas colunas. A primeira linha na parte superior conterá a barra de navegação, a terceira linha na parte inferior conterá o rodapé do site e a segunda linha no meio conterá o conteúdo da página da web. A segunda linha tem duas colunas — o artigo principal e um aparte.
Criar um arquivo CSS local e adicionar uma borda a cada seção da grade permitirá que você a veja com mais clareza.
O arquivo style.css
.fila{
borda: sólido azul de 2px;
}
.col, .col-sm-4{
borda: sólido vermelho de 2px;
}
Vincular ao arquivo CSS acima criará a seguinte saída em seu navegador:
Uma diferença óbvia na imagem acima é o tamanho das colunas. Normalmente, duas (ou mais) colunas em uma linha ocupam a mesma quantidade de espaço, a menos que você indique explicitamente o contrário. O col-sm-4 class no código HTML acima garante que a segunda coluna abranja apenas quatro das doze colunas na linha. O sm no col-sm-4 class representa o ponto de interrupção pequeno, portanto, a seção lateral ocupará apenas quatro colunas do ponto de interrupção pequeno e acima.
Componentes do Bootstrap
Depois de decidir o layout da sua página da Web, o próximo passo é adicionar elementos de construção de sites, que o Bootstrap chama de componentes. A lista de componentes do Bootstrap inclui:
- Barra de navegação
- Botões
- Grupo de botões
- Listar grupo
- Cartões
- Colapso
- Listas suspensas
A classe Bootstrap Navbar
Cada barra de navegação Bootstrap requer o barra de navegação classe. Eles também exigem o uso de
ou atribuindo a palavra-chave “navigation” ao Bootstrap Função atributo no pai da barra de navegação div. Para tornar a barra de navegação responsiva, você precisará usar o recolher o plug-in JavaScript.O Bootstrap barra de navegação classe usa um corrente de ária atributo que usa o valor "page" para indicar a página atual ou "true" para indicar a seção atual de uma página da web. O valor que você atribuir dependerá da estrutura do seu site (página única ou várias páginas). Você também deve usar o classe ativa para indicar a página ou seção atual.
Usando a barra de navegação do Bootstrap
Substituindo a navegação fila do Bootstrap rede com o código acima criará a seguinte saída em seu navegador:
Existem várias outras classes e atributos de Bootstrap importantes no código acima, como o navbar-marca classe, que tem como alvo a seção de logotipo do seu barra de navegação. O barra de navegação também é totalmente responsivo graças ao recolher o plug-in JavaScript.
Barra de navegação responsiva
Você deve se lembrar que o Bootstrap tem seis pontos de interrupção e um desses pontos de interrupção é grande (lg). O navbar-expand-lg classe no
acima se expande em uma lista horizontal de itens de navegação no ponto de interrupção grande e acima, e essa lista é revertida para um botão em qualquer ponto de interrupção abaixo do grande.Se você quiser saber mais sobre como criar sites responsivos, reunimos um artigo descrevendo como fazer isso com consultas de mídia em HTML e CSS.
O componente do botão Bootstrap
O Bootstrap botão componente usa o e requer que você defina o tipo atribuir a “botão”.
Bootstrap tem vários tipos de botões. Para criar o botão mais convencional, você usaria o botão btn class, mas para criar um botão de hambúrguer como no código acima, você usaria o barra de navegação classe.
Quando você deve usar o Bootstrap?
Bootstrap é conhecido como um dos frameworks CSS mais populares porque é um pioneiro. Muito antes do design responsivo ser tão comum no desenvolvimento de software, o Bootstrap se transformou em uma estrutura completamente responsiva.
Ao longo dos anos, o Bootstrap continuou avançando e melhorando, tornando-se a escolha número um para as principais empresas, como Twitter e Spotify. No entanto, nem sempre será a melhor opção para suas necessidades de desenvolvimento de software. Por exemplo, se você estiver criando um aplicativo React, há um sistema de design chamado MUI que é personalizado para aplicativos React.
O Material-UI tem um novo nome e tem como objetivo criar um novo sistema de design alternativo ao Material Design. Veja como você pode usar o MUI em projetos ReactJS.
Leia a seguir
- Programação
- Dicas de codificação
- Programação
- Ferramentas de programação
Kadeisha Kean é desenvolvedora de software full-stack e escritora técnica/tecnológica. Ela tem a habilidade distinta de simplificar alguns dos conceitos tecnológicos mais complexos; produzindo material que pode ser facilmente compreendido por qualquer novato em tecnologia. Ela é apaixonada por escrever, desenvolver softwares interessantes e viajar pelo mundo (através de documentários).
Assine a nossa newsletter
Junte-se à nossa newsletter para dicas de tecnologia, análises, e-books gratuitos e ofertas exclusivas!
Clique aqui para assinar
