Bootstrap é uma estrutura de front-end móvel elegante, intuitiva e poderosa para desenvolvimento web mais rápido e fácil. Ele usa HTML, CSS e Javascript.

O bootstrap pode ser usado como -

  • Mobile first approach - Desde o Bootstrap 3, a estrutura consiste em primeiros estilos móveis em toda a biblioteca, em vez de em arquivos separados.

  • Browser Support - É compatível com todos os navegadores populares.

  • Easy to get started- Com apenas o conhecimento de HTML e CSS, qualquer pessoa pode começar a usar o Bootstrap. Além disso, o site oficial do Bootstrap possui uma boa documentação.

  • Responsive design - O CSS responsivo do Bootstrap se ajusta a desktops, tablets e dispositivos móveis.

  • Fornece uma solução limpa e uniforme para construir uma interface para desenvolvedores.

  • Ele contém componentes embutidos bonitos e funcionais que são fáceis de personalizar.

  • Ele também fornece personalização baseada na web.

  • E o melhor de tudo é um código aberto.

O pacote de bootstrap inclui -

  • Scaffolding- Bootstrap fornece uma estrutura básica com sistema de grade, estilos de link, plano de fundo. Isso é abordado em detalhes na seçãoBootstrap Basic Structure

  • CSS- Bootstrap vem com recurso de configurações CSS globais, elementos HTML fundamentais estilizados e aprimorados com classes extensíveis e um sistema de grade avançado. Isso é abordado em detalhes na seçãoBootstrap with CSS.

  • Components- Bootstrap contém mais de uma dúzia de componentes reutilizáveis ​​construídos para fornecer iconografia, menus suspensos, navegação, alertas, popovers e muito mais. Isso é abordado em detalhes na seçãoLayout Components.

  • JavaScript Plugins- Bootstrap contém mais de uma dúzia de plug-ins jQuery personalizados. Você pode incluir todos eles facilmente ou um por um. Isso é abordado em detalhes na seçãoBootstrap Plugins.

  • Customize - Você pode personalizar os componentes do Bootstrap, variáveis ​​LESS e plug-ins jQuery para obter sua própria versão.

As classes contextuais permitem que você altere a cor de fundo das linhas da sua tabela ou células individuais.

Sr. Não. Classe e descrição
1

.active

Aplica a cor flutuante a uma determinada linha ou célula
2

.success

Indica uma ação bem-sucedida ou positiva
3

.warning

Indica um aviso que pode precisar de atenção
4

.danger

Indica uma ação perigosa ou potencialmente negativa

O bootstrap inclui um primeiro sistema de grade de fluido móvel responsivo que dimensiona apropriadamente até 12 colunas conforme o tamanho do dispositivo ou janela de visualização aumenta. Inclui classes predefinidas para opções fáceis de layout, bem como mixins poderosos para gerar layouts mais semânticos.

As consultas de mídia no Bootstrap permitem mover, mostrar e ocultar o conteúdo com base no tamanho da janela de visualização.

A seguir está a estrutura básica da grade Bootstrap -

<div class = "container">
   <div class = "row">
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>      
   </div>
   
   <div class = "row">...</div>
</div>
<div class = "container">....

Os deslocamentos são um recurso útil para layouts mais especializados. Eles podem ser usados ​​para empurrar colunas para mais espaçamento, por exemplo. As classes .col-xs = * não oferecem suporte a deslocamentos, mas são facilmente replicadas usando uma célula vazia.

Você pode alterar facilmente a ordem das colunas de grade integradas com as classes modificadoras .col-md-push- * e .col-md-pull- * onde * variam de 1 a 11.

O Bootstrap 3 permite tornar as imagens responsivas adicionando uma classe .img-responsive à tag <img>. Esta classe aplica-se à largura máxima: 100%; e altura: automático; à imagem para que ela seja bem dimensionada para o elemento pai.

Bootstrap define uma exibição global básica (plano de fundo), tipografia e estilos de link -

  • Basic Global display- Define a cor de fundo: #fff; no elemento <body> .

  • Typography- Usa os atributos @ font-family-base , @ font-size-base e @ line-height-base como a base tipográfica

  • Link styles- Define a cor global do link por meio de attribute @ link-color e aplica sublinhados de link apenas em : hover .

Bootstrap usa Normalize para estabelecer consistência entre navegadores.

Normalize.css é uma alternativa moderna e pronta para HTML5 para redefinições de CSS. É um pequeno arquivo CSS que fornece melhor consistência entre navegadores no estilo padrão dos elementos HTML.

Para adicionar alguma ênfase a um parágrafo, adicione class = "lead". Isso lhe dará um tamanho de fonte maior, peso mais leve e uma altura de linha mais alta

Bootstrap oferece suporte a listas ordenadas, listas não ordenadas e listas de definição.

  • Ordered lists - Uma lista ordenada é uma lista que se enquadra em algum tipo de ordem sequencial e é precedida por números.

  • Unordered lists- Uma lista não ordenada é uma lista que não possui uma ordem específica e é tradicionalmente estilizada com marcadores. Se você não quiser que os marcadores apareçam, você pode remover o estilo usando a classe .list-unstyled . Você também pode colocar todos os itens da lista em uma única linha usando a classe .list-inline .

  • Definition lists- Neste tipo de lista, cada item da lista pode consistir nos elementos <dt> e <dd>. <dt> significa termo de definição e, como um dicionário, este é o termo (ou frase) que está sendo definido. Posteriormente, o <dd> é a definição de <dt>.

    Você pode fazer termos e descrições em linha <dl> lado a lado usando a classe dl-horizontal .

Glyphicons são fontes de ícones que você pode usar em seus projetos da web. Halflings de Glyphicons não são gratuitos e requerem licenciamento, no entanto, seu criador os disponibilizou para projetos Bootstrap gratuitamente.

Para usar os ícones, basta usar o código a seguir em qualquer lugar em seu código. Deixe um espaço entre o ícone e o texto para o preenchimento adequado.

<span class = "glyphicon glyphicon-search"></span>

O plug-in de transição oferece efeitos de transição simples, como deslizamento ou desvanecimento nos modais.

Um modal é uma janela filho que é colocada em camadas sobre sua janela pai. Normalmente, o objetivo é exibir o conteúdo de uma fonte separada que pode ter alguma interação sem sair da janela principal. As janelas filhas podem fornecer informações, interação ou mais.

Você pode alternar o conteúdo oculto do plugin suspenso -

  • Via data attributes - Adicionar data-toggle = "dropdown" a um link ou botão para alternar uma lista suspensa conforme mostrado abaixo -

<div class = "dropdown">
   <a data-toggle = "dropdown" href = "#">Dropdown trigger</a>
   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
    ...
   </ul>
</div>

  • Se você precisar manter os links intactos (o que é útil se o navegador não estiver habilitando o JavaScript), use o data-target atributo em vez de href="#" -

<div class = "dropdown">
   <a id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html">
      Dropdown 
    
      <span class = "caret"></span>
   </a>
    
   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
      ...
   </ul>
	
</div>

  • Via JavaScript - Para chamar o botão suspenso via JavaScript, use o seguinte método -

$('.dropdown-toggle').dropdown()

O carrossel Bootstrap é uma maneira flexível e responsiva de adicionar um controle deslizante ao seu site. Além de ser responsivo, o conteúdo é flexível o suficiente para permitir imagens, iframes, vídeos ou qualquer tipo de conteúdo que você desejar.

Os grupos de botões permitem que vários botões sejam empilhados em uma única linha. Isso é útil quando você deseja colocar itens como botões de alinhamento juntos.

A classe .btn-group é usada para um grupo básico de botões. Envolva uma série de botões com class .btn em .btn-group.

.btn-toolbar ajuda a combinar conjuntos de <div class = "btn-group"> em uma <div class = "btn-toolbar"> para componentes mais complexos.

As classes .btn-group-lg, .btn-group-sm, .btn-group-xs podem ser aplicadas ao grupo de botões em vez de redimensionar cada botão.

.btn-group-vertical class faz um conjunto de botões aparecer verticalmente empilhado ao invés de horizontalmente.

Os grupos de entrada são controles de formulário estendidos . Usando grupos de entrada, você pode facilmente preceder e acrescentar texto ou botões às entradas baseadas em texto.

Ao adicionar conteúdo pré-anexado e anexado a um campo de entrada, você pode adicionar elementos comuns à entrada do usuário. Por exemplo, você pode adicionar o símbolo do dólar, o @ para um nome de usuário do Twitter ou qualquer outra coisa que possa ser comum para a interface do seu aplicativo.

Para preceder ou acrescentar elementos a um .form-control -

  • Envolva-o em um <div> com classe .input-group

  • Como uma próxima etapa, dentro do mesmo <div>, coloque seu conteúdo extra dentro de um <span> com classe .input-group-addon.

  • Agora coloque este <span> antes ou depois do elemento <input>.

Para criar um menu de navegação com guias -

  • Comece com uma lista básica não ordenada com a classe base de .nav.
  • Adicione class .nav-tabs.

Para criar um menu de navegação de pílulas -

  • Comece com uma lista básica não ordenada com a classe base de .nav.
  • Adicione class .nav-pills.

Você pode empilhar os comprimidos verticalmente usando a classe .nav-stacked junto com as classes: .nav, .nav-pills.

O navbar é um dos recursos proeminentes dos sites Bootstrap. As barras de navegação são 'meta' componentes responsivos que servem como cabeçalhos de navegação para seu aplicativo ou site. As barras de navegação diminuem em visualizações móveis e se tornam horizontais conforme a largura da janela de visualização disponível aumenta. Em seu núcleo, a barra de navegação inclui estilo para nomes de sites e navegação básica.

Para criar uma barra de navegação padrão -

  • Adicione as classes .navbar, .navbar-default à tag <nav>.

  • Adicione role = "navigation" ao elemento acima, para ajudar na acessibilidade.

  • Adicione uma classe de cabeçalho .navbar-header ao elemento <div>. Inclui um elemento <a> com a classe navbar-brand. Isso dará ao texto um tamanho um pouco maior.

  • Para adicionar links à barra de navegação, basta adicionar uma lista não ordenada com as classes de .nav, .navbar-nav.

Breadcrumbs são uma ótima maneira de mostrar informações baseadas em hierarquia para um site. No caso de blogs, breadcrumbs podem mostrar as datas de publicação, categorias ou marcas. Eles indicam a localização da página atual dentro de uma hierarquia de navegação.

Um breadcrumb no Bootstrap é simplesmente uma lista não ordenada com uma classe de .breadcrumb. O separador é adicionado automaticamente por CSS (bootstrap.min.css).

A classe .pagination é usada para adicionar a paginação em uma página.

Você pode personalizar os links usando .disabled para links não clicáveis ​​e .active para indicar a página atual.

Rótulos de bootstrap são ótimos para oferecer contagens, dicas ou outras marcações para páginas. Use class .label para exibir rótulos.

Os emblemas são semelhantes aos rótulos; a principal diferença é que os cantos são mais arredondados. Os emblemas são usados ​​principalmente para destacar itens novos ou não lidos. Para usar emblemas, basta adicionar <span class = "badge"> aos links, navs Bootstrap e muito mais.

Como o nome sugere, este componente pode opcionalmente aumentar o tamanho dos títulos e adicionar uma grande margem para o conteúdo da página de destino. Para usar o Jumbotron -

  • Crie um container <div> com a classe .jumbotron.
  • Além de um <h1> maior, a espessura da fonte é reduzida para 200px.

O cabeçalho da página é um pequeno recurso interessante para adicionar espaçamento apropriado ao redor dos cabeçalhos de uma página. Isso é particularmente útil em uma página da web onde você pode ter vários títulos de post e precisa de uma maneira de adicionar distinção a cada um deles. Para usar um cabeçalho de página, envolva seu cabeçalho em um <div> com uma classe de .page-header.

Para criar miniaturas usando Bootstrap -

  • Adicione uma tag <a> com a classe de .thumbnail ao redor de uma imagem.
  • Isso adiciona quatro pixels de preenchimento e uma borda cinza.
  • Ao pairar, um brilho animado delineia a imagem.

é possível adicionar qualquer tipo de conteúdo HTML como cabeçalhos, parágrafos ou botões em miniaturas. Siga as etapas abaixo -

  • Altere a tag <a> que possui uma classe de .thumbnail para um <div>.

  • Dentro desse <div>, você pode adicionar o que precisar. Como este é um <div>, podemos usar a convenção de nomenclatura padrão baseada em extensão para dimensionamento.

  • Se você quiser agrupar várias imagens, coloque-as em uma lista não ordenada e cada item da lista flutuará para a esquerda.

Os alertas de bootstrap fornecem uma maneira de definir o estilo das mensagens para o usuário. Eles fornecem mensagens de feedback contextual para ações típicas do usuário.

Você pode adicionar um ícone opcional de fechamento para alertar.

Você pode adicionar um alerta básico criando um wrapper <div> e adicionando uma classe de .alert e uma das quatro classes contextuais (por exemplo, .alert-success, .alert-info, .alert-warning, .alert-danger) .

Para construir um alerta de dispensa -

  • Adicione um alerta básico criando um wrapper <div> e adicionando uma classe de .alert e uma das quatro classes contextuais (por exemplo, .alert-success, .alert-info, .alert-warning, .alert-danger).

  • Adicione também opcional .alert-dispensable à classe <div> acima.

  • Adicione um botão Fechar.

  • Use o elemento <button> com o atributo data-CC0 = "alert" data.

Para criar uma barra de progresso básica -

  • Adicione um <div> com uma classe de .progress.

  • Em seguida, dentro do <div> acima, adicione um <div> vazio com uma classe de .progress-bar.

  • Adicione um atributo de estilo com a largura expressa como uma porcentagem. Digamos, por exemplo, style = "60%"; indica que a barra de progresso estava em 60%.

Para criar uma barra de progresso com estilos diferentes -

  • Adicione um <div> com uma classe de .progress.

  • Em seguida, dentro do <div> acima, adicione um <div> vazio com uma classe de .progress-bar e class progress-bar- * onde * poderia ser sucesso, informação, aviso, perigo.

  • Adicione um atributo de estilo com a largura expressa como uma porcentagem. Digamos, por exemplo, style = "60%"; indica que a barra de progresso estava em 60%.

Para criar uma barra de progresso listrada -

  • Adicione um <div> com uma classe de .progress e .progress-stripes.

  • Em seguida, dentro do <div> acima, adicione um <div> vazio com uma classe de .progress-bar e class progress-bar- * onde * poderia ser sucesso, informação, aviso, perigo.

  • Adicione um atributo de estilo com a largura expressa como uma porcentagem. Digamos, por exemplo, style = "60%"; indica que a barra de progresso estava em 60%.

Para criar uma barra de progresso animada -

  • Adicione um <div> com uma classe de .progress e .progress-stripes. Também adicione a classe .active a .progress-stripes.

  • Em seguida, dentro do <div> acima, adicione um <div> vazio com uma classe de .progress-bar.

  • Adicione um atributo de estilo com a largura expressa como uma porcentagem. Digamos, por exemplo, style = "60%"; indica que a barra de progresso estava em 60%.

Você pode até empilhar várias barras de progresso. Coloque as várias barras de progresso no mesmo .progress para empilhá-las.

Esses são estilos de objetos abstratos para a construção de vários tipos de componentes (como comentários de blog, tweets, etc.) que apresentam uma imagem alinhada à esquerda ou à direita ao lado do conteúdo textual. O objetivo do objeto de mídia é tornar o código para desenvolver esses blocos de informações drasticamente mais curto.

O objetivo dos objetos de mídia (marcação leve, facilidade de extensão) é alcançado aplicando-se classes a algumas marcações simples.

Esta classe permite flutuar um objeto de mídia (imagens, vídeo e áudio) à esquerda ou à direita de um bloco de conteúdo.

Se você estiver preparando uma lista em que os itens farão parte de uma lista não ordenada, use uma classe. útil para tópicos de comentários ou listas de artigos.

Os componentes do painel são usados ​​quando você deseja colocar seu componente DOM em uma caixa. Para obter um painel básico, basta adicionar class .panel ao elemento <div>. Adicione também a classe .panel-default a este elemento.

aqui estão duas maneiras de adicionar o cabeçalho do painel -

  • Use a classe .panel-header para adicionar facilmente um contêiner de título ao seu painel.

  • Use qualquer <h1> - <h6> com uma classe .panel-title para adicionar um título pré-estilizado.

Você pode adicionar rodapés aos painéis, envolvendo botões ou texto secundário em um <div> contendo class .panel-footer.

Use classes de estado contextual, como painel-primário, painel-sucesso, painel-informações, painel-aviso, painel-perigo, para tornar um painel mais significativo para um determinado contexto.

Sim! Para obter uma tabela sem borda dentro de um painel, use a classe .table dentro do painel. Suponha que haja um <div> contendo .panel-body, adicionamos uma borda extra no topo da tabela para separação. Se não houver um <div> contendo .panel-body, o componente se moverá do cabeçalho do painel para a tabela sem interrupção.

Sim! Você pode incluir grupos de listas em qualquer painel. Crie um painel adicionando class .panel ao elemento <div>. Adicione também a classe .panel-default a este elemento. Agora, dentro deste painel, inclua seus grupos de lista.

Um poço é um contêiner em <div> que faz com que o conteúdo pareça afundado ou um efeito de inserção na página. Para criar um poço, simplesmente envolva o conteúdo que você gostaria que aparecesse no poço com um <div> contendo a classe de .well.

O plugin Scrollspy (atualização automática de navegação) permite que você direcione as seções da página com base na posição de rolagem. Em sua implementação básica, conforme você rola, você pode adicionar classes .active à barra de navegação com base na posição de rolagem.

O plugin afixo permite que um <div> seja afixado em um local na página. Você também pode ativar e desativar a fixação usando este plugin. Um exemplo comum disso são os ícones sociais. Eles começarão em um local, mas quando a página atingir uma determinada marca, o <div> será travado no lugar e parará de rolar com o resto da página.