Tutorial de bootstrap
Twitter Bootstrap é a estrutura de front end mais popular nos últimos tempos. É uma estrutura de front-end móvel elegante, intuitiva e poderosa para um desenvolvimento web mais rápido e fácil. Ele usa HTML, CSS e Javascript. Este tutorial vai te ensinar os fundamentos do Bootstrap Framework, usando o qual você pode criar projetos da web com facilidade. O tutorial é dividido em seções como Estrutura Básica do Bootstrap, CSS do Bootstrap, Componentes do Layout do Bootstrap e Plug-ins do Bootstrap. Cada uma dessas seções contém tópicos relacionados com exemplos simples e úteis.
Por que aprender bootstrap?
Mobile first approach - Bootstrap 3, framework consiste em primeiros estilos móveis em toda a biblioteca, em vez de em arquivos separados.
Browser Support - É compatível com todos os navegadores populares.
Easy to get started- Com apenas o conhecimento de HTML e CSS, qualquer pessoa pode começar a usar o Bootstrap. Além disso, o site oficial do Bootstrap possui uma boa documentação.
Responsive design- O CSS responsivo do Bootstrap se ajusta a desktops, tablets e dispositivos móveis. Mais sobre o design responsivo está no capítulo Bootstrap Responsive Design.
Fornece uma solução limpa e uniforme para construir uma interface para desenvolvedores.
Ele contém componentes embutidos bonitos e funcionais que são fáceis de personalizar.
Ele também fornece personalização baseada na web.
E o melhor de tudo é um código aberto.
Hello World usando Bootstrap.
Apenas para deixá-lo um pouco entusiasmado com o Bootstrap, vou apresentar um pequeno programa Bootstrap Hello World convencional. Você pode experimentá-lo usando o link Demo.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<!-- Bootstrap -->
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src = "https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src = "js/bootstrap.min.js"></script>
</body>
</html>
Aplicações de Bootstrap
Scaffolding- Bootstrap fornece uma estrutura básica com Sistema de grade, estilos de link e plano de fundo. Isso é abordado em detalhes na seçãoBootstrap Basic Structure
CSS- Bootstrap vem com o recurso de configurações CSS globais, elementos HTML fundamentais estilizados e aprimorados com classes extensíveis e um sistema de grade avançado. Isso é abordado em detalhes na seçãoBootstrap with CSS.
Components- Bootstrap contém mais de uma dúzia de componentes reutilizáveis construídos para fornecer iconografia, menus suspensos, navegação, alertas, pop-overs e muito mais. Isso é abordado em detalhes na seçãoLayout Components.
JavaScript Plugins- Bootstrap contém mais de uma dúzia de plug-ins jQuery personalizados. Você pode incluir todos eles facilmente ou um por um. Isso é abordado em detalhes na seçãoBootstrap Plugins.
Customize - Você pode personalizar os componentes do Bootstrap, variáveis LESS e plug-ins jQuery para obter sua própria versão.
Público
Este tutorial foi preparado para qualquer pessoa que tenha um conhecimento básico de HTML e CSS e queira desenvolver sites. Depois de concluir este tutorial, você se encontrará com um nível moderado de especialização no desenvolvimento de projetos da web usando o Twitter Bootstrap.
Pré-requisitos
Antes de prosseguir com este tutorial, presumimos que você já conheça os fundamentos de HTML e CSS. Se você não conhece bem esses conceitos, sugerimos que consulte nosso breve tutorial sobre HTML Tutorial e CSS Tutorial.