부트 스트랩이란 무엇입니까?
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 플러그인을 사용자 정의하여 자신의 버전을 얻을 수 있습니다.
이 장에서는 양식을 생성 한 후 모델 데이터를 양식 양식으로 표시하는 방법을 소개합니다 (일반적으로 페이지를 편집하는 데 사용됨).
코드는 다음과 같습니다 (연결 주소 : https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form4-initdata.html) :
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 데이터 바인딩 </title> <meta name = "viewport"content = "width = device-width, 초기 스케일 = 1"> <링크 rel = "stylesheet"href = "<! Rel = "Stylesheet"href = "../ css/site.css"> <script src = "../ lib/jquery.js"> </script> <script src = "../ lib/bootstrap.js"> </script> <!-도구 메소드 --> 스크립트 src = "../ scripts/global.js"> </script> <! <!-플러그인-> <script src = "../ scripts/plugin.js"> </script> </head> <div> <lave> 데이터 바인딩 </label> <div> <button id = "btnsubmit"> </div> </div> </div> </div> </div> </div> Action = "#"#"id ="formcontainer "> </form> </div> <div> <div> <label> 소개 </div> </div> <div> <lable> 소개 </label> </div> <div> <h3> 양식 데이터 바인딩 </h3> <blockquote> <p> BIND JSON FORMAT 모델을 여기에 시뮬레이션 된 모델 데이터를 사용합니다. 실제 환경에서는 데이터를 얻기 위해 서버와 상호 작용해야합니다. 구성 객체에서 콜백 메소드가 필요합니다. 양식의 일부 작업은 양식 검증 추가 및 날짜 플러그인 지원 추가 ===== </p> <p>와 같은 반환 메소드에서 수행 할 수 있습니다. 참고 : 확인란의 데이터 소스는 배열 양식에 있습니다. 사용자 이름 : '}, ele : {type :'text ', name :'username ', 제목 :'username : ', required : true}}, {ele : {type :'radio ', nam e : 'sex', 제목 : '성별 :', 항목 : [{text : 'male', value : 1}, {text : 'female', value : 2}}}, {ele : {type : 'checkbox', 이름 : 'plant', 제목 : '플랫폼 사용 :', 항목 : [{text : 'app', value : 'app'}, {text : 'web', value : 'web'}}} ], [{ele : {type : 'select', name : 'province', title : 'province :', 'province :', withnull : true : [{text : 'guangdong', 'value :'gd '}, {value :'hn '}]}}, {eLe :'<input type = "radio"> '}, type :'text ', name :'displayName ', 제목 :'display name : 'ele}, {ele : {type :'search : 'search', title : 'product', id : 'productName'}], [{ele : {type : 'dateTime', 'fromedate', title : 'passication '}}, {ele : {type :'dateTime ', 이름 :'Todate ', title :'~ '},]]; '1,3'}). render ( 'formcontainer', function (bf) {var Model = {PrimaryKey : 1, 사용자 이름 : 'xxg', 섹스 : 1, 식물 : [ 'app', 'web'], Province : 'GD', displayName : 'test', productName : 'noteb Ook ', Fromedate :'2015-06-10 ', Todate :'2015-08-08 '}; bf.initformdata (model);}); $ ( "#btnsubmit"). bind ('click ', function () {var postData = bsform.getFormData (); alert ( "획득 된 표현 데이터는"+json.stringify (postData));}); </script> </body> </html>입니다여기서는 JSON 형 모델이 JS를 사용하여 작성됩니다. 실제 개발에서는 서버와 상호 작용하여 모델을 얻게됩니다. 모델은 양식 플러그인의 initformData 메소드를 통해 양식으로 표시됩니다.
렌더링은 다음과 같습니다.
정의 된 데이터는 양식에 성공적으로 표시됩니다
참고 : 확인란에 대한 여러 선택의 경우 반환해야 할 것은 배열입니다.
위의 것은 편집자가 소개 한 Bootstrap Smart Form Practical Series (VI) 양식 편집 페이지의 데이터 바인딩에 대한 완전한 설명입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!