Personalizando Tendências, Ferramentas e Estruturas de Layouts do Bootstrap

Bootstrap é atualmente o estrutura de front-end número um e facilmente o maneira mais rápida de construir layouts. Ela existe há anos e desenvolvedores de terceiros já publicaram seus próprios recursos on-line. Esses recursos variam de temas livres para plugins e frameworks detalhados.

Neste artigo, gostaria de compartilhar um punhado desses recursos e melhores práticas para desenvolvedores que querem ir mais longe com o Bootstrap.

Todos recursos neste post são gratuitos, então você pode usá-los como quiser. Mesmo que você nunca tenha usado o Bootstrap, com certeza encontrará algo aqui que ajudará você a começar.

Restyling com Bootstrap

A biblioteca padrão do Bootstrap vem com sua próprio design exclusivo isso parece fantástico. É amplamente conhecido em toda a Web e você pode dizer facilmente quando um site é usando elementos tradicionais do Bootstrap.

Mas você também pode restyle estes elementos você mesmo usar o código do Bootstrap como base para o seu layout.

tem algumas maneiras diferentes você consegue fazer isso:

Adicione sua própria folha de estilo para sobrescrever o padrão.
Personalizar a saída do BootStrap, para que você obtenha apenas os elementos desejados.
Combine com complementos e plugins / temas.

Essa última opção é a mais comum e é uma das razões pelas quais o Bootstrap cresceu tão rápido.

Concedido eu também sou um grande fã do seu personalizar ferramenta porque é totalmente gratuito e te dá muito controle sobre quais recursos você deseja usar.

Existem toneladas de recursos para Bootstrap 3/4, criados por desenvolvedores de terceiros, então é mais fácil do que nunca crie seus próprios layouts exclusivos do BootStrap sem escrever muito código.

Plugins e Complementos

Desde Bootstrap vem com uma biblioteca maciça de JavaScript, é fácil o suficiente para expandir recursos do JavaScript. E os desenvolvedores certamente fizeram isso com seus próprios plugins, muitos lançados gratuitamente on-line.

Estes são meus favoritos que todos suporte Bootstrap nativamente. Muitos deles executar no jQuery, então eles também são fáceis de personalizar se você conhece o caminho da biblioteca jQuery.

Validador de formulário

Primeiro é o meu favorito plugin de validação de formulário, validador de formulários. Ele é executado no jQuery e suporta uma grande quantidade de estruturas front-end: Bootstrap, Foundation, Pure, UIKit e outras.

Você pode anexe manualmente qualquer número de 51 validadores para qualquer forma no seu site. Isso significa que os visitantes precisarão atender a esses requisitos de validação antes de poderem enviar o conteúdo.

Muitos formulários de contato usam esses validadores para exigem endereços de e-mail ativos. Mas, você também pode usá-los para uploads de imagens, ou senhas, praticamente qualquer coisa que seu coração Bootstrap desejar.

Selecionador de data e hora

Seletores de data Também é uma dor enorme para codificar a si mesmo. Muitos formulários apenas usam menus suspensos para as configurações de dia / mês / ano, mas você também pode usar este Plugin do selecionador de data do Bootstrap para salvar o aborrecimento.

É completamente de código aberto e é executado na biblioteca do Bootstrap 3.x. Você também vai notar suporta tanto a data e tempo usando outro plugin jQuery, Moment.js.

No geral, essa biblioteca é fantástica para ativar um selecionador de data de trabalho. Tem muitas dependências mas, felizmente, você não precisará escrever muito código para fazê-lo funcionar.

Classificações por estrelas

Aqui está outro recurso interessante para classificações de estrelas Na internet. Você pode acrescentar uma classificação de um a cinco estrelas em qualquer lugar no seu site, usando a biblioteca Bootstrap para comportamentos JavaScript.

Quando o usuário passa sobre essas estrelas, a exibição muda para qualquer que seja a classificação com base na posição do cursor. Então, com um clique, o usuário lança seu voto e define uma classificação por estrela, incluindo classificações de meia estrela.

Este plugin é definitivamente complicado de configurar porque você pode alterar muitas das configurações padrão para técnicas mais avançadas. No entanto, você pode ver uma demonstração ao vivo simples para avaliar se esse plug-in de classificação por estrelas se ajusta ao seu site.

WATable

Bootstrap vem com sua próprio estilo de layout de tabela para exibir dados tabulares no frontend. Mas, com o Plugin WATable, você pode adicionar um monte de recursos extras às suas tabelas do Bootstrap.

Este é um dos plugins mais detalhados do jQuery e estes são apenas alguns dos recursos que você pode adicionar:

Paginação personalizada.
Classificação de colunas.
Filtragem de dados.
Efeitos de animação de tabela.
Verificar para selecionar linhas inteiras.

WATable é descrito como um Canivete suíço de plugins de mesa e eu tenho que concordar com esta descrição. O fato de que ele suporta Bootstrap é apenas a cereja no topo do bolo.

Estes foram alguns dos meus plugins favoritos, mas há muitos outros por aí. Você pode navegar ainda mais nesta página se estiver curioso.

Estruturas de bootstrap

Bootstrap é na verdade uma estrutura grande porque permite que os usuários personalizar os estilos HTML e CSS padrão com algumas classes.

Mas os desenvolvedores pegaram a biblioteca BootStrap padrão e adicionaram seus próprios estilos para criar estruturas ainda maiores que trabalhar como temas, então você não precisa restyle Bootstrap a partir do zero.

Felizmente, eles são todos gratuitos e todos eles são executados nas classes padrão de BootStrap.

Bootflat

Talvez o framework BootStrap mais conhecido seja Interface do Bootflat naquela segue a tendência de design plano.

Trabalha com todos os recursos padrão do Bootstrap, incluindo todos os componentes JavaScript. As principais diferenças são mais design e estrutura onde os elementos de página usam esquemas de cores planas para se afastarem dos estilos de gradiente do Bootstrap.

Bootflat não foi usado em demasia muito, então você pode adicionar essa estrutura em qualquer página de destino ou página inicial para criar uma aparência exclusiva para seu site.

É 100% grátis e ainda vem com um selecionador de cores, assim você pode encontrar esquemas de cores planas para combinar com seu layout.

Faça merda

este kit de interface do usuário surpreendentemente contundente também constrói em cima da biblioteca Bootstrap 3 e é liberado gratuitamente no GitHub.

Get Shit Done vem da equipe da Creative Tim, onde eles vendem alguns recursos premium. Este kit de UI específico tem uma versão pro, mas não é necessário.

A versão de código aberto tem mais do que suficiente para todos e você pode verificar o demonstração ao vivo para ver como se parece no navegador.

Design de material de bootstrap

Outra tendência de design popular é Design de material do Google. Esta é uma linguagem de design criada originalmente para designers de aplicativos para Android, mas que desde espalhar na web e conquistou muito suporte de designers UI / UX.

Esta incrível estrutura de material do Bootstrap usa os recursos de design do material para construir um estilo de design personalizado fora da biblioteca de Bootstrap.

Por padrão, suporta tudo em BootStrap 3 e atualmente está sendo reformulado para também suportar o Bootstrap 4. Você pode aprender mais na página oficial que tem documentação e demonstrações.

Uma biblioteca semelhante que você pode tentar é MDBootstrap, embora eu ache este um pouco mais difícil de trabalhar.

Bootplus

O Google criou a linguagem de design de materiais, mas eles também têm seus próprios estilos para muitas de suas ferramentas e aplicativos da web.

O Bootplus imita o estilo da interface do Google+, juntamente com muitos dos documentos de ajuda do Google, Google Drive e aplicativos da Web semelhantes. Ele tem todos os mesmos recursos do Bootstrap, incluindo grades, estilos de layout, estilos de elementos e componentes JavaScript.

Você pode até mesmo navegar através de uma demonstração no site para ver o diferenças entre o Bootplus e a interface de usuário do Bootstrap original. Para um recurso gratuito, o Bootplus é extenso e é perfeito para quem gosta de técnicas de design do Google.

Ferramentas e recursos

Por fim, quero mergulhar nas muitas ferramentas gratuitas para personalização e construção de layouts Bootstrap.

Essas ferramentas são todas aplicativos da web e muitas delas são de código aberto no GitHub. Eles são feitos para economizar seu tempo e ajudá-lo a criar layouts de bootstrap incríveis sem muito código.

Editor ao vivo

O livre Editor ao vivo do Bootstrap é uma das melhores ferramentas para designers não técnicos. Se você não sabe como codificar, ainda pode confiar neste construtor Bootstrap para criar um layout inteiro a partir do zero.

isto funciona diretamente no seu navegador e você pode até escolher modelos pré-criados para começar.

Opções na barra lateral permitem adicione certos valores de CSS se você souber alguma codificação frontend. Mas você também pode usar a GUI para alterar cores, fontes, tamanhos e praticamente qualquer outra coisa que você goste.

Quando terminar, clique “Obter tema” e você pode copiar / colar os estilos CSS atualizados em seu próprio projeto. Super maneira fácil de restyle Bootstrap sem precisar recodificar tudo a partir do zero.

Construtor de formulários

Esta livre Construtor de Formulário de Bootstrap é um ferramenta de navegador arrastar e soltar que permite criar formulários do Bootstrap a partir do zero.

Mais uma vez, requer conhecimento de codificação zero e você tem acesso total a todos os elementos do Bootstrap 3. Basta selecionar o elemento desejado e arrastá-lo para a esquerda. A partir daqui, você pode alterar tudo, desde o texto de espaço reservado até a classe CSS.

De longe, o mais legal construtor de formulários que eu já vi e é 100% grátis!

BootSwatchr

Outra ferramenta gratuita que eu realmente gosto é BootSwatchr. Ele se baseia na estrutura do Bootstrap e permite que você atualizar cores, estilos de tema, e a layout geral da página.

O que eu gosto sobre este aplicativo é como ele também vem com um galeria livre de estilos pré-desenhados.

Então, você pode baixar um desenho que outra pessoa já fez ou você pode usar isso como ponto de partida para personalizar seu próprio tema.

Seguindo em frente

Bootstrap só está crescendo em popularidade, então agora é a melhor hora para mergulhar neste quadro. Felizmente, existem dezenas de plugins, frameworks e ferramentas gratuitas que você pode usar para agilizar o processo de desenvolvimento..

Neste artigo, mostrei apenas a ponta do iceberg, por isso, se você não vir nada aqui, é útil entrar no Google e ver o que mais você pode encontrar.