Treinamento Bootstrap – Layout responsivo – Vamos ao que interessa!

View Github Repository Open presentation in a new window

brunoramalho

See all presentation from brunoramalho

Treinamento Bootstrap – Layout responsivo – Vamos ao que interessa!

3 0

Treinamento-Bootstrap

On Github brunoramalho / Treinamento-Bootstrap

Treinamento Bootstrap

Layout responsivo

Noções gerais e implementação deum template utilizando Bootstrap 3

Bruno Ramalho - Github do treinamento

Objetivo do treinamento

Promover aos participantes conhecimentos práticos sobre o framework Bootstrap e aplicação em layouts responsivos.

Vamos abordar o conceito de responsividade, estrutura do bootstrap, funcionamento da grid, componentes do framework, estudo de uso incorreto e aplicações práticas.

Vamos ao que interessa!

  • Responsividade
  • Frameworks CSS Responsivos
  • Bootstrap
  • Casos de uso
  • Aplicação prática

Responsividade

  • Porque usar Layout Responsivo?
  • Qual a importância do Layout Responsivo?
  • Layout Fixo x Líquido x Responsivo

Layout Responsivo? É importante?

Responsividade tem crescido junto com o crescimento do mercado de dispositivos móveis, principalmente por conta de tablets e smartphones.

Neste novo contexto de várias resoluções, responsividade surge como uma evolução lógica do desenvolvimento web.

Claro que não podemos achar que isso resolve todos os problemas e talvez nem seja a solução definitiva para todos, mas com certeza é um caminho a ser seguido e ainda mais explorado.

Fixo x Líquido x Responsivo

Este é o formato que mais utilizamos, talvez o mais comum, por enquanto. Neste modelo a página tem tamanho fixo para tudo, independente de onde está sendo visualizada.

Fixo x Líquido x Responsivo

Este tipo de design se preocupa em construir tudo em tamanhos flexíveis (%, em, rem), nunca, ou quase nunca utilizando números fixos na sua construção.

O tamanho do site será, por exemplo, terá 80% da tela, a sidebar terá 30% e o conteúdo terá 70% desses 80%.

Fixo x Líquido x Responsivo

Nesta técnica o site é construído de forma que ele tente se adaptar o melhor possível a tela em que esta sendo carregado.

A idéia aqui é proporcionar a melhor experiência para o usuário, nesta técnica utiliza-se bastante das media queries para definir como o site deve se comportar em cada momento, é uma mistura do design fixo e design fluído.

Media Queries

As Media Queries definem condições para a utilização de um CSS específico. Se essas condições forem aprovadas, ou seja, se o dispositivo de adequar a todas as condições, o CSS será aplicado.

Vale ressaltar que media queries só são aceitas nativamente a partir do IE9 
body { background: blue; }

@media screen and ( max-width: 320px ) {
   body { background: red; }
}

@media screen and ( min-width: 321px ) and ( max-width: 480px ) {
   body { background: green; }
}

Frameworks CSS Responsivos

Bootstrap

  • O que é?
  • Como funciona?
  • Conceito de grids
  • Componentes (botões, inputs, radios, checkbox, ...)

O que é Bootstrap?

O Twitter Bootstrap foi projetado para auxiliar as pessoas, seja você um desenvolvedor client-side ou back-end.

O intuito dele é ser um poderoso aliado na montagem de páginas HTML Responsivas, de forma rápida e simples.

No entanto é preciso enfatizar que ele foi desenvolvido para navegadores modernos, mas ainda é compatível mesmo que não 100% com Internet Explorer 8+, através do RespondJS.

Bootstrap

  • O que é?
  • Como funciona?
  • Conceito de grids
  • Componentes (botões, inputs, radios, checkbox, ...)

Como funciona?

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

Você pode baixar atráves do site oficial ou do github, ou ainda customizar seu pacote caso necessário.

Como funciona?

Você precisa incluir as seguintes linhas no HTML, para que o Bootstrap funcione corretamente.

[...]
  
[...]
  
[...]
  
[...]

Bootstrap

  • O que é?
  • Como funciona?
  • Conceito de grids
  • Componentes (botões, inputs, radios, checkbox, ...)

Conceito de Grid

O Bootstrap trabalha em cima de um complexo sistema de grids, que nada mais é que montarmos o nosso site/sistema em cima de colunas e linhas, ele trabalha tanto com grid líquida, como com grid fixa, ou grid responsiva.

Grosseiramente você pode comparar as grids com tabelas, mas a forma como o browser lê a informação é completamente diferente.

Exemplo de Grid


  
.col-md-1

  [...]
  
.col-md-1





  
.col-md-8

  
.col-md-4





  
.col-md-4

  
.col-md-4

  
.col-md-4



						
						
Padrão da Grid do Bootstrap

						
Classes importantes

						
//fixando a largura de um elemento
.container
						

					
Bootstrap

						
Componentes

						
O Bootstrap é muito mais que apenas um sistema de grid, ele é um framework para desenvolvimento de aplicações, possuindo muitos componentes prontos, para o caso de necessário se montar um sistema completo, que não possua design, por exemplo, ou até mesmo aplicar a um design pronto.

						
Componentes

						
Ícones, Dropdowns, Botões, Formulário, Menus de navegação, Breadcrumbs, Paginaçao, Labels, Badges, Texto, Alertas, Barras de progresso, Objetos de mídia, Tabelas responsivas, Embed responsivos, e outros.

						
Aqui você encontra a lista completa de componentes do Bootstrap com sua documentação.

					
Casos de uso

					
  • Exemplo de problemas com override de regras da grid responsiva
    • 
						
  • Exemplo de aplicação limpa com ganho de tempo e esforço
    • 
					
Aplicação prática

					
Criaremos na prática uma página utilizando Bootstrap