최근에 간단한 웹 페이지를 만들어야합니다.
프론트 엔드 경험의 부족을 고려할 때 신속하게 제작하기 위해 프로젝트는 도구 일뿐 아니라 프로젝트에 대한 요구 사항이 없으므로 Bootstrap을 웹 프레임 워크로 선택했습니다.
처음부터 부트 스트랩을 배우기 위해 글을 쓰는 원래 의도 :
공식 (http://v3.bootcss.com/getting-started/) 및 Unofficial (http://www.runoob.com/bootstrap/bootstrap-tutorial.html)을 포함하여 부트 스트랩 문서를 오랫동안 읽은 후 (http://www.cnblogs.com/fnng/p/44460 47.html) 및 Zhihu (https://www.zhihu.com/question/35237472, https:/www.zhihu.c.com/question/question/31409) 부트 스트랩은 매우 유용한 프레임 워크 여야하며 배우기가 어렵지 않습니다. 고속 생산을위한 도구이지만, 유연성만으로도 개발자가 원하는대로 플레이하는 데 충분하지 않습니다. 또한 프론트 엔드에는 너무 많은 것들이 있습니다. 명확한 학습 목표와 경로가 없다면 쉽게 끝없는 세부 사항에 빠지고 해당 출력이 없으며 좌절감을 느낄 수 있습니다. 따라서 저는 학습 경로를 기록하여 직접 검토하고 대부분의 초보자와 함께 시작할 수 있도록 결정했습니다.
부트 스트랩의 가장 간단한 템플릿부터 시작하겠습니다.
<! docType html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-catsible"content = "ie get"> <meta name = "viewport"contment = "width = device-width, mete-scale = 1"-위의 3 개의 태그 * 다른 컨텐츠 *를 따라야합니다! -> <title> bootstrap 101 템플릿 </title> <!-bootstrap-> <link href = "css/bootstrap.min.css"rel = "stylesheet"> <!-html5 shim and responce.js는 html5 요소와 IE8 지원을위한 IE8 지원-> <!-respone : // js가 작동하지 않습니다. <!-[LT IE 9]> <script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script src = "// cdn.bootcss.com/respond.js/1.4.2/r respont.min.js"> <! [endif]-> </head> <hod> <h1> 안녕하세요, 세계! </h1> <!-jQuery (부트 스트랩의 JavaScript 플러그인에 필요)-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <!-모든 컴파일링 된 플러그인 (아래) 포함 또는 필요에 따라 개별 파일을 포함시킵니다. src = "js/bootstrap.min.js"> </script> </body> </html>
하나씩 살펴 보겠습니다 (설명에 #을 사용합니다) :
<! doctype html> # #은 이것이 html5 페이지임을 의미합니다
<html lang = "zh-cn"> #lang은 "언어"를 의미하며, 이는 HTML 태그의 속성입니다. 이 속성은 검색 엔진에 내 페이지가 중국 페이지임을 알려줍니다.이 페이지는 검색 엔진에 편리하며 페이지 디스플레이에 영향을 미치지 않습니다. "Zh-CN"은 ISO 표준의 글쓰기 방법으로 중국어를 의미합니다. "Zh"는 "Zhongwen"의 첫 두 글자입니다 (브라우저에 영어 인터페이스, lang = "en"및 "en"이 "English"의 첫 두 글자에 해당한다는 것을 브라우저에 알리려면 "CN"은 국가 코드입니다. (http://www.cnblogs.com/sink_cup/archive/2010/01/22/html401_lang_iso639_iso3166_iana_language_subtag.html)
<meta charset = "utf-8"> #meta 태그는 브라우저를 HTML 파일을 구문 분석하는 태그입니다. Charset 속성은 브라우저 에이 HTML 파일의 인코딩 메소드가 UTF-8임을 알려줍니다.
<meta http-equiv = "x-ua-catsible"content = "ie = edge"> #http-equiv 속성은 브라우저 에이 HTML에 규정 된 호환성 및 기타 세부 사항이 무엇인지 알려줍니다. (! IE 브라우저의 특정 버전의 렌더링 메소드를 시뮬레이션하기 위해 브라우저를 지정하는 데 사용됩니다. (인터넷의 일부 기사는 실제로 X-UA 호환성이 IE8의 특수 마커라고 말합니다. 이는 단순히 오해의 소지가 있습니다!)
#왜 이렇게합니까? Microsoft의 이전 IE (IE6, IE7)는 W3C 표준을 준수하지 않았기 때문에 일부 웹 사이트 코드는 W3C 표준이 아닌 이전 IE 표준을 사용합니다. IE8부터 Microsoft는 W3C 표준을 채택했습니다.
#이 속성 값을 사용하여 브라우저의 렌더링 메소드를 강제 할 수 있습니다. Content = "IE6"을 설정할 때 사용자는 IE6 표준에 따라 IE6 이상의 브라우저에서 IE6 표준에 HTML 웹 페이지를 표시 할 수도 있습니다.
#content = "즉, edge"는 브라우저가 지원할 수있는 최신 버전의 IE 표준으로 렌더링하도록합니다. 왜 이렇게합니까? 일부 사용자의 브라우저는 "호환성 모드"로 설정 될 수 있으므로 이전 IE 표준을 기반으로 HTML 파일을 렌더링하고 W3C 표준 HTML 코드를 만나면 오류가 발생합니다. 따라서 내 코드가 W3C 표준이고 기존 IE 표준의 지원을 고려하지 않으면 브라우저에서 지원할 수있는 최신 버전의 IE 렌더링을 강제로 "호환 모드"로 인한 표시 오류를 피할 수 있습니다. (즉, 사용자는 브라우저의 렌더링 모드를 수동으로 변경할 필요가 없습니다) <meta name = "viewport"content = "width = device-width, initial-scale = 1"> #viewport 디스플레이 창의 관련 설정을 지정합니다. 여기서 내용의 너비는 디스플레이 너비를 지정하고 초기 규모는 초기 스케일링 비율을 지정합니다. (기타 기능 정보 : 사용자가 스케일, 최대 스케일링 비율, 최소 스케일링 비율 등을 설정하고 http://my.oschina.net/liangrockman/blog/380727 참조)
<!-[LT IE 9 인 경우]>
<script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script>
<script src = "// cdn.bootcss.com/respent.js/1.4.2/respond.min.js"> </script>
<! [endif]->
#조건부 의견 판단이 있습니다. IE 버전이 IE9보다 작을 때 SCRPIT SRC는 위의 CDN 리소스를 취합니다.
<script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script>
<script src = "js/bootstrap.min.js"> </script>
# jQuery 및 Bootstrap을 연결하는 JS 파일은 다음과 같습니다. 웹 페이지의로드 속도를 높이기 위해 끝에 배치됩니다. 즉, 먼저 웹 페이지 컨텐츠를 표시 한 다음 JS 파일을로드합니다. 헤드 태그와 같이 앞에 배치되면 인터넷 속도가 양호하지 않으면 JS 파일로드에 계속 갇히고 웹 페이지 컨텐츠를 빠르게 표시하여 사용자 경험에 영향을 줄 수 없습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.
여전히 심도있게 배우고 싶다면 여기를 클릭하여 두 가지 흥미로운 주제를 배우고 첨부 할 수 있습니다. 부트 스트랩 학습 자습서 부트 스트랩 실용 튜토리얼