O que é Bootstrap?
O Bootstrap é uma estrutura front-end para o rápido desenvolvimento de aplicativos e sites da Web. O Bootstrap é baseado em HTML, CSS e JavaScript.
história
O Bootstrap foi desenvolvido por Mark Otto do Twitter e Jacob Thornton. O Bootstrap é um produto de código aberto lançado no GitHub em agosto de 2011.
Eu tenho muito tempo livre recentemente. Hoje vou apresentar a você uma estrutura de "estilo" de front -end - Bootstrap.
1. Arquitetura geral de bootstrap
Por que na introdução chamo Bootstrap como uma estrutura de estilo front-end? Talvez esse título não seja muito preciso, mas acho que esse título pode permitir que alguns iniciantes entendam e entendam o que o bootstrap é mais rapidamente. Não gosto de usar algumas palavras de ponta para aprofundar o entendimento de um certo conhecimento, mas, em vez disso, prefiro usar algumas palavras fáceis de entender para descrever pontos de conhecimento. Embora essa descrição possa ser um pouco imprecisa, acho que não é grande coisa, porque essas descrições podem realmente permitir que os iniciantes entendam esse conhecimento mais rapidamente. Como fiquei confuso quando estava aprendendo pontos de conhecimento, alguns documentos oficiais de conhecimento eram tão sofisticados. De fato, para ser franco, foram apenas algumas coisas do passado e depois encapsuladas para facilitar e mais rápido o desenvolvimento. Então, aqui eu compartilho que a estrutura do bootstrap é a mesma. Além disso, a organização de conteúdo também se destina a permitir que os iniciantes o dominem melhor. Porque quando comecei a entrar em contato com ele, também era iniciante. Eu acho que essa maneira de organizar pode ajudá -lo a entender o conhecimento mais rápido e melhor.
Para o Bootstrap, devemos primeiro apresentar sua arquitetura geral - o que exatamente ele consiste. Acredito que você pode entender rapidamente o que exatamente é composto no bootstrap, olhando para a figura abaixo.
A partir da figura acima, podemos ver claramente que o bootstrap consiste principalmente nas seguintes partes:
12 Sistema de grade - é dividir a tela em 12 cópias (colunas).
Use linhas para organizar elementos (cada linha inclui 12 colunas) e coloque o conteúdo na coluna.
Offset da coluna de controle por col-md-offset-*.
Componentes básicos de layout - O Bootstrap fornece uma variedade de componentes básicos de layout. Como tipo de composição, código, formulários, botões, formulários, etc.
JQuery - Bootstrap Todos os plugins JavaScript dependem do jQuery. Se você deseja usar esses plugins JS, deve consultar a biblioteca jQuery. Essa também é a razão pela qual precisamos fazer referência à biblioteca jQuery, além de referir -se ao arquivo JS e ao arquivo CSS da Bootstrap, ambos dependências.
Componentes CSS - O Bootstrap pré -implementou muitos componentes CSS para nós. Montar a caixa, o grupo de botões, a navegação etc. Em outras palavras, o conteúdo do Bootstrap nos ajudou a definir muitos estilos CSS, e você pode aplicar diretamente esses estilos a elementos como caixas suspensas anteriores.
JavaScript Plug-in-O Bootstrap também implementa alguns plug-ins JS para nós. Podemos usar os plug-ins fornecidos por ele para concluir algumas funções comuns, sem exigir que reescrevamos o código JS para obter efeitos como caixas rápidas e janelas modais.
Design responsivo - este é um conceito de design. Responsivo significa que ele ajustará automaticamente a página de acordo com o tamanho da tela, para que a página front-end possa ter um bom desempenho em telas de tamanhos diferentes.
O bootstrap é composto pelas partes acima. O exposto acima deu uma breve introdução a cada componente, e o conteúdo a seguir nada mais é do que uma introdução detalhada a cada componente por meio de alguns exemplos.
2. 12 sistema de grade
O Bootstrap define um sistema de 12 grade para melhor layout. A primeira coisa a definir é o sistema de layout para cada estrutura front-end. No Bootstrap, ele usa linhas e colunas para criar o layout da página. Existem vários princípios para seu layout:
A linha deve ser incluída em .Container (largura fixa) ou .Container-Fluid (100% de largura)
Cada linha contém 12 colunas
Coloque o conteúdo em cada coluna
No sistema raster da Bootstrap, os navegadores são divididos em 4 tipos de acordo com sua largura. Os valores são: automático (100%), 750px, 970px e 1170px.
Os estilos correspondentes são ultra-pequenos (xs), pequenos (SM), tela de tamanho médio (MD) e grande (LG)
É originalmente implementado definindo a largura mínima através da consulta de mídia. Portanto, as páginas da web feitas pelo Bootstrap são compatíveis com as grandes e pequenas!
Dentro da estrutura do bootstrap, o valor de delimitação do tamanho da tela foi predefinido e o valor de delimitação é definido através de consultas de mídia. Sua definição é a seguinte:
/* Tela Ultra-Small (móvel, menos de 768px)* //* Não há código relacionado à consulta de mídia, porque esse é o padrão no bootstrap (lembre-se de bootstrap é móvel-primeiro?)* //* tela pequena (maior ou igual ou igual a 768px)*/ @mídia (Min-Width: @ @ @Médio (Maior) {maior ou igual a 768px)*/ @mídia (Min-Width: @ @ @Média, @Médio, maior ou igual a 768px)*/ @mídia (Minedth ( @ @ 992PX) */ @Media (Min-lar: @screen-md-min) {...}/ *tela grande (tela de desktop grande, maior ou igual a 1200px) */ @mídia (min-width: @screen-lg-min) {...}De fato, as consultas de mídia também são usadas no Win8 Application Development para realizar aplicativos responsivos. Portanto, se você ouvir o sistema responsivo no futuro, não pense que é muito profundo. De fato, a estrutura define consultas de mídia para nós. Se a largura mínima definida nas consultas de mídia exceder a largura mínima definida nas consultas de mídia, dessa maneira, você poderá reduzir o tamanho do elemento entre as telas diferentes para se adaptar à tela. No entanto, o conceito proposto pelo bootstrap é preferido para dispositivos móveis, portanto as páginas projetadas pelo bootstrap só podem ser compatíveis com o grande e pequeno incompatível com o pequeno.
3. Componentes básicos de layout
O componente de layout básico é que a estrutura de bootstrap define alguns estilos unificados para alguns rótulos básicos de layout. Como tabela, botão, forma, etc. Vejamos um exemplo de tabela:
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" content = "ie = edge"> <meta name "" viewport "=" width = device-width,, inicialmente scale "> <meta =" viewport "=" width = device-width,, sply-scale "> <meta =" viewport "=" width = device-width, " E qualquer outro conteúdo * deve * segui -los! -> <title> Bootstrap 101 Modelo </title> <!-Porque não há plug-in JS para Bootstrap, não há referência ao componente jQuery-> <!-bootstrap-> <link rel = "Stylesheet" href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.minmin.css"> </head> <body> <h3> tabela de estilo padrão </h3> <table> <legenda> título. tabela-> <Thead> <tr> <th> id </th> <th> primeiro nome </th> <the> sobrenome </th> </tr> </thead> <tbody> <tr> <th scope = "linha"> 1 </th> <td> tommy </td> <td> li </td> </tr> scope = "Linha"> 2 </th> <td> bob </td> <td> san </td> </tr> <tr> <th scope = "linha"> 3 </th> <td> sam </td> <td> wang </td> </tumbody <h3> tabela com borda </! t+cabeça, t representa o significado da tabela-> <Tead> <tr> <th> id </th> <th> primeiro nome </th> <th> sobrenome scope = "linha"> 2 </th> <td> bob </td> <td> san </td> </tr> <tr> <th scope = "linha"> 3 </th> <td> sam </td> <td> wang </td> </tchere> <!- para mais referências da tabela: http://v3.bootcss.com/css/#tables--><!-- JQuery (necessário para os plugins JavaScript do bootstrap)-> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.minsin.js.js.js"> slittcss.com/jquerery/1.11.2/jquery.min.js.js "> slittcss.com/jquerery/1.11.2/jquery.min.js.js"> slittcss.com/jquerery/1.11.2/jquery.minsin.js.js "> </scrinfs.) Necessário -> <script src = "http://cdn.bootcss.com/bootstrap/3.4/js/bootstrap.min.js"> </script> </body> </html>
O código de exemplo para o botão e o formulário não será postado aqui. Você pode usar o link abaixo para visualizar o efeito em execução e o código -fonte. Você também pode baixar todos os códigos de origem deste tópico através do último arquivo de download.
4. Componentes CSS
Os componentes CSS são semelhantes aos componentes básicos de layout, ou seja, o Bootstrap define alguns estilos existentes para algumas tags, e o efeito desses estilos é muito bonito, para que toda empresa ou desenvolvedor não precise escrever outro estilo, acelerando assim a eficiência do desenvolvimento. Vamos dar uma olhada em um exemplo de navegação aqui. Para ser franco, se você usar muito essa coisa, naturalmente se familiarizará com ela.
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" content = "ie = edge"> <meta name "" viewport "=" width = device-width,, inicialmente scale "> <meta =" viewport "=" width = device-width,, sply-scale "> <meta =" viewport "=" width = device-width, " E qualquer outro conteúdo * deve * segui -los! --><title>Bootstrap 101 Template</title><!-- Bootstrap --><link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"></head><body><h3>Navigation bar</h3><nav><div><!-- Brand and toggle get grouped for better mobile display --><div><button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span>Toggle navigation</span><span></span><span></span><span></span></button><a href="#">Home</a></div><!-- Collect O NAV vincula, os formulários e outro conteúdo para alternar-> <div id = "BS-Exemplo-Navbar-Collapse-1"> <ul> <li> href = "#"> link </a> </li> <li> <a href = "#" data-toggle = "suspenso" role = "button" aria-haspopup = "true" aria -expanded = "false"> suspenso <ction> </span> </a> <ul> <li> <a href ">"> action> </span> </a> <ul> <li> <a href = ""> 2 </a> </li> <li> <a href = "#"> ação 3 </a> </li> <li> <a href = "#"> ação separada </a> </li> </li> </li> </divhantinner-!-/. Plugins javascript do bootstrap)-> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <!-inclua todos os plugins compilados (abaixo) ou incluem arquivos individuais conforme necessário-> <script> src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
Os efeitos de operação de outros componentes são os seguintes:
5. plug-in javascript
Por padrão, todos os plug -ins JS podem ser implementados definindo o código HTML específico e as propriedades correspondentes sem escrever uma linha de código JavaScript. A essência de sua implementação é que o Bootstrap implementa o código JavaScript correspondente para essas propriedades.
Vamos dar uma olhada em um exemplo de uma janela modal:
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" content = "ie = edge"> <meta name "" viewport "=" width = device-width,, inicialmente scale "> <meta =" viewport "=" width = device-width,, sply-scale "> <meta =" viewport "=" width = device-width, " E qualquer outro conteúdo * deve * segui -los! --><title>Bootstrap 101 Template</title><!-- Bootstrap --><link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"></head><body><h3>Modal Window</h3><!-- Button trigger modal --><button type = "Button" Data-toggle = "modal" Data-Target = "#myModal"> Clique em mim </button> <div id = "myModal"> <div> <div> <div> <botão tipo = "Button" Data-Dismiss = "Modal" ARIA-LABEL = "Close"> <span-hidden = "True"> ×> × Título </h4> </div> <div> <p> Body de teste… </p> </div> <div> <button type = "button" data-dismiss = "modal"> feche </button> <butter type = "button"> Salvar alterações </button> </div> <!-/.modal-content-> </div> <!-/.modal-n-dial-n-din-!-!-!-! JQuery (necessário para os plugins JavaScript do Bootstrap)-> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </sCript> <!-inclua todos os plugins compilados (abaixo) ou incluem arquivos individuais-> src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
Depois de ler todo o conteúdo anterior, você sente instantaneamente que o bootstrap é realmente apenas uma estrutura de estilo? Com isso, podemos criar rápida e facilmente páginas da web. Além disso, depois de ler o conteúdo anterior, você não ficará confuso por que o documento oficial do bootstrap é o seguinte:
As entradas na barra de navegação do bootstrap não documentam os principais componentes de nossa introdução acima?
6. Resumo
Neste ponto, todo o conteúdo deste artigo terminou. Espero que, durante este artigo, os iniciantes possam entender rapidamente e dominar o bootstrap. Além disso, este artigo é equivalente aos pontos -chave do bootstrap. Para um conteúdo mais detalhado, você pode consultar o site oficial chinês de bootstrap. Mas acho que não quero mais. É melhor praticá -lo diretamente se você tiver esse tempo. O aplicativo da Web VS2013 já suporta a estrutura do bootstrap por padrão. Você pode criar imediatamente um aplicativo da Web através do VS2013 para experimentar a aplicação do bootstrap no ASP.NET MVC antes de lê -lo.