In daily work, the file upload and download function is an indispensable part. Bootstrap front-end style frameworks are also used more often. Now, based on bootstrap's powerful style templates, customize a style for downloading files.
In the future, we will use the spring MVC framework to implement all the code uploaded by the file, so stay tuned.
Let’s look at the picture example first: This example includes download sample file styles and upload file styles.
Just upload the code first, and finally explain:
<div id="file"> <label for="">Select file:</label> <div> <input id="lefile" type="file" style="display:none"> <span onclick="$('input[id=lefile]').click();" style="cursor: pointer; background-color: #e7e7e7"><i></i>Browse</span> <input id="photoCover" type="text"> <span style="cursor: pointer;pointer-events: auto;"></span> </div> </div>The main technologies involved are: bootstrap; pointer-events of css3; html5
1. Basic file upload style of html5
<input type="file" name="file">
The style will display different effects according to different browsers.
2. Font Icons
You can use the glyphicons font icon built in bootstrap, or Font Awesome font icons. For specific usage tutorials, please refer to the official website:
glyphicons: http://v3.bootcss.com/components/#glyphicons
Font Awesome: http://fontawesome.io/
In this example, two icons are used, <i><i>
Or <i><i>
3. css3: pointer-events
In bootstrap, the pointer-events of .form-control-feedback are set to none, which causes elements to be selected when clicking the download sample button, and are now set to auto.
grammar:
pointer-events: auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all
Default value: auto
Applicable to: All elements
Inheritance: Yes
Animation: No
Calculate value: Specify value
Value:
auto: The same performance as the pointer-events property is not specified. The same value as visiblepainted on svg content
none: The element will never become a target for mouse events . However, when the pointer-events property of its descendant element specifies other values, the mouse event can point to the descendant element, in which case the mouse event will trigger the parent element's event listener at the capture or bubbling order.
Other values can only be applied to SVG.
4. The button to upload a file ------- Use of the bootstrap combo box
Use of .input-group and .input-group-addon.
For specific css rendering, check the bootstrap source code by yourself.
5. Implementation of download sample button --- Refer to bootstrap's form error prompt style
The use of .has-feedback and .form-control-feedback
If you haven't learned enough, you can click here to learn and then attach a wonderful topic to you: Bootstrap learning tutorial
The above is all about this article, and I hope it will be helpful for everyone to learn Bootstrap programming.