최근에 저는 훌륭한 프론트 엔드 프레임 워크 인 Bootstrap을 사용하고 있습니다. 이 프레임 워크는 매우 강력합니다. 프레임 워크에는 드롭 다운 메뉴, 버튼 그룹, 버튼 드롭 다운 메뉴, 내비게이션, 내비게이션 바, 빵 부스러기, 페이징, 조판, 썸네일, 경고 대화 상자, 진행률 막대, 미디어 객체 등이 포함됩니다. 부트 스트랩이 사전 정의되었습니다. 웹 페이지를 만들 때 CSS를 직접 호출하면됩니다.
Bootstrap은 반응 형 레이아웃이며 와이드 스크린 컴퓨터, 일반 컴퓨터, 태블릿 및 휴대폰에서 매우 뛰어난 레이아웃 경험을 얻을 수 있습니다. 이 반응 형 레이아웃은 CSS3의 미디어 쿼리 기능을 통해 달성되며 다른 해상도에 따라 다른 스타일과 일치합니다. IE8 브라우저는이 우수한 CSS3 기능을 지원하지 않습니다. Bootstrap은 개발 문서에 IE8 호환에 사용하는 방법을 작성했습니다. IE6 및 IE7과 호환 되려면 BSIE (Bootstrap2)를 검색 할 수 있습니다.
Bootstrap은 IE8의 Chrome, Firefox 및 IE11만큼 완벽하지 않습니다. 일부 구성 요소는 완전히 호환되지는 않지만 여전히 해킹해야합니다.
1. HTML5 선언을 사용하십시오
<! doctype html> 여기에는 <html>가 없습니다
참고 : <! doctype html public "-// w3c // dtd html 4.01 // en" "http://www.w3.org/tr/html4/strict.dtd">
2. 메타 태그를 추가하십시오
표시 할이 페이지의 IE 버전을 확인하십시오
<meta http-equiv = "x-ua-catsible"content = "ie = edge, chrome = 1" /> <meta http-equiv = "x-ua-cattible"content = "ie = 9" />
참고 : 부트 스트랩은 IE 호환 모드를 지원하지 않습니다. IE 브라우저가 최신 렌더링 모드를 실행할 수 있도록 위의 태그가 페이지에 추가됩니다. IE = 가장자리는 최신 IE 커널을 사용하는 것을 의미하며 IE6/7/8 및 기타 버전의 브라우저 플러그인이 설치되면 Chrome = 1을 의미합니다.
3. 부트 스트랩 파일을 소개하십시오
코드 사본은 다음과 같습니다. <link href = "css/bootstrap/bootstrap.min.css"rel = "스타일 시트">
4. html5shiv.min.js 및 response.min.js를 소개합니다
HTML5 태그를 HTML5 태그에 "지원"하지 않는 브라우저를 만듭니다.
<!-[LT IE 9]> <SCRIPT SRC = "js/bootstrap/html5shiv.min.js"> </script> <script src = "js/bootstrap/respone.min.js"> </script> <! [endif]->
5. jQuery 라이브러리의 1.x 버전을 추가하십시오
코드 사본은 다음과 같습니다. <script src = "js/bootstrap/jquery-1.12.0.min.js"> </script>
6. IE8에 따라 테스트를 거쳤으며 자리 표시자가 지원되지 않는 문제를 발견했습니다. 다음은 IE가 자리 표시자를 지원하는 솔루션에 대한 솔루션입니다. 이 기사에서 인용 된 jQuery는 1.12.0 테스트로 통과되었습니다. 먼저 jQuery를 참조하십시오.
<script type = "text/javascript"src = "js/bootstrap/jquery-1.12.0.min.js"> </script> <script src = "bootstrap/js/bootstrap.min.js"> </script>
다른 jQuery 버전을 사용하여 소개 할 수도 있습니다
[Code] <script type = "text/javaScript"src = "js/bootstrap/jquery.placeholder.js"> </script>
그런 다음 코드를 파일에 추가하십시오
<script type = "text/javaScript"> $ (function () {$ ( 'input, textArea'). 자리 표시기 ();}); </script>코드 요약은 다음과 같습니다.
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport"content = "width ="device-width, 사용자-스칼 가능 = 아니, 초기 스케일 = 1.0, maximum-scale = 1.0, minume-scale = 1.0 "> <meta http-u" " content = "ie = edge, chrome = 1"/> <meta name = "author"content = "zhy"/> <title> ie8 </title> <link rel = "stylesheet"href = "css/bootstrap/bootstrap.min.css"> <!-[if lte 9]> < src = js/bootstrap/respone.min.js "> </script> <script src = js/bootstrap/html5shiv.min.js"> </script> <! src = "js/bootstrap/bootstrap.min.js"> </script> </head> <body> </body> </html>
메모:
1. IE에 따라 IE 버전을 결정하기위한 진술
<!-[LTE IE 6]> <! [endif]-> IE6 이하 아래에 표시됩니다. <!-[LTE IE 7]> <! 7]> <! [endif]->
IE7과 IE7보다 큰 버전이 보입니다
LTE : 약어는 그 이하 이하 이하이며, 이는 그 이상 또는 동등한 것을 의미합니다.
LT : 약어는보다 작으며 이는 의미가 적습니다.
GTE : 약어는 그 이상 또는 동일하며 이는 더 크거나 동일합니다.
GT : 약어는보다 크며, 이는 의미합니다.
! : JavaScript의 동등한 판단 기호와 동일하게 동일하지 않음을 의미합니다.
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.