부트 스트랩이란 무엇입니까?
Bootstrap은 웹 응용 프로그램 및 웹 사이트의 빠른 개발을위한 프론트 엔드 프레임 워크입니다. Bootstrap은 HTML, CSS 및 JavaScript를 기반으로합니다.
양식의 레이아웃은 두 가지 유형으로 나뉩니다 : 자동 레이아웃 및 맞춤형 레이아웃 :
자동 레이아웃은 구성 항목의 두 번째 레벨 구성 항목의 배열 길이를 기준으로 다른 부트 스트랩 래스터를 자동으로 사용하는 것입니다. 자동 레이아웃을 AutoLayout을 true로 설정하여 자동 레이아웃을 달성 할 수 있습니다.
자동 레이아웃은 Autolayout에 따라 사용되는 그리드를 결정하는 것입니다. Autolayout : '1,2,1,2,2,4'를 설정함으로써 첫 번째 및 두 번째 열이 3 개의 그리드를 차지하고 세 번째 열은 6 개의 그리드를 차지한다는 것을 의미합니다.
자동 레이아웃 코드는 다음과 같습니다.
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 자동 레이아웃 </title> <link rel = "stylesheet"href = "../ css/bootstrap.css"> <script src = "../ lib/jquery.js"> src = "../ lib/bootstrap.js"> </script> <!-도구-> <script src = "../ scripts/global.js"> </script> <!-플러그인-> <script src = "../ scripts/plugin.js"> </script> <div> <div> <lable> automatic Layout </label> </div> <div> <form action = "#"#"#"id = "formcontainer"> </div> <div> <label> 소개 </label> </div> <div> <lable> 소개 </div> <div> <h3> 소위 자동 레이아웃은 개별 구성 그룹에 따라 다른 래스터를 자동으로 사용하는 것입니다. 예를 들어, 배열의 항목 수는 2, 2, 4, 2, 4 레이아웃을 사용합니다 </h3> <p>는 부트 스트랩 래스터 스타일에 의존하며 12 세그먼트 형식 만 지원합니다. 5 개의 항목을 구성하면 지원되지 않습니다 </p> </div> </div> <cript> $ (function () {var eles = [{ele : {type : 'text', name : 'username', 제목 : 'username :', required : true}}, {ele : {type : 'radio', name : 's Ex ', 제목 :'성별 : ', 항목 : [{text :'male ', value : 1}, {text :'female ', value : value : 2}},], [{ele : {type :'checkbox ', 이름 : 'Plant', 제목 : '사용 플랫폼 : ', 항목 : [{text :'app ', value :'app '}, {text :'web ', value :'value : 'web'}}}, {ele : {type : 'select', 'province :'province : ', withnull : true : [텍스트 :'gd '}, text :'hunan ', : 'hn'}]}}], [{ele : {type : 'text', name : 'displayName', 'displayName': 'display name :'}}, {ele : {type : 'dateTime', 'fromEdate', 'fromedate :'valid 기간 : '}}, {ele : {type :'dateTime ', name :'todate ', 제목 :'~ '}]]; // 숨겨진 양식 요소는 주로 편집에 사용되며, 배경은 var hides와 구별 될 수 있습니다 = [id :'guid '}]; var bsform (vs {eles : hides : hides : hides : hides : hides : hides : hides : hides : hide : hides : hides : hides : hides : hides : hides : hide). })실행 렌더링 :
내 구성 파일의 첫 번째 항목과 2 개의 항목에는 2 개의 열이 장착되어 있으며 세 번째 항목은 3 개의 열로 구성되어 있으므로 Div.form 그룹의 첫 번째 항목과 두 번째 항목이 사용됩니다. 2,4 세 번째 항목은 사용됩니다. 1,3 인터페이스에서 매우 친절하지 않으므로 각 항목은 특수한 시나리오에서 사용됩니다.
사용자 정의 레이아웃 코드 (https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/frix-layout.html) :
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 사용자 정의 레이아웃 </title> <link rel = "stylesheet"href = "../ css/bootstrap.cs"> <! href = "../ css/site.css"> <script src = "../ lib/jquery.js"> </script> <script src = "../ lib/bootstrap.js"> </script> <!-도구 메서드-> <script/global.js "> </script> <!-flugin src = "../ scripts/plugin.js"> </script> </head> <body> <div> <div> <label> 사용자 정의 레이아웃 </label> </div> <div> <form action = "#"id = "id ="id = "div> <label> 소개 </div> <label> <라벨> </div> <div> <div> </div> </div> <div> Layout </h3> <p> Autolayout을 구성하면 : 1,2 1,2 래스터가 표시됩니다. 2,4 시스템이 없으면 1,2 </p> </div> <cript> $ (function () {var를 자동으로 찾습니다. eles = [{ele : {type : 'text', name : 'username', 제목 : 'username', 제목 : 'username', 제목 : 'username :'require}}, {ele : {ty PE : 'Radio', 이름 : '섹스', 제목 : '성별 :', 항목 : [{text : 'male', value : 1}, {텍스트 : '여성', 값 : 2}]}}, {ele : {type : 'checkbox', 이름 : 'Plant', 제목 : '사용 플랫폼 : ', 항목 : [{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', name : 'displayName', 제목 : 'display name :'}}, {ele : {type : 'dateTime', 이름 : 'fromedate', 'validation period :'}}, {ele : {type : 'dateTime', 'toodate :'~ '}]; 편집에 사용됩니다. 배경은 var var hides = [{id : 'guid'}]; var bsform = new bsform ({eles : eles : eles, eles, 가죽 : 가죽, autolayout : '1,2,1,2'}).렌더링은 다음과 같습니다.
참고 : 페이지에 4 개의 열이 있지만 구성된 AutoLayout이 불충분 한 경우 다음 부분은 이전 레이아웃을 사용합니다. 즉, 첫 번째 열은 기본 구성 열로 사용됩니다.
위의 내용은 Bootstrap Smart Form Practical Series (IV) 편집자가 소개 한 형식 레이아웃 소개에 대한 전체 설명입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!