Bootstrap custom file upload download style _javascript tips

In peacetime work, file upload download function is an indispensable part. Bootstrap front-end style frames are also used more, and now customize a file download style based on Bootstrap's powerful style template.

Follow-up will use the Spring MVC framework to implement the full file upload code, please look forward to.

First look at the picture example: This example includes downloading sample file styles and uploading file styles.

Go directly to the code and finally explain:

<div class= "Form-group col-md-12 has-feedback" id= "file" >
    <label for= "" class= "Control-label col-md-4" > select File:</label>
    <div class= "col-md-4 input-group" > <input id= "lefile" type= "file" style= "
    Display:none ">
    <span class=" Input-group-addon "onclick=" $ (' input[id=lefile] '). Click (); "style=" cursor: pointer; Background-color: #e7e7e7 "><i class=" fa fa-folder-open "></i>Browse</span>
    <input id=" Photocover "class=" Form-control "type=" text ">
    <span class=" fa fa-download form-control-feedback "style=" Cursor:pointer;pointer-events:auto; " ></span>
    </div>
   

The main technologies involved are:BOOTSTRAP;CSS3 's POINTER-EVENTS;HTML5

1. HTML5 's basic file upload style

<input type= "File" name= "file" >
styles display different effects depending on the browser.

2. Font icon

You can use the bootstrap built-in Glyphicons font icon, or you can use font awesome fonts icon. The specific use of the tutorial reference website:

Glyphicons: http://v3.bootcss.com/components/#glyphicons

Font Awesome: http://fontawesome.io/

This example uses two icons , <i class= "fa fa-folder-open" ><i class= "fa fa-download" >

or <i class= "glyphicons glyphicons-folder-open" ><i class= "Glyphicons glyphicons-download-alt" >

3. css3:pointer-events

In Bootstrap, the. Form-control-feedback pointer-events is set to none, which causes the element to be selected when the download Swatch button is clicked and is now set to auto.

Grammar:

pointer-events:Auto | none | visiblepainted | Visiblefill | Visiblestroke | Visible | Painted | Fill | Stroke | All

default value:Auto

apply to: all elements

Inheritance: have

animation sex: No

Calculated value: Specified value

Take value:

Auto: Behaves the same as when the Pointer-events property is not specified. Same as visiblepainted value on SVG content
None: element will never be target for mouse events. However, when the Pointer-events property of its descendant element specifies a different value, the mouse event can point to the descendant element, in which case the mouse event will trigger an event listener for the parent element in the capture or bubble order.
Other values can only be applied on SVG.

4. Upload the file button to implement-----bootstrap combo box Use

. Use of Input-group and. Input-group-addon.

Specific CSS rendering to view the bootstrap source code.

5. Download the implementation of the sample button---Reference bootstrap form error hint style

. Use of Has-feedback and. Form-control-feedback

If you have not learned enough, you can click here to learn, and then attach a wonderful topic: Bootstrap Learning Course

The above is the entire content of this article, I hope to learn bootstrap program design help.