O sistema de grade é "sistemas de grade" em inglês e algumas pessoas o traduzem como "sistema de grade". Ele usa um layout de design de grade fixo. Seu estilo é legal e conciso. Tornou -se muito popular após a Segunda Guerra Mundial e tornou -se um dos estilos de design de publicações principais hoje.
Em 1692, Luís XIV, o recém -ascendente rei francês, sentiu que o nível de impressão da França era insatisfatório, então ele ordenou o estabelecimento de um comitê especial real para gerenciar a impressão. Sua primeira tarefa é projetar novas fontes que sejam científicas, razoáveis e de valor funcionais. O comitê foi liderado pelo matemático Nicolas Jaugeon. Eles foram baseados em corpos romanos e usavam quadrados como base de design. Cada grade quadrada foi dividida em 64 unidades quadradas básicas e cada unidade quadrada foi dividida em 36 grades pequenas. Dessa forma, um layout de impressão consiste em 2.304 grades pequenas. Nesta rigorosa rede de grade geométrica, a forma da fonte, o arranjo de layout e a eficácia da função de comunicação foram projetados. Esta é a atividade mais antiga do mundo a conduzir experimentos científicos em fontes e layouts, e também é o protótipo mais antigo do sistema de grade.
A definição do sistema Raster da página da web é: usando uma matriz de grade regular para orientar e padronizar a distribuição de layout e informações na página da web. Os sistemas rasters da Web são desenvolvidos a partir de sistemas de rasters planares. Para design da web, o uso de sistemas de grade pode não apenas tornar as informações nas páginas da web mais bonitas e fáceis de ler, mas também mais utilizáveis. Além disso, para o desenvolvimento do front-end, as páginas da Web serão mais flexíveis e padronizadas.
O Bootstrap fornece um sistema de grade de streaming de primeira e Mobile, primeiro móvel. À medida que a tela ou o tamanho da viewport aumenta, o sistema será dividido automaticamente em até 12 colunas. Inclui classes predefinidas fáceis de usar e também mixins poderosos para gerar mais layouts semânticos.
Em outras palavras, o Bootstrap divide a largura de um elemento em 12 partes. Organizamos os elementos nesta linha que são divididos em 12 partes.
1. Objetivos básicos
Faça as duas linhas a seguir e a largura de cada célula nessas duas linhas mudará devido a diferentes dispositivos:
Na tela pequena do telefone celular, o Apwward A representa 2 partes B responde por 10 partes, o queda de 1 é responsável por 1 parte B por 10 partes C responde por 1 partes e o ABC compartilha essas 12 peças.
Na tela média do tablet, para cima, as responsáveis por 8 peças B representam 4 partes, a AB compartilha essas 12 partes, para baixo em que A por 10 partes B representa 1 parte C representa 1 parte, a ABC compartilha essas 12 peças.
Na tela grande do PC, ascendentes representam 4 B representam 8 ações, a AB compartilha essas 12 ações, para baixo em que 1 B representa 10 C responsáveis por 1, a ABC compartilha essas 12 ações.
2. Processo de produção
Primeiro, configure o Bootstrap na pasta da web e faça o download dos componentes no site oficial (clique para abrir o link). A versão de bootstrap usada no ambiente de produção (clique para abrir o link). O Bootstrap3 não é compatível com 2. É recomendável usar o Bootstrap3 diretamente de acordo com seus documentos de desenvolvimento. Depois de descomprimir o bootstrap, copie as 3 pastas obtidas CSS, fontes e JS para o diretório do site. Se for o JSP Web Project do Eclipse, coloque -os na pasta Webroot.
O código é o seguinte, consulte os comentários para obter detalhes:
<! xmlns = "http://www.w3.org/1999/xhtml"> <head> <!-codificação da web, arquivos externos a serem usados automaticamente à tela-> <meta http-equiv = "content-type" = "text/html; charset = uttp-8" Rel = "Stylesheet" Media = "Screen"> <meta name = "viewport" content = "width = largura do dispositivo, escala inicial = 1,0, Scalable User = Não"> <Title> Sistema de grade </title> </ad Head> <body> <!-Usando o bootstrap Se você não usa o painel, coloque-o em um contêiner que é um contêiner para o contexto de um contexto, de um contexto, de um contexto, se você não usa o painel. --><div><!--Define a line --><div><!--xs represents the small screen of the mobile phone, md represents the screen in the tablet, and lg represents the large screen of the PC --><!--The sum of the elements of the same pair must be equal to 12, otherwise an error occurs, such as col-xs-2+B of A is equal to 12 --><!--bg-warning is the background color that defines a light yellow Cor-> <div> a </div> <div> b </div> </div> <div> <!-A verdade aqui é a mesma que acima, col-xs-1+b de col-xs-1+c de col-xs-10 é igual a 12-> <div> a </div </div </div> <div> c </div </> </> </div>