Este artigo apresentará principalmente o sistema de grade da Bootstrap.
A implementação do sistema de grade é definir o tamanho do contêiner, dividir 12 partes (ou 24 partes ou 32 partes, mas 12 partes são as mais comuns) e depois ajustar as margens interno e externo e, finalmente, combinar consultas de mídia para criar um poderoso sistema de grade responsiva.
O sistema de grade no bootstrap é dividir o recipiente em 12 partes.
O sistema de grade da Bootstrap é usado para o layout, que é na verdade uma combinação de colunas. Existem quatro usos básicos:
1. Combinação de colunas
Altere o número para mesclar colunas (Princípio: a soma das colunas não pode exceder 12), por exemplo:
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>Basic usage of column combination</title><link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"><!--css Estilo-> <Toy> [classe *= col-] {Background-Color: #eee; borda: 1px sólido #ccc; } </style> </head> <body> <br> <div> <div> <!-O sistema de grade no bootstrap divide o recipiente em 12 pedaços-> <!-Esta linha é dividida uniformemente por 1: 1: 1-> <div> .col-md-4 </div >-dd> .col-md-4 </div> <div>. <div> .col-md-4 </div> </div> <div> <!-Esta linha é dividida uniformemente separada por 1: 2: 1-> <div> .col-md-3 </div> <div> .col-md-6 </div> <div> .col-md-3 </div> </div> </> <//hem <//hit> </div>As renderizações são as seguintes:
2. Offset da coluna
Adicione o nome da classe "col-md-offset-*" no elemento da coluna (onde o asterisco representa o número de combinações de colunas a serem deslocadas), e a coluna com esse nome de classe será deslocada para a direita.
<div> <!-o espaçamento de quatro colunas que se movem para a direita-> <div> <div> .col-md-4 </div> <div> O espaçamento de quatro colunas que se move para a direita </div> <div> .col-md-3 </div> </divol! Ocorreu-> <div> <div> <div> .col-md-4 </div> <div> o espaçamento de quatro colunas que se movem para a direita </div> <div> .col-md-3 </div> </div> <div> <div> .col-md-3 </div> <div> <d-md-fffSet-fffSet </Div3> </div> <civ> </div> </div> </div. <div> col-md-4 </div> </div> </div>
As renderizações são as seguintes:
3. Classificação da coluna
A classificação da coluna é alterar a direção da coluna, alterar a esquerda e a direita flutuante e definir a distância flutuante. O bootstrap é alcançado adicionando os nomes de classe "col-md-push-" e "col-md-pul-" (onde o asterisco representa o número de combinações de colunas em movimento).
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> Uso básico </ititle> <link rel = "Stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/cs/Boots/BOOTSTRAPTRAPCDN.com/BOOSTRAP/3.1.1/cs/BOTS/BOOTS.BOOTSTRAPCDN.com/BOOSTRAP/ [classe *= col-] {Background-Color: #eee; borda: 1px sólido #ccc; } </style> </head> <body> <div> <div> <div> .col-md-3 </div> <div> .col-md-6 </div> </div> </div> </body> </html>4. Ninho de colunas
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> Uso básico </ititle> <link rel = "Stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/cs/Boots/BOOTSTRAPTRAPCDN.com/BOOSTRAP/3.1.1/cs/BOTS/BOOTS.BOOTSTRAPCDN.com/BOOSTRAP/ [classe *= col-] {Background-Color: #eee; borda: 1px sólido #ccc; } [classe *= col-] [classe *= col-] {Background-Color: #f36; Border: 1px tracejou #FFFF; Cor: #ffff; } </style> </ad Head> <body> <div> <div> <div> <div> Eu tenho uma grade aninhada nele <div> <div> <div> col-md-6 </div> <div> col-md-6 </div> </div> </div> <div-md-4 </div> <//</hod </mod> <//hiv </hiv </hiv </hiv <//hiv </hiv </hiv> </div> </div </niv> </div>As renderizações são as seguintes:
Se você ainda deseja aprender em profundidade, clique aqui para aprender e anexar dois tópicos interessantes a você: Bootstrap Learning Tutorial Bootstrap Tutorial Practical Tutorial
Série de artigos:
A primeira vez que entrei em contato com o Magical Bootstrap Basic Layout //www.vevb.com/article/89278.htm
A primeira vez que entrei em contato com o Magical Bootstrap Form //www.vevb.com/article/89330.htm
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.