부트 스트랩이란 무엇입니까?
Bootstrap은 웹 응용 프로그램 및 웹 사이트의 빠른 개발을위한 프론트 엔드 프레임 워크입니다. Bootstrap은 HTML, CSS 및 JavaScript를 기반으로합니다.
역사
Bootstrap은 Twitter의 Mark Otto와 Jacob Thornton에 의해 개발되었습니다. Bootstrap은 2011 년 8 월 Github에서 출시 된 오픈 소스 제품입니다.
이 기사를 작성한 후이 기사의 다음 내용을 작성하고 싶습니다.
1. 부트 스트랩에 대한 이해를 바탕으로 작은 요약을 할 것입니다.
2. 나는 처음부터 학습 부트 스트랩 (2)의 예를 위해 UI와 코드를 아름답게하고 최적화 할 것입니다. 주로 내가 원하는 효과를 어떻게 만들 었는지 이야기합니다.
3. 사람들에게 낚시하는 방법을 가르치는 것보다 낚시하는 방법을 사람들에게 가르치는 것이 좋습니다. 자신의 예제를 사용하고 (초보자이기도하고, 작성한 내용은 초보자에게 더 적합 할 수 있기 때문에) 코드 쓰기 과정에서 발생하는 함정과주의를 기울여야하는 포인트에 대해 이야기하십시오.
더 이상 고민하지 않고 시작하겠습니다.
1. 부트 스트랩의 약간의 요약
Bootstrap의 공식 문서 (http://v3.bootcss.com/)에 대한 설명을 기반으로 Bootstrap은 CSS 스타일, 구성 요소 및 JavaScript 플러그인의 세 가지 큰 블록으로 나뉩니다.
우선, 부트 스트랩은 프레임 워크라는 것이 분명합니다. 즉, 다른 사람들이 바퀴를 만들면 직접 바퀴를 만들 수 있도록 직접 바퀴를 만들 수 있습니다. 따라서 우리는 두 가지 점을 명확히해야합니다. 바퀴는 어떤 종류의 바퀴와 사용 방법입니다.
1. CSS 스타일 : 주로 래스터 시스템과 부트 스트랩의 글로벌 스타일을 소개합니다. 클래스 값을 설정하여 구현됩니다.
1.1 그리드 시스템 :
이를 통해 html 페이지의 레이아웃 (http://v3.bootcss.com/css/#grid)을 쉽게 구현할 수 있습니다.
그리드 시스템이 매우 중요하다고 생각합니다. HTML 페이지의 레이아웃은 중요하고 번거로운 작업이기 때문에 (W3School http://www.w3school.com.cn/html/html_layout.asp의 레이아웃 소개를 살펴볼 수 있습니다.
래스터 시스템은 이것을 크게 단순화했습니다. 그리드 시스템에 대한 위의 연결을 열면 달성하려는 효과에 따라 해당 값을 HTML 요소 클래스 속성에만 할당하면 다른 화면 크기의 장치에 다른 효과를 설정할 수도 있습니다.
1.2 부트 스트랩 글로벌 스타일 :
이것이 바로 부트 스트랩이 일반적으로 사용되는 HTML 요소 (예 : div, 버튼, p, 테이블, IMG 등)를 아름답게하는 방법입니다. HTML 요소의 클래스 속성에 해당 값을 할당하면 원하는 효과를 얻을 수 있습니다.
가장 간단한 예를 들어 봅시다 :
위 그림과 같이 Bootstrap을 사용하면 버튼 요소의 클래스 값을 변경하여 CSS 파일을 수정하거나 요소의 스타일 값을 포함하지 않고 버튼 크기를 변경할 수 있습니다.
2. 구성 요소 : 구성 요소는 일부 요소 (HTML 요소 및 JavaScript 코드)를 구성 요소로 결합한 부트 스트랩이라고 생각합니다. 이러한 구성 요소는 기본적으로 HTML 개발에 일반적으로 사용됩니다. 클래스 값을 설정하여 구현됩니다. (http://v3.bootcss.com/components/)
가장 간단한 예를 들어 봅시다 :
위 그림과 같이 내비게이션 기능을 구현해야 할 때. Boostrap에서 해당 구성 요소를 찾고 자신의 요구에 따라 해당 클래스 UL 및 LI 값을 할당하십시오.
3. JavaScript 플러그인 : Bootstrap의 JavaScript 플러그인은 공통 웹 상호 작용 기능을 캡슐화하는 "휠"이라고 생각합니다. 많은 JavaScript 코드를 직접 작성하지 않고도 일반적으로 사용되는 웹 상호 작용 기능을 구현하려면 클래스 속성 및 데이터 속성 만 설정하면됩니다.
우선, 작은 에피소드에 대해 이야기합시다. 초보자는 실수로 "JavaScript"와 "Java"가 깊은 연결을 가지고 있다고 생각할 수도 있으며, JavaScript가 Java의 변형이라고 생각할 수도 있습니다. 사실, 이것은 사실이 아닙니다. JavaScript는 인터넷 용 Netscape에서 개발 한 스크립팅 언어입니다. 사실, 그 이름은 "Livescript"입니다. 나중에 Netscape는 Sun (즉, Java를 발명 한 회사, 나중에 Oracle이 인수 한 회사)과 협력에 도달했습니다. 그 당시 자바 언어는 정점에 있었고 매우 유명했습니다. 타기를 위해 이름을 JavaScript로 변경했습니다. "Java"와 "JavaScript"의 차이는 "Lei Feng"과 "Lei Feng Tower"의 차이와 동일합니다.
주제로 돌아가서, 우리는 웹 페이지 상호 작용 기능을 제공하기 위해 JavaScript가 존재한다는 것을 알고 있습니다. 따라서 부트 스트립의 풍부한 JavaScript 플러그인을 사용하면 "휠 만들기"에 중점을 두지 않고 일반적으로 사용되는 웹 상호 작용 기능을 편리하게 구현할 수 있습니다.
위 그림에서 볼 수 있듯이 Bootstrap의 Carousel 플러그인 (http://www.runoob.com/bootstrap/bootstrap/bootstrap/bootstrap/bootstrap-carousel-plugin.html을 사용하여 공식 Bootstrap 문서는 여기서 중국어로 번역되지 않지만 Runoob에 대해 매우 상세한 중국어 변환이 있으며,이 코드를 온라인으로 수정할 수 있습니다. 현재 많은 웹 사이트에서 사용하는 사진 회전 목마 기능을 쉽게 구현할 수 있습니다. 여기에서 위의 링크의 튜토리얼에 따라 해당 클래스 및 이미지 SRC 값 만 할당하면 데이터 값을 설정할 필요조차 없습니다.
2. 학습 부트 스트랩 (2)의 예를 위해 UI 및 코드를 미용하고 최적화하십시오.
다음 그림은 이전 자습서에서 달성 된 효과를 보여줍니다.
우리는 다음과 같은 단점이 수정되어야한다는 것을 알 수 있습니다.
(1) 특정 급우를 클릭하고 정보를 표시하면 선택되지 않습니다. (처음에 클릭하면 선택한 상태에 있지만 버튼 클릭 효과입니다. 빈 공간을 클릭하면 선택한 상태가 사라집니다).
(2) 색상은 단조롭고 아름답 지 않습니다.
(3) 레이아웃을 조정해야합니다. 정보 상자는 정보가 필요한 곳이며 가능한 한 커야합니다. 표시 될 때 불필요한 상자를 숨기는 것이 가장 좋습니다.
(4) 코드의 경우 Bootstrap (2)의 JavaScript 코드는 처음부터 HTML 페이지에 작성되며 중복 코드 세그먼트가 있습니다. 중복 코드 세그먼트는 함수로 작성되어 코드 크기를 줄일 수 있습니다. 코드를 수정할 때 한 번에 한 장소를 찾지 않고 해당 기능을 직접 수정하면됩니다. JavaScript 코드는 HTML 페이지와 JavaScript 코드를 분리하기 위해 JS 파일에 작성할 수 있습니다.
기술 선택 (포함 된 것은 부트 스트랩 프레임 워크에 이미 사용되는 것을 사용하여 원하는 효과를 달성하는 방법에 대해 생각하는 것입니다) : :
1. 먼저 레이아웃을 조정하고 정보 상자와 클래스 상자를 함께 조정 한 다음 상단에 클래스 상자를 표시합니다.
분명히, 우리는 정보 상자가있는 위치와 클래스 박스의 div를 div의 동일한 행에 배치하고 그리드 시스템과 관련된 클래스 속성 값 "col-md"를 수정하면 달성하기 만하면됩니다. 예를 들어, 2 : 1의 비율을 표시하려면 정보 상자의 클래스 속성에는 COL-MD-8이 있어야하고 클래스 박스는 COL-MD-4 여야합니다.
프론트 엔드는 결코 1 단계 개발이 될 수 없다는 점은 주목할 가치가 있습니다. 종종 초기 코드는 우리가 원하는 완벽한 결과가 아니며 신중하게 조정해야합니다. 예를 들어, 모든 사람은 스스로 검색하고 지속적인 조정을 시도하는 법을 배워야합니다 (후속 조정은 특정 프로세스에서 설명되지 않습니다).
코드를 수정 한 후 제시된 효과는 다음과 같습니다.
분명히, 위의 각 줄에는 하나의 클래스 만 표시되며, 이는 약간의 공간 낭비입니다. 아래 두 부분은 정렬되지 않습니다.
위의 DIV 구성 요소의 클래스 속성에서 "BTN-Group-Vertical"을 삭제하고 JS 코드에서 TMP_BUTTON의 클래스 속성에 COL-MD-6을 추가하십시오. 또한, 이것을 설정 한 후, 첫 번째 줄은 두 번째 줄과 비교하여 이상한 계약을 맺는 것으로 관찰됩니다.
이런 종류의 외관 및 레이아웃 변경이 CSS와 관련이 있다는 것은 의심의 여지가 없습니다. 현재 요소의 특정 CS를 살펴볼 수 있습니다.
크롬을 예로 들어보십시오.
이 요소를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택하십시오. 이는 검토를 의미합니다. 오른쪽 상자에 해당 코드가 있습니다. 비교를 통해 우리는 그것이 왼쪽의 마진 문제라는 것을 알았습니다. 이 속성은 부트 스트랩 프레임 워크의 기본값이며 상단 요소에서 상속됩니다. 일부는 -1px이고 일부는 0px입니다. 예를 들어, 모두 0px로 변경됩니다.
JS 코드의 TMP_BUTTON에서 스타일 속성을 수정하고 "margin-left : 0px;"를 추가하십시오. 어떤 사람들은 글꼴이 중앙에서 보는 것이 좋지 않다고 생각하므로 텍스트 정렬을 추가 할 수 있습니다. 왼쪽으로 텍스트를 설정하여 왼쪽에서 시작합니다.
수정 효과 :
2. 접이식 버튼을 추가하여 사용자 가이 버튼을 통해 클래스 상자를 숨기거나 열 수 있도록하십시오. Classmate를 클릭하여 자세한 정보를 표시하면 정보 상자에 표시 할 공간이 많이 절약되도록 자동 숨어 있습니다.
접기 버튼을 추가하려면 http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html을 참조하십시오.
또한 접이식 버튼에 잘 생긴 아이콘을 추가 할 수 있으며 튜토리얼 http://v3.bootcss.com/components/#glyphicons를 참조하여 쉽게 달성 할 수 있습니다.
급우를 클릭하여 자세한 정보를 표시하면 자동으로 숨겨집니다. ClassMate 버튼의 클릭 이벤트, 즉 해당 JS 코드의 클릭 이벤트를 수정해야합니다.
우리는 부트 스트랩 접이식 플러그인 http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html의 사용을 확인했으며 (이것은 공식 부분이 아직 번역되지 않았 음) 다음 내용을 찾았습니다.
클래스 속성의 값과 클래스 속성의 값은 숨겨진 및 디스플레이 함수를 제어합니다. 그런 다음 버튼의 클릭 이벤트 JS 코드에서 "표시/숨기기"작업을 수행하려면 HTML 요소의 해당 클래스 속성 만 수정하면됩니다. 따라서 ClassMate 버튼의 클릭 함수에 다음 진술을 추가하십시오.
$ ( "#collapseone"). attr ( "class", "Panel-Collapse Collapse");
3. "특정 학생들을 클릭하고 정보를 표시하면 선택한 상태가 없습니다"라는 버그를 수정했습니다.
문서를 확인하여 http://www.runoob.com/bootstrap/bootstrap-button-plugin.html을 확인하면 버튼의 데이터-토글 속성을 "버튼"으로 설정하여 클릭 후 선택한 상태를 자동으로 렌더링 할 수 있습니다.
따라서 우리는 Maste의 버튼에 속성 data-toggle = "버튼"을 추가합니다.
현재 또 다른 문제가 발생했습니다. 다음에 다른 급우를 클릭하면 원래 클릭이 여전히 활성 상태에 있다고 생각합니다. 어떻게해야하나요?
http://www.runoob.com/bootstrap/bootstrap-buttons.html을 확인하면 버튼의 클래스 할당이 활성화 될 때 선택한 상태가 나타납니다. 즉, 위의 설정, 즉 Bootstrap은 다음과 같은 작업을 수행합니다. 버튼 Data-Toggle =”버튼을 클릭하면 활성이 자동으로 클래스에 추가되고 선택된 상태가 있습니다. 다시 클릭하면 액티브가 클래스에서 자동으로 제거되고 선택되지 않은 상태가 제시됩니다.
다시 말해, 우리는이 작업을 직접 수행하면됩니다. 예를 들어, 클래스 메이트를 클릭 할 때 클래스 속성에서 모든 활성 클래스 메이트 버튼을 제거 할 수 있습니다. 클릭이 완료된 후 클릭 한 버튼 만 활성 상태에 있습니다.
따라서 ClassMate 버튼의 클릭 함수에 그러한 진술을 추가하면됩니다.
코드 사본은 다음과 같습니다.
$ ( ". btn-classmate"). attr ( "class", "btn btn-default btn-classmate btn-info");
효과는 다음과 같습니다.
4. 버튼의 모양을 아름답게합니다
부트 스트랩에서 CSS 버튼 섹션을 찾으십시오.
http://www.runoob.com/bootstrap/bootstrap-buttons.html
튜토리얼에 따라 수정 한 후 여기에서 버튼의 색상을 단순히 수정했으며 필요에 따라 직접 변경할 수 있습니다. 효과는 다음과 같습니다.
5. HTML 페이지 및 JavaScript 코드의 분리
실제로, 그것은 두 단계로 나뉩니다.
1 단계 : JavaScript 코드를 JS 파일에 넣고 HTML 파일에 연결하십시오.
2 단계 : JavaScript 또는 CLEAR 함수를 사용하여 코드 블록을 함수로 작성하고 기능을 직접 호출하십시오.
두 단계 모두 비교적 간단하기 때문에 프로그래밍 언어를 배운 사람은 누구나 그렇게해야합니다. 나는 확장하고 쓰지 않을 것입니다.
JS 파일을 연결할 때 주문에주의를 기울이십시오.
예를 들어 Bootstrap의 JS 파일은 jQuery를 기반으로하며 많은 jQuery 함수를 사용하므로 jQuery JS 파일은 bootstrap의 JS 파일 전에 링크를 선언해야합니다.
마찬가지로 JS 파일은 부트 스트랩을 기반으로하므로 부트 스트랩 이후에 있어야합니다. 그렇지 않으면 코드가 작동하지 않습니다.
마지막으로 관련 코드를 게시하겠습니다.
getClassMate.html :
<! 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 : 자동; 높이 : 100px;}#btn-Group-verctical 급 오버 플로우 -X : 자동; 높이 : 500px;} 버튼 {텍스트-오버 플로우 : 엘립스 시스; 오버플로 : 숨겨진; 국경-라디우스 : 0px;}#context_div {오버 플로우 -y : auto; 오버 플로우 -X : 자동; 높이 : 500px;} </style> </head> </head> <body> <div> <div> <div> <h4 style = "text-align : right;"> <a id = "collapse_a"data-toggle = "collapse"data-parent = "#아코디언"href = "#collapseone"> </h4> </div> <div id = "collapseone"> <div id = "div1-classes classmates"> <div role = "group"aria-label = "..."id = "btn-group-verctical-classes"> <!-클래스가 표시-> </div> </div> </div> <br> </br> </br> </br> id = "btn-group-verctical-classmates"roble = "group"aria-label = "..."> <!-클래스 메이트가 표시하는 곳-> <button type = "button"style "style ="border-radius : 0px; "> 클래스를 클릭하여 반 친구를 보여주십시오. 세부 사항 </p> </div> </div> </div> <!-jQuery (부트 스트랩의 JavaScript 플러그인에 필요)-> <Scrip Src = "JS/JQuery-3.0.0.min.js"> </script> <!-모든 컴파일 된 플러그인 (아래) 포함 또는 필요에 따라 개별 파일을 포함시킵니다. src = "js/bootstrap.min.js"> </script> <script src = "js/script_getclassmate.js"> </script> </body> </html>script_getclassmate.js :
$ (document). readay (function () {$. getJson ( "resource/clastmates.json", function (result) {$. 각 (result, function (i, field) {var tmp_button = $ ( '<<버튼 유형 = "button"style = "Border-Radius : 0px; 텍스트-알림 : 왼쪽; margin-le- leg : 0px"버튼. 선택한 x chosen_state = 0> </button> '). 텍스트 (i); tmp_button.attr ( "title", i); $ ( "#btn-group-verctical-classes"). Append (tmp_button);}); $ ( ". btn.btn-default.btn class"). (함수 () {) {var tmp_chosen = number ($ (this) .attr ( "선택_state"))^1; $ (this) .attr ( "선택 ("선택된 선택 ", String (tmp_chosen)); showclassmates (결과); $ (". btn.btn-default.btn classmate "). 클릭 (function () {"attn ( " btn-default btn-classmate btn-info "); $ ("#collapseone "). attr ("class ","panel-collapse collapse "); var selected_classmate = $ (this) .text (); showClassMatedEtail (rest, selected_classmate);});})) 기능 showclassmates (result) {$ ( "#btn-group-verctical-classmates"). empty (); var 선택 _list = new 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);});} 함수 show classmatedetail (result, selected_class matem) {var classmate_context_item; $ ( "#context_div"). empty (); $. 각 (result, function (i, field) {$. 각 (필드, 함수 (j, field2) {if (j == selected_classmate) {$. 각 (field2, function (k, field3) {// alert (k); classmate + field3; var tmp_p = $ ( '<p> </p>'). Text (classMate_context_item); $ ( "#context_div"). Append (tmp_p);});}});});});});});});});Classmates.json :
{ "클래스 001": { "Xiao Wang": { "성별": "남성", "나이": "18", "관심": "축구", "고향": "상하이", "중국어": "78", "수학": "90", "66", "81", "88", "," "" "69", "지리": "92"}, "Xiao Li": { "성별": "남성", "나이": "20", "관심": "농구", "고향": "Beijing", "중국어": "98", "77", "영어": "97": "72", "" "," "," "," "," "," "," " "88", "지리": "81"}}, "클래스 002": { "Xiao Cai": { "gender": "여자", "나이": "19", "관심": "댄스", "고향": "gaoxiong", "93", "80", "92", "82" ":": ":" "77", "역사": "89", "지리": "83"}}, "클래스 003": { "Xiao MA": { "젠더": "남성", "나이": "18", "관심": "고향": "taibei", "91" ","93 "," "", "" "," "", "" "," ":" ":" ":" ":" "," "," ","93 ". "97", "화학": "100", "history": "94", "지리": "92"}}, "클래스 005": { "Xiao Zhang": { "젠더": "남성", "나이": "20", "런닝", "고향": "Guangzhou", "67", "", "", "", "", "", "", "", "", "", ":" "66", "물리학": "80", "화학": 68, "history": "79", "지리": "93"}}}위의 것은 편집자가 소개 한 Bootstrap Zero-Basic 소개 (III)에 대한 소개 자습서입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!