매일매일 배워야 하는 부트스트랩에 대한 간단한 소개_자바스크립트 기술
- WBOY원래의
- 2016-05-16 15:31:111070검색
이전 기사에서는 부트스트랩을 간략하게 소개했습니다. 이 기사에서는 관련 내용을 더욱 이해하고 후속 학습의 기반을 마련합니다.
최근 Visual Studio 2013 업데이트로 볼 때 Microsoft는 VS에 Bootstrap3의 새 버전을 추가했기 때문에 Bootstrap3을 배우는 것에 대해 걱정할 필요가 없습니다.
1. 부트스트랩 다운로드
공식 홈페이지에 있는 파일은 매우 상세하고 간단하며, 다운로드 방법도 다양합니다. 개발자에게 가장 쉬운 방법은 컴파일되고 압축된 CSS 및 JavaScript 파일을 직접 다운로드하는 것입니다. 여기에는 글꼴 파일도 포함되지만 문서 및 소스 코드 파일은 포함되지 않습니다. 압축을 푼 패키지를 열면 CSS, Font, js라는 세 개의 폴더를 찾을 수 있습니다.
세 개의 폴더에 있는 파일을 볼 수 있습니다
이것은 부트스트랩 구성의 가장 기본적인 형태입니다. 파일의 압축되지 않은 버전은 모든 웹 프로젝트에서 직접 사용할 수 있습니다. 압축된(bootstrap.min.*) 및 압축되지 않은(bootstrap.*) CSS 및 JS 파일을 제공합니다. 글꼴 아이콘 파일은 Glyphicons에서 제공됩니다.
Bootstrap에서 지원하는 jQuery 버전은 bower.json에 나열되어 있습니다.
종속 jQuery 라이브러리의 버전을 확인할 수 있습니다>=1.9.0.
아래 http://jquery.com/
최신 버전 2.03을 다운로드하겠습니다
IEhttp://code.jquery.com/jquery-2.0.3.min.js
Bootstrap 폴더 아래 js 폴더에 저장하세요.
참고: 모든 Bootstrap 플러그인은 jQuery에 의존합니다. 그리고 정식 프로젝트에서는 크기가 작기 때문에(주석의 텍스트와 공백이 제거됨) 압축 버전을 사용하는 것이 좋습니다.
2. 웹페이지에서 부트스트랩을 사용하세요
가장 간단한 기본 템플릿을 만들었습니다
<!DOCTYPE html> <html> <head> <title>Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <script src="js/jquery-2.0.3.min.js"></script> <script src="js/bootstrap.min.js"> </script> </body> </html>
1. 먼저 Bootstrap 스타일 파일을 웹페이지에 참조할 수 있습니다
2. JavaScript 플러그인을 제공하기 위해 Bootstrap 아키텍처를 사용해야 하는 경우, 위에서 언급한 대로 해당 아키텍처의 js 파일 링크를 웹페이지에 참조해야 합니다. JavaScript 플러그인은 모두 jQuery 라이브러리에 의존하므로 당연히 jquery 라이브러리 파일도 연결하고 참조해야 합니다
3. Viewport의 e8e496c15ba93d81f6ea4fe5f55a2244 태그는 대부분의 모바일 장치에서 디스플레이를 수정하여 적절한 그리기 및 터치 스크린 크기 조정을 보장합니다.
65afe536f586050c653002f006517fa2 4. 우리는 html5의 몇 가지 새로운 태그를 사용하지만 IE9 이하의 브라우저는 이러한 태그를 지원하지 않으며 이러한 태그에 스타일을 추가할 수 없습니다.
이 문제를 해결하려면 다음과 같이 참조 파일을 연결해야 합니다
이는 사용자의 IE 브라우저 버전이 IE9보다 작은 경우 이 두 개의 js 파일 라이브러리가 로드되고 이제 이러한 새 태그를 사용할 수 있으며 이 태그에 스타일을 추가할 수 있음을 의미합니다.
이러한 방식으로 가장 간단한 Hello World! 페이지가 모든 사람에게 표시됩니다.
3. 요약
위에서는 반응형 레이아웃도 활성화했습니다. 물론 일부 웹사이트에서는 반응형 레이아웃이 필요하지 않을 수 있으므로 이 레이아웃을 수동으로 비활성화해야 합니다. 이 문서에도 자세한 지침이 있습니다.
조금 지루하다고 느껴지지만 Bootstrap에 대한 사랑을 포기하지 마세요. 현재 가장 인기 있는 프론트엔드 개발 프레임워크는 Bootstrap이기 때문입니다. 흥미로운 콘텐츠는 아직 남아 있으니 놓치지 마세요. .