Como fazer um site elegante e simples com Bootstrap 4: 7 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:36

O objetivo deste Instructable é dar àqueles familiarizados com programação - HTML ou outro - uma introdução simples para fazer um portfólio online com Bootstrap 4. Vou guiá-lo pela configuração inicial do site, como criar alguns blocos de conteúdo diferentes, e alguns problemas que você pode encontrar.

O portfólio é dividido em várias etapas menores para tentar torná-lo mais gerenciável: frame HTML, frame CSS, frame Javascript, barra de navegação e a página inicial (com blocos de conteúdo).

Se minhas explicações sobre algo ainda o deixam confuso, fique à vontade para deixar um comentário com suas perguntas, sugestões ou google o elemento sobre o qual você está confuso. Existem muitos recursos disponíveis para programação de sites e Bootstrap.

Observação: este guia não é abrangente e não deve ser usado como um substituto para aprender a programar em HTML, CSS ou Javascript.

Recursos necessários

• Bootstrap 4
• jQuery 3.3.1

Recursos opcionais

• FontAwesome
• Fontes do Google
• destaque.js

Se você quiser pular para o exemplo completo ou dar uma olhada no repositório:

• Exemplo Completo
• Repositório

Nota: Vou usar Sublime nas fotos para meus exemplos se você quiser seguir o mesmo editor de texto.

Etapa 1: configuração

Configuração de pasta

1. Crie uma pasta em algum lugar onde você possa armazenar tudo o que vamos baixar. Este será o seu diretório raiz para o portfólio.
2. Crie uma pasta dentro daquela chamada “bootstrap”
3. Crie outra pasta dentro da pasta raiz do seu portfólio com o nome “jquery”

Pasta de portfólio

| ----- bootstrap | ----- jquery

Bootstrap 4

1. Visite o site e clique no botão “Download” abaixo da seção “CSS e JS compilados”.
2. Salve o arquivo.zip na pasta “Downloads” ou em outro local conveniente.
3. Abra o arquivo.zip e extraia as pastas “css” e “js” para a pasta “bootstrap” que você criou anteriormente.

jQuery

1. Visite o site e baixe o “descompactado, desenvolvimento jQuery 3.3.1”
2. Salve esse arquivo dentro da pasta “jquery” que você criou anteriormente.

Todas as estruturas estão prontas para quando começarmos a trabalhar no portfólio real.

Etapa 2: Frame HTML (index.html)

Seu nome

Este quadro não é muito complexo, mas quero explicar os objetivos gerais da configuração.

Bootstrap JS após jQuery

Parece haver algum tipo de sobreposição entre o arquivo Javascript do Bootstrap e o do jQuery. Não testei para ver a extensão dessa sobreposição, mas um exemplo é a funcionalidade suspensa que uso na barra de navegação. Se você carregar no Bootstrap primeiro, o botão suspenso não funcionará.

FontAwesome

Se você já fez algum desenvolvimento web, provavelmente sabe o que é FontAwesome. No entanto, se esse não for o caso, é um conjunto de ícones que inclui um kit de ferramentas para customização extra. É incrivelmente útil se você for como eu e não tiver absolutamente nenhum talento artístico.

hightlight.js

Esta estrutura permite destaque de código dinâmico em páginas da web. Você pode importá-lo como o resto das estruturas que eu uso se você usar apenas linguagens de programação comuns, mas também há uma opção para baixar um conjunto personalizado de linguagens. Eu escolhi a última opção por causa de algumas linguagens macro e ini, mas é inteiramente com você.

Nota: Esteja ciente dos lugares onde eu uso links embutidos em código para arquivos como os dois ícones e o highlight.js. Além disso, uma vez que apenas Bootstrap e jQuery são necessários, sinta-se à vontade para adicionar ou remover quaisquer outras estruturas. Se você remover algum, lembre-se de remover as linhas de código que correspondem mais tarde.

Etapa 3: Frame CSS (style.css)

/ * * Esperançosamente, diminuir a cor do bg para cinza e alterar o estilo da fonte torna o site mais fácil de consumir * / body {background: gray; família de fontes: 'Open Sans', sans-serif; }

/*

* Isso garante que a barra de navegação esteja no topo de tudo * / nav {z-index: 9999; }

/*

* Isso deve tornar o texto do parágrafo mais legível * / p {font-size: 18px; margem superior: 5px; margin-bottom: 5px; }

/*

* Isso garante que todos os meus blocos de código estão formatados corretamente * / code {text-align: left; }

/*

* Não quero que as listas tenham os marcadores * / li {list-style-type: none; }

/*

* Os links são azuis por padrão e eu quero que eles se alinhem com o estilo do Bootstrap * / li a, a {color: white; }

/*

* Eu vinculo uma tag de classe a um div que contém a barra de navegação para garantir que o conteúdo não seja sobreposto * /.navFix {padding-bottom: 70px; }

/*

* O tamanho aumentado estende a barra de navegação * /.social-media {font-size: 1.3em; }

/*

* A cor de destaque padrão para os links suspensos é branco * /. Menu suspenso a: hover {background-color: # 212529; }

/*

* Força divs mostrando pdfs a uma certa altura * /.pdfFill {height: 45rem; }

/*

* Adicione algum espaçamento entre os botões e blocos de código * /.codeStyle {padding-top: 30px; }

Incluí os elementos CSS baseados em conteúdo neste quadro para tentar economizar algum tempo mais tarde. Eles são todos muito simples e, em sua maioria, mudanças de qualidade de vida que tornam a interação com o portfólio mais fácil para os leitores.

nav z-index

Eu tenho uma quantidade muito limitada de experiência em desenvolvimento web, então não tenho certeza se este é um problema comum ao implementar a barra de navegação do Bootstrap, mas sem qualquer especificação de orientação de frente para trás, a barra de navegação aparecerá na verdade sob outro conteúdo, como Cartões de bootstrap. Isso é mais perceptível com a barra de navegação recolhível, mas incluí a alteração do índice de qualquer maneira por segurança.

alinhamento de código

Como normalmente uso as classes "justify-content-center" e "text-center" do Bootstrap para alinhar os elementos, não quero que meu código herde essa natureza centralizada. Isso é facilmente corrigido sobrescrevendo quaisquer alterações de alinhamento e alinhando as tags de código à esquerda: isso preserva o espaçamento da tabulação no código.

padding navFix

Quando a barra de navegação do Bootstrap está presa no topo da página, o conteúdo é carregado abaixo dela. Acredito que isso aconteça porque a barra de navegação está, na verdade, presa na parte superior da janela de visualização, em vez da própria página. Independentemente disso, isso é corrigido aumentando o espaço entre a barra de navegação e o resto do conteúdo.

altura do pdf

A altura padrão dos arquivos PDF é incrivelmente pequena. É essencialmente ilegível, então mudei a altura para tentar dar espaço suficiente para aproximadamente uma página por vez.

Etapa 4: Frame Javascript (javascript.js)

/ * * Isso procura por qualquer elemento com a classe 'toggle' e o oculta ou exibe * / function toggleSection (id, toggleID) {if (document.getElementById (id)) {var divID = document.getElementById (id); var divArray = document.getElementsByClassName (toggleID);

para (var i = 0; i <divArray.length; i ++) {divArray .style.display = "none"; }

divID.style.display = "bloquear";

}

retorna falso;

}

/*

* Código que precisa ser executado em uma determinada ordem * / $ (document).ready (function () {/ * * Carregar conteúdo de arquivos * /

/*

* Força um pequeno atraso para carregar os dados * / setTimeout (function () {/ * * Realce todo o código que foi carregado em * / $ ('pré-código'). Each (function (i, block) { hljs.highlightBlock (bloco);});}, 1000); });

Para tornar este portfólio fácil de modificar e gerenciar, decidi usar o formato de uma página. Ele mantém tudo local na maior parte e torna o carregamento do conteúdo mais rápido.

toggleSection

Usei valores de classe para gerenciar qual conteúdo precisa ser mostrado ou oculto porque na maioria das vezes estou usando divs para separar e agrupar vários elementos. Você também pode usar isso para agrupar botões individuais, mas requer uma verificação extra antes de definir a exibição de "bloqueio" para permitir que nenhum conteúdo seja mostrado.

carregamento de documento

Incluí isso porque geralmente é confuso incluir um monte de código de programação independente em arquivos HTML regulares. Podemos usar este método de realce dinâmico para forçar o processo a ocorrer depois de carregarmos o conteúdo de outros arquivos.

$ ('# mq2-intro'). load ("files / tutorials / mq2 / mq2-intro / content.html");

Este é um exemplo de como carregaremos o conteúdo.

Etapa 5: barra de navegação

Iniciais

• Casa
• Sobre mim
• Tutoriais de projetos
• Contate-me

• A barra de navegação é o elemento mais complexo de tudo no portfólio. A simples combinação de classes o torna uma espécie de quebra-cabeça que exige que você olhe continuamente para o livro de regras.

  Funcionalidade Bootstrap

  O bootstrap funciona essencialmente por meio de diferentes valores de classe. Olhando para o próprio elemento "nav", não é muito difícil determinar o propósito de cada classe:

  Nosso "navbar" é a opção "md" (médio), "capaz de expandir", "escuro". E nós o "fixamos" no "topo". Parece confuso porque é uma confusão de identificadores, mas se você olhar para eles como adjetivos para o elemento, será muito mais fácil entender o que está acontecendo.

  Marca

  A marca é o logotipo e o nome típicos que você vê em todos os sites no canto superior esquerdo. É um elemento de design testado e comprovado que todo usuário espera neste momento.

  Nota: As tags "i" são, na verdade, os ícones FontAwesome, e você obtém essas tags de qualquer página de ícone.

  Botão de alternância / recolhível (móvel)

  Este botão só aparece em dispositivos móveis. Mas, como incluímos na declaração "nav" que a barra de navegação precisa ser expansível, esses elementos se conectam por meio de seus IDs e identificadores "data-toggle".

  Links da barra de navegação (lado esquerdo)

  Esses links dependem inteiramente de quais categorias você precisa para seu portfólio. Incluí alguns dos exemplos típicos como ponto de partida, mas ninguém é o mesmo. Você pode não precisar de uma seção "Tutoriais" porque você se concentra na criação de esculturas de arte. Cada item "li" pode ser copiado e colado, portanto, uma vez que você descubra o que precisa, é fácil configurar a navegação.

  Observação: você pode criar tecnicamente menus suspensos dentro de outros menus suspensos, mas não o recomendaria, a menos que você queira adicionar mais CSS e Javascript para fazer a interface parecer limpa.

  Links da barra de navegação (lado direito)

  Ao fornecer a lista correta de links a classe "ml-auto", o Bootstrap separa as duas listas igualmente. Isso cria uma divisão limpa dos lados esquerdo e direito. Decidi usar este espaço para links de mídia social porque é um método muito comum e popular para aumentar sua presença. Se isso não for relevante, você pode descartar esses links para uma barra de pesquisa, informações de login, etc. Mas lembre-se de que é um espaço importante para usar. E semelhante aos links da barra de navegação no lado esquerdo, você também pode copiar e colar esses links.

  Nota: Se você planeja usar os links que eu já configurei, altere o "nome de usuário" nos próprios links "href".

  Etapa 6: página inicial

  

  

  

  Seu nome

  Programador Escritor Gamer

  Esta seção e suas páginas subsequentes de conteúdo dependerão do que você deseja colocar em seu portfólio. Obviamente, não posso abordar todos os tipos de conteúdo, mas tentei incluir imagens, PDFs, vídeos, blocos de código, algumas das inclusões típicas.

  Formato da Tabela

  A página inicial é configurada para funcionar como uma mesa. Eu não confiaria nas minhas incríveis habilidades de design para criar seu produto final, mas adicionei as diferentes variações de combinações de linhas e colunas para mostrar que é muito dinâmico e flexível. Você pode criar 3 linhas e 2 colunas para ter botões à esquerda e conteúdo à direita, ou pode fazer algo completamente diferente. Basta um pouco de experimentação.

  Botões

  Estes funcionam essencialmente como os botões normais. A única integração real do Bootstrap aqui decorre do estilo para combinar com o resto do tema. Caso contrário, crie tantos ou tão poucos botões quanto você precisa para mostrar seu conteúdo e, em seguida, certifique-se de combinar os links href com os IDs para os divs.

  Conteúdo do código de programação

  As tags de "código" são as tags padrão que o realce.js usa para gerenciar todo o realce. Se você se lembra do arquivo javascript.js, há uma seção para carregar o conteúdo de outros arquivos.

  $ ('# home-programmer-macro'). load ("files / home / watchLoot.mac");

  • A primeira parte procura o "id" do elemento em que deseja inserir o conteúdo.
  • A segunda parte é a localização do arquivo que você deseja carregar.

  Nota: Na verdade, o conteúdo não carrega completamente porque há uma boa chance de você estar editando esta página da web localmente, em vez de em um servidor. Isso pode ser resolvido de várias maneiras diferentes, que abordarei no final do Instructable.

  Vídeo do youtube

  O "iframe" incorporado, na verdade, vem do próprio YouTube. Não vou explicar extensivamente como obtê-los, mas quando você acessa "Compartilhar" um vídeo, há uma opção "Incorporar" que o ajudará a gerar o código necessário para mostrar seu vídeo na página da web.

  Etapa 7: Olhando para o Futuro

  Há uma grande chance de eu não ter abordado algum elemento ou tipo de conteúdo que você deseja incluir em seu site. Felizmente, há muitas opções boas para você dar os próximos passos sozinho.

  Documentação do Bootstrap

  A documentação do Bootstrap é um ótimo lugar para começar se você estiver procurando por elementos que são pré-programados e têm exemplos que você pode copiar e colar em seu portfólio para experimentar. Não toquei em Cartões, Carrosséis ou Formulários. Recomendo enfaticamente que você dê uma olhada na seção "Componentes" para ver as opções.

  W3Schools

  W3Schools é um site maravilhoso onde você pode aprender quase tudo relacionado a programação e desenvolvimento web. Eles são muito mais inteligentes do que eu e cobrem quase todas as funcionalidades HTML, CSS e Javascript que você possa imaginar.

  Hospedando seu portfólio

  Este Instructable ensina como hospedar seu site em algumas plataformas diferentes. Estas são as etapas que você precisa realizar se quiser mostrar seu portfólio às pessoas, recrutadores etc.

  Experimente e divirta-se

  A única maneira de fazer um ótimo portfólio é experimentando e tentando tudo e qualquer coisa que pareça interessante. Muitos portfólios e sites de design sofisticado usam excelentes efeitos de transição ou fundos dinâmicos, mas nenhum deles veio pré-fabricado.