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
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