Tutorial do Bootstrap


tutorial do bootstrap 4


Bootstrap é uma estrutura de front-end que ajuda a criar sites responsivos para dispositivos móveis com mais rapidez e facilidade. Desenvolvido pela primeira vez pelo Twitter, o Bootstrap agora é usado para tudo, desde o desenvolvimento de aplicativos da web até temas do WordPress. Também é totalmente gratuito, versátil e intuitivo.

Com o Bootstrap, você pode criar páginas da Web complexas do HTML padrão e personalizá-las de acordo com suas necessidades. O Bootstrap também vem com vários plugins jQuery que podem fornecer funcionalidades adicionais, como carrosséis, botões, dicas de ferramentas e muito mais.

Por último, mas não menos importante, oferece muitos atalhos para a criação de páginas da Web que economizam tempo e energia. Tudo o que você precisa é de um conhecimento básico de HTML e CSS para criar responsivos, móveis primeiro e compatíveis com todos os navegadores modernos.

P.S. O Bootstrap não é uma opção perfeita para iniciantes completos. Algum conhecimento em HTML e CSS seria útil. Como alternativa, você pode usar criadores de sites ou WordPress para criar um site.

Como criar um site usando o Bootstrap (sumário):

  1. Passo 1: Configuração e visão geral
    1. Crie uma página HTML
    2. Carregue o Bootstrap via CDN ou hospede-o localmente
    3. Incluir jQuery
    4. Carregar JavaScript de Bootstrap
    5. Coloque tudo junto
  2. Passo 2: Crie sua página de destino
    1. Adicionar uma barra de navegação
    2. Incluir CSS personalizado
    3. Criar um contêiner de conteúdo da página
    4. Adicionar imagem de plano de fundo e JavaScript personalizado
    5. Adicionar uma sobreposição
    6. Incluir o título da página e o texto do corpo
    7. Crie um botão CTA
    8. Configurar uma seção de três colunas
    9. Adicione um formulário de contato
    10. Crie um rodapé de duas colunas
    11. Adicionar consultas de mídia
    12. Obtenha seu site ao vivo

Tempo total para criar um site usando o Bootstrap: 3-4 horas.
Nível de habilidade: Iniciante ao Intermediário

Etapa 1: configuração e visão geral


Para usar o Bootstrap, você primeiro precisa integrá-lo ao seu ambiente de desenvolvimento, também conhecido como página da web. Para isso, você tem duas possibilidades diferentes: carregue-o remotamente ou faça o download e use o Bootstrap localmente. No entanto, para ambos, você precisa primeiro de algo para carregá-lo no.,

1. Crie uma página HTML

Como primeiro passo, criaremos um modelo HTML simples como base, onde usaremos o Bootstrap. Para isso, a primeira coisa que você deseja fazer é criar uma pasta no seu computador ou servidor para os arquivos do projeto. Neste caso, vou simplesmente chamá-lo bootstrap. Aqui, crie um novo arquivo de texto e chame-o index.html. Abra-o com um editor de texto de sua escolha (por exemplo,. Bloco de anotações++) e cole o código abaixo nele.





Página de exemplo do tutorial do Bootstrap








Não se esqueça de salvar seu arquivo antes de prosseguir!

2a Carregar o Bootstrap via CDN

Como já explicado, o Bootstrap consiste principalmente em folhas de estilo e scripts. Dessa forma, eles podem ser carregados no cabeçalho e rodapé da sua página da web como outros ativos, como fontes personalizadas. A estrutura oferece um caminho de acesso à CDN (rede de entrega de conteúdo) para isso. Você pode encontrá-lo no Página de download do Bootstrap, mais abaixo.

Para obter o Bootstrap em sua página, basta colar o código abaixo no diretório seção do seu modelo.

Quando você salvar o arquivo agora, qualquer navegador que o abra carregará automaticamente os ativos do Bootstrap.

Usar o método remoto é uma boa ideia, pois muitos usuários já terão a estrutura no cache do navegador. Se for esse o caso, eles não precisarão recarregá-lo quando chegarem ao seu site, levando a um tempo de carregamento da página mais rápido. Como conseqüência, este é o método recomendado para sites ao vivo.

No entanto, para experimentação e desenvolvimento, ou se você quiser ser independente de uma conexão com a Internet, também poderá obter sua própria cópia do Bootstrap. É o que estou fazendo neste tutorial, porque também resulta em menos código para postar.

2b. Host Bootstrap localmente

Uma maneira alternativa de configurar o Bootstrap é baixá-lo para o seu disco rígido e usar os arquivos localmente. Você encontra opções de download no mesmo local que os links para a versão remota. Aqui, certifique-se de obter os arquivos CSS e JS compilados. Você não precisa dos arquivos de origem.

Depois de fazer isso, descompacte o arquivo e copie seu conteúdo no mesmo diretório que index.html. Depois disso, você pode carregar o CSS do Bootstrap no seu projeto assim:

Você notará que isso inclui o caminho do arquivo no qual encontrar o arquivo Bootstrap. No seu caso, verifique se o caminho corresponde à sua configuração real. Por exemplo, os nomes dos diretórios podem diferir se você baixou uma versão diferente do Bootstrap.

3. Inclua jQuery

Para obter a funcionalidade completa do Bootstrap, você também precisa carregar a biblioteca jQuery. Também aqui você tem a possibilidade de carregá-lo remotamente ou hospedá-lo localmente.

No primeiro caso, você encontra o link para a versão mais recente do jQuery aqui. Você pode usá-lo para carregar a biblioteca em sua página, colocando a linha de código abaixo logo antes de onde diz na sua página.

alternativamente, baixar jQuery (clique com o botão direito> Salvar link como…), descompacte e coloque-o na pasta do projeto. Em seguida, inclua-o no mesmo local que seu arquivo desta maneira:

Novamente, verifique se o caminho corresponde à sua configuração.

4. Carregue o JavaScript do Bootstrap

A última etapa na configuração do Bootstrap é carregar a biblioteca JavaScript do Bootstrap. Eles estão incluídos na versão baixada da estrutura e você também encontra links para fontes remotas no mesmo local que antes. No entanto, nós o carregaremos em um local diferente da folha de estilos. Em vez do cabeçalho, ele entra no rodapé da página, logo após a chamada para jQuery.

Você pode chamá-lo remotamente assim:

Ou localmente assim:

5. Coloque tudo junto

Se você seguiu as etapas acima corretamente, deverá terminar com um arquivo parecido com este para a solução remota:

   Página de exemplo do tutorial do Bootstrap         

Como alternativa, se você estiver hospedando localmente, o modelo da sua página deve se parecer com o código abaixo:

   Página de exemplo do tutorial do Bootstrap         

Se é isso que você tem e salvou seu trabalho, agora você está pronto para seguir para a próxima etapa.

Etapa 2: crie sua página de destino


Tudo bem, isso foi, reconhecidamente, muito trabalho de preparação. No entanto, não foi muito difícil, foi? Além disso, agora a diversão começa.

No momento, quando você navega para o site de amostra, você deve simplesmente ver uma página em branco. Hora de mudar isso.

1. Adicione uma barra de navegação

A primeira coisa que queremos fazer é adicionar uma barra de navegação na parte superior da página. Isso permite que seus visitantes percorram seu site e descubram o restante de suas páginas.

Para isso, usaremos o navbar classe. Este é um dos elementos padrão do Bootstrap. Ele cria um elemento de navegação que responde por padrão e é recolhido automaticamente em telas menores. Ele também oferece suporte interno para adicionar marcas, esquemas de cores, espaçamento e outros componentes.

Vamos usá-lo como abaixo e publicá-lo logo abaixo do tag:

 Logotipo   

Alguma explicação do código:

  • navbar-expand-md – Isso indica em que ponto a barra de navegação se expande do ícone vertical ou de hambúrguer para uma barra horizontal em tamanho normal. Nesse caso, configuramos para telas médias, que, no Bootstrap, são maiores que 768px.
  • navbar-brand – Isso é usado para a marca do seu site. Você também pode incluir um arquivo de imagem do logotipo aqui.
  • navbar-toggler – Indica o botão de alternância do menu recolhido. A peça data-toggle = "recolher" define que isso passará para um menu de hambúrguer, não para o menu suspenso, que é a outra opção. É importante que você defina um alvo de dados com um ID CSS (definido pelo #) e enrole um div com o mesmo nome em torno do real navbar elemento.
  • navbar-toggler-icon – Como você provavelmente pode imaginar, isso cria o ícone no qual os usuários clicam para abrir o menu em telas menores.
  • navbar-nav – A classe para o
      elemento da lista que contém os itens de menu. Estes últimos são indicados com item de navegação e nav-link.

    Por que estou explicando isso tanto?

    Porque esse é o ponto do Bootstrap. Você tem todos esses padrões que permitem criar elementos com algumas classes HTML e CSS rapidamente. Você não precisa escrever nenhum CSS para fornecer estilo, tudo já está configurado no Bootstrap. Além disso, tudo é responsivo para dispositivos móveis pronto para uso! Você está começando a ver como isso é útil?

    O acima é suficiente para adicionar uma barra de navegação ao seu site. No entanto, no momento, ainda parece muito pouco.

    tutorial de inicialização adicionar barra de navegação

    Isso porque não tem muito estilo associado a ele. Enquanto você pode adicionar cores padrão (por exemplo, dando à barra de navegação uma classe como bg-dark navbar-dark), queremos adicionar nossa própria.

    2. Inclua CSS personalizado

    Felizmente, se você deseja alterar o estilo padrão, não precisa percorrer uma grande biblioteca de folhas de estilo e fazer as alterações manualmente. Em vez disso, assim como em um tema filho do WordPress, você pode adicionar seus próprios arquivos CSS que podem ser usados ​​para substituir os estilos existentes.

    Para isso, basta criar um arquivo em branco com seu editor de texto e chamá-lo main.css. Salve-o e adicione-o à seção principal do seu site Bootstrap da seguinte maneira:

    Este é o código para uma folha de estilos que reside no diretório principal. Se você decidir colocar o seu dentro do css pasta, certifique-se de incluir o caminho correto no link.

    A partir daqui, você poderá adicionar CSS personalizado ao seu site. Por exemplo, para estilizar a barra de navegação e seus elementos, você pode usar uma marcação como esta:

    corpo { estofamento: 0; margem: 0; fundo: # f2f6e9; } /*--- Barra de navegação ---*/ .navbar { fundo: # 6ab446; } .nav-link, .marca navbar { cor: #fff; cursor: ponteiro; } .nav-link { margem-direita: 1em! importante; } .nav-link: passe o mouse { cor: # 000; } .navbar-collapse { justificar conteúdo: flex-end; }

    E aqui está o resultado:

    barra de navegação do estilo do tutorial de auto-inicialização

    Parece melhor do que antes, não é??

    3. Crie um contêiner de conteúdo da página

    Após a barra de navegação, a próxima coisa que você deseja é um contêiner para o conteúdo da página. Isso é realmente fácil no Bootstrap, pois tudo o que você precisa é isso abaixo da tag navbar:

    Observe o fluido de recipiente classe. Essa é outra dessas classes padrão do Bootstrap. Aplicando-o ao div O elemento aplica automaticamente um monte de CSS a ele.

    o -fluido parte garante que o contêiner se estenda por toda a largura da tela. Há também apenas um recipiente, que possui larguras fixas aplicadas a ele, para que sempre haja espaço nos dois lados da tela.

    No entanto, se você recarregar a página agora, ainda não verá nada (a menos que use as ferramentas do desenvolvedor). Isso porque você criou apenas um elemento HTML vazio. Isso começará a mudar agora.

    4. Adicione uma imagem de plano de fundo e JavaScript personalizado

    Como próxima etapa deste tutorial de Bootstrap, queremos incluir uma imagem de plano de fundo em tela cheia para o cabeçalho da nossa página de destino. Para isso, teremos que usar jQuery para fazer com que a imagem se estenda por toda a tela.

    Você faz isso da mesma maneira que inclui CSS personalizado. Primeiro, crie um arquivo de texto com o nome main.js e coloque-o dentro da pasta do site. Então, ligue antes do fechamento etiqueta dentro index.html.

    Depois disso, você pode copiar e colar este pedaço de código para tornar o

    elemento se estende por toda a tela:
    $ (document) .ready (function () { $ ('. header'). height ($ (janela) .height ()); })

    Então, a única coisa que resta é definir uma imagem de plano de fundo. Você pode fazer isso assim por dentro main.css:

    .cabeçalho { background-image: url ('images / header-background.jpg'); tamanho do plano de fundo: capa; posição de fundo: centro; posição: relativa; }

    Se você colocar uma imagem de tamanho suficiente no local especificado pelo caminho acima, obterá um resultado semelhante a este:

    tutorial de auto-inicialização incluir imagem de fundo do cabeçalho

    5. Adicione uma sobreposição

    Para tornar a imagem de fundo ainda mais elegante, também adicionaremos uma sobreposição. Para isso, você criará outro elemento div dentro daquele que você incluiu anteriormente.

    Em seguida, você pode adicionar o seguinte no seu arquivo CSS personalizado:

    .sobreposição { posição: absoluta; altura mínima: 100%; largura mínima: 100%; esquerda: 0; topo: 0; fundo: rgba (0, 0, 0, 0,6); }

    Isso criará essa boa sobreposição para a imagem que você inseriu anteriormente:

    tutorial de auto-inicialização adicionar sobreposição

    6. Inclua o título da página e o texto do corpo

    Agora você provavelmente deseja adicionar um título de página na forma de um cabeçalho mais algum texto do corpo. Dessa forma, seus visitantes saberão imediatamente em que site estão e o que podem esperar dele..

    Para criá-las, basta adicionar esse trecho dentro do contêiner que você configurou na última etapa, abaixo da sobreposição:

    Bem-vindo à página de destino!

    Lorem ipsum dolor sente-se no meio, consectetur elip adipiscing. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis. Suspendisse consectetur mi id libero fringilla, em pharetra sem ullamcorper.

    Depois disso, adicione a seguinte marcação a main.css.

    .descrição { esquerda: 50%; posição: absoluta; topo: 45%; transformar: converter (-50%, -55%); alinhamento de texto: centro; } .descrição h1 { cor: # 6ab446; } .descrição p { cor: #fff; tamanho da fonte: 1.3rem; altura da linha: 1,5; }

    Quando você faz isso, a página de destino agora fica assim:

    tutorial de auto-inicialização adicionar título e descrição da página

    Está realmente começando a se unir, não é?

    7. Crie um botão CTA

    Nenhuma página de destino é concluída sem uma chamada à ação, na maioria das vezes na forma de um botão. Por esse motivo, não podemos incluir como criar um neste tutorial do Bootstrap.

    A estrutura oferece muitas ferramentas para criar botões de maneira rápida e fácil. Você pode encontrar muitos exemplos aqui. No meu caso, adiciono a seguinte marcação logo abaixo do conteúdo da página dentro do recipiente:

    Além disso, adiciono este CSS ao main.css:

    .botão de descrição { borda: 1px sólido # 6ab446; fundo: # 6ab446; raio da borda: 0; cor: #fff; } .botão de descrição: passe o mouse { borda: 1px sólido #fff; fundo: #fff; cor: # 000; }

    Após salvar e recarregar, fica assim:

    tutorial de inicialização adicionar botão de chamada à ação

    8. Configure uma seção de três colunas

    Já estou bastante satisfeito com a forma como as coisas estão se moldando. No entanto, ainda não terminamos a página. Em seguida, queremos criar três colunas abaixo do conteúdo principal para obter informações adicionais. Esta é uma especialidade do Bootstrap, uma vez que desempenha sua força: criando uma grade. Veja como fazer isso neste caso:

    Lorem ipsum

    Lorem ipsum dolor sente-se no meio, consectetur elip adipiscing. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Lorem ipsum

    Lorem ipsum dolor sente-se no meio, consectetur elip adipiscing. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    A primeira coisa que você notará é a linha elemento. Você precisa disso sempre que criar colunas para atuar como um contêiner para a grade.

    Quanto às colunas, todas elas possuem várias classes: col-lg-4, col-md-4 e col-sm-12. Eles indicam que estamos lidando com colunas e o tamanho que elas terão em telas diferentes.

    Para entender isso, você precisa saber que, em uma grade do Bootstrap, todas as colunas em uma linha sempre somam o número 12. Portanto, atribuir a elas as classes acima significa que elas ocuparão um terço da tela em grandes e médias telas (12 divididas por 3 é 4), mas a tela inteira em dispositivos pequenos (12 de 12 colunas).

    Faz sentido, não faz?

    Você também notará que eu incluí imagens e adicionei o .fluido de imagem classe para eles. Isso é para torná-los responsivos, para que eles sejam dimensionados junto com a tela em que a página é exibida..

    Além disso, você tem o seguinte estilo incluído no local usual:

    .recursos { margem: 4em auto; estofamento: 1em; posição: relativa; } .feature-title { cor: # 333; tamanho da fonte: 1.3rem; peso da fonte: 700; margem inferior: 20 px; transformação de texto: maiúscula; } .recursos img { -webkit-box-shadow: 1px 1px 4px rgba (0, 0, 0, 0,4); -moz-box-shadow: 1px 1px 4px rgba (0, 0, 0, 0,4); box-shadow: 1px 1px 4px rgba (0, 0, 0, 0,4); margem inferior: 16 px; }

    Quando adicionado abaixo do conteúdo principal e salvo, fica assim:

    tutorial de inicialização adicionar seção de três colunas

    9. Adicione um formulário de contato

    Você notará que um dos novos campos ainda está vazio. Isso foi proposital porque queremos adicionar um formulário de contato. Essa é uma prática muito normal para as páginas de destino, para permitir que os visitantes entrem em contato.

    Criar um formulário de contato no Bootstrap é bastante fácil:

    Entrar em contato!

    Até agora, não precisava mais explicar a marcação para criar colunas. Aqui está o que o restante da marcação significa:

    • grupo de forma – Usado para contornar campos de formulário para formatação.
    • controle de forma – Indica campos de formulário, como entradas, áreas de texto, etc..

    Você pode fazer muito mais com formulários, que você pode descobrir no documentação. No entanto, para fins de demonstração, o acima é suficiente. Coloque-o dentro da coluna vazia restante e adicione esse estilo à main.css:

    .possui controle de forma, .recursos de entrada { raio da borda: 0; } .recursos .btn { cor de fundo: # 589b37; borda: 1px sólido # 589b37; cor: #fff; margem superior: 20 px; } .recursos .btn: pairar { cor de fundo: # 333; borda: 1 px sólido # 333; }

    Ao fazê-lo, você obtém um formulário como este:

    tutorial de inicialização incluem formulário de contato

    10. Crie um rodapé de duas colunas

    Tudo bem, agora estamos chegando ao final do tutorial do Bootstrap. A última coisa que você deseja adicionar à sua página de destino é uma seção de rodapé com duas colunas. Até agora, isso não deve representar mais um problema para você.

    informação adicional

    Lorem ipsum dolor sente-se no meio, consectetur elip adipiscing. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Lorem ipsum dolor sente-se no meio, consectetur elip adipiscing. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Contato

    1640 Riverside Drive, Hill Valley, Califórnia
    [protegido por email]
    + 01 234 567 88
    + 01 234 567 89

    Além da marcação de grade usual, esta seção destaca algumas possibilidades para modificar a tipografia com o Bootstrap:

    • texto em maiúsculas
    • intensidade da fonte: Negrito
    • centro de texto

    Deveria ficar bem claro pelos nomes das classes que eles fazem. Você pode encontrar mais informações sobre Bootstrap e tipografia aqui.

    Além do exposto, você pode usar estilos como este:

    .rodapé da página { cor de fundo: # 222; cor: #ccc; preenchimento: 60px 0 30px; } .copyright de rodapé { cor: # 666; preenchimento: 40px 0; }

    Isso resulta em um rodapé bonito com a seguinte aparência:

    tutorial de inicialização: rodapé da página

    11. Adicione consultas de mídia

    A página está basicamente pronta agora. Também é totalmente responsável. No entanto, na visualização móvel do navegador, a seção superior ainda não está totalmente correta.

    erro tutorial de inicialização no design para dispositivos móveis

    No entanto, não se preocupe, você pode corrigir isso facilmente com uma simples consulta de mídia. A menos que você esteja usando o SASS para compilar seu site Bootstrap, eles funcionam da mesma maneira que em outras instâncias. Você só precisa ter em mente o pontos de interrupção predefinidos incluído no Bootstrap.

    Como conseqüência, para corrigir o problema acima, você pode simplesmente incluir um pedaço de código como este:

    @media (largura máxima: 575,98px) { .descrição { esquerda: 0; preenchimento: 0 15 px; posição: absoluta; topo: 10%; transformar: nenhum; alinhamento de texto: centro; } .descrição h1 { tamanho da fonte: 2em; } .descrição p { tamanho da fonte: 1.2rem; } .recursos { margem: 0; } }

    Depois disso, tudo está como deveria ser:

    tutorial de inicialização adicionar consulta de mídia

    12. Carregue seu site em um host

    Se você está acompanhando, agora deve ser definido com um site pronto, que também seja móvel e totalmente responsivo.

    No entanto, até agora, ninguém além de você pode vê-lo. Para mudar isso, você precisa de um host e domínio. Dessa forma, as pessoas podem inserir o endereço do site na barra do navegador e acessar o site do Bootstrap recém-criado.

    Para permitir que eles façam isso, você precisa fazer o upload do site no seu servidor. Você pode fazer isso com um cliente FTP como FileZilla. Colete seu endereço de host, nome de usuário e senha de FTP do seu provedor de hospedagem para conectar-se ao seu servidor remotamente. Ao fazê-lo, você poderá ver os arquivos e diretórios atualmente lá.

    upload do site de bootstrap para o servidor via ftp

    Navegue até o diretório ao qual seu domínio está indicado (geralmente o diretório raiz). Depois de fazer isso, simplesmente encontre a pasta com os arquivos do Bootstrap no disco rígido, marque todos os arquivos internos e arraste-os para o servidor para iniciar o upload. O processo levará um tempo para terminar, dependendo da velocidade da sua conexão, bem como do número e tamanho dos arquivos.

    No entanto, quando terminar, quando você acessar seu domínio, poderá ver o site finalizado na janela do navegador.

    Página inicial do tutorial finalizado

    Nada mal para algumas linhas de código, certo?

    Falando nisso, se você quiser ter o código inteiro da página, incluindo CSS e JavaScript personalizados, poderá fazer o download de todos eles aqui. Com isso, você tem tudo o que precisa para criar uma página de destino com o Bootstrap.

    Conclusão

    O Bootstrap é uma estrutura de desenvolvimento de código-fonte aberto e front-end que qualquer pessoa pode usar gratuitamente. Ele permite que você protótipo de projetos rapidamente, crie páginas da Web e, em geral, atinja o chão.

    Como você viu neste tutorial do Bootstrap para iniciantes, ele precisa apenas de conhecimentos básicos de HTML, CSS e algum jQuery opcional. Embora não seja tão confortável quanto usar o WordPress, o Bootstrap ainda é uma alternativa válida para criar um site.

    Até agora, você já sabe como configurar e instalar o Bootstrap e seus componentes, criar uma página de destino simples, incluir algum conteúdo básico e estilizá-lo. Você pode criar menus de navegação, definir imagens de plano de fundo, incluir botões, colunas e formulários de contato.

    Claro, há mais para aprender.

    Graças a este tutorial básico do Bootstrap, você agora sabe o suficiente para seguir em frente sozinho. Se você quiser mergulhar mais fundo na estrutura, um bom ponto de partida é W3Schools. Além disso, esperamos que você tenha gostado deste tutorial para iniciantes e que gostaria de ouvir seus pensamentos e experiências sobre o assunto..

    Atualização: também criamos uma folha de dicas para iniciantes nas versões .pdf e .png.

    Você tem alguma opinião sobre o tutorial do Bootstrap acima? Perguntas, comentários, pedidos? Deixe-nos saber na seção de comentários abaixo!

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map