Responsive Web

Começar. É Gratuito
ou inscrever-se com seu endereço de e-mail
Rocket clouds
Responsive Web por Mind Map: Responsive Web

1. Viewport

1.1. Samples

1.1.1. <meta name="viewport" content="width=device-width, user-scalable=no">

1.1.2. <meta name="viewport" content="width=600, initial-scale=1">

1.2. Contents

1.2.1. width

1.2.1.1. int

1.2.1.2. device-width

1.2.2. initial-scale

1.2.2.1. float

1.2.3. minimum-scale

1.2.3.1. float

1.2.4. maximum-scale

1.2.4.1. float

1.2.5. user-scalable

1.2.5.1. yes

1.2.5.2. no

2. Media Queries

2.1. Samples

2.1.1. @media (max-width: 300px){ ... }

2.1.2. @media all and (min-width: 768px){ ... }

2.2. Types

2.2.1. all

2.2.2. print

2.2.3. screen

2.2.4. speech

2.3. Features

2.3.1. width

2.3.1.1. int

2.3.2. min-width

2.3.2.1. int

2.3.3. max-width

2.3.3.1. int

2.3.4. height

2.3.4.1. int

2.3.5. min-height

2.3.5.1. int

2.3.6. max-height

2.3.6.1. int

2.3.7. orientation

2.3.7.1. portrait

2.3.7.2. landscape

2.4. Logical Operators

2.4.1. and

2.4.2. or [ , ]

2.4.3. not

3. Bootstrap

3.1. Setup

3.1.1. CSS

3.1.1.1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

3.1.2. Theme

3.1.2.1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

3.1.3. JS

3.1.3.1. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

3.1.4. jQuery

3.1.4.1. <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

3.2. Container

3.2.1. Fixo

3.2.1.1. <div class="container"> ... </div>

3.2.2. Fluido

3.2.2.1. <div class="container-fluid"> ... </div>

3.3. Grid System

3.3.1. Sizes

3.3.1.1. Extra Small

3.3.1.1.1. prefix

3.3.1.1.2. device

3.3.1.1.3. resolution

3.3.1.2. Small

3.3.1.2.1. prefix

3.3.1.2.2. device

3.3.1.2.3. resolution

3.3.1.3. Medium

3.3.1.3.1. prefix

3.3.1.3.2. device

3.3.1.3.3. resolution

3.3.1.4. Large

3.3.1.4.1. prefix

3.3.1.4.2. device

3.3.1.4.3. resolution

3.3.2. Row

3.3.2.1. <div class="row"> ... </div>

3.3.3. Ordering

3.3.3.1. push

3.3.3.1.1. <div class="col-md-9 col-md-push-3"> ... </div>

3.3.3.2. pull

3.3.3.2.1. <div class="col-md-3 col-md-pull-9"> ... </div>

3.3.4. Showing and Hiding

3.3.4.1. Visible

3.3.4.1.1. visible-xs-*

3.3.4.1.2. visible-sm-*

3.3.4.1.3. visible-md-*

3.3.4.1.4. visible-lg-*

3.3.4.2. Hidden

3.3.4.2.1. hidden-xs

3.3.4.2.2. hidden-sm

3.3.4.2.3. hidden-md

3.3.4.2.4. hidden-lg

3.4. Components

3.4.1. Botão

3.4.1.1. <input type="button" class="btn btn-success" />

3.4.1.2. colors

3.4.1.2.1. btn-default

3.4.1.2.2. btn-primary

3.4.1.2.3. btn-success

3.4.1.2.4. btn-info

3.4.1.2.5. btn-warning

3.4.1.2.6. btn-danger

3.4.1.2.7. btn-link

3.4.1.3. sizes

3.4.1.3.1. btn-lg

3.4.1.3.2. btn-sm

3.4.1.3.3. btn-xs

3.4.1.4. ícones

3.4.1.4.1. <span class="glyphicon glyphicon-search"></span>

3.4.1.5. group

3.4.1.5.1. <div class="btn-group"> ... </div>

3.4.2. Navbar

3.4.2.1. colors

3.4.2.1.1. navbar-default

3.4.2.1.2. navbar-inverse

3.4.2.2. fixed

3.4.2.2.1. navbar-fixed-top

3.4.2.2.2. navbar-fixed-bottom

3.4.2.3. alignment

3.4.2.3.1. pull-left

3.4.2.3.2. pull-right

3.4.3. Nav

3.4.3.1. Tabs

3.4.3.2. Pills

4. Web App

4.1. Android

4.1.1. <meta name="mobile-web-app-capable" content="yes">

4.2. iOS

4.2.1. <meta name="apple-mobile-web-app-capable" content="yes">