Bootstrap é a framework mais famosa para desenvolvimento responsivo (mobile-first) de HTML, CSS, e JavaScript em web sites.

(1)

BOOTSTRAP

 Bootstrap is a free front-end framework for faster and easier web development

 Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins

 Bootstrap also gives you the ability to easily create responsive designs O que é um Web Design Responsivo?

Site ou layout responsivo, ou também conhecido como site flexível é quando o site automaticamente se encaixa no dispositivo do usuário (PC, celular, tablet, etc).

Um site responsivo muda a sua aparência e disposição com base no tamanho da tela em que o site é exibido. Então, se o usuário tem uma tela pequena, os elementos se

reorganizam para lhe mostrar as coisas principais em primeiro lugar.

Vantagens do Bootstrap:

 Fácil de usar: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap

 Responsive: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops

 Abordagem Mobile-first: In Bootstrap 3, mobile-first styles are part of the core framework

 Compatibilidade: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)

Exemplo

<h1>My First Bootstrap Page</h1>

<p>Resize this responsive page to see the effect!</p>

</div>

<h3>Column 1</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

</div>

<h3>Column 2</h3>

</div>

<h3>Column 3</h3>

(2)

</div>

Baixando o Bootstrap

Se você deseja fazer o download do Bootstrap, vá para getbootstrap.com, e siga as instruções.

Bootstrap CDN

Se você não deseja fazer o download e hospedar Bootstrap, você pode incluí-lo a partir de um CDN (Content Delivery Network).

MaxCDN fornece suporte CDN para CSS e JavaScript do Bootstrap. Você também deve incluir jQuery:

script>

Criando uma página com Bootstrap

1. Acrescente o doctype HTML5

Bootstrap usa elementos HTML e propriedades CSS que necessitam do doctype HTML5.

<!DOCTYPE html>

<head>

</head>

</html>

2. Mobile-first

Bootstrap 3 foi desenvolvido para ser responsive para dispositivos mobile. Um estilo Mobile-first é parte do framework core.

Para garantir a utilização de zoom acrescente o <meta> abaixo dentro do elemento <head> :

O atributo width=device-width define que a largura da página deve seguir a largura da tela do dispositivo.

O atributo initial-scale=1 define o zoom inicial do navegador.

3. Containers

Um container é sempre necessário para englobar a página.

Existem duas classes de containers:

(3)

1. A classe .container fornece um fixed width container

2. A classe .container-fluid fornece um full width container, que abrange toda a dimensão da viewport

Observação: Containers não podem contar outros containers.

Exemplo 1

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

/script>

</script>

</head>

<body>

</div>

</body>

</html>

Exemplo 2

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

/script>

</script>

</head>

<body>

</div>

</body>

</html>

Grid

São utilizados 12 colunas na página. Estas colunas podem ser agrupadas.

(4)

Classes de Grid

 xs (para celulares)

 sm (para tablets)

 md (para desktops)

 lg (para desktops com alta resolução) Exemplo

</div>

Títulos

Por definição, Bootstrap trabalha com (<h1> atét <h6>) da seguinte maneira:

h1 Bootstrap heading (36px) h2 Bootstrap heading (30px) h3 Bootstrap heading (24px) h4 Bootstrap heading (18px) h5 Bootstrap heading (14px) h6 Bootstrap heading (12px)

<small>

<mark>

<abbr>

<dl>

<code>

<kbd>

<pre>

Cores de textos e fundo

As classe de cores dos textos são:.text-muted, .text-primary, .text-success, .text- info, .text-warning, e .text-danger:

(5)

As classes de cores dos fundos são:.bg-primary, .bg-success, bg-info, bg-warning, e .bg-danger:

Algumas classes

Classe

.lead .small .text-left .text-center .text-right .text-justify .text-nowrap .text-lowercase .text-uppercase .text-capitalize .initialism .list-unstyled .list-inline .dl-horizontal

.pre-scrollable

Tabelas

.table

.table-striped .table-bordered

(6)

.table-hover

.table-condensed Classes de contexto

Class

.active

.success

.info

.warning

.danger

.table-responsive classe cria uma tabela responsiva. A tabela irá rolar horizontalmente em dispositivos pequenos (menos de 768px). Ao visualizar em qualquer container maior do que 768px de largura, não há diferença:

Imagens

.img-rounded cria cantos arredondados:

.img-circle crua uma moldura circular (não suportado pelo IE8):

.img-thumbnail molda a imagem para uma miniatura:

Imagens responsivas

Imagens vem em todos os tamanhos. Então faça imagens responsivas ajustar automaticamente ao tamanho da tela.

Crie imagens responsivas com a classe .img-responsive na tag <img> . A imagem será então dimensionar bem para o elemento pai.

The .img-responsive class applies display: block; and max-width:

100%; and height: auto; to the image:

(7)

Galeria

<p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>

</a>

</div>

<p>Moustiers-Sainte-Marie: Considered as one of the "most beautiful villages of France".</p>

</a>

</div>

<p>The Cinque Terre: A rugged portion of coast in the Liguria region of Italy.</p>

</a>

</div>

Responsive Embeds

Também deixe vídeos ou slideshows dimensionar adequadamente em qualquer dispositivo.

Pode ser aplicado a <iframe>, <embed>, <video>, and <object>.

O exemplo a seguir mostra o .ebed-responsive-item para a tag <iframe> . A

<div> define o relação de aspecto do vídeo:

</div>

Jumbotron

A jumbotron indica uma caixa grande para chamar a atenção extra para algum conteúdo ou informação especial.

A jumbotron é exibido como uma caixa cinza com cantos arredondados. Ele também aumenta o tamanho da fonte do texto dentro dele.

Dica: Dentro de um jumbotron você pode colocar praticamente qualquer HTML válido, incluindo outros elementos Bootstrap / classes.

Use a <div> element with class .jumbotron to create a jumbotron:

Exemplo 1

<h1>Bootstrap Tutorial</h1>

(8)

<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>

</div>

<p>This is another text.</p>

</div>

Exemplo 2

<h1>Bootstrap Tutorial</h1>

<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive,

mobile-first projects on the web.</p>

</div>

<p>This is another text.</p>

</div>

Cabeçalho

Use a <div> com a classe .page-header para fazer um cabeçalho:

<h1>Example Page Header</h1>

</div>

Wells

A classe .well acrescenta uma borda arredondada ao painel:

<div class="well well-sm">Small Well</div>

<div class="well well-lg">Large Well</div>

Alertas

Bootstrap fornece uma maneira fácil de criar mensagens de alerta pré-definidos:

<strong>Success!</strong>

</div>

</div>

<strong>Warning!</strong>

</div>

<strong>Danger!</strong>

</div>

Closing Alerts

Para fechar alertas, acrescente a classe class="close" e data-dismiss="alert" no link ou botão:

(9)

<strong>Success!</strong>

</div>

Animated Alerts

.fade e .in adiciona um efeito de esmaecimento ao fechar a mensagem de alerta:

Botões

<button type="button" class="btn btn-default">Default</button>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</button>

The button classes can be used on an <a>, <button>, or <input> element:

<a href="#" class="btn btn-info" role="button">Link Button</a>

<button type="button" class="btn btn-info">Button</button>

Button Sizes

<button type="button" class="btn btn-primary btn-lg">Large</button>

<button type="button" class="btn btn-primary btn-md">Medium</button>

<button type="button" class="btn btn-primary btn-sm">Small</button>

<button type="button" class="btn btn-primary btn-xs">XSmall</button>

Block Level Buttons

A block level button spans the entire width of the parent element.

Add class .btn-block to create a block level button:

<button type="button" class="btn btn-primary btn-block">Button 1</button>

Active/Disabled Buttons

A button can be set to an active (appear pressed) or a disabled (unclickable) state:

<button type="button" class="btn btn-primary active">Active Primary</button>

<button type="button" class="btn btn-primary disabled">Disabled Primary</button>

Button Groups

Bootstrap allows you to group a series of buttons together (on a single line) in a button group:

Use a <div> element with class .btn-group to create a button group:

<button type="button" class="btn btn-primary">Apple</button>

<button type="button" class="btn btn-primary">Samsung</button>

</div>

(10)

</div>

</div>

<a href="#" class="btn btn-primary">Apple</a>

<a href="#" class="btn btn-primary">Samsung</a>

</div>

Nesting Button Groups & Dropdown Menus

Sony <span class="caret"></span></button>

<li><a href="#">Tablet</a></li>

<li><a href="#">Smartphone</a></li>

</ul>

</div>

Split Button Dropdowns

</button>

<li><a href="#">Tablet</a></li>

<li><a href="#">Smartphone</a></li>

</ul>

</div>

Glyphicons

Bootstrap provides 260 glyphicons from the Glyphicons Halflings set.

(11)

Glyphicons can be used in text, buttons, toolbars, navigation, forms, etc.

Badges

Badges are numerical indicators of how many items are associated with a link:

Labels

Labels are used to provide additional information about something:

Use the .label class, followed by one of the six contextual classes .label-

default, .label-primary, .label-success,.label-info, .label-warning or .label- danger, within a <span> element to create a label:

Basic Progress Bar

Uma barra de progresso pode ser usada para mostrar um usuário quanto tempo ocorre em um processo.

Bootstrap fornece vários tipos de barras de progresso.

<div class="progress-bar" role="progressbar" aria-valuenow="70"

aria-valuemin="0" aria-valuemax="100" style="width:70%">

<span class="sr-only">70% Complete</span>

</div>

Stacked Progress Bars

Progress bars também podem ser empilhados:

<div class="progress-bar progress-bar-

success" role="progressbar" style="width:40%">

Free Space </div>

<div class="progress-bar progress-bar-

warning" role="progressbar" style="width:10%">

Warning </div>

Danger </div>

</div>

Paginação Básica

Se você tem um site com muitas páginas, você pode querer adicionar algum tipo de paginação para cada página.

(12)

</ul>

</ul>

Breadcrumbs

Outra forma de paginação

<li><a href="#">Private</a></li>

<li><a href="#">Pictures</a></li>

<li class="active">Vacation</li>

</ul>