configuração bootstrap sublime text - 1

Disciplina: Disciplina: Design para WebDesign para WebCARGA HORÁRIA:CARGA HORÁRIA: 90 horas90 horas

Faculdade de Educação de Bacabal

Profº: Márcio Fabiano O. de M. SantosCidade: Bacabal/Maranhão

DESIGN PARA WEB

PREPARAÇÃO DO AMBIENTE PARA BOOTSTRAP

Profº: Márcio Fabiano O. de M. SantosCidade: Bacabal/Maranhão

CONFIGURAÇÃO DO SUBLIME TEXT

Profº: Márcio Fabiano O. de M. SantosInstituição: Faculdade de Educação de Bacabal

Preparação do Ambiente

1. Faça o download e a instalação do Sublime Text. http://www.sublimetext.com/2



Preparação do Ambiente2. Entre no site https://wbond.net e clique em “Package

control“ para a instalação das extensões do Sublime Text 2 .


Preparação do Ambiente3. 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).


Preparação do Ambiente4. 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.



Console” e cole o código copiado na página anterior no pequeno espaço na parte inferior do Sublime Text e dê Enter.



Console” e cole o código copiado na página anterior no pequeno espaço na parte inferior do Sublime Text e dê Enter.


Preparação do Ambiente5. Feito isso, reinicie o Sublime Text, fechando-o e abrindo-o

novamente.


Preparação do Ambiente6. Para instalar as extensões diretamente no Sublime Text,

pressione CTRL + Shift + P e digite install na busca, clicando em Package Control: Install Package.


Preparação do Ambiente7. Instale o Plugin Emmet no Sublime text pressionando CTRL +

SHIFT + P >>> Install >>> Package Control >>> Emmet.


Preparação do Ambiente8. Instale o Plugin Open Folder no Sublime text pressionando

CTRL + SHIFT + P >>> Install >>> Package Control >>> Open Folder.


Preparação do Ambiente9. Instale o Plugin Twitter Bootstrap no Sublime text

pressionando CTRL + SHIFT + P >>> Install >>> Package Control >>> Twitter Bootstrap.


Preparação do Ambiente10. Instale o Plugin HTML5 no Sublime text pressionando CTRL +

SHIFT + P >>> Install >>> Package Control >>> HTML5.


Preparação do Ambiente11. Instale o Plugin HTMLAttributes no Sublime text

pressionando CTRL + SHIFT + P >>> Install >>> Package Control >>> HTMLAttributes.


Preparação do Ambiente12. Instale o Plugin HTML Snnipets no Sublime text

pressionando CTRL + SHIFT + P >>> Install >>> Package Control >>> HTML Snnipets.


Preparação do Ambiente13. Instale o Plugin Colorhighlighter no Sublime text

pressionando CTRL + SHIFT + P >>> Install >>> Package

Control >>> Color highlighter.


CONFIGURAÇÃO DO BOOTSTRAP



Preparação do Ambiente1. Faça o download do bootstrap: http://getbootstrap.com.br


Preparação do Ambiente2. Após o download do Bootstrap zipado, extraia a pasta do

mesmo.


Preparação do Ambiente3. 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.


Preparação do Ambiente4. 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.


Preparação do Ambiente5. 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


Linkando arquivos do BOOTSTRAP no HTML

