1장: Bootstrap_javascript 기술에 대한 첫 소개
- WBOY원래의
- 2016-05-16 15:03:551481검색
학습 포인트:
1.부트스트랩 개요
2.부트스트랩 기능
3.부트스트랩 구조
4. 첫 번째 페이지 만들기
5. 다양한 학습 준비
이 수업에서는 Boostrap의 역사, 특징, 용도, 그리고 웹 프로젝트 개발을 위해 Boostrap을 선택하는 이유를 주로 이해합니다.
1. 부트스트랩 개요
Bootstrap은 Twitter(세계 최대 Weibo)의 기술 엔지니어 두 명이 개발한 HTML, CSS, JavaScript 기반의 오픈 소스 프레임워크입니다. 프레임워크 코드는 간결하고 시각적으로 아름다워 PC 및 모바일 기기 기반의 웹페이지 요구사항을 빠르고 쉽게 구축하는 데 사용할 수 있습니다.
2010년 6월 트위터 내 엔지니어들은 프런트엔드 개발 작업에서 협업과 통합 문제를 해결하기 위해 노력했습니다. 다양한 선택을 거쳐 마침내 Bootstrap이 최종 확정되어 2011년 8월에 출시되었습니다. 오랜 기간의 반복적인 업그레이드 끝에 초기 CSS 기반 프로젝트에서 많은 내장 JavaScript 플러그인과 아이콘을 갖춘 다기능 웹 프런트 엔드 오픈 소스 프레임워크로 발전했습니다.
Bootstrap의 가장 중요한 부분은 반응형 레이아웃으로, PC, PAD, 휴대폰에서의 페이지 액세스와 호환됩니다.
부트스트랩 다운로드 및 데모:
국내 문서 번역 공식 홈페이지: http://www.bootcss.com
라이청 웹클럽 공식 홈페이지: http://www.ycku.com
2. 부트스트랩 기능
Bootstrap은 매우 유용한 기능과 특징으로 인해 매우 인기가 높습니다. 주요 핵심 기능은 다음과 같습니다.
(1) 크로스 디바이스, 크로스 브라우저
더 많은 비판을 받고 있는 IE7 및 8을 포함하여 모든 최신 브라우저와 호환됩니다. 물론 이 과정에서는 더 이상 IE9 이하의 브라우저를 고려하지 않습니다.
(2) 반응형 레이아웃
PC측에서 다양한 해상도의 디스플레이를 지원할 수 있을 뿐만 아니라, 모바일 PAD, 휴대폰 및 기타 화면에서도 반응형 디스플레이 전환을 지원합니다.
(3) 종합 구성품 제공
Bootstrap은 개발자가 호출하기 편리한 탐색, 레이블, 도구 모음, 버튼 및 일련의 구성 요소를 포함하여 매우 실용적인 구성 요소를 제공합니다.
(4) jQuery 플러그인 내장
Bootstrap은 개발자가 웹에서 다양한 일반 특수 효과를 구현하는 데 도움이 되는 다양한 실용적인 jquery 플러그인을 제공합니다.
(5) HTML5, CSS3 지원
HTML5 시맨틱 태그와 CSS3 속성이 잘 지원됩니다.
(6) 덜 동적 스타일을 지원합니다
LESS는 변수, 중첩 및 작업이 포함된 혼합 코딩을 사용하여 더 빠르고 유연한 CSS를 작성합니다. Bootstrap으로 잘 개발할 수 있습니다.
3. 부트스트랩 구조
먼저 Boostrap의 문서 구조를 이해하려면 공식 웹사이트에서 로컬로 다운로드해야 합니다. 부트스트랩 다운로드 주소는 다음과 같습니다.
부트스트랩 다운로드 주소: http://v3.bootcss.com/ (프로덕션 환경 선택, v3.3.4)
압축을 풀면 디렉토리 구조는 다음과 같습니다.
부트스트랩/
├── CSS/
│├── bootstrap.css
│├── bootstrap.css.map
│├── bootstrap.min.css
│├── bootstrap-theme.css
│├── bootstrap-theme.css.map
│└── bootstrap-theme.min.css
├── js/
│├── bootstrap.js
│└── bootstrap.min.js
└── 글꼴/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
은 크게 CSS(스타일), js(스크립트), Font(폰트)의 세 가지 핵심 디렉터리로 구분됩니다.
1.css 디렉토리에는 css 접미사가 붙은 4개의 파일이 있습니다. min이라는 단어가 포함된 파일은 일반적으로 파일이 포함되지 않은 파일을 압축 해제하여 사용합니다. code; 지도 접미사가 붙은 파일은 일부 특정 브라우저 도구에서 사용되는 CSS 소스 코드 매핑 테이블입니다.
2.js 디렉토리에는 압축되지 않은 js 파일과 압축된 js 파일 두 개가 들어 있습니다.
3.fonts 디렉토리에는 접미사가 다른 글꼴 파일이 포함되어 있습니다.
4. 첫 번째 페이지 만들기
HTML5 페이지를 생성하고 Bootstrap의 핵심 파일을 가져온 후 정상적으로 표시되는지 테스트합니다.
//第一个 Bootstrap <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Bootstrap 介绍</title> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <button class="btn btn-info">Bootstrap</button> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
5. 다양한 공부준비
1. 개발 도구, Bootstrap용 개발 도구로 Sublime Text3를 사용하고 Emmet 코드 생성 플러그인을 설치했습니다.
2. 테스트 도구는 기존의 최신 브라우저 외에 모바일 테스트 도구로 Opera Mobile Emulator와 Chrome의 모바일 웹 테스트 도구를 사용합니다.
3. 필요한 기초는 최소한 HTML5 시즌 1 과정의 기초입니다. 부트스트랩에는 jQuery 또는 JS 자체보다 사용하기가 훨씬 간단하지만 기초가 있습니다. jQuery와 JS 과정을 수강하면 학습과 이해가 더욱 깊어집니다.
4. 강좌 해상도 : 기본 강좌의 경우 1024x768로 녹화하지만 반응형, 프로젝트 강좌 등 일부 특수 부분은 고해상도 녹화가 필요해 1440x900으로 녹화됩니다.
위 내용은 에디터가 소개한 부트스트랩 프레임워크 관련 지식입니다. 도움이 되셨으면 좋겠습니다!