Preciso fazer uma página da web simples recentemente.
Considerando a falta de experiência do front-end, a fim de produzir rapidamente, o projeto é apenas uma ferramenta e não possui requisitos para o projeto, por isso escolhi o Bootstrap como estrutura da web.
A intenção original de escrever para aprender Bootstrap do zero:
Depois de ler a documentação do Bootstrap por um longo tempo, incluindo o oficial (http://v3.bootcss.com/getting-started/) e o não oficial (http://www.runoob.com/bootstrap/bootstrap-tutorial.html), bem como o simples blog de apresentações por mais (http://www.cnblogs.com/fnng/p/44460 47.html), and the comments on BootStrap on Zhihu (https://www.zhihu.com/question/35237472, https://www.zhihu.com/question/31409502) deeply senti que o bootstrap deveria ser uma estrutura muito útil e não é difícil de aprender. É uma ferramenta para produção de alta velocidade, mas sua flexibilidade não é suficiente para os desenvolvedores brincarem com ela como quiserem. Além disso, há muitas coisas no front -end. Se você não tiver uma meta e rota de aprendizado claro, pode facilmente cair em detalhes sem fim e não ter saída correspondente, e se sentirá frustrado. Portanto, decidi gravar meu caminho de aprendizado para poder me revisar e começar com a maioria dos iniciantes.
Vamos começar com o modelo mais simples de bootstrap:
<! 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> <!-bootstrap-> <link href = "css/bootstrap.minmin.css" rel = "sheet STILEET"> <!-html5 shim e responda.js para ie8 suporte htmml5 não the waying warties <! <!-[se lt ie 9]> <script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script src = "// cdn.bootcs.com/rorcember.js/1.4.20 <! [Endif]-> </head> <body> <h1> Olá, mundo! </h1> <!-jQuery (necessário para os plugins JavaScript da Bootstrap)-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </cript> <! src = "js/bootstrap.min.js"> </script> </body> </html>
Vejamos um a um por um (eu uso # para explicação):
<! Doctype html> # significa que esta é uma página HTML5
<html lang = "zh-cn"> #lang significa "idioma", que é um atributo da tag html. Este atributo informa aos mecanismos de pesquisa que minha página é uma página chinesa, que é conveniente para os mecanismos de pesquisa incluir e não tem impacto na exibição da página. "ZH-CN" é um método de escrita do padrão ISO, que significa chinês. "ZH" é as duas primeiras letras de "Zhongwen" (se você quiser dizer ao navegador que é uma interface inglesa, Lang = "en" e "EN" correspondem às duas primeiras letras de "inglês"), e "CN" é o código do país. (http://www.cnblogs.com/sink_cup/archive/2010/01/22/html401_lang_iso639_iso3166_iana_language_subtag.html)
<meta charset = "utf-8"> #meta tag é uma tag que facilita o navegador para analisar os arquivos HTML. O atributo charset informa ao navegador que o método de codificação deste arquivo HTML é UTF-8.
<meta http-equiv = "x-ua compatível com" content = "ie = edge"> O atributo #http-equiv informa ao navegador o que são a compatibilidade e outros detalhes estipulados neste HTML. (//www.vevb.com/web/70787.html) #x-ua compatível com o valor é uma tag que só entra em vigor no IE8 e versões posteriores do IE (IE9, IE10, 11, ...). É usado para especificar o navegador para simular o método de renderização de uma versão específica do navegador do IE. (Alguns artigos na Internet realmente dizem que a compatível com X-UA é um marcador especial para o IE8, o que é simplesmente enganoso!)
#Por que fazer isso? Como o IE anterior da Microsoft (IE6, IE7) não cumpriu o padrão W3C, alguns códigos de alguns sites usam os padrões antigos do IE, em vez dos padrões W3C. A partir do IE8, a Microsoft adotou o padrão W3C.
#Então você pode usar esse valor de atributo para forçar o método de renderização do navegador. Ao definir conteúdo = "IE6", os usuários também podem exibir páginas da Web HTML no padrão IE6 normalmente nos navegadores do IE8 e acima.
#Content = "IE = Edge" força o navegador a renderizar com a versão mais recente dos padrões do IE que podem ser suportados. Por que fazer isso? Como os navegadores de alguns usuários podem estar definidos como "Modo de compatibilidade", eles renderizam arquivos HTML com base no padrão antigo do IE e ocorrerão erros ao encontrar o código HTML padrão W3C. Portanto, quando meu código é o padrão W3C e não considera o suporte do padrão do IE antigo, forçando a versão mais recente da renderização do IE que pode ser suportada no navegador pode evitar erros de exibição causados pelo "modo de compatibilidade". (Ou seja, o usuário não precisa alterar manualmente o modo de renderização do navegador) <meta name = "viewport" content = "width = largura do dispositivo, escala inicial = 1"> #Viewport Especifica as configurações relevantes da janela de exibição. Aqui, a largura do conteúdo especifica a largura da tela e a escala inicial especifica a taxa de escala inicial. (Sobre outras funções: Defina se o usuário pode escalar, taxa de escala máxima, taxa de escala mínima, etc., consulte: http://my.oschina.net/liangrockman/blog/380727)
<!-[se lt ie 9]>
<script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script>
)
<! [endif]->
#Re é um julgamento de comentário condicional. Quando a versão do IE é menor que o IE9, o SCRPIT SRC leva os recursos do CDN acima.
<script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script>
<script src = "js/bootstrap.min.js"> </script>
# Aqui está o arquivo JS que vincula o jQuery e o bootstrap. Ele é colocado no final para acelerar o carregamento da página da web, ou seja, exibir o conteúdo da página da web e depois carregar o arquivo JS. Se colocado na frente, como na etiqueta da cabeça, quando a velocidade da Internet não for boa, ela ficará presa no arquivo JS de carregamento e o conteúdo da página da web não pode ser exibido rapidamente, afetando a experiência do usuário.
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.
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