1

Bootstrap Framework
 2

Introdução
Bootstrap é o mais popular framework
HTML, CSS, e JS para desenvolvimento
de projetos responsivo e focado para
dispositivos móveis na web.
Documentação oficial
 3

Introdução
Framework definição:

“Um framework em desenvolvimento de

software, é uma abstração que une códigos
comuns entre vários projetos de software
provendo uma funcionalidade genérica.”

Wikipedia,
 4

Introdução
Qual é o problema?
●
Programar é difícil
●
Combinar interfaces com um bom design
e funcionalidades adequadas é complexo
 5

Introdução
Solução
●
Temos que fornecer formas de re-uso
que vão além de código: re-uso de
análise, design, código.
 7

Introdução
Basicamente o bootstrap será utilizado
para facilitar a criação e o
desenvolvimento de páginas HTML
estilizadas com CSS.
 8

Introdução
Tudo o que o bootstrap faz é possível de
se fazer SEM ELE, DE FORMA MANUAL.
Porém a utilização do framework facilita e
reduz o tempo de desenvolvimento,
primando a re-utilização de código.
 9

Obtenção
Para se obter o bootstrap deve-se baixar
os arquivos no site oficial:

http://getbootstrap.com.br/
 10

Obtenção
Veja:
 11

Obtenção
Veja:
 12

Obtenção
Salve o arquivo em uma pasta local.
 13

Obtenção
Depois extraia o conteúdo do arquivo ZIP
baixado.
Instalação
Colocar a pasta bootstrap-x-dist junto
do arquivo HTML.
 16

Instalação
O próximo passo é ligar o arquivo de
estilos do bootstrap na página HTML.

Dentro da pasta bootstrap-x-dist há um

diretório css, lá dentro há vários
arquivos. O que nos interessa é o
bootstrap.min.css
 17

Instalação
Veja:
Instalação
Ainda na pasta bootstrap-x-dist há outra
diretorias, fonts e js, que guardam
respectivamente as fontes e os ficheiro
JavaScript utilizadas pelo framework.
 19

Instalação
O próximo passo é ligar o arquivo CSS do
bootstrap com a página HTML.

Para isso usaremos a TAG LINK,

<link rel="stylesheet" href="…" />

 20

Instalação
Vamos usar o arquivo bootstrap.min.css

Veja:
 21

Instalação
Agora para testar vamos declarar um
pequeno trecho de código HTML com
algumas classes definidas dentro do
framework bootstrap.
 22

Instalação
Dentro do BODY coloque o seguinte código:
 23

Instalação
Veja o resultado:
 24

Utilização
Para aprender mais sobre a utilização do
framework, as classes que devem ser
usadas e recursos disponíveis podemos
aceder à documentação:

http://getbootstrap.com.br/
 25

Utilização
Um dos recursos disponíveis é o Sistema
de Grid (grid system).

Ele oferece uma forma bastante

interessante de posicionar elementos na
tela.
 26

Utilização
http://getbootstrap.com.br/css/#grid
 27

Utilização
O sistema de GRID do Bootstrap é uma
forma de organizar os elementos na página
por meio do uso de linhas e colunas.
 28
Disciplina: Desenvolvimento Web I

Utilização
Exemplo básico

Prof. Eder Pansani

E-mail: epansani@gmail.com
20 de setembro de 2017 http://ederpansani.com.br