부트 스트랩이란 무엇입니까?
Bootstrap은 웹 응용 프로그램 및 웹 사이트의 빠른 개발을위한 프론트 엔드 프레임 워크입니다. Bootstrap은 HTML, CSS 및 JavaScript를 기반으로합니다.
역사
Bootstrap은 Twitter의 Mark Otto와 Jacob Thornton에 의해 개발되었습니다. Bootstrap은 2011 년 8 월 Github에서 출시 된 오픈 소스 제품입니다.
부트 스트랩 패키지의 내용
기본 구조 : 부트 스트랩은 그리드 시스템, 링크 스타일 및 배경으로 기본 구조를 제공합니다. 이것은 부트 스트랩 기본 구조 섹션에 자세히 설명됩니다.
CSS : Bootstrap에는 다음과 같은 기능이 제공됩니다. 전역 CSS 설정, 기본 HTML 요소 스타일의 정의, 확장 가능한 클래스 및 고급 그리드 시스템. 이것은 부트 스트랩 CSS 섹션에 자세히 설명됩니다.
구성 요소 : 부트 스트랩에는 이미지, 드롭 다운 메뉴, 내비게이션, 경고 상자, 팝업 박스 등을 만들기위한 12 개 이상의 재사용 가능한 구성 요소가 포함되어 있습니다. 이것은 레이아웃 구성 요소 섹션에서 자세히 설명합니다.
JavaScript 플러그인 : Bootstrap에는 12 개 이상의 커스텀 jQuery 플러그인이 포함되어 있습니다. 모든 플러그인을 직접 또는 하나씩 포함시킬 수 있습니다. 이것은 부트 스트랩 플러그인 섹션에 자세히 설명됩니다.
사용자 정의 : 부트 스트랩 구성 요소, 더 적은 변수 및 jQuery 플러그인을 사용자 정의하여 자신의 버전을 얻을 수 있습니다.
위는 다음 텍스트입니다. 다음과 같이 블록 양식 구성에 대한 지식은 다음과 같습니다.
내 친구가 편집 페이지에 많은 블록이있는 상황을 만났을 것입니다. Smart Form Plug-In 이이 상황을 지원했습니다.
코드는 다음과 같습니다 (링크 주소 : https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form2-group-layout.html) :
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 그룹 양식 </title> <link rel = "stylesheet"href = "../ css/bootstrap.cs"> <!-커스텀 사이트 스타일 --> 링크 releshef "href ="/css/ss ". src = "../ lib/jquery.js"> </script> <script src = "../ lib/bootstrap.js"> </script> <!-도구 방법-> <script src = "../ scripts/global.js"> </script> <!-plugin --> <cript src = "../ scripts/plugin.js"> </script> </head> <body> <div> <div> <label> 그룹 양식 </div> <div> <form action = "#"id = "id ="formcontainer "> </form> </div> <div> <labe> </div> <label> <hable> </label> 만 차이는 그룹화 구성 항목이 '그룹 : config item'</h3> </div> </div> </div> <cript> $ (function () {// 그룹 양식으로 구성 될 때 구성 항목이 배열 변수 대신 JSON 객체라는 점입니다. [{ele : {type : 'text', name : 'username', 'username', 제목 : 'username :', required : true}}, {ele : {type : 'radio', 'sex', 'sex', 'gender :', 항목 : [{text : 'male', value : 1}, {text : 'value : 2}]}}} ], [{ele : {type : 'checkbox', name : 'plant', title : '사용 플랫폼 : ', 항목 : [{text :'app ', value :'app '}, {text :'web ', value :'web '}]}}, {ele : {type :'select ', name :'provi nce ', 제목 :'지방 : ', withnull : true, 항목 : [{text :'guangdong ', value :'gd '}, {text :'hunan ', value :'hn '}}}} ]], '기타 정보': [{ele : {type : 'text', 이름 : 'displayName', 'displayName', 제목 : 'displayName :'}}, [{ele : {type : 'datetime', 'fromedate', 제목 : '유효성 검사 기간 :'}}, {type : 'dateTime', 이름 : '~'}}. ]];실행 효과 다이어그램 : (현재 구성 항목에는 두 부분이 있습니다 : 사용자 정보 및 기타 정보)
위의 내용은 Bootstrap Smart Form Tractical Series (III) 블록 양식 구성에 대한 전체 설명입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!