Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web Design Responsivo
Search
Guto Xavier
August 21, 2018
Technology
0
29
Web Design Responsivo
Oficina desenvolvida no Senac Americana para desenvolvimento de um site responsivo.
Guto Xavier
August 21, 2018
Tweet
Share
More Decks by Guto Xavier
See All by Guto Xavier
Criatividade Para Dev's
gutoffline
0
35
Manda Nudes
gutoffline
0
30
Criando uma Agenda Utilizando C#
gutoffline
0
590
Controle de versão com Visual Studio e GitHub
gutoffline
0
28
Programação para NÃO programadores
gutoffline
0
20
Revisitando Local Storage
gutoffline
0
38
Introdução ao desenvolvimento com HTML5
gutoffline
0
34
Criando seu tema no WordPress
gutoffline
0
25
Criando jogos com Phaser JS
gutoffline
1
150
Other Decks in Technology
See All in Technology
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
180
LangSmith入門―トレース/評価/プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
3
420
JSON攻略法.pdf
miyakemito
8
5.1k
Microsoft Intune 勉強会 第 2 回目
tamaiyutaro
1
220
Azureの基本的な権限管理の勉強会
yhana
0
940
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
130
EM完全に理解した と思ったけど、 やっぱり何も分からなかった話 / EM Night Fukuoka #1
hirutas
0
110
APIファーストなプロダクトマネジメントの実践 〜SaaSus Platformでの例〜 / "Practicing API-First Product Management - An Example with SaaSus Platform
oztick139
0
110
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
260
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
1k
20240418_Google ColabにLLMが搭載されたようなのでPython x データ分析の勉強方法を考えてみる
doradora09
0
150
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
140
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
What's new in Ruby 2.0
geeforr
337
31k
A better future with KSS
kneath
231
16k
Teambox: Starting and Learning
jrom
128
8.4k
Faster Mobile Websites
deanohume
299
30k
Web development in the modern age
philhawksworth
202
10k
4 Signs Your Business is Dying
shpigford
175
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
Transcript
WEB DESIGN RESPONSIVO – CRIANDO UM SITE ADAPTÁVEL
O QUE É WEB DESIGN RESPONSIVO?
“ Web Design Responsivo é uma abordagem destinada a elaborar
sites para fornecer uma ótima experiência de visualização, fácil leitura e navegação com um mínimo de redimensionamento e visionamento, para uma ampla gama de dispositivos.
BOOTSTRAP getbootstrap.com FOUNDATION foundation.zurb.com SKELETON getskeleton.com
BOOTSTRAP
“ Bootstrap is the most popular HTML, CSS, and JS
framework for developing responsive, mobile first projects on the web.
1. Download do Bootstrap
getbootstrap.com
2. Escrevendo o HTML BÁSICO
None
3. Incluindo o CSS do Bootstrap
None
4. Incluir o jQuery
<script src="https://ajax.googleapis.com/aj ax/libs/jquery/1.11.0/jquery.min.js "></script>
5. Incluindo o JavaScript do Bootstrap
<script src="//netdna.bootstrapcdn.com/boot strap/3.1.1/js/bootstrap.min.js"></ script>
6. Adicionar suporte para IE8
<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5 shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respo nd.js/1.4.2/respond.min.js"></script>
<![endif]-->
7. Barra de Navegação
<div class="navbar navbar-default navbar-static-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button
type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://mikspot.com/" title='Your choice, your world!'>Home</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"> <a href="#">All</a> </li> <li> <a href="#">Demo</a> </li> <li> <a href="#">Contact</a>
8. Adicionar um Container
getbootstrap.com
9. Adicionar um Título
getbootstrap.com
10. Criando uma Tabela
getbootstrap.com
11. Criando um Formulário
getbootstrap.com
12. Adicionando ícones no Botão
getbootstrap.com
13. Mensagens de Alerta
getbootstrap.com
14. Estilizando Imagens
getbootstrap.com
OBRIGADO! Perguntas?
[email protected]
slideshare.net/gutoffline