tutoriais mais recente desenvolvimento web
 

Bootstrap Get Started

❮ Anterior Próxima Capítulo ❯

O que é Bootstrap ?

  • Bootstrap é uma estrutura de front-end livre para desenvolvimento web mais rápida e fácil
  • Bootstrap inclui modelos de design baseado em HTML e CSS para tipografia, formas, botões, tabelas, navegação, modais, carrosséis de imagem e muitos outros, bem como plugins JavaScript opcionais
  • Bootstrap também lhe dá a capacidade de facilmente criar designs responsivos

O que é Web Design Responsive?

web design ágil é sobre a criação de sites que automaticamente ajustam-se para olhar bom em todos os dispositivos, desde pequenas a grandes telefones desktops.

Bootstrap História

Bootstrap foi desenvolvido por Mark Otto e Jacob Thornton no Twitter, e lançado como um produto de fonte aberta em agosto de 2011 no GitHub.

Em junho 2014 Bootstrap foi o projeto No.1 no GitHub!

Por que usar Bootstrap ?

Vantagens de Bootstrap :

  • Fácil de usar: Qualquer pessoa com conhecimentos apenas básicos de HTML e CSS pode começar a usar Bootstrap
  • Características Responsive: Bootstrap CSS responsiva 's ajusta para celulares, tablets e desktops
  • Mobile-primeira abordagem: Em Bootstrap 3, estilos móveis de primeira fazem parte do quadro de núcleo
  • Compatibilidade do navegador: Bootstrap é compatível com todos os navegadores modernos (Chrome, Firefox, Internet Explorer, Safari e Opera)

Onde obter Bootstrap ?

Há duas maneiras para começar a usar Bootstrap em seu próprio Web site.

Você pode:

  • Baixar Bootstrap de getbootstrap.com
  • Incluir Bootstrap de um CDN

Baixando Bootstrap

Se você deseja fazer o download e anfitrião Bootstrap sozinho, 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 fornecer suporte CDN para Bootstrap CSS 's e JavaScript. Também incluem jQuery:

MaxCDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Uma vantagem de usar o Bootstrap CDN :
Muitos usuários já baixaram Bootstrap de MaxCDN ao visitar um outro local. Como resultado, ele será carregado a partir do cache quando eles visitam seu site, o que leva a tempo de carregamento mais rápido. Além disso, a maioria CDN's irá certificar-se que uma vez que um usuário solicita um arquivo a partir dele, será servido a partir do servidor mais próximo a eles, o que também leva a tempo de carregamento mais rápido.

Criar Primeira página Web com Bootstrap

1. Adicione o doctype HTML5

Bootstrap utiliza elementos HTML e propriedades CSS que exigem o doctype HTML5.

Sempre incluir o doctype HTML5 no início da página, junto com o atributo lang e o conjunto de caracteres correto:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 3 é móvel-primeiro

Bootstrap 3 é projetado para ser sensível aos dispositivos móveis. Mobile-primeiros estilos fazem parte do quadro de núcleo.

Para garantir a boa prestação e zoom toque, adicione o seguinte <meta> tag dentro do <head> elemento:

<meta name="viewport" content="width=device-width, initial-scale=1">

A width=device-width parte define a largura da página, para seguir a tela de largura do dispositivo (que irá variar dependendo do dispositivo).

A initial-scale=1 parte define o nível de zoom inicial, quando a página é carregada pela primeira vez pelo navegador.

3. Os contentores

Bootstrap também requer um elemento que contém a envolver conteúdo do site.

Há duas classes de contentores para escolher:

  1. O .container classe fornece um recipiente de largura fixa responsivo
  2. O .container-fluid classe fornece um recipiente de largura, cobrindo toda a largura da janela de visualização

Nota: Os recipientes não são empilháveis (você não pode colocar um recipiente dentro de outro recipiente).

Dois Básico Bootstrap Páginas

O exemplo a seguir mostra o código para um básicos Bootstrap página (com um recipiente de largura fixa responsiva):

Exemplo

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>
Tente você mesmo "

O exemplo a seguir mostra o código para uma base Bootstrap principal (com um recipiente de largura total):

Exemplo

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>
Tente você mesmo "

❮ Anterior Próxima Capítulo ❯