Introdução aos componentes de bootstrap
Originalmente chamado de Twitter Blueprint, isso foi desenvolvido por Mark Otto e Jacob Thronton no Twitter. O Bootstrap é uma estrutura CSS gratuita que transmite capacidade de resposta às páginas da web. Por capacidade de resposta, isso significa que diferentes elementos DOM se redimensionam de acordo com a alteração no tamanho da tela sem comprometer a elegância da página da Web, pois, de outra forma, aconteceria tradicionalmente com os métodos CSS de tamanho de pixel ou porcentagem.
Isso também é chamado de estrutura CSS 'mobile-first', pois é projetado para ter um layout CSS Grid, definindo as linhas e colunas. Essa estrutura também possui componentes JavaScript junto com classes CSS. Para utilizar essa estrutura, você deve vincular obrigatoriamente o jQuery e o JavaScript Framework for Bootstrap junto com os outros arquivos CSS do Bootstrap. Esses arquivos CSS estão disponíveis para download e também na forma de CDNs (Content Delivery Network).
Componentes diferentes de inicialização:
O Bootstrap é fornecido com dezenas de componentes que podem ser reutilizados para fornecer uma boa experiência do usuário e interações do usuário em uma página da web como barras de navegação, pop-ups, menus suspensos, ícones, botões, formulários pré-projetados e também opções de dimensionamento para diferentes elementos do DOM.
1) Glyphicons - Estes são os ícones em formato de fonte disponíveis no Bootstrap. Eles são cerca de 200 em número. Esses glyphicons podem ser encontrados em https://glyphicons.com.
Como usá-lo?
Existem glyphicons para indicar quase todas as ações, como zoom, editar, aviso, arquivo, excluir etc., e eles são definidos em uma classe individual. Portanto, você precisa usar a classe base e a classe individual, idealmente em um elemento span e usar esses glyphicons.
Sintaxe:
2) Dropdowns - Estes são os menus baseados em alternância que listam uma lista de links. Elas são dinamizadas pelo plug-in JS e podem ser encontradas em http: // getbootstrap / javascript / # dropdowns
Como usá-lo?
Você precisa usar a classe .dropdown, pois a classe do elemento tem os itens de lista nela com o menu .dropdown-class.
Sintaxe:
3) Grupos de botões - Com esse componente Bootstrap, você pode agrupar um conjunto de botões em uma série adjacente.
Como usá-lo?
Defina os elementos de divisão com a classe .btn-group e aninhe-os com o botão com a classe .btn. Corrigir
Errado
4) Menu suspenso de botões - Este componente é usado para empregar um elemento de botão para acionar um menu suspenso.
Sintaxe:
5) Grupos de entrada - Isso estende a classe de controle de formulário e adiciona texto ou botões nos dois lados de um campo de entrada de um elemento de entrada. Você precisa usar a classe .input-group com uma classe .input-group-addon para poder usar esses grupos de entrada.
Sintaxe:
@
6) Navbar - Esses componentes servem como cabeçalhos de navegação para o seu site. Eles são recolhidos para serem expandidos verticalmente com um menu de hambúrguer alternativo nos dispositivos de tamanhos de tela menores e se tornam horizontais conforme a largura da tela aumenta.
Sintaxe:
7) Jumbotron - Este é um componente de autoinicialização que pode se estender por toda a tela (ou janela de visualização) para mostrar algum conteúdo importante.
Sintaxe:
8) Alertas - Este é um componente do Bootstrap com um plug-in jQuery que fornece mensagens de feedback contextual, dependendo da ação do usuário. Isso é basicamente usado para exibir mensagens de alerta.
Sintaxe: …
9) Barras de progresso - Este componente é usado para fornecer os visuais sobre o feedback sobre o andamento do trabalho ou ação com uma barra de progresso.
Synatx:
Exemplo:
10) Distintivos - Este é um componente para destacar algo como itens não lidos, adicionando a classe .badge ao elemento DOM, de preferência um intervalo.
Sintaxe:
Mensagens 3
11) Paginação - Este componente fornece ao site paginação de várias páginas para que o conteúdo possa
seja dividido em várias páginas e navegue com facilidade. Normalmente, o elemento DOM para listas não ordenadas é definido com essa classe .pagination.
Sintaxe:
Como isso vai ajudar na sua carreira?
Todas as empresas estão agora focadas na interação do usuário e na experiência do usuário (UI / UX). Porque a grande maioria da população está usando dispositivos portáteis, como tablets e smartphones, que variam amplamente em termos de resolução de pixels e tamanho da tela. É por isso que é realmente importante ter o design de front-end que seja responsivo o suficiente para se ajustar a qualquer tipo de tela sem comprometer a elegância da página da web.
Portanto, ser qualificado no Bootstrap agregaria valor a você na carreira técnica e as empresas esperariam contratá-lo com um belo salário. E, por ser gratuito e de código aberto, há muitos escopos para você contribuir como desenvolvedor e torná-lo ainda melhor do que é hoje.
Conclusão-
A estrutura do Bootstrap é uma ferramenta muito útil para trazer capacidade de resposta às páginas da web. Os componentes explicados neste blog são alguns dos amplamente usados que ajudam a escrever menos código para obter mais funcionalidades e adicionar mais elegância à página da Web que você está construindo.
Artigos recomendados
Este foi um guia para os componentes do Bootstrap. Aqui também discutimos uma introdução e diferentes componentes do bootstrap, juntamente com sua sintaxe. Você também pode consultar nossos outros artigos sugeridos para saber mais -
- Como instalar o Bootstrap
- Angular vs Bootstrap
- Curso de Treinamento Bootstrap
- Perguntas da entrevista do Bootstrap
- Como usar o layout do Bootstrap?
- Os 5 principais tipos de Boostrap com código de exemplo