BOOTSTRAP_pt

Prévia do material em texto

Desenvolvimento Web para Hackers
Luli Rosenberg
Desenvolvimento Web para Hackers
Ministramos cursos Mundialmente
Orador em conferencias de Cyber Security
Pesquisador de cyber na empresa Check Point.
Amamos aprender novas tecnologias
:)
 Quem Somos
Desenvolvimento Web para Hackers
Visão geral do curso
Aprender HTML, JavaScript, PHP, MySQL.
Aprender conceitos web e como aplicar-los.
Aprender como construir um simples aplicativo web
Como fazer debug de seu aplicativo web
Desafios de injeção de códigos
Projeto final
Desenvolvimento Web para Hackers
O que é o BOOTSTRAP?
O Bootstrap é um kit de ferramentas de código aberto para desenvolvimento em HTML, CSS e Java Script. Crie um protótipo rápido de suas idéias ou crie seu aplicativo inteiro com um sistema de grade responsivo com extensos componentes pré-construídos e poderosos plugins criados com jQuery.
Desenvolvimento Web para Hackers
Noções básicas da grade do Bootstrap
O sistema de grade do Bootstrap permite até 12 colunas na página.
Desenvolvimento Web para Hackers
Noções básicas da grade do Bootstrap
O sistema de grade do Bootstrap permite até 12 colunas na página.
Desenvolvimento Web para Hackers
Tipografia de Bootstrap
<mark>	
<code>
<kbd>
<pre>
.bg-primary
.text-primary
.text-center
Desenvolvimento Web para Hackers
Tabela de Bootstrap
Para criar uma bela tabela, basta usar a seguinte classe:
.table
.table-striped
.table-bordered
Desenvolvimento Web para Hackers
Bootstrap Image
No bootstrap, temos 3 tipos de imagens:
Desenvolvimento Web para Hackers
Cabeçalhos de página de inicialização
.jumbotron
.well
Desenvolvimento Web para Hackers
Alertas de Bootstrap
Desenvolvimento Web para Hackers
Botões Bootstrap
O Bootstrap fornece diferentes estilos de botões:
 
.btn
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
.btn-lg
.btn-md
.btn-sm
.btn-xs
.btn-block
Desenvolvimento Web para Hackers
Grupos Bootstrap
O Bootstrap permite agrupar uma série de botões (em uma única linha) em um grupo de botões:
Desenvolvimento Web para Hackers
Glyphicons(ícones) e Labels no Bootstrap
Bootstrap contem 260 glyphicons no conjunto Glyphicons Halflings 
Desenvolvimento Web para Hackers
Barra de progresso do bootstrap
Uma barra de progresso pode ser usada para mostrar ao usuário quanto tempo ele / ela está em um processo.
O Bootstrap fornece vários tipos de barras de progresso.
Desenvolvimento Web para Hackers
Aria e Role
As funções da aria e role podem fazer uma enorme diferença quando seu conteúdo é processado por telas e outras tecnologias assistivas. À medida que o uso de tecnologias assistivas se torna mais comum, precisamos considerar a integração do ARIA em nosso código como uma prática regular.
Desenvolvimento Web para Hackers
Paginação 
Se você possui um site com muitas páginas, pode adicionar algum tipo de paginação a cada página.
Desenvolvimento Web para Hackers
Grupo de listas
Grupos de listas básicos, permite agrupar botões
Desenvolvimento Web para Hackers
Panel
Um panel no bootstrap é uma caixa delimitada com algum preenchimento ao redor do conteúdo e um cabeçalho
Desenvolvimento Web para Hackers
Dropdowns
Um menu suspenso é um menu alternável que permite ao usuário escolher um valor em uma lista predefinida
Desenvolvimento Web para Hackers
Collapse e Accordion
São úteis quando você deseja ocultar e mostrar grande quantidade de conteúdo
Desenvolvimento Web para Hackers
Tabs
A maioria das páginas da Web possui algum 
tipo de menu
Desenvolvimento Web para Hackers
Navbar
A maioria das páginas da Web possui algum tipo de menu
Desenvolvimento Web para Hackers
forms
Formulário em bootstrap recebem automaticamente algum estilo global com o Bootstrap e existem 3 tipos de Formulário:
Formulário vertical (este é o padrão)
Forma horizontal
Formulário em linha
Desenvolvimento Web para Hackers
Forms
Desenvolvimento Web para Hackers
Inputs
O Bootstrap suporta os seguintes controles de formulário:
input
textarea
checkbox
radio
select
Desenvolvimento Web para Hackers
Carousel 
O plug-in Carousel é um componente para percorrer elementos, como um carrossel (apresentação de slides).
Desenvolvimento Web para Hackers
Modal
O plugin Modal é uma caixa de diálogo / janela pop-up exibida na parte superior da página atual
Desenvolvimento Web para Hackers
Tooltip
O plug-in de tooltip é uma pequena caixa pop-up que aparece quando o usuário move o ponteiro do mouse sobre um elemento (é necessário ativar o tooltip usando javascript).
Desenvolvimento Web para Hackers
Popover
O plug-in Popover é semelhante ao tooltips; é uma caixa pop-up que aparece quando o usuário clica em um elemento. A diferença é que a popover pode conter muito mais conteúdo.
Desenvolvimento Web para Hackers
Templates
https://www.w3schools.com/bootstrap/bootstrap_templates.asp
O W3school usou o sistema de grade do Bootstrap para criar alguns modelos HTML responsivos. Aqui está um link para os modelos:
Desenvolvimento Web para Hackers
Home Work 👻
Familiarize-se com todos os elementos de inicialização
Revise toda a apresentação novamente ou use o w3school:
https://www.w3schools.com/bootstrap/default.asp
Reconstrua seu sistema HTML com bootstrap
Pegue o sistema que você projetou na lição HTML e reconstrua-o com bootstrap
Desenvolvimento Web para Hackers
Perguntas
Desenvolvimento Web para Hackers