Posts da Tag: bootstrap - Blog da TreinaWeb

Desenvolvimento Front-end

O que é Bootstrap?

Os frameworks são ferramentas incríveis e que poupam muito tempo dos desenvolvedores. Neste artigo, vamos conferir o Bootstrap, um dos mais populares frameworks front-end atualmente.

Afinal, o que é o Bootstrap?

O Bootstrap é um framework front-end gratuito e de código-fonte aberto, que disponibiliza componentes prontos para você utilizar em seu projeto. Com ele, você consegue criar e personalizar sites responsivos para dispositivos móveis, desktops e notebooks, com componentes pré-construídos e com plugins JavaScript poderosos. Tudo isso porque toda a estrutura do HTML, CSS e Javascript já se encontram prontas, bastando apenas que o desenvolvedor importe suas dependências em seu projeto.

Por exemplo: se você quer colocar em seu site um botão estilizado, você pode utilizar o componente button do Bootstrap diretamente, ou mesmo fazer pequenas customizações no componente para que ele tenha a aparência desejada. Com estes componentes pré-prontos, você ganha tempo, o que consequentemente faz com que seu projeto seja finalizado mais rapidamente, com menos esforço e até mesmo com mais qualidade.

Primeiramente, o Bootstrap foi desenvolvido pelo Twitter, onde inicialmente era apenas um projeto para padronizar o desenvolvimento dentro da própria empresa. Porém, no meio do desenvolvimento do projeto, a equipe percebeu o potencial que este framework tinha para impactar e trazer benefícios para a comunidade. Dessa maneira, ele foi liberado em 2011 já como um projeto open source, ou seja, para que os outros desenvolvedores pudessem contribuir. De lá pra cá, nesse meio tempo, foram muitas mudanças até chegar sua atual versão 4, que possui inúmeras novidades tanto nos componentes CSS quanto nos componentes JavaScript.

Por que utilizar o Bootstrap?

O Bootstrap segue os princípios de usabilidade e tendências de design para interfaces. Além disso, sua padronização permite que os sites tenham um visual atraente, ou seja, uma forma de criar páginas esteticamente agradáveis aos usuários. Ele conta ainda com componentes e plugins já prontos para você utilizar em seus projetos, o que faz com que você ganhe muita produtividade na hora de desenvolver.
Você pode adaptar o modelo-base do Bootstrap para atender às necessidades do seu projeto.

framework Bootstrap

As APIs do Bootstrap são tão poderosas e flexíveis que você tem total liberdade para personalizar os componentes da maneira como desejar com um mínimo de esforço. Nas figuras abaixo, temos exemplos de componentes do Bootstrap que foram livremente personalizados.

Componentes do Bootstrap

Com o Bootstrap, você também não precisa se preocupar se seu site funcionará bem em todas as diferentes resoluções de dispositivos: o Bootstrap já contém componentes responsíveis, já diminuindo consideravelmente o esforço envolvido na criação de interfaces plenamente responsivas.

Vantagens e desvantagens

Algumas vantagens e algumas desvantagens podem ser destacadas com relação a este framework.

Vantagens:
  • Responsividade: possui um sistema de layout 100% responsivo, capaz de manter a página completamente responsiva em diferentes dispositivos e resoluções;
  • Extensa biblioteca de componentes: possui um conjunto de componentes extenso, como ícones, painéis etc.;
  • Documentação: possui uma documentação bem completa e acessível;
  • Reuso de código: Como o Bootstrap entrega uma gama muito grande de componentes pré-prontos, se torna muito mais fácil lidar com questões como reusabilidade de código.
Desvantagens
  • Excesso de padronização: como a gama dos componentes pré-prontos é extensa e atende a praticamente todos os cenários no que diz respeito ao desenvolvimento de páginas web responsivas, as diferentes aplicações podem acabar ficando “com a mesma cara”. Porém, sua customização é bastante simples.
Bootstrap 4 - Fundamentos
Curso de Bootstrap 4 - Fundamentos
CONHEÇA O CURSO

Como aprender sobre o Bootstrap?

O Bootstrap é muito simples para aprender e customizar. Além da documentação oficial, temos os nossos cursos de Bootstrap, que acabaram de ser atualizados. Então, vale a pena dar uma conferida 🙂

Se você é um desenvolvedor front-end ou deseja seguir essa carreira, é interessante colocar o Bootstrap em seu plano de estudos. Ele irá te auxiliar muito no desenvolvimento de seus sites, fazendo-o ter muita produtividade. Você também pode utilizá-lo com outras ferramentas atuais do mercado como o Angular e o React.

Quando falamos de frameworks de componentes visuais, o Bootstrap não é o único no mercado. Alguns de seus concorrentes diretos são o Materialize e o Foundation. Porém, a simplificação e a baixa curva de aprendizagem ainda fazem o Bootstrap ser um dos frameworks mais adotados pelo mercado.


CSS Desenvolvimento Front-end HTML Javascript

Templates gratuitos para aplicações administrativas

Com a necessidade da criação de aplicações em um menor tempo possível, é cada vez mais viável a utilização de templates prontos para reduzir o tempo de desenvolvimento. Por isso, diversos templates, principalmente para áreas administrativas, foram sendo criados e compartilhados na internet, dos quais veremos alguns neste artigo.

Django - Templates
Curso de Django - Templates
CONHEÇA O CURSO

AdminLTE

O AdminLTE é um template administrativo css gratuito todo construído sobre o Bootstrap 3. Em sua recente atualização, algumas novidades foram adicionadas, tais como: Reescrita completa do JavaScript, suporte NPM e Bower, além de sua documentação. Open source, o AdminLTE é uma excelente opção aos desenvolvedores que buscam componentes responsivos e reutilizáveis.

Painel do adminLTE

A partir dá página Demo do AdminLTE é possível ter um Live Preview do template e testar todas as suas funcionalidades antes de realizar seu download.

O download e informações do template podem ser obtidos pelo site oficial do AdminLTE.

CoreUI

O CoreUI é um template gratuito baseado no Bootstrap 4 para criação de interfaces administrativas funcionais e sofisticadas. Trabalha com uma grande variedade de frameworks, tais como: Angular, Laravel e [React](O que é o React Native? “React”), o que permite que este template seja utilizado nos mais diversos projetos.

A partir da página Demo do CoreUI é possível ter um Live Preview do template e analisar sua vasta biblioteca de componentes, que trás consigo as vantagens em adicionar diversos botões, formulários e muitos outros componentes para facilitar o desenvolvimento.

Painel do CoreUI

Seu download pode ser feito através da página oficial do CoreUI.

Silex - Framework PHP
Curso de Silex - Framework PHP
CONHEÇA O CURSO

Light Bootstrap

Seguindo a mesma linha dos dois templates citados anteriormente, o Light Bootstrap é um template administrativo gratuito baseado no Bootstrap 4, desenhado para ser bonito e simples, além de facilitar a criação de aplicações administrativas. Provê uma grande coleção de elementos que possibilita a criação de apps das mais variadas formas.

Sua barra lateral pode ser alterada entre 6 cores diferentes (preto, azul, verde, laranja, vermelho e roxo), tornando sua experiência muito mais confortável.

Painel do bootstrap light

É possível acessar sua Live Preview através dá página Demo do Light Bootstrap.

Seu download pode ser realizado acessando o Github do Light Bootstrap.

Material Dashboard

O Material Dashboard, apesar de ser construído utilizando o Bootstrap 4, possui uma interface inspirada nos padrões de design do Google, o Material Design.

Seu visual é limpo e elegante, tornando-se uma ótima alternativa. Além disso, o Material Dashboard possui 60 componentes dos mais variados tipos e três páginas de exemplo para você iniciar seus projetos.

Painel do Material Dashboard

Sua Live Preview pode ser acessada na página demo do Material Dashboard, onde é possível ter uma breve visualização do template, antes de realizar seu download.

Após analisar suas funcionalidades, o download pode ser feito através da página do Material Dashboard.

Star Admin

Com uma aparência fantástica, o Star Admin é, com certeza, uma ótima opção a considerar quando queremos desenvolver um sistema administrativo. Também construído utilizando o Bootstrap 4, este template possui um visual único e arrojado, tornando sua aparência um ponto fortíssimo.

Além disso, o Star Admin possui uma grande coleção de widgets e componentes para os mais variados usos.

Painel Star Admin

A partir da página Demo do Star Admin é possível acessar a Live Preview deste template e seu download, feito através da página Star Admin Free.

Java - Criação de aplicações web com Spring Boot
Curso de Java - Criação de aplicações web com Spring Boot
CONHEÇA O CURSO

Conclusão

Neste artigo vimos alguns templates para utilizarmos no desenvolvimento de aplicações administrativas e o quanto eles agilizam a criação de novos projetos.

Desenvolvedor Front-end
Formação: Desenvolvedor Front-end
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé. Nesta formação vamos iniciar aprendendo lógica. Em seguida veremos todos os aspectos do HTML, CSS e JavaScript. Por fim, aprenderemos Sass, Google Analytics, empacotar nossas aplicações com Webpack, criação de aplicações Desktop com Electron, UX/UI e uma introdução aos frameworks mais utilizados no mercado: Angular, React, Vue e Ember.
CONHEÇA A FORMAÇÃO

Django Python

Estilizando formulários automáticos do Django com Bootstrap

No artigo passado “Criando formulários automaticamente com Django“, vimos o quão simples é a criação de formulários automáticos com o Django. Porém, os formulários gerados utilizam HTML puro, ou seja, não há nenhuma estilização para melhorar o visual da aplicação. Sendo assim, neste artigo veremos como estilizar os formulários gerados automaticamente com o Django utilizando o Bootstrap.

Instalando e configurando o crispy-forms

O primeiro passo para estilizar os formulários de uma aplicação é instalar a biblioteca crispy-forms, é ela quem irá estilizar os formulários da nossa aplicação. Para isso, vamos até a aba Project Interpreter do PyCharm, buscamos por django-crispy-forms e instalamos a biblioteca:

Após isso, vamos até o arquivo settings.py do projeto e registramos a biblioteca. Para isso, no array INSTALLED_APPS, adicionamos a seguinte linha:

INSTALLED_APPS = [
    ...
    'crispy_forms',
    'app',
]

Com isso, indicamos ao nosso projeto que faremos uso da biblioteca crispy-forms. O próximo passo é determinar qual framework utilizaremos para estilizar nossos formulários. O crispy-forms possui suporte aos seguintes:

  • bootstrap
  • bootstrap3
  • bootstrap4
  • uni-form
  • foundation

Para definir qual será utilizado, precisamos adicionar a configuração CRISPY_TEMPLATE_PACK logo após o array INSTALLED_APPS do arquivo settings.py e determinar qual framework será utilizado. Neste artigo usaremos o bootstrap4, conforme podemos ver abaixo:

INSTALLED_APPS = [
    ...
    'crispy_forms',
    'app',
]
CRISPY_TEMPLATE_PACK = 'bootstrap4'

Estilizando os formulários

Após instalar e configurar o crispy-forms, precisamos configurar o formulário para utilizar o bootstrap4. Para isso, no arquivo responsável por renderizar o formulário de cadastro de usuários, precisamos carregar a biblioteca crispy-forms, importar o bootstrap via CDN e, por fim, indicar que usaremos o a biblioteca para estilizar o formulário do Django. No final, o conteúdo do formulário possuirá a seguinte estrutura:

<!DOCTYPE html>
{% load crispy_forms_tags %} ## Carregando a biblioteca
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cadastro</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> ## Importando o bootstrap
</head>
<body>
<main class="container">
{{ form|crispy }} ## Determinando que usaremos o crispy forms
<button class="btn btn-primary">Cadastrar</button>
</main>
</body>
</html>

Ao final, o formulário que antes era assim:

Será renderizado assim:

Tudo isso, novamente, de forma automática e sem escrever uma única linha de código HTML. 😀


CSS

Os principais frameworks CSS

Utilizados cada vez mais, os frameworks ganharam espaço no desenvolvimento e no coração de desenvolvedores front-end.

O framework é um facilitador no desenvolvimento de diversas aplicações, e sem dúvida, sua utilização poupa tempo e custos para quem utiliza, pois de forma mais básica, são templates que provém diversas funções que podem ser utilizadas em qualquer projeto e com o resultado bem bacana.

Traz consigo diversas séries de classes e funções predefinidas que na hora do desenvolvimento torna-se agregadores de otimização de projetos, seja eles em aplicativos, sistemas ou interface.

No mercado diversas são as opções disponíveis de frameworks, e ver sobre cada um deles é uma excelente forma de encontrar aquele que poderá se adequar ao projeto desejado. Neste artigo falaremos sobre alguns desses frameworks e suas características.

HTML5 e CSS3 - Desenvolvimento web Básico
Curso de HTML5 e CSS3 - Desenvolvimento web Básico
CONHEÇA O CURSO

Bootstrap

logo bootstrap

O Bootstrap é um framework desenvolvido pelo Twitter, que traz consigo características bem definidas de inicialização rápida, ou seja, possuem estilos predefinidos (prontos). Com a utilização do Bootstrap é possível a criação de sites responsivos, que são aqueles que se adaptam ao tamanho da tela que estará sendo utilizada pelo usuário.

As características dos componentes também podem ser levados em consideração, já que seus modelos utilizam de uma mesma característica onde, além da harmonia na criação de projetos, possui um design padrão de arredondamento de bordas, conforme as figuras abaixo.

Abaixo temos o exemplo dos botões, que incluem seus vários estilos predefinidos.

botoões bootstrap

Seguindo esta mesma característica de arredondamento de bordas, temos o exemplo do componente de Cards, que combinam muito bem com outros componentes disponíveis no Bootstrap.

Componentes de card

É uma ferramenta de código-fonte aberto que auxilia no desenvolvimento HTML, CSS e JavaScript, criando experiências mais amigáveis aos que utilizam e facilitando a vida dos desenvolvedores.

É possível através do link https://getbootstrap.com/ realizar seu download e encontrar toda sua documentação, além de visualizar templates prontos e diversos componentes como os vistos acima para começar ainda hoje sua utilização.

Bootstrap 4 - Componentes CSS
Curso de Bootstrap 4 - Componentes CSS
CONHEÇA O CURSO

MaterializeCSS

Logo MaterializeCSS

A utilização do MaterializeCSS facilita a criação de interfaces dentro do padrão do material design feito pela Google, que tem como intuito de unificar a experiência do usuário na usabilidade dos seus softwares seja em smartphones, desktops ou tablets.

Outra característica do Material Design incorporado no MaterializeCSS são seus ícone e formatos, assim como a boa inspiração de cores. Uma ferramenta que possui bastante recursos visuais e muito mais leve, se comparado a outros frameworks.

Com design mais quadrados, se comparado ao Bootstrap, seus componentes não deixam a desejar quando o quesito é beleza. Algumas imagens abaixo podem comprovar que é possível a criação de aplicações cheias de estilo.

botoões materializeCSS
(A imagem acima, mostra três diferentes tipos de botões do MaterializeCSS.)

componente de paginação
(A imagem acima, mostra o componente de paginação que auxilia na divisão de conteúdos longos.)

O download pode ser feito através do link https://materializecss.com/ assim como visualizar seus diversos temas e componentes.

Foundation

logo foundation

Completamente personalizável, o Foundation é um framework que possui como forte característica sua responsividade, sem a necessidade de adicionar classes, facilitando assim a criação de sites, aplicativos e muito mais.
Conta com uma equipe bastante empenhada no fornecimento de serviços e cursos como forma de suporte.

Possui design mais profissional, com cores bem definidas e formatos de componentes mais quadrados, como podemos observar na imagem abaixo, que difere bastante dos componentes já apresentados acima.

botoões foundation

Diversas são as empresas que utilizam o framework Foundation, como: Adobe, ebay, HP, Amazon, Samsung, dentre outras.

O download pode ser feito a partir do link https://foundation.zurb.com/ onde é possível encontrar diversos tutoriais e cursos acerca de sua utilização.

Semantic UI

logo Semantic UI

O Semantic UI utiliza as tecnologias jQuery e LESS, tornando a criação de aplicações com o HTML conciso, o JavaScript intuitivo e um debug simplificado.

Utilizando o Semantic UI é possível a criação de layouts agradáveis para o usuário final, além de design responsivo. O uso do framework suporta animações 3D e fornece uma variedade de componentes de interface do usuário, repleto de recursos como a inclusão de um estado “desativado” a imagens e ícones que podem ser formatados com diferentes tamanhos e cores.

Utiliza princípios de linguagem natural, o que torna sem dúvida o código mais legível e de fácil entendimento. Conta com uma documentação bem organizada e guias sobre como começar sua utilização que pode ser acessada através do link https://semantic-ui.com/ onde é possível realizar também o download do framework, visualizar seus temas, elementos, integrações e muito mais.

Abaixo apresentamos um exemplo de um dos seus componentes, o botão, que possui animações ocultas, proporcionando uma excelente experiência ao usuário. Ao passar o mouse sobre os botões, é possível notar diversas interações entre eles.

Componentes Semantic UI

Componentes Semantic UI

Torna-se assim, uma excelente opção para desenvolvedores que buscam praticidade e simplicidade.

Conclusão

Neste artigo vimos os principais frameworks CSS disponíveis atualmente além de suas características e funcionalidades. Desta forma, a escolha cabe a partir da necessidade de cada projeto e do seu desenvolvedor.

Desenvolvedor Front-end
Formação: Desenvolvedor Front-end
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé. Nesta formação vamos iniciar aprendendo lógica. Em seguida veremos todos os aspectos do HTML, CSS e JavaScript. Por fim, aprenderemos Sass, Google Analytics, empacotar nossas aplicações com Webpack, criação de aplicações Desktop com Electron, UX/UI e uma introdução aos frameworks mais utilizados no mercado: Angular, React, Vue e Ember.
CONHEÇA A FORMAÇÃO