부트 스트랩이란 무엇입니까?
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/form3-ele-img.html) :
• jQuery-File-Upload 플러그인에 의존하려면 jquery.ui.widget.js, jquery.iframe-transport.js 및 jquery.fileload.js를 참조해야합니다.
• Global.fn.initplugin ( 'IMG', 'FormContainer'); FormContainer : Form ID, 검색 범위를 좁 히기, 선택 사항
이 플러그인의 원리는 사진을 서버에 업로드 한 다음 서버가 이미지 저장소로 경로를 반환하는 것입니다. 마지막으로, 양식을 제출할 때 서버 스토리지로가는 경로 , 매개 변수 설명 :
ID : '주로 구별하는 데 사용될 수 있습니다'
다중 : 'true', 업로드 중에 여러 선택 파일이 허용되는지 여부
이름 : 파일을 업로드 할 때 제출할 키입니다
extendattr :
필드 : 양식을 저장할 때 키 이름이 전송 될 때 : 선택 사항 [단일 | mutiple | null] 단일 인 경우 업로드 된 이미지가 기존 이미지를 대체하고 그렇지 않으면 현재 이미지에 추가됩니다.
URL : 이미지를 업로드하여 제출 된 URL은 Global.js 파일에서 Global.fn.inituploadimage의 기본값을 수정할 수도 있습니다.
참고 : 기본적으로 반환 된 JSON 형식은 다음과 같습니다. {result : 200, imgurl : '......'}, 결과 : 200은 이미지 업로드가 성공했음을 의미합니다!
스크린 샷 실행 :
위의 내용은 Bootstrap Smart Form Practical Series (9)에 대한 지원에 대한 전체 설명입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!