Faça o layout de um projeto da web com Bootstrap 2.0

A principal tarefa ao criar um site é fazer o layout do design para criar a estrutura com xhtml e css para definir os espaços de conteúdo, para nos ajudar nesta tarefa existem frameworks padrão como 960gs ou Bootstrap.
Nesse caso, verei o Bootstrap que foi desenvolvido e usado pelo Twitter.
Bootstrap é uma estrutura projetada para simplificar o processo de criação de web designs. Para isso, oferece um conjunto de classes CSS e arquivos Javascript já programados, que permitem o desenvolvimento de tarefas como:

• Web design que funciona nos navegadores atuais, sem ter que fazer muitas alterações.

• Um web design que pode ser visualizado corretamente em diferentes dispositivos e em diferentes escalas e resoluções.

• Melhor integração com as bibliotecas mais comumente usadas, como jQuery.

• Um design sólido baseado em ferramentas e padrões atuais, como CSS3 / HTML5

Começaremos um exemplo baixando o framework http://getbootstrap.com/2.3.2/

Descompactamos o arquivo e veremos 2 diretórios com os componentes de bootstrap
Criamos um arquivo index.html que iremos explicar.
Criamos um html com os componentes básicos:

 Projete com Bootstrap / * Aqui vai o conteúdo * / 

O bootstrap mergulha a estrutura de 980 pixels em 12 colunas de 60 pixels para colocar conteúdo. Os blocos que podem ser criados vão de 1 a 12 usando a classe spanx, então span1 será um bloco de 60 pixels. Um exemplo de todos os blocos de conteúdo que podemos ter.

Vamos criar uma estrutura básica de um cabeçalho da web, coluna à esquerda, conteúdo, rodapé. Todas as classes já vêm nos frameworks

// quadro de contêiner geral// define o início de uma linha de blocos// bloco de 12 colunas igual a 980px para o cabeçalho;// bloco de 2 colunas igual a 120px para a coluna;// bloco de 10 colunas igual a 600px para conteúdo;// bloco de 12 colunas igual a 980px para o rodapé;

PROLONGAR

Componentes para criar um menu
Na parte do cabeçalho, você pode inserir um menu de lista com as classes da navbar para criar um menu:

// bloco de 12 colunas igual a 980px para o cabeçalho;

O item 1
Tópico 2
Tema 3

Assim podemos ver nosso cardápio pronto sem ter que lidar com css.

PROLONGAR

Então, se você quiser estender o bootstrap criando nossas próprias regras de css, criamos outro arquivo default.css e colocamos nosso código dessa forma e adicionamos nossa classe no código de exemplo:

Criamos um conteúdo na coluna de conteúdo

// bloco de 10 colunas igual a 600px para conteúdo;
Criamos conteúdo com Bootstrap para explicar o tutorial
// um parágrafo vazio é o mesmo que deixar uma linha ou espaço Veja Bootstrap

O resultado ao atualizar nosso exemplo será:

PROLONGAR

O exemplo não é um site completo ou com uma estética apreciável, mas como podemos ver com pouco esforço podemos fazer uma demonstração ou criar templates sem a necessidade de mais que um editor de texto e economizar muito trabalho com toda a plataforma padronizada.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo

Este tutorial ajudou você?

Se não

AJUDE A MELHORAR ESTE TUTORIAL!

Você acha que pode corrigir ou melhorar este tutorial? Você pode enviar sua Edição com as alterações que considerar úteis.
0 usuários editaram este tutorial. Edite e torne-se um especialista reconhecido!
Edite este tutorial

TUTORIAIS SEMELHANTES

Barra horizontal com efeito de foco em html5, css3 e bootstrapObtenha as coordenadas do cliente com a API do Google Maps em JavaScript (HMTL5, CSS3 e Bootstrap)Aprender a fazer uma apresentação de slides responsiva com HTML5 + BootstrapDesenvolvimento de interface da web avançada do Bootstrap FrameworkEstendendo BootstrapNetbeans: crie projetos HTML5 com modelos e plug-inInterfaces de usuário de bootstrapUsando os componentes do Bootstrap

Nenhum comentário, seja o primeiro!

Não espere mais e entre no SolveticDeixe seus comentários e aproveite a conta de usuário Junte-se a nós!

• Criar uma contaCadastre-se GRATUITAMENTE para ter sua conta SolveticRegistre uma conta
• IdentificarVocê já tem uma conta? Cadastre-se aquiIdentifique-me em minha conta