Se você já construiu um site web sabe que muito de um site pode ser utilizado em outro site.
Por exemplo, as rotinas para validar uma DATA, CPF, CGC são funções muito comuns que praticamente qualquer site tem. Páginas como as de login, permissões de perfis de usuários são muito comuns e podem muito bem serem padronizadas e utilizadas em diversos sites.
Então de um site para outro costumamos copiar essas 'funções utilitárias', que podem estar em módulos, bibliotecas ou mesmo em classes, para não escrevermos novamente o que já sabemos que está funcionando. Chamamos isso de reutilização de código e ajuda muito os desenvolvedores a ganhar produtividade e a evitar erros.
Com o passar do tempo os desenvolvedores criaram suas 'bibliotecas' de maneira particular, ou seja, eles mesmos desenvolveram essas funcionalidades e as reaproveitavam de um site para outro. Mas sempre tinha um 'retoque' de um site para outro, nunca eram idênticas.
Se fazemos isso com códigos porque não podemos fazer bibliotecas com objetos que o browser exibe de maneira a padronizar a apresentação em todos os ambientes e browsers? Porque não uma biblioteca com as funcionalidades mais complexas como criar um carrosel, card, badge etc, e acrescentar nessas bibliotecas coisas comuns como posicionar esses objetos, estilizar ele de uma maneira muito elegante ?
Sites como Google, Facebook e Twitter desenvolveram suas 'bibliotecas' para as necessidades que tinham e
pensaram : Nós perdemos muito tempo desenvolvendo essas funcionalidades...Porque não dispor aos outros
desenvolvedores para que não percam tempo reinventando a roda?
Agruparam as funcionalidades, deram uma 'maquiada' no que era importante e o que não era retiraram.
Deixaram apenas as funcionalidades mais generalistas, ou seja, as que mais são utilizadas e as
disponibilizaram para os usuários que quisessem usar.
Chamamos essas 'bibliotecas de funções' de frameworks. Framework em inglês significa padrão ou modelo.
Para isso foi criado o BootStrap... uma biblioteca composta por um conjunto de funções javascript(js) e css que tem essas funcionalidades mais comuns.
Para utilizar o bootstrap basta incorporar a css ou o código javascript no header da página:
<link rel="stylesheet" href="../BootstrapEngine/css/bootstrap.min.css">
(1) ou
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
(2)
Você pode baixar o bootstrap e colocar numa pasta do seu site (1) ou baixar ele do site bootstrap sempre que precisar(2)
Como a maioria dos dispositivos que navegam na web hoje são dispositivos móveis o BootStrap foi pensado primeiramente para funcionar em dispositivos móveis ( chamado mobile first ) e, portanto, tamanho deveria ser o menor possível.
Pensando na diversidade de ambientes o BootStrap foi dividido em bibliotecas para todos as 'necessidades'.
Por exemplo existe uma biblioteca chamada .min que encapsula as funcionalidades no menor tamanho
possível, perto de 4 kb a css e 50 kb a js e tem um bom conjunto de funcionalidades, mas não todas.
Este tipo de biblioteca foi construída para dispositivos móveis para que não impacte significativamente na carga da página.
Existe também a biblioteca full com todas as funções do BootStrap e o tamanho das biblitecas são 121 KB a js
e 170 KB a CSS.
Uma das coisas boas do BootStrap é que ele é um modelo de objetos muito bonito e com isso empresas
como a Microsoft incorporaram o BootStrap aos seus projetos. Entre no Visual Studio Community e abra
um projeto web comum. O BootStrap já vem incorporado ao projeto.
Mas se você pensa que é só a Microsoft, não é não.
Se algum dia você começar a desenvolver aplicativos com o ambiente IONIC ( o que eu recomendo ) verá
que o estilo dos componentes é idêntico aos que o BootStrap usa e a sintaxe para usar esses componentes
é praticamente a mesma.
Portanto,
BootStrap criou um padrão que muitos fabricantes de software usam simplificando o desenvolvimento
de apps dando maior produtividade ao processo.
Framework é um 'modelo' composto por um conjunto de funcionalidades que visam agregar uma funcionalidade ao site. Ao invés de você partir do zero você usa o 'framework' e não perde tempo desenvolvendo o que já esta pronto.
É mais ou menos como o que a Microsoft chama de Namespace, ou seja, um conjunto de funções
relacionadas com uma funcionalidade.
Por exemplo, se você deseja agregar funcionalidades que tratem os arquivos do sistema você vai
precisar utilizar a namespace SYSTEM.FILE.IO que é um conjunto de funcionadades que permite
trabalhar com arquivos como copiar, eliminar, criar, alterar, etc... Tudo que mexe com arquivos
foi colocado nesta Namespace.
Sabemos que ao utilizar o framework nosso programa vai ficar maior e é por esse motivo que os frameworks são utilizados somente onde são absolutamente necessários e quanto menores sempre serão melhores para baixar num celular, por exemplo. O desenvolvedor deve acrescentá-los apenas quando precisar deles.
Mas em web o conceito é bem mais amplo, o framework pode ser um conjunto de estilos (.css) que auxilia, por exemplo, a formatar o estilo de um parágrafo para que seja melhor visualizado num dispositivo móvel.
Pode ser um conjunto de funcionalidades JavaScript (.js) que precisamos para fazer um slide show, um site responsivo ( como jquery faz) ou funções utilitárias que exibe/escondem itens, modificam sua aparência de acordo com uma circunstância do navegador (como largura da tela).
Portanto, um Framework é um conjunto de funções utilitárias que te auxiliam a executar uma tarefa. Pode conter apenas HTML, JAVASCRIPT, CSS ou JQUERY ou utilizar a ferramenta que for mais útil para executar determinada tarefa.
Dentro desses frameworks alguns se destacam pelo tamanho muito pequeno e pela grande ajuda que eles prestam a quem os utilizam. Dentre eles os mais destacados da atualidade são o BootStrap e o Materialize.
BooStrap é um dos mais utilizados Frameworks da atualidade. Apesar dessa biblioteca ter um tamanho pequeno (da ordem de 30kb) o que ela faz é impressionante.
Só pelo visual e o ganho que temos ao utilizar o BootStrap já compensa utilizar a ferramenta. Mas tem muito mais nesse framework.
Se você está desenvolvendo um site para dispositivos móveis o bootstrap e praticamente obrigatório
O BootStrap é composto por 2 módulos : Um CSS e um Javascript. Contudo se outro framework ( como o JQuery faz o que você precisa) você pode incorporar ao BootStrap como um JavaScript externo a página atual.
Um conjunto de ícones : No BootStrap 3 havia um conjunto de 250 ícones com um estilo visual impressionante
mas infelizmente foram retirados do BootStrap4 provavelmente por causa do seu tamanho. A biblioteca contendo
esses ícones tem 1,44 MB de tamanho e para dispositivos móveis é relativamente grande.
O bom desses ícones é que são SVGs, ou seja, o tamanho é dimensionado de acordo com o elemento pai
e até a cor pode ser mudada de acordo com o elemento pai.
Eu recomendo usar o FontAwesome em seu lugar por ter mais recursos mas abaixo explico como usar
os do BootStrap se estiverem instalados.
Se deseja visualizar a página de ícones do BootStrap3
Clique aqui
Contudo, não significa que você não pode usar esses ícones. Verifique se no seu bootstrap você tenha a
pasta fonts além das pastas css e js. Se tiver, dá pra usar.
Veja um exemplo:
Dropdowns : Menu DropDowns ou Button dropdowns. Você pode colocar, por exemplo, um botão que ao ser clicado abre um menu ( acima (up) ou abaixo (down) ) do botão. Dê uma olhadinha.
Button groups : Exibe um conjunto de botões agrupados um ao lado do outro como se fossem um menu por botões. Chamei de 'toolbar de botões'. Dê uma olhadinha.
Input groups : Grupo de entradas de dados. Você pode personalizar um conjunto de inputs com o BootStrap
deixando eles mais bonitos e padronizando para todos os browsers.
Por default junto aos inputs do grupo podemos anexar mensagens que são agregadas ao estilo do input o que
fica muito legal. Dê uma olhadinha.
Navs e Navbar : É uma barra de navegação. Ocupa a largura da tela inteira e é a melhor maneira de fazer um menu de navegação. Neste site tem muitos exemplos que utilizam o menu nav.
Breadcrumbs : Em inglês breadcrumb significa migalhas ...aquelas da história de João e Maria que
jogaram as migalhas de pão ao chão para não se perderem.
Mas no BootStrap indica a localização da página atual dentro de uma hierarquia de navegação que adiciona
separadores automaticamente via CSS.
Muito bom para grandes sites onde o usuário precisaria saber exatamente em que parte do sistema está.
Pagination : Este recurso muito comum em todas as linguagens web ganha no BootStrap um visual mais bonito mas pouco acrescenta a funcionalidade de paginação em sí. Dê uma olhadinha.
Labels : Quando exibimos um dado na tela é bom dizer sobre o que o dado é, como Nome, Endereço, Telefone.
O BootStrap faz o objeto label exibir esse texto bem estilizado e bonito.
Badges : Badge permite que você acrescente um objeto dentro de um objeto. Explicando melhor, suponha que você coloque um botão de 'likes' no seu site e dentro desse botão você quer colocar um número que corresponde ao número de 'likes' que o assunto ganhou. O badge faz isso, coloca um número dentro de um botão entre muitas outras coisas. Dê uma olhadinha.
Jumbotron : Abre uma grande caixa para destacar de maneira inconfundível um ítem.
Page header
Thumbnails
Alerts : Emite uma mensagem de alerta na página informando o usuário sobre um resultado ou alguma informação útil que ele queira saber. Dê uma olhadinha.
Progress bars : Finalmente um controle de andamento de processo que pode ser comandado
pelo JavaScript. É uma barra que indica o progresso na execução de uma tarefa de 0 a 100%.
Mas o BootStrap não deixa barato não, acrescentou estilos e visuais que satisfazem os gostos mais
formais e exóticos.
Dê uma olhadinha.
Media object : No HTML5 não é mais permitido usar o Flash e este é o motivo. O Media object permite que você acrescente vídeos, imagens, sons. O forte deste componente é que ele interage diretamente com o sistema operacional,ou seja, se o sistema operacional consegue reproduzir a media você pode usar esse controle sem medo.
List group : Quando a gente exibe uma lista de itens resultantes de uma pequisa, por exemplo, num banco de dados sql a gente costuma agrupar esses ítens num espaço da página e deixar claro que são resultado de uma pesquisa. É isso que este elemento faz, agrupa elementos resultantes de um grupo de ítens.Dê uma olhadinha.
Panels : É um painel que agrupa itens de mesma finalidade.
Responsive embed : O BootStrap é 'mobile first', ou seja, prioriza a visualização em ambientes móveis com isso você consegue, por exemplo, personalizar automaticamente sua página de acordo com a largura da tela do dispositivo que esta exibindo o browser. E não é só isso não, é uma mão na roda.
Wells
Alertas : para exibir mensagens de alerta para o usuario
Butões : para alternar estados e caixa de seleção / funcionalidade de rádio
Carousel : para todos os comportamentos, controles e indicadores de slides
Collapse : para alternar a visibilidade do conteúdo
Dropdowns : para exibição e posicionamento (também requer Popper.js)
Modals : para exibição, posicionamento e comportamento de rolagem
Navbar : para estender nosso plugin Collapse e para implementar o comportamento responsivo
Toasts : para exibir mensagens e alertar usuario
Tooltips and popovers : para exibição e posicionamento (também requer Popper.js)
Scrollspy : para comportamento de rolagem e atualizações de navegação
Como você deve saber um script1 que faz referencia a outro script2 o script2 referenciado deve existir antes que o script1 faça referência senão ocorrerá um erro e ambos scripts serão perdidos por causa do erro.
Por esse motivo existem regras na declaração dos elementos.
Se o seu carrosel não esta funcionando provavelmente esta é a causa. Já cheguei a trocar a versão do bootstrap pensando que era um defeito no bootstrap quando era falha na declaração.
O bootstrap.min.js usa(referencia) o jquery para fazer algumas funções por esse motivo a declaração do jquery deve ser feita antes do bootstrap.