학습의 핵심 사항 :
1. 부트 스트랩 개요
2. 부트 스트랩 기능
3. 부트 스트랩 구조
4. 첫 페이지를 만듭니다
5. 학습을위한 다양한 준비
이 수업에서 우리는 주로 Boostrap의 역사, 기능, 용도 및 Boostrap이 웹 프로젝트를 개발하기 위해 선택한 이유에 대해 배웁니다.
하나. 부트 스트랩 개요
Bootstrap은 Twitter (세계 최대의 Weibo)의 두 기술 엔지니어가 개발 한 HTML, CSS 및 JavaScript를 기반으로 한 오픈 소스 프레임 워크입니다. 프레임 워크 코드는 간단하고 시각적으로 아름답고 PC 및 모바일 장치를 기반으로 웹 페이지 요구 사항을 빠르게 구축하는 데 사용될 수 있습니다.
2010 년 6 월, 트위터 내 엔지니어들은 프론트 엔드 개발 작업에서 협업 및 통합 문제를 해결했습니다. 다양한 솔루션 이후, Bootstrap은 2011 년 8 월에 마침내 확인 및 출시되었습니다. 오랜 반복 및 업그레이드 후, 오리지널 CSS 중심 프로젝트는 많은 JavaScript 플러그인과 아이콘이있는 다기능 웹 프론트 엔드가있는 오픈 소스 프레임 워크로 개발되었습니다.
부트 스트랩의 가장 중요한 부분은 응답 형 레이아웃으로 PC, 패드 및 휴대폰의 페이지 액세스와 호환 될 수 있습니다.
부트 스트랩 다운로드 및 데모 :
국내 문서 번역 공식 웹 사이트 : http://www.bootcss.com
Piaocheng 웹 클럽 공식 웹 사이트 : http://www.ycku.com
둘. 부트 스트랩 기능
부트 스트랩은 매우 실용적인 기능과 기능 덕분에 매우 인기가 있습니다. 주요 핵심 함수는 다음과 같습니다.
(1). 크로스 디바이스, 크로스 브라우저
더 비판적인 IE7 및 8을 포함하여 모든 최신 브라우저와 호환됩니다. 물론이 과정은 더 이상 IE9 아래의 브라우저를 고려하지 않습니다.
(2). 반응 형 레이아웃
PC 쪽의 다양한 해상도에서 디스플레이를 지원할뿐만 아니라 모바일 패드, 휴대 전화 및 기타 화면의 반응 형 스위칭 디스플레이도 지원할 수 있습니다.
(3). 포괄적 인 구성 요소가 제공됩니다
Bootstrap은 탐색, 레이블, 툴바, 버튼 및 기타 구성 요소를 포함하여 매우 실용적인 구성 요소를 제공합니다.
(4). 내장 jQuery 플러그인
Bootstrap은 많은 실용적인 JQuery 플러그인을 제공하여 개발자가 웹에서 다양한 일반적인 특수 효과를 구현할 수 있도록합니다.
(5). HTML5 및 CSS3를 지원합니다
HTML5 시맨틱 태그 및 CSS3 특성이 잘 지원됩니다.
(6). 덜 역동적 인 스타일을 지원합니다
적은 변수, 중첩 및 작업을 사용하여 더 빠르고 유연한 CSS를 작성합니다. 부트 스트랩과 잘 작동합니다.
삼. 부트 스트랩 구조
우선, Boostrap의 문서 구조를 이해하려면 공식 웹 사이트에서 로컬로 다운로드해야합니다. 부트 스트랩 다운로드 주소는 다음과 같습니다.
부트 스트랩 다운로드 주소 : http://v3.bootcss.com/ (생산 환경 선택, v3.3.4)
감압 후 디렉토리는 다음과 같은 구조를 제공합니다.
부트 스트랩/
CSS/
│├ 착장관 .CSS
│├ ─) bootstrap.css.map
bootstrap.min.css
│├ ─) Bootstrap-Theme.css
│├ ── Bootstrap-Theme.css.map
│└ ── Bootstrap-Theme.min.css
JS/
bootstrap.js
│└ ─헤 스트랩 .min.js
Fonts/
Glyphicons-Halflings-Regular.eot
Glyphicons-Halflings-Regular.svg
Glyphicons-Halflings-Regular.ttf
Glyphicons-Halflings-Regular.woff
Glyphics-Halflings-Regular.woff2
주로 CSS (스타일), JS (스크립트) 및 글꼴 (글꼴)의 세 가지 핵심 디렉토리로 나뉩니다.
1. CSS 디렉토리에는 CSS 접미사가있는 4 개의 파일이 있습니다. Min이라는 단어를 포함하는 것은 압축 버전이며 일반적으로 사용됩니다. 포함하지 않은 것은 압축이없는 파일이며 CSS 코드를 이해하는 법을 배울 수 있습니다. 맵 접미사가있는 파일은 일부 특정 브라우저 도구에 사용되는 CSS 소스 코드 매핑 테이블입니다.
2.JS 디렉토리에는 두 개의 파일이 포함되어 있으며 압축되지 않고 압축 된 JS 파일입니다.
3. 폰트 디렉토리에는 접미사가 다른 글꼴 파일이 포함되어 있습니다.
네. 첫 페이지를 만듭니다
HTML5 페이지를 작성하고 부트 스트랩의 핵심 파일을 소개 한 다음 정상적으로 표시되는지 테스트합니다.
// 첫 번째 부트 스트랩 <! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> bootstrap 소개 </title> <link rel = "href"href = "css/bootstrap.min.css"> <button> bootstap </head> src = "js/jquery.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> </body> </html>
다섯. 학습을위한 다양한 준비
1. 개발 도구. 우리는 Sublime Text3을 Bootstrap의 개발 도구로 사용하고 Emmet Code Generation Plug-In을 설치했습니다.
2. 기존의 최신 브라우저 외에도 테스트 도구는 두 번째로 모바일 테스트 도구입니다. 우리는 Opera Mobile Emulator 및 Chrome의 모바일 웹 테스트 도구를 사용합니다.
3. 필요한 재단은 적어도 HTML5 시즌 1 코스의 기초입니다. Bootstrap에는 많은 jQuery 플러그인이 내장되어 있습니다. jQuery 또는 JS 자체보다 사용하는 것이 훨씬 간단하지만 jQuery 및 JS 코스의 기초가 있다면 학습에 대해 더 깊이 이해할 수 있습니다.
4. 코스 결의 : 기본 코스, 우리는 1024 x 768을 사용하여 기록하지만 응답 및 프로젝트 과정과 같은 일부 특수 부품은 고해상도 기록이 필요하며 1440 x 900을 사용하여 기록합니다.
위는 편집자가 소개 한 부트 스트랩 프레임 워크에 대한 관련 지식입니다. 나는 그것이 당신에게 도움이되기를 바랍니다!