부트스트랩을 반응형으로 만드는 방법
- 爱喝马黛茶的安东尼원래의
- 2019-07-13 10:42:293179검색
이번에는 bootstrap3.4를 사용하여 반응형을 만들었습니다. 이전 글에서 부트스트랩 버전 선택에 대해 자세히 설명했는데, 방법은 스크린샷과 함께 첨부되어 있어서 이해가 쉬우실 겁니다. 지침. 먼저 부트스트랩 소스 코드를 다운로드하고 압축을 풀고 dist 폴더의 3개 폴더를 모두 프로젝트에 복사합니다(또는 템플릿 폴더, 이 3개 폴더는 함께 배치되어야 하며 분리될 수 없습니다).
반응형 메타를 추가하려면
웹 페이지를 HTML5로 작성해야 합니다. 시작 부분에 head 태그 뒤에 다음 3개의 메타 태그 4~6을 배치해야 합니다. , 다른 곳에 배치할 수 없으며 응답성을 확보하는 데 필요합니다.
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上面4~6的3个meta标签必须要添加且放在最前面-->
Css 파일 인용
bootstrap css 파일을 html로 인용:
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
bootstrap 폴더에 제공되는 css, js 폴더를 따로 설명하고, bootstrap.css, bootstrap.js는 압축되지 않습니다. 계속해서 사용할 수 있는 소스 파일 작성 및 수정은 크기가 약간 더 크고 수정 가능한 상황에 적합합니다. min이 포함된 js 및 css 파일은 압축 파일이므로 수정할 수 없습니다. 참조를 로드하기 위해 cdn을 사용할 경우 일반적으로 min을 선택하면 이러한 문서를 이해하는 데 충분합니다.
관련 권장사항: "Bootstrap 시작하기 튜토리얼"
Quoting js files
Quoting bootstrap's js file: bootstrap.js jQuery 파일을 함께 소개해야 하며, bootstrap3.4에서 지원하는 jQuery 버전은 jquery-1.12.4를 초과할 수 없으며, 상위 버전의 jQuery는 bootstrap4 이상인 경우 최신 버전의 jQuery를 지원할 수 있습니다. 또한 jQuery.js 파일은 bootstrap.js 폴더 앞에 위치해야 한다는 점도 주의할 필요가 있습니다. 경험상 위치가 거꾸로 되어 있으면 페이지 로딩이 엄청 느려질 때가 있어요~
<script type="text/javascript" src="js/jquery-1.12.4.min.js"> </script> <script type="text/javascript" src="js/bootstrap.js"> </script>
해결하려면 IE9 이하 브라우저와의 호환성 문제
bootstrap3 .4가 IE9 이하 브라우저에서 정상적으로 표시되도록 하려면 태그 앞에 다음 코드를 추가하여 두 개의 js 파일을 도입해야 합니다. html5shiv.min.js 및 response.min.js는 IE9 이하의 브라우저와 호환됩니다. 서버는 전적으로 아래 코드에 의존하므로 잊지 마세요.
<!--[if lt IE 9]><script src="js/html5shiv.min.js"></script><script src="js/respond.min.js"></script><![endif]-->
완전한 코드는 다음과 같습니다. 반응형 메타 태그가 앞에 배치되어야 합니다. 부트스트랩 CSS 파일은 다른 CSS 앞에도 배치해야 합니다. 부트스트랩 js 파일은 head 태그 안에 배치하거나 바닥글에 로드할 수 있지만 동시에 jQuery 파일을 도입해야 합니다. IE8 이하 브라우저와의 호환성을 위해서는 호환되는 js를 추가해야 합니다.
위 내용은 부트스트랩을 반응형으로 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!