se você já deve ter ouvido muita gente falando sobre Bootstrap mas o que que é o Bootstrap nesse vídeo que eu vou te explicar e também vou te mostrar o que que é o Bootstrap então assistir esse vídeo até o final você tá chegando aqui agora já se inscreve aqui no canal e bora lá para o vídeo e e qual era o nome do Carmo Bootstrap basicamente é uma ferramenta não é um Framework para gente trabalhar com desenvolvimento web atualmente já foi melhor que CSS mais popular o pessoal mais utiliza e basicamente existem vários componentes
prontos a gente pode utilizar botões pode utilizar formulários gente tem modelos deputy de erro de Tati enfim é um mundo gigante de coisas estão agride também que muita gente utiliza que ele facilita bastante na hora da gente criar sistemas e sites porque ele possui bastante componente reutilizável eu vou mostrar que documentação dele com todos os componentes que eles têm prontos vou deixar linkado aqui na descrição também se você quiser dar uma olhada mas vou mostrar os principais aqui e você já vai poder tá utilizando no seu próximo aplicação Beleza então vamos lá então essa é
a documentação do Bootstrap atualmente está na versão 5 Beta então talvez não seja interessante que você comece utilizando ela então aqui a gente de documentação do 4.6 e aqui tá uma uma versão mais segura né então vou vir aqui em Box vou descer aqui em layout e essa aqui né e do Bootstrap se você não sabe o que que é uma Grid o que que agride Dubstep vou deixar linkado alguns vídeos aqui para você dar uma olhada depois e é muito importante que você assista também que vai acabar complementando esse vídeo aqui eu só vim
aqui em Grid Ó você vai ver que tem toda uma estrutura de classes e componentes achou aumentar aqui um pouquinho para você estruturar uma Grid Então você fazendo a utilização dessas classes ele tem um estilo pré-definido lá no CSS que já vai fazer por padrão essa Grid aqui para você então aqui a gente tem as colunas goteiras Enfim vou mostrar que os componentes para vocês aqui a gente tem a questão da tipografia também aqui não você pode ver por padrão só do fato de você tem importado do xtrap se você utilizar um H1 ele já
vai puxar esse estilo do próprio Bootstrap então se você tiver outro site já estilizado e você em Portal do scrap Pode ser que de algum conflito e os estilos Então você tem que considerar isso também aqui tem estilo para imagens enfim tá a excluída responsiva tem mais estilo com a tabela aqui a gente já vê que tem uma tabela bem bonitinho aqui bem diferente do padrão do próprio HTML né você vê que tinha Class table e por padrão e já vai utilizar essa tabela aqui e vai deixar do jeito que tá aqui sem muito esforço
sem precisar ficar utilizando Então essa é a mágica double step né por isso que é muito desenvolvedor utiliza ele que facilita muito na hora de desenvolver se não precisa ficar se preocupando com o estilo toda hora é lógico que sistemas específicos com design customizado Você vai precisar customizar o código ali só que se não tivesse a necessidade de ter um estilo customizado você pode utilizar o próprio Bootstrap principalmente para sistemas internos que muitas pessoas não vou ter acesso né não vai ficar aberto para o público então ajuda bastante Nessas horas aqui como você pode ver
eu tenho table Premiere ele vai mudando o estilo aqui ó da tabela tem várias cores tenho Dark por padrão ele já vai ter aquele estilo você não vai precisar ficar alterando no CSS se encontrou aqui que basicamente a utilização pro formulário e foi input que quando você pode ver ele tem uma bordinha utilizada já ele já tem uma fonte específica o lei vou também é utilizado tem bastante coisa pronta a gente tem os tamanhos de fonte aqui do input e por te dizer e vou aqui o select deles é mais bonitinho também cheque House aqueles
tem um checkbox customiza você pode ver é muito melhor do que o padrão do HTML é grupo de input que como você pode ver você pode colocar ícones né ou símbolos aqui do lado esquerdo ou do lado direito enfim tem muita coisa pronta mesmo para ajudar a gente é que tem vários outros componentes úteis também com meu caso desse acordeão aqui ó que você não precisa programar nada é só você definir o CSS com essas classes aqui e ele vai estar Funcionando aqui a gente tem a ler tembé disse também que você pode colocar um
título no a tag tudo mais e que em breve Chrome está aqui não sabe é esse carinha aqui ó ele vai querer no meio que o Caminho das páginas né É tem botões tem muito estilo de Botão botão p e dar enfim você pode customizar também se você colocar por exemplo uma outra cor que o botão primário Isso vai ser revertido em todas as outras telas também que você vai tá utilizando a mesma classe aqui a gente tem botões com borda ou tão grande botão pequeno botão médio desabilitado em tudo aqui ó grupo de botão
você colocar aqui tem Card Carrossel e um milhão de outras coisas aqui e facilitam muito a vida da gente e para você estar lá é muito simples eu vou vir aqui na introdução para mostrar para vocês basicamente o CSS é só você pegar esse carinho aqui ou você baixa esse arquivo né ou você pode vir aqui na página de download C baixar também você simplesmente limpa esse arquivo lá no seu o seu Red o seu HTML que também tem esse arquivo java script aqui pra algumas funções ele vai utilizar o JavaScript você pode limpar isso
que também logo antes de fechar a sua tag Body Beleza então aqui se você for ver por exemplo causa do modal você for vir aqui ó componentes modal o modal no caso e pode fazer o Tiago script então a importante que você importa e também tem algumas alguns itens que não vão funcionar senhor Jesus Cristo então basicamente essa ferramenta que a gente pode utilizar com bastante coisa pronta sem precisar ficar se matando principalmente para quem está começando ainda que não se dá muito bem com CSS dá para utilizar o Bootstrap aqui que vai salvar um
tempo para caramba Beleza se você tiver mais interesse no assunto eu recomendo que você assista outros vídeos também que eu fiz falando sobre a Grid Bootstrap também sobre as novidades do Bootstrap cinco eu deixei em casa aqui no card e também vou deixar linkado aqui na descrição desse vídeo Beleza então se você gostou do vídeo não esquece deixar o like aqui se inscreve aqui no canal e segue a gente só no Instagram também que a rouba ler.com Beleza então foi isso a gente se vê no próximo vídeo Valeu o [Música] E aí [Música] E aí
[Música]
