매일 작업에서 파일 업로드 및 다운로드 기능은 필수 불가결 한 부분입니다. 부트 스트랩 프론트 엔드 스타일 프레임 워크도 더 자주 사용됩니다. 이제 Bootstrap의 강력한 스타일 템플릿을 기반으로 파일 다운로드를위한 스타일을 사용자 정의하십시오.
앞으로 Spring MVC 프레임 워크를 사용하여 파일로 업로드 된 모든 코드를 구현하므로 계속 지켜봐 주시기 바랍니다.
그림 예를 먼저 살펴 보겠습니다.이 예제에는 다운로드 샘플 파일 스타일과 파일 스타일 업로드가 포함됩니다.
먼저 코드를 업로드하고 마지막으로 설명하십시오.
<div id = "file"> <label for = ""> 파일을 선택하십시오 : </label> <div> <input id = "lefile"type = "file"style = "display : none"> <span onclick = "$ ( 'input [id = lefile]'." Style = "Cursor : Pointer; Back
관련된 주요 기술은 다음과 같습니다. 부트 스트랩; CSS3의 포인터 이벤트; html5
1. HTML5의 기본 파일 업로드 스타일
<입력 유형 = "파일"이름 = "파일">
스타일은 다른 브라우저에 따라 다른 효과를 표시합니다.
2. 글꼴 아이콘
부트 스트랩에 내장 된 Glyphicons 글꼴 아이콘 또는 글꼴 멋진 글꼴 아이콘을 사용할 수 있습니다. 특정 사용 자습서는 공식 웹 사이트를 참조하십시오.
Glyphicons : http://v3.bootcss.com/components/#glyphicons
Font Awesome : http://fontawesome.io/
이 예에서는 두 개의 아이콘이 사용됩니다. <i> <i>
또는 <i> <i>
3. CSS3 : 포인터 이벤트
Bootstrap에서 .form-control-feedback의 포인터 이벤트는 없음으로 설정되어있어 다운로드 샘플 버튼을 클릭 할 때 요소가 선택되며 이제 자동으로 설정됩니다.
문법:
포인터 이벤트 : 자동 | 없음 | VisiblePainted | visiblefill | visiblestroke | 가시 | 페인트 | 채우기 | 뇌졸중 | 모두
기본값 : 자동
적용 가능 : 모든 요소
상속 : 그렇습니다
애니메이션 : 아니요
값 계산 : 값을 지정하십시오
값:
자동 : 포인터 이벤트 속성과 동일한 성능이 지정되지 않았습니다. SVG 컨텐츠에서 Visible Painted와 동일한 값입니다
없음 : 요소는 마우스 이벤트의 대상이되지 않습니다 . 그러나 자손 요소의 포인터 이벤트 속성이 다른 값을 지정할 때 마우스 이벤트는 자손 요소를 가리킬 수 있으며,이 경우 마우스 이벤트는 캡처 또는 버블 링 순서에서 부모 요소의 이벤트 리스너를 트리거합니다.
다른 값은 SVG에만 적용될 수 있습니다.
4. 파일을 업로드하는 버튼 ------- 부트 스트랩 콤보 박스 사용
.input-Group 및 .input-Group-Addon 사용.
특정 CSS 렌더링의 경우 부트 스트랩 소스 코드를 직접 확인하십시오.
5. 다운로드 샘플 버튼 구현 --- Bootstrap의 양식 오류 프롬프트 스타일을 참조하십시오.
.HAS 피드백 및. 양식 제어 피드백 사용
충분히 배우지 못했다면 여기를 클릭하여 배우고 멋진 주제를 첨부 할 수 있습니다 : 부트 스트랩 학습 자습서
위의 내용은이 기사에 관한 모든 것이며, 모든 사람들이 부트 스트랩 프로그래밍을 배우는 것이 도움이되기를 바랍니다.