부트 스트랩이란 무엇입니까?
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/form1-basic.html) :
<! 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"> </head> <div> <div> <div> 구성 </label> </div> <div> <form action = "#"#"#"id = "formcontainer"> </div> <div> <라벨> 소개 </label> </div> <div> <label> 소개 </div> <h3> 지원되는 양식 요소 : 텍스트, 선택, 라디오, 체크 박스, 검색, 텍스트, 텍스트, 텍스트, Custom </h3> </div> </div> <cript> $ (function () {var eles = [{ele : {type : 'text', name : 'username', title : 'username :'}}, [{ele : {ele : {type : 'radio', name : 'sex', 'gender :', 항목 : [텍스트 : 'male', value : 1}, 'text :'fale : 2}]}, {elebox : {reect : value ', 이름 : 'plant', 제목 : '사용자 플랫폼 :', 항목 : [{text : 'app', value : 'app'}, {text : 'web', value : 'web'}}}, ], {ele : {type : 'select :'select ', name :'province ', 제목 :'지방 : ', withnull : true : [{text :'guangdong ','value : 'gd'}, {value : 'hn'}]}}, {type : 'dateTime :', tiledate ' 기간 : '}}, {ele : {type :'search ', name :'selectname ','selectname ', 제목 :'select : '}}, {ele : {type :'textArea ', name :'address : 'add FRONT : '}}, {ele : {next : {text :'<input type = "radio" /> '}, type :'text ', 이름 :'next ','next ','jitce : 'after :'}}, {pre : {text : 'input type = "checkbox" /> '}, 다음 : {text :'$ '},'text ', 이름 :'pre & next ', 제목 :'Fork Front and Back : '}}; autolayout : true})주로 다음 JS 섹션 이며이 섹션 js를 통해 양식이 생성됩니다.
실행 렌더링 :
그림에 표시된 결과를 얻으십시오
위는 편집자가 소개 한 부트 스트랩 스마트 형식 실용 시리즈 (II)에 대한 전체 설명입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!