毎日の作業では、ファイルのアップロードおよびダウンロード機能は不可欠な部分です。ブートストラップフロントエンドスタイルのフレームワークも頻繁に使用されます。これで、Bootstrapの強力なスタイルテンプレートに基づいて、ファイルをダウンロードするスタイルをカスタマイズします。
将来的には、Spring MVCフレームワークを使用して、ファイルによってアップロードされたすべてのコードを実装するため、お楽しみに。
最初に写真の例を見てみましょう。この例には、サンプルファイルスタイルのダウンロードとファイルスタイルのアップロードが含まれています。
最初にコードをアップロードして、最後に説明してください。
<div id = "file"> <label for = ""> select file：</label> <div> <input id = "lefile" type = "file" style = "display"> <span onclick = "$（ 'input [id = lefile]'）。 style = "cursor：pointer; background-color：＃e7e7e7"> <i> </i> browse </span> <入力id = "text"> <span style = "cursor：pointer; pointer-events：auto;"> </span> </div> div>
関係する主なテクノロジーは次のとおりです。 CSS3のポインターイベント。 HTML5
1. HTML5の基本ファイルアップロードスタイル
<入力型= "file" name = "file">
このスタイルは、さまざまなブラウザに応じてさまざまな効果を表示します。
2。フォントアイコン
ブートストラップに組み込まれたGlyphiconsフォントアイコンを使用するか、フォントの素晴らしいフォントアイコンを使用できます。特定の使用チュートリアルについては、公式Webサイトを参照してください。
Glyphicons：http：//v3.bootcss.com/components/#glyphicons
フォント素晴らしい：http：//fontawesome.io/
この例では、2つのアイコンが使用されます<i> <i>
または<i> <i>
3。CSS3：ポインターイベント
ブートストラップでは、.form-control-feedbackのポインターイベントがNoneに設定されているため、ダウンロードサンプルボタンをクリックすると要素が選択され、Autoに設定されます。
文法：
Pointer-Events： auto |なし| bieblepainted | VisibleFill | Visiblestroke |可視|塗装|塗りつぶし|ストローク|全て
デフォルト値：自動
適用可能：すべての要素
継承：はい
アニメーション：いいえ
値の計算：値を指定します
価値：
Auto：Pointer-Eventsプロパティと同じパフォーマンスは指定されていません。 SVGコンテンツに描かれたVisiblePaintedと同じ値
なし：要素は、マウスイベントのターゲットになることはありません。ただし、その子孫要素のポインターイベントプロパティが他の値を指定すると、マウスイベントは子孫要素を指すことができます。その場合、マウスイベントは、キャプチャまたは泡立つ順序で親要素のイベントリスナーをトリガーします。
他の値はSVGにのみ適用できます。
4.ファイルをアップロードするボタン-------ブートストラップコンボボックスの使用
.input-groupおよび.input-group-addonの使用。
特定のCSSレンダリングについては、ブートストラップソースコードを自分で確認してください。
5。ダウンロードサンプルボタンの実装---ブートストラップのフォームエラープロンプトスタイルを参照してください
.has-feedbackと.form-control-feedbackの使用
十分に学んだことがない場合は、ここをクリックして学習してから素晴らしいトピックを添付してください：Bootstrap Learningチュートリアル
上記はすべてこの記事に関するものであり、誰もがブートストラッププログラミングを学ぶことが役立つことを願っています。