segunda-feira, 23 de novembro de 2015

O que é o Bootstrap? Primeiros Passos

Bootstrap é um framework front-end que facilita a vida dos desenvolvedores web a criar sites com tecnologia mobile (responsivo). Além disso, o Bootstrap possui uma diversidade de componentes (plugins) em JavaScript (jQuery) que auxiliam o designer a implementar: tootlip, menu-dropdown, modal, carousel, slideshow, entre outros sem a menor dificuldade, apenas acrescentando algumas configurações no código, sem a necessidade de criar scripts e mais scripts.

Características:
  • Possui uma interface super amigável e moderna;
  • Atualmente possui uma grande diversidade de templates;
  • Grande quantidade de plugins adaptados ou desenvolvidos para o framework;
  • Sistema responsivo;
  • Um dos frameworks mais utilizados no desenvolvimento de portais e sistemas do mundo;
  • Guia de aplicação;
  • Download facilitado e totalmente FREE!
Primeiros Passos com Bootstrap:
  1. Faça o download do framework no site do desenvolvedor getbootstrap.com
  2. Após realizar o download, você terá os seguintes arquivos:

    bootstrap/
  ├── css/
  │   ├── bootstrap.css
  │   ├── bootstrap.min.css
  ├── js/
  │   ├── bootstrap.js
  │   ├── bootstrap.min.js
  └── img/
      ├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png
  3. Adicione os arquivos  nas respectivas pastas do seu projeto.
  4. Chame o CSS e o JS dentro da tag <head> do seu HTML

    <html> <head>
    <title>Bootstrap - Primeiros Passos</title>
    <!-- Incluindo o CSS do Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    </head>

Ao usar o bootstrap.js é necessário como requisito o famoso e poderoso jQuery, lembre-se de incluí-lo antes do Bootstrap


<body>
...
<!-- Incluindo o jQuery que é requisito do JavaScript do Bootstrap -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- Incluindo o JavaScript do Bootstrap -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

E pronto!

Não existe um arquivo executável, pois ele é somente um emaranhado de códigos que são aplicados ao seu projeto através da chamada no html.

O Bootstrap não é nada mais do que esses arquivos. Lembrando que para ambiente de desenvolvimento o melhor é incluir no seu HTML os arquivos identados: bootstrap.css e bootstrap.js, entretanto em ambiente de produção o indicado são os arquivos com o final .min pois são comprimidos e economizam muitos bytes o que melhora o carregamento das páginas HTML (principalmente em conexões 3G). Os arquivos no diretório img/ são os icones padrões do Bootstrap e são incluídos pelo arquivo css.

Código Fonte: Bootstrap Examples.


Crie uma página de login com: Modais do Bootstrap  
Melissa Lobo.
Postado por às
Marcadores: , , , , , ,

Nenhum comentário:

Postar um comentário

Assinar: Postar comentários (Atom)