부트 스트랩이란 무엇입니까?
Bootstrap은 웹 응용 프로그램 및 웹 사이트의 빠른 개발을위한 프론트 엔드 프레임 워크입니다. Bootstrap은 HTML, CSS 및 JavaScript를 기반으로합니다.
역사
Bootstrap은 Twitter의 Mark Otto와 Jacob Thornton에 의해 개발되었습니다. Bootstrap은 2011 년 8 월 Github에서 출시 된 오픈 소스 제품입니다.
이 기사는 Bootstrap의 Zero-Basic Inspectory Tutorial (2)을 소개하는 데 중점을 둡니다. 특정 세부 사항은 다음과 같습니다.
프로세스 중에 정보를 자주 검토하는 웹 사이트 :
http://www.w3school.com.cn/ W3C Alliance가 W3C 표준을 전파하기 위해 설립 한 웹 사이트입니다. 웹 측에는 많은 기술이 있으며 웹 기술의 백과 사전으로 볼 수 있습니다.
http://v3.bootcss.com/ 공식 Bootstrap3 문서
http://www.runoob.com/ 이것은 실제로 W3School과 유사하지만 W3School보다 조금 더 복잡합니다. 많은 콘텐츠는 원래 W3C 영어 웹 사이트와 원본 부트 스트랩의 공식 영어 문서에서 번역되었지만 번역 품질이 높다고 생각합니다 (처음 두 웹 사이트가 둔하게 번역 되었기 때문에 일부 경우는 이해하기 쉽습니다.
더 이상 고민하지 않고 시작하겠습니다.
(1) 목표를 분명히 달성합니다
아래 그림과 같이, 이것은 우리가 구현하려는 간단한 웹 사이트입니다. 레이아웃은 간단하고 눈부신 효과가 없습니다. 그러나 기능을 구현해야합니다. JSON 파일에서 관련 정보를 읽고 (위의 웹 사이트에서 JSON에 대한 지식을 확인할 수 있음) 웹 사이트에 표시하십시오.
JSON 파일 컨텐츠 :
{ "클래스 001": { "Xiao Wang": { "성별": "남성", "나이": "18", "관심": "축구", "풋볼": "고향": "상하이"}, "Xiao Li": { "젠더": "남성", "나이": "관심" "농구" "}} 002 ": {"Xiao Cai ": {"성별 ":"여성 ","나이 ":"19 ","관심 ":"댄스 ","댄스 ":"gaoxiong "}}},"클래스 003 ": {"Xiao Ma ": {"젠더 ":"남성 ","18 ","관심 ":"Hometown "," "," "": " "taibei"}}, "class 005": { "Xiao Zhang": { "gender": "male", "age": "20", "관심": "Running", "Hometown": "Guangzhou"}}}지금 바로:
공들여 나열한 것:
세 가지 주요 블록이 있습니다. 첫 번째 줄의 왼쪽은 클래스 목록이고, 첫 번째 줄의 오른쪽은 반 친구의 이름 목록이고, 두 번째 줄은 반 친구의 관련 정보입니다.
기능:
1. 수업 목록에서 수업을 클릭하여 수업의 학생들이 수업 목록에서 동적으로 어떤 학생인지 업데이트하고 수업을 선택할 수 있습니다.
2. 급우 목록에서 급우를 클릭하고 두 번째 줄에 급우의 정보를 동적으로 표시합니다. 한 번에 한 명의 동급생 정보 만 표시 할 수 있습니다.
(2) 분석에 필요한 기술
공들여 나열한 것:
Bootstrap :이 간단한 2 열 레이아웃과 클래스 열의 확인 및 스크롤 막대 (일부는 부트 스트랩으로 직접 구현하기가 쉽지만 다른 일부는 알 수 없습니까? 위의 세 웹 사이트로 이동하여 찾아서 확인)
기능:
JavaScript 및 Ajax를 사용하여 데이터 수집 및 동적 상호 작용을 달성하십시오 (로컬 새로 고침 방법).
(3) 기술 선택 분석
1. 레이아웃 구현.
문서 (http://www.runoob.com/bootstrap/bootstrap-grid-system-example3.html)를 살펴보면 Bootstrap이 래스터 시스템을 사용하여 배치 된 것을 발견했습니다. DIV의 특정 클래스 속성을 설정하면 원하는 레이아웃 효과를 달성 할 수 있습니다. 또한 휴대폰, 태블릿 및 데스크탑 컴퓨터에 다른 영향을 줄 수 있습니다. HTML 태그의 클래스 속성과 HTML 태그는 W3School에서 찾을 수 있습니다.
요소의 클래스 속성에 여러 클래스 속성을 가질 수 있다는 점은 주목할 가치가 있습니다.
예 : <div role = "Group"aria-label = "..."id = "btn-group-verctical-classes">
다른 속성 사이의 "공간"간격을 사용하여 나를 믿으십시오.이를 통해 JavaScript 스크립트를 쉽게 작성하고 CSS를 조정할 수 있습니다.
2. 클래스 번호와 다중 선택의 수직 배열을 실현하십시오.
http://www.runoob.com/bootstrap/bootstrap-button-groups.html을 확인하여 수직 버튼 그룹을 설정하는 방법을 알고 있습니다. 즉, 버튼 그룹이 BTN-Group-Overtical에 위치한 DIV 클래스를 설정하여 버튼 그룹을 저장하기위한 컨테이너가됩니다.
http://www.runoob.com/bootstrap/bootstrap-button-plugin.html을 확인하고 버튼 그룹을 확인하는 방법을 알고 있습니다. 구현은 데이터 속성 Data-Toggle = "버튼"을 클래스 속성의 div에 BTN-Group에 추가하여 수행됩니다.
3. 둥근 모서리에서 직각으로 재정의 할 버튼 모서리를 구현하고 버튼 그룹에 스크롤 막대를 추가 한 다음 버튼에 표시된 텍스트에 버튼을 초과하지 않도록 제한을 추가하십시오. 초과 부분은 "..."로 표시되며 마우스가 버튼에서 움직이고 정지되면 모든 텍스트가 표시됩니다.
작은 부분 (둥근 모서리는 직각이되고 텍스트를 표시하기 위해 마우스 호버링)은 HTML 태그에 직접 설정해야합니다.
구현의 대부분은 CSS로 작성됩니다.
<스타일 유형 = "text/css">#btn-group-verctical-classes {Overflow-y : Auto; OverFlow-x : Auto; 높이 : 150px;}#btn-group-verctical-classmates {오버 플로우 -y : auto; 오버 플로 X : 자동; 높이 : 150px; 숨겨진; Border-Radius : 0px;} </style>코드의 <tyle> 부분은 헤드, 즉 <head>와 </head> 사이에 배치됩니다.
일반적인 방법은 먼저 CSS 선택기를 사용하여 CSS를 설정하는 태그를 선택한 다음 해당 스타일을 곱슬 브레이스로 설정하는 것입니다.
소위 CSS 선택기는 위 코드의 "#btn-group-verctical-classes"및 "버튼", 즉 곱슬 괄호의 코드 줄입니다. CSS 선택기를 사용하는 방법에는 여러 가지가 있으며 W3School 웹 사이트를 통해 관련 방법을 찾을 수 있습니다.
CSS 스타일 시트는 세 가지 로딩 방법 (CSS 파일; <head> 태그, HTML 요소의 스타일 속성, 유효 우선 순위 순서는 다음과 같습니다. "요소의 스타일"> "파일 헤더의 스타일 요소"> "외부 스타일 파일"이기 때문에 Bootstrap의 CSS를 참조하십시오. 위의 <style>의 Border-Radius 설정은 "작동해야한다"와 "가장 낮은 커플 링 정도 (즉, 가장 편리한 수정)에서 작동하지 않습니다.
<1> 요소 태그에 스타일 속성을 직접 씁니다. 이것은 가장 선호되는 것이므로 확실히 작동합니다.
<2> 링크 된 부트 스트랩 CSS 파일을 한 번에 한 번에 수정하고 스타일 속성을 하나씩 다시 작성하지 않고도 새로운 요소를 추가하십시오. 링크를 참조하는 대신 CSS 파일을 다운로드해야합니다.
우리 페이지는 매우 작기 때문에 방법을 사용했습니다.
4. AJAX를 사용하여 데이터 수집, 상호 작용 및 동적 로딩을 달성하십시오.
Ajax를 사용하는 방법을 물어보세요? 바이두에서 검색하거나 프론트 엔드 기술을 아는 사람들에게 물어보십시오.
Ajax의 가장 핵심적인 점은 전체 페이지를 새로 고치지 않고 부분적으로 새로 고칠 수 있다는 것입니다. 여기서는 먼저 Ajax 기술 (위의 3 개의 웹 사이트 및 다양한 Baidu)에 대한 관련 문서를 확인해야합니다. JSON 파일에서 데이터를 얻으려면 jquery의 ajax 매뉴얼 http://www.w3school.com.cn/jquery/jquery/jquery_ref_ajax.asp를 참조하십시오 (Bootstrap의 JS는 jQuery를 기반으로하고 모든 jquery 방법이 작용하기 때문에 정보를 검색 할 때도 발견 되었기 때문에). getjson 기능이 선택되었습니다. 또한 http://www.cnblogs.com/codeplus/archive/2011/07/18/2109544.html 각 기능을 분석 방법으로 선택하십시오.
코드 구현에서 주로 Traversal (명세서), 판단 (IF 문), HTML 요소에 대한 조작, 하위 요소 추가, 속성 값 수정 등이 포함됩니다.
특정 페이지를 작성하는 방법에 대해서는 자세히 작성하는 것이 지루합니다. 따라서 코드를 붙여 넣었습니다.
데모를 실행할 때주의를 기울여야 할 사항 : Chrome은 파일 컨텐츠를 로컬에서 직접 읽는 것을 제한하는 것처럼 보이므로 전체 프로젝트를 Apache의 HTDOCS 폴더에 배치해야합니다. 그런 다음 실행하십시오. Apache를 설치하는 방법에 대해 이전 블로그에는 매우 자세한 소개가 있습니다. 그것을 사용하는 방법, 바이두주세요.
<! docType html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-catsible"content = "ie get"> <meta name = "viewport"content = "width = device-width, metice-width, <title"> getclass </stitat. -> <link href = "css/bootstrap.min.css"rel = "stylesheet"> <!-html5 shim and respond.js는 html5 요소와 미디어 쿼리의 지원-> <!-relation : rated. src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js">/script> </script> <script src ="// cdn.bootcss.com/respent.js/1.4.2/respond.min.js">/script>! type = "text/css">#btn-group-verctical-classes {Overflow-y : auto; 오버 플로우 -X : 자동; 높이 : 150px;}#btn-group-verctical 급 오버 플로우 -X : 자동; 높이 : 150px;} 버튼 {텍스트-오버 플로우 : 엘리석시스; 오버플로 : 숨겨진; 국경-라디우스 : 0px;} </style> </head> <body> <divius : 0px;} </style> </head> <body> <blius <br> </br> <div id = "div 클래스 클래스"> <div 역할 = "Group"aria-label = "... 쇼-> </div> <div id = "btn-group-vertical-classmates"robile = "group"aria-label = "..."> <!-클래스 메이트가 보여줍니다-> <button type = "button"style = "Border-Radius : 0px;"> 클래스를 클릭하여 클래스를 표시합니다. id = "context_div"> <p> 클래스 메이트를 클릭하여 세부 사항을 표시하십시오. </p> </div> </div> <!-jQuery (bootstrap의 javaScript 플러그인에 필요)-> <script src = "js/jquery-3.0.0.min.js"> </script> <! src = "js/bootstrap.min.js"> </script> <cript> $ (document) .ready (function () {$. getJson ( "resource/classmates.json", function (result) {$. 각 (I, Field) { '<버튼 유형 = "style ="Border ""Border ""STYLE "" " data-toggle = "button"chosen_state = 0> </button> '). text (i); tmp_button.attr ( "title", i); $ ( "#btn-group-verctical-classes"). 부록 (tmp_button);}); $ (btn.btn-default.btn class.btn class.btn class ") {var tmp_chosen = number ($ (this) .attr ( "선택_state"))^1; $ (this) .attr ( "선택 ("선택된 _State ", String (tmp_chosen)); $ ("##btn-group-verctical-classmates ") Array (); $ ( ". Btn.btn-default.btn-class"). filter (function () {judgeflag = false; if ($ (this) .attr ( "선택 _State") == "1") {juredflag = true; chosen_list.push ($ (this) .text ()); 선택한 x (선택한 x) 선택한 x chosen_state = 0> </button> '). text (j); tmp_button.attr ( "title", j); $ ( "#btn-group-verctical-classmates"). Append (tmp_button);});}}}); $ (btn.btn-default.btn class matmat " selected_classmate = $ (this) .text (); var classmate_context_item; $ ( "#context_div"). empty (); $. 각 (result, function (i, field) {$. 각 (필드, 함수 (j, field2) {if (j == selected_classmate) {$ (j == selected_classmate) {$ (k, field 3) ^ k, field) + field3; var tmp_p = $ ( '<p> </p>'). Text (classMate_context_item); $ ( "#context_div"). Append (tmp_p);});});});});});}) </script> </html>