Recentemente, tenho usado o Bootstrap, uma excelente estrutura front-end. Essa estrutura é muito poderosa. A estrutura inclui menus suspensos, grupos de botões, menus suspensos de botões, navegação, barras de navegação, farinha de rosca, paginação, composição, miniaturas, caixas de diálogo de aviso, barras de progresso, objetos de mídia, etc. Bootstrap foi predefinido. Quando criamos uma página da web, precisamos apenas ligar diretamente o CSS para dentro.
O Bootstrap é um layout responsivo, você pode obter uma excelente experiência de layout em computadores widescreen, computadores comuns, tablets e telefones celulares. Esse layout responsivo é alcançado através da função de consulta de mídia do CSS3, combinando estilos diferentes de acordo com diferentes resoluções. O navegador IE8 não suporta esse excelente recurso CSS3. Bootstrap escreveu no documento de desenvolvimento como usá -lo para compatibilidade do IE8. Se você quiser ser compatível com o IE6 e o IE7, pode procurar BSIE (Bootstrap2)
O Bootstrap definitivamente não é tão perfeito quanto o Chrome, o Firefox e o IE11 no IE8. Alguns componentes não são garantidos como totalmente compatíveis, mas ainda precisam ser invadidos.
1. Use a declaração HTML5
<! Doctype html> Não há espaços aqui <html>
Nota: Escrevendo <! Doctype html public "-// w3c // dtd html 4.01 // pt" "http://www.w3.org/tr/html4/strict.dtd"> não é viável
2. Adicione meta tags
Confirme a versão do IE desta página para exibir
<meta http-equiv = "x-ua compatível com" content = "ie = borda, chrome = 1" /> <meta http-equiv = "x-ua compatível com" content = "ie = 9" />
NOTA: O Bootstrap não suporta o modo de compatibilidade do IE. Para permitir que o navegador do IE execute o modo de renderização mais recente, a tag acima será adicionada à página. IE = Edge significa forçar o uso do kernel mais recente do IE, e Chrome = 1 significa se o plug-in do navegador para IE6/7/8 e outras versões estiver instalado.
3. Introduzir o arquivo de bootstrap
A cópia do código é a seguinte: <link href = "css/bootstrap/bootstrap.min.css" rel = "stylesheet">>
4. Introduzir html5shiv.min.js e resposta.min.js
Faça os navegadores que não suportam (totalmente) tags html5 "suporte" para tags html5
<!-[se lt ie 9]> <script src = "js/bootstrap/html5shiv.min.js"> </script> <script src = "js/bootstrap/responded.min.js"> </script> <! [endif]->
5. Adicione a versão 1.x da biblioteca jQuery
A cópia do código é a seguinte: <script src = "js/bootstrap/jQuery-1.12.0.min.js"> </script>
6. Testado no IE8, encontrei um problema que o espaço reservado não é suportado. A seguir, é apresentada uma solução para a solução que o IE suporta espaço reservado. O jQuery citado neste artigo foi aprovado pelo teste 1.12.0. Por favor, consulte o jQuery primeiro.
<script type = "text/javascript" src = "js/bootstrap/jQuery-1.12.0.min.js"> </script> <script src = "bootstrap/js/bootstrap.min.js"> </script>
Você também pode usar outras versões jQuery para apresentar
[código] <script type = "text/javascript" src = "js/bootstrap/jquery.placeholder.js"> </script>
Em seguida, adicione o código ao arquivo
<script type = "text/javascript"> $ (function () {$ ('input, textarea'). Parholder ();}); </script>O resumo do código é o seguinte:
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = dispositivo de largura de dispositivo, scalable = não, escala inicial = 1,0, scale máxima = 1,0, minimum-scalable = não 1.0, Minimum-Scalable = não,"> 1,0-scalable = NO, escala inicial = 1,0, Scala máxima = 1,0, Minimum-Scalable = NO 1. " Content = "IE = Edge, Chrome = 1"/> <meta name = "Author" content = "zhy"/> <title> ie8 </title> <link rel = "Stylesheet" href = "css/bootstrap/bootstrap.min.css"> <!-[se lte ie 9] src=js/bootstrap/respond.min.js"></script> <script src=js/bootstrap/html5shiv.min.js"></script> <![endif]--> <script src="js/bootstrap/jquery-1.12.0.min.js"></script> <script src = "js/bootstrap/bootstrap.min.js"> </script> </head> <body> </body> </html>
Observação:
1.
<!-[se lte ie 6]> <! [endif]-> ie6 e abaixo são visíveis <!-[se lte ie 7]> <! [endif]-> ie7 e abaixo são visíveis <!-[se 6]> <! 7]> <! [Endif]->
IE7 e versões maiores que o IE7 são visíveis
LTE: A abreviação é menor ou igual a, o que significa menor ou igual a.
LT: A abreviação é menor que, o que significa menos do que.
GTE: A abreviação é maior ou igual a, o que significa maior ou igual a.
GT: A abreviação é maior que, o que significa maior que.
! : Isso significa não igual, o mesmo que o símbolo de julgamento não igual em JavaScript
Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.