O documento descreve os passos para configurar o ambiente de desenvolvimento para trabalhar com Bootstrap no Sublime Text. Inclui instruções para instalar pacotes e plugins no Sublime Text, fazer o download do Bootstrap e jQuery e preparar a estrutura de pastas do projeto.

1. Disciplina:Disciplina: Design para WebDesign para Web
CARGA HORÁRIA:CARGA HORÁRIA: 90 horas90 horas
Faculdade de Educação
de Bacabal
Profº: Márcio Fabiano O. de M. Santos
Cidade: Bacabal/Maranhão

2. DESIGN PARA WEB
PREPARAÇÃO DO AMBIENTE PARA BOOTSTRAP
Profº: Márcio Fabiano O. de M. Santos
Cidade: Bacabal/Maranhão

3. CONFIGURAÇÃO DO SUBLIME
TEXT
Profº: Márcio Fabiano O. de M. Santos
Instituição: Faculdade de Educação de Bacabal
Preparação do Ambiente

4. 1. Faça o download e a instalação do Sublime Text.
http://www.sublimetext.com/2
Profº: Márcio Fabiano O. de M. Santos
Instituição: Faculdade de Educação de Bacabal
Preparação do Ambiente

5. Preparação do Ambiente
2. Entre no site https://wbond.net e clique em “Package
control“ para a instalação das extensões do Sublime Text 2 .
Profº: Márcio Fabiano O. de M. Santos
Instituição: Faculdade de Educação de Bacabal

6. Preparação do Ambiente
3. Após clicar em “package control” no site, clique em “install
now”, e copie em seguida o código de acordo com a versão do
“Sublime Text “utilizada (2 ou 3).
Profº: Márcio Fabiano O. de M. Santos
Instituição: Faculdade de Educação de Bacabal

7. Preparação do Ambiente
4. Abra o Sublime Text, vá até o menu “View “, clique em “Show
Console” e cole o código copiado na página anterior no
pequeno espaço e dê Enter.
Profº: Márcio Fabiano O. de M. Santos
Instituição: Faculdade de Educação de Bacabal

8. Preparação do Ambiente
4. Abra o Sublime Text, vá até o menu “View “, clique em “Show
Console” e cole o código copiado na página anterior no
pequeno espaço na parte inferior do Sublime Text e dê Enter.
Profº: Márcio Fabiano O. de M. Santos
Instituição: Faculdade de Educação de Bacabal

9. Preparação do Ambiente
4. Abra o Sublime Text, vá até o menu “View “, clique em “Show
Console” e cole o código copiado na página anterior no
pequeno espaço na parte inferior do Sublime Text e dê Enter.
Profº: Márcio Fabiano O. de M. Santos
Instituição: Faculdade de Educação de Bacabal

10. Preparação do Ambiente
5. Feito isso, reinicie o Sublime Text, fechando-o e abrindo-o
novamente.
Profº: Márcio Fabiano O. de M. Santos
Instituição: Faculdade de Educação de Bacabal

11. Preparação do Ambiente
6. Para instalar as extensões diretamente no Sublime Text,
pressione CTRL + Shift + P e digite install na busca, clicando
em Package Control: Install Package.
Profº: Márcio Fabiano O. de M. Santos
Instituição: Faculdade de Educação de Bacabal

12. Preparação do Ambiente
7. Instale o Plugin Emmet no Sublime text pressionando CTRL +
SHIFT + P >>> Install >>> Package Control >>> Emmet.
Profº: Márcio Fabiano O. de M. Santos
Instituição: Faculdade de Educação de Bacabal

13. Preparação do Ambiente
8. Instale o Plugin Open Folder no Sublime text pressionando
CTRL + SHIFT + P >>> Install >>> Package Control >>>
Open Folder.
Profº: Márcio Fabiano O. de M. Santos
Instituição: Faculdade de Educação de Bacabal

14. Preparação do Ambiente
9. Instale o Plugin Twitter Bootstrap no Sublime text
pressionando CTRL + SHIFT + P >>> Install >>> Package
Control >>> Twitter Bootstrap.
Profº: Márcio Fabiano O. de M. Santos
Instituição: Faculdade de Educação de Bacabal

15. Preparação do Ambiente
10. Instale o Plugin HTML5 no Sublime text pressionando CTRL +
SHIFT + P >>> Install >>> Package Control >>> HTML5.
Profº: Márcio Fabiano O. de M. Santos
Instituição: Faculdade de Educação de Bacabal

16. Preparação do Ambiente
11. Instale o Plugin HTMLAttributes no Sublime text
pressionando CTRL + SHIFT + P >>> Install >>> Package
Control >>> HTMLAttributes.
Profº: Márcio Fabiano O. de M. Santos
Instituição: Faculdade de Educação de Bacabal

17. Preparação do Ambiente
12. Instale o Plugin HTML Snnipets no Sublime text
pressionando CTRL + SHIFT + P >>> Install >>> Package
Control >>> HTML Snnipets.
Profº: Márcio Fabiano O. de M. Santos
Instituição: Faculdade de Educação de Bacabal

18. Preparação do Ambiente
13. Instale o Plugin Colorhighlighter no Sublime text
pressionando CTRL + SHIFT + P >>> Install >>> Package
Control >>> Color highlighter.
Profº: Márcio Fabiano O. de M. Santos
Instituição: Faculdade de Educação de Bacabal

19. CONFIGURAÇÃO DO BOOTSTRAP
Profº: Márcio Fabiano O. de M. Santos
Instituição: Faculdade de Educação de Bacabal
Preparação do Ambiente

20. Preparação do Ambiente
1. Faça o download do bootstrap: http://getbootstrap.com.br
Profº: Márcio Fabiano O. de M. Santos
Instituição: Faculdade de Educação de Bacabal

21. Preparação do Ambiente
2. Após o download do Bootstrap zipado, extraia a pasta do
mesmo.
Profº: Márcio Fabiano O. de M. Santos
Instituição: Faculdade de Educação de Bacabal

22. Preparação do Ambiente
3. Existem 3 pastas no arquivo extraído. São elas:
 Css – folhas de estilo pré-definidas do Bootstrap.
 Fonts – Fontes do Bootstrap.
 Js – Scripts pré-definidos do Bootstrap.
Profº: Márcio Fabiano O. de M. Santos
Instituição: Faculdade de Educação de Bacabal

23. Preparação do Ambiente
4. Acesse a página https://jquery.com Clique em Download
Jquery e baixe o arquivo Download the compressed,
production jQuery, Salvando-o na pasta JS do arquivo
extraído.
 Css – folhas de estilo pré-definidas do Bootstrap.
 Fonts – Fontes do Bootstrap.
 Js – Scripts pré-definidos do Bootstrap.
Profº: Márcio Fabiano O. de M. Santos
Instituição: Faculdade de Educação de Bacabal

24. Preparação do Ambiente
5. Renomeie a pasta extraída de acordo com o projeto
6. Abra a pasta renomeada no sublime text através do menu:
File >>> Open Folder >>> Pasta renomeada
Profº: Márcio Fabiano O. de M. Santos
Instituição: Faculdade de Educação de Bacabal

25. Linkando arquivos do BOOTSTRAP no HTML
Profº: Márcio Fabiano O. de M. Santos
Instituição: Faculdade de Educação de Bacabal
Preparação do Ambiente