序文：フォーム、フォーム検証、ファイルアップロード、ドロップダウンボックス、ポップアップボックスをチェックするなど、以前にブートストラップの多くの一般的なコンポーネントを共有しました。この期間中、ブロガーはいくつかの有用なコンポーネントを収集しました（プロジェクトで使用されています）。 2日後、彼はそれらのいくつかを整理しました。 「良いことは他の人と共有されなければならない」という原則に基づいて、今日は、困っている庭師が参照するためにブロガーが収集したものを共有するためにいくつかの利点を与えます。ほとんどのコンポーネントはオープンソースコンポーネントであり、それらのいくつかは、ブロガーがインターネット上で見つける効果と書き直された効果です。彼らは満足のいくものではないかもしれません。興味があるなら、見てください。
1。時間コンポーネント
ブートストラップスタイルには多くの時間コンポーネントがあります。 GitHubでキーワード「DatePicker」を検索でき、多くの時間コンポーネントを見つけることができます。ブロガーは以前にそれらの2つを使用しており、大小のサイズの問題があることを発見しました。いくつかのスクリーニングの後、良い結果があり、さまざまなシナリオに使用できる時間コンポーネントを見つけました。以下のスタイルを見てみましょう。
1。エフェクトディスプレイ
初期効果
コンポーネントの文化形式のカスタマイズ：日付のみが表示されます
日付と時刻を表示します（携帯電話とタブレットデバイスのエクスペリエンスの方が良いかもしれません）
2。ソースコードの説明
チュチュはコンポーネント効果を見て、ソースコードアドレスを与えました
3。コードの例
まず、必要なファイルを参照します
<link href = "〜/content/bootstrap/css/bootstrap.css" rel = "styleSheet"/> <link href = "〜/content/content/bootstrap-datetimepicker-master/build/css/bootstrap-dateTimepicker.css" rel = "Stylesheet"/>> <スクリプトsrc = "〜/content/jquery-1.9.1.js"> </script> <スクリプトsrc = "〜/content/bootstrap/js/bootstrap.js"> </script> <script src = "// cdnjs.cloudflare.com/ajax/libs/moment.js * src = "〜/content/bootstrap-datetimepicker-master/build/js/bootstrap-datetimepicker.js"> </script>
jQueryとブートストラップが必要です。さらに、locales.jsファイルの瞬間を参照する必要があります。もちろん、このCDNメソッドを使用せずにこのJSファイルをローカルエリアにダウンロードすることもできます。このJSファイルをローカルエリアに完全にダウンロードしてから、ローカルリファレンスを追加できます。
（1）初期効果
<ラベル>日付：</label> <div class = 'input-group date' id = 'datetimepicker1'> <入力タイプ= 'text'/> <span> </span> </span> </div> <script type = "text/javascript"> $（function（）{$（ '＃datetimepicker1'）。 </script>これにより、上の写真に示されているように効果が得られます。
（2）中国の文化と日付の書式設定
HTMLパーツは変更されていません。 JSを初期化するときにパラメーターを追加するだけです。
<script type = "text/javascript"> $（function（）{$（ '＃dateTimepicker1'）。dateTimePicker（{format： 'yyyymm-dd'、//日付フォーマット、日付ロケールのみ： 'zh-cn' //中国文化}）;}）; </script>（3）表示時間
<ラベル>時間：</label> <div class = 'input-group date' id = 'datetimepicker2'> <入力タイプ= 'テキスト'/> <span> </span> </span> </div> <script = "text/javascript"> $（function（）{$（ '＃datetimepicker2'）。 HH：mm：ss '、locale：' zh-cn '}）; </script>（4）最大日付と最低日付
$（ '＃DateTimePicker1'）。DateTimePicker（{format： 'yyyymm-dd'、//日付フォーマット、表示日のみのロケールのみ： 'zh-cn'、//中国文化maxdate： '2017-01-01'、//最大日付マインド： '2010-01-01' //最低日付}）;（5）[削除]ボタンを有効にします
showclear：true
（6）モード属性を表示します。ブラウザを選択してモードを選択してコードを次のようにコピーします：viewmode： 'years'
（7）その他
より強力な機能については、APIを参照してください。そのため、ここにすべてリストしません。さまざまな特別なニーズを満たすための属性、イベント、方法が多数あります。
2。デバイスコンポーネントの自己障害
Bootstrap AutoIncrementerに関しては、すべてのプロジェクトでは必要ない場合があります。次のような特別なシナリオがいくつかあります。特定のテキストボックスにはデータ番号が必要であり、配列のサイズを微調整する必要があります。長い間話し合った後、庭師の中にはそれがどのように見えるかわからないかもしれませんので、写真をクリックしてください。
1。エフェクトディスプレイ
実際、効果は非常に単純ですが、最大値、最小値、および自己アドデッド値を自動的に設定でき、デジタル検証を自動的に実行できます。最も便利なことは、JavaScriptを使用して初期化する必要があることであり、HTMLで初期化する必要があることです。
2。ソースコードの説明
ソースコードとドキュメントアドレス
3。コードの例
最初に参照されるファイルは次のとおりです。
<link href = "〜/content/bootstrap/css/bootstrap.css" rel = "styleSheet"/> <link rel = "styleSheet" href = "https://maxcdn.bootstrapcdn.com/font-aweous/4.6.3/css/font-aweome.min.cs"> < href = "〜/content/jquery.spinner-master/dist/css/bootstrap-spinner.css" rel = "stylesheet"/> <scrip src = "〜/content/jquery-1.9.1.js"> </script> <script src = "〜/content/boottrap/js/js/boottrap.js"> src = "〜/content/jquery.spinner-master/dist/js/jquery.spinner.js"> </script>
font-aweaome.min.cssファイルもCDNリファレンスファイルであり、ローカルに参照することもできます。
（1）初期化
<div data-trigger = "spinner"> <入力タイプ= "text" value = "1" data-rule = "quantion"> <span> <a href = "javascript :;" data-spin = "up"> <i> </i> </a> <a href = "javascript :;" data-spin = "down"> <i> </i> </a> </span> </div>
単純なHTMLセクションでは、上の写真に示すように効果を見ることができます。簡単ですか？
（2）自己障害タイプ
コンポーネントのソースコードを表示する場合、私たちのために定義されている複数の自己侵入タイプがあることがわかります。
次のような、これらのタイプにデータルール属性を定義できます。
自己侵入コンポーネントを制御できるルールは、毎月のルールに従って実行されます。
（3）最大値、最小値、自己アドデッド値を設定します
上記の特定のタイプに加えて、コンポーネントはカスタムの最大値、最小値、および自己付加価値もサポートしています。
<Div Data-Trigger = "Spinner"> <入力タイプ= "TEXT" VALUE = "1" DATA-MIN = "-10" data-max = "10" data-step = "2" data-rule = "数量"> <span> <a href = "javascript :;" data-spin = "up"> <i> </i> </a> <a href = "javascript :;" data-spin = "down"> <i> </i> </a> </span> </div>
data-min = "-10"：最小値data-max = "10"：最大値data-step = "2"：自己障害値
これは理解しやすく、私はそれをあまり説明しません。効果：
（4）イベントキャプチャ
コンポーネントは、2つのイベントを変更して変更します。これは、数値の変更と変更後のイベントコールバックに対応します。
$（ '＃id'）。spinner（ 'chander'、function（e、newval、oldval）{}）; $（ '[data-trigger = "Spinner"]'）。3。読み込み効果
数日前、グループメンバーは、ブートストラップのロード効果に使用するコンポーネントを尋ねました。実際、Baiduで検索すると、多くの結果が見つかります。ここでは、ブロガーは、誰もがそれらを使用できることを期待して、彼または彼女の使用経験に基づいていくつかのロードされたウィジェットを共有します。主に実用的でクールに分かれています。実用的なモデルには平均効果がありますが、さまざまなブラウザーに使用できます。クールモデルは最新のCSS3とHTML5を使用して記述されており、効果は非常にクールですが、基本的にIEの低いバージョン（10未満）は互換性がありません。
1。実用的
1。パーフェクトロードコンポーネント
このコンポーネントは、インターネット上のブロガーが発見したJSですが、ダウンロードした後、いくつかの大きな問題を見つけました。そこでブロガーはそれを書き直し、ブートストラップロードコンポーネントと名付けました。その原則は、コンポーネントが起動したときにカバー層をポップアップすること、そしてコンポーネントが閉じたとき、オーバーレイ層DOMが削除され、負荷効果がGIF画像を使用することです。
perfectload.jsファイルコンテンツ：
/*************************************************プラグイン：フレンドリーなページの読み込み効果*著者：sqinyang（[email protected]）*時間：2015/04/20*説明：HTML5の人気により、ページ効果はより多くの驚くべきものであり、その時間にも豊富に充実しています。特に外国のサーバーにぶら下がっているウェブサイトにとって、インターネットの速度は非常に激しいです。たくさんの素材を開くと、場所をゆっくりとロードでき、場所は一貫性がありません。したがって、この方法は、すべての人が*************************************************************************************************** {start：function（options）{var defaults = {opacity：1、// loading page transparency backgrationcolor： "色の境界幅：1、//プロンプトの境界幅国境境界線：//プロンプトボーダースタイルのロードチップ：「ロード、待ってください...」、//プロンプトのテキストTipscolor： "＃666"、//プロンプトカラー遅延時間：1000、//ページの読み込みが完了した後、ロードページは徐々にseet zindex：999、set zindex：set zindex：0.99 0に等しく、一時停止する必要はありません} var options = $ .extend（defaults、options）; //ページ幅と高さを取得var _pageheight = document.documentelement.clientheight、_pagewidth = document.documentelement.clientwidth; //ページがロードされない前に表示されるカスタムコンテンツをloadinghtml var _loadinghtml = '<div id = "loadingpage" style = "position：fixed; left：0; top：0; _ position：absolute; width：100％; height：' + _pageheight + 'px; '; filter：alpha（ofacity =' + option.opacty * 100 + '）; z-index：' + option.zindex + '; "div id =" loadingtips = "position：auto; border-color：' + options.bordercolor + '; Option.BorderWidth 'Px：80px：5px; '; font-size：20px; ">' + options.loadingtips + '</div> </div>'; //ロードエフェクト$（ "body"）。append（_loadinghtml）; //読み込みプロンプトボックスの幅と高さを取得しますvar _loadingtipsh = document.getElementById（ "LoadingTips"）。clientheight、_loadingtipsw = document.getElementById（ "LoadingTips"）。clientWidth; //距離を計算し、ロードプロンプトボックスを上、下、左、右、中央var _loadingtop = _pageheight> _loadingtipsh？ （_pageheight -_loadingtipsh） / 2：0、_loadingleft = _pagewidth> _loadingtipsw？ （_pagewidth -_loadingtipsw） / 2：0; $（ "＃loadingtips"） //ページの読み込みステータスdocument.onreadystatechange = pageloaded; // function pageloaded（）{if（document.readystate == "complete"）{var loadingmask = $（ '＃loadingpage'）; setimeout（function（）{loadingmask.anime（{{"ofacity"：0}、options.delaytime、function（）{$（this）.hide（）;};}、options.sleep）; }}}、end：function（）{$（ "＃loadingpage"）。remaid（）; }}
このJSは基本的にオンラインでダウンしていますが、これに基づいて、ブロガーは最終方法を追加しました。
コンポーネントがどのように使用されているか見てみましょう。これがテストコードです：
<html> <head> <meta name = "Viewport" content = "width = device-width"/> <title> loading </title> <link href = "〜/content/bootstrap/css/bootstrap.css src = "〜/content/bootstrap/js/bootstrap.js"> </script> <script src = "〜/content/bootstrap-loading/perfectload.js"> </script> <script> <"text/javascript"> $（function（）{$（ "＃btn_submit"）。 $ .BOOTSTRAPLOADING.START（{Loadingは処理されています... "}）; </script> </head> <body> <div style = "padding：0px"> <div style = "height：450px;"> <div>クエリ条件</div> <div> <form id = "formsearch"> <div> <div> <div> <div> <div> <butth "button" button "button" button "id =" btn_submit "> <span ara-hidine </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>使用の手順：コンポーネントはHTMLコードを必要とせず、ロードを実行するときにコンポーネントの開始方法を呼び出す必要があります。 start（）メソッドはポップアップレイヤーを開始し、すべてのパラメーターをデフォルト変数に設定できます。読み込みが終了すると、コンポーネントの終了メソッドが呼び出され、ポップアップレイヤーが自動的に削除されます。効果を見てみましょう：
効果に満足していない場合は、デフォルトのパラメーターを自分で設定できます。注釈は詳細に書かれているので、ここには1つずつリストしません。
2。chrysanthemum荷重コンポーネントSpin.js
画像を使用して読み込み効果を表示するには、固有の欠点があるため、多くのロードコンポーネントがCSS+JSを使用してアニメーション効果を実現しました。 Spin.jsはこれらの例の1つです。 Spin.jsは、オープンソースアドレスを備えたオープンソースコンポーネントです。
ソースコードをダウンロードした後、初期化により、コンポーネントにマスクがないことがわかります。したがって、次のようになります。
そのパラメーターを長い間検索した後、私はそれらを見つけることができませんでした。または、「組織」がある場所にそれらを見つけませんでした。方法はありません。ブロガーは、マスクの効果を自分で追加することしかできません。そのため、新しいCSSスタイルファイルが作成され、一時的にSpin.CSSと名付けられました。
.fade {position：sixt;上：0;右：0;下：0;左：0; Z-Index：9999;不透明：1;背景色：灰色;}その後、Spin.jsは2つの場所で書き換えられ、書き換えコンテンツは次のとおりです。
/** * Copyright（c）2011-2014 Felix Gnass * MITライセンスに基づいてライセンス * http://spin.js.org/ * *例：var opts = {行：12、//長さ：7、//各行の幅の長さ：5、//全体のサイズ：/コーナー：1、//ラウンドネス（0..1）色： '＃000'、// #rgbまたは#rrggbb不透明：//ラインの不透明度回転：0、//オフセット方向：1、/1：時計回り、-1：反時計回り速度：1、//ラウンド：100、 ZINDEX：2E9、//デフォルトでハイZ-Indexを使用してクラス名： 'スピナー'、// CSSクラスを使用して要素トップ：'50％ '、//垂直に左：'50％'、//センターセンターシャドウ：//シャドウをレンダリングするかどうか： var target = document.getElementById（ 'foo'）; var Spinner = new Spinner（opts）.spin（ターゲット）; */;（function（root、factory）{if（typeof module == 'object' && module.exports）module.exports = factory（）; // commonjs else if（typeof define == 'function' && define.amd）define（factory）; // amd module root.spinner = factory（ '' browstory（）;プレフィックス= [webkit '、' ms '];オプションで作成されます。 i ++）{AppendChild（I]）。 100）プレフィックス + ' - ' ||。 ' + alpha +'} ' +' + ' +'}、 i; prop.charat（）+prop.slice（1）; css（prop）{var n in style [el、n] = n] === obj [n]}}}}}}} * / function getColor（color、color各ライン幅：5、//ラインの厚さ半径：10、//内側円の半径：1.0、//スピナーコーナーの全体的なサイズ：1、//ラウンドネス（0..1）色： '＃000'、// #RGGBB Opacacity：1/4、// offacity：0、cloms：0、//反時計回りの速度：1、//秒あたりのラウンドトレイル：100、//残降みパーセントFPS：20、// setimeout（）zindex：2e9、//デフォルトのクラス名： 'スピナー'、// cssクラスを使用する場合、settimename： 'spinner'、// css class fore aspent top：'50％ ''50％：'50％：'50％：'50％：'50％：'50％ Shadow hwaccel：false、//ハードウェアアクセラレーション位置：「絶対」//要素の位置決め};マージ（spinner.prototype、{ / ** *スピナーを指定されたターゲット要素に追加します。このインスタンスがすでに *回転している場合、以前のターゲットB呼び出しから自動的に削除されます。 css（position：opsth：zindex、左：o.top}）; self.opts）; ASTEP = F / O.LINES;（function anim（）{i ++; for（var j = 0; j <o.lines; j ++）{alpha = math.max（i+（o.lines -j） * step） setimeout（1000/fps））; el.parentnode.classname.replace（ ''） （O.lines -1） *（1 -direction） / 2;変換： '回転（' + ~~（360/o.lines * i + o.rotate） + 'deg）翻訳（' + o.radius + 'px' + '、0）、borderradius：（o.corners * o.scale * o.width >> 1） +' px '}）; css（createel（）、{position： 'absolute'、top：1 +〜（o.scale * o.width / 2） + 'px'、transform：o.hwaccel？ 'translate3d（0,0,0）'： ''、opacity：o.opacity、animation：usecssanimations &&＆ o.lines） + '' + 1 / o.speed + 's Linear Infinite'}）; if（seg、css（ '＃000'、 '0 0 4px＃000'）、{top： '2px'}） RGBA（0,0、.1））; initvml（）{ / * vml tag * / function vml（tag、attr）{return create（ '<' + tag + 'xmlns = "urn：schemas-microsoft.com：vml">'} // css no css supports for vml 'dddrube（'。 '動作：＃default＃vml）; prototype.lines = function（o.length + o.width） width：s}）; width + o.length） * i + 'deg'、左：~~ dx}）、ins（css（vml（ 'roundrect'、{arcsize：o.corners}）、{width：r、height：o.scale * o.width、左：o.scale * o.radius、top：o.scale * o.width>> GetColor（O.Color、I）、Opacity：O.Opacity}）、VML（ 'Strouke'、{Opacity：0}）//不透明な変化時の色の出血を修正するための透明なストローク））） 'dixmageTransform.microsoft.blur（Makshadow = 1、i = 1; i <= o.lines; i ++）; = shadow && o.lines || createl（ 'text/css}） && pro.adj）initvml（）;spin.js
2つの変更：
（1）初期化するときは、表示される場合は、対応するタグにフェードスタイルを追加します。
（2）毎回フェードスタイルを削除します。
変更が行われた後、テストインターフェイスが利用可能になりました。
<html> <head> <メタ名= "Viewport" content = "width = device-width"/> <title> loading2 </title> <link href = "〜/content/bootstrap/css/bootstrap.css" rel = "styleSheet"/> <link href = " <script src = "〜/content/jquery-1.9.1.js"> </scrip> <scrip = "〜/content/bootstrap/js/bootstrap.js"> </script> <script src = "〜/content/content/spin.js-master/js/spin.js"> </スクリプトタイプ= <"/javascript"> $（ "＃btn_submit"）。on（ "click"、function（）{// opts = {// lines：9、//長さ：1、//花びら幅：10、//半径：15、//中心からの花びら半径//角：方向：1、//花びらの回転方向1：時計回り、-1：反時計回り//色： '＃000'、//花びら色//速度：1、//花びらの回転速度//トレイル：60、//花びらが回転するとき（パーセント）//シャドウ：fals 「スピナー」、//スピナースタイル名// zindex：// spinner's z-axis（20000000）// top： 'auto'、//左： 'auto' //左のポジショニングユニットpx // Spinner（{}）。spin（ターゲット）;センターシャドウ：1/8} document.getElementbyid（foo '）; </script> </head> <body> <div style = "padding：0px"> <div style = "height：450px;"> <div>クエリ条件</div> <div> <form id = "formsearch"> <div> <div> <div> <div> <div> <butth "button" button "button" button "id =" btn_submit "> <span ara-hidine </div> </div> </div> </div> </div> </div> <div id = "foo"> </div> </body> </html> test_spin.cshtml使用の手順：ページがjQueryを使用しない場合は、spin.jsファイルを参照してください。このファイルはjQueryサポートを必要としません。 jqueryを使用する場合は、jquery.spin.jsファイルを参照してください。上記のコードはjQueryを使用していません。コンポーネントは、空のdivを定義し、このdivで初期化する必要があります。得られた結果は次のとおりです。
もちろん、この効果に満足していない場合は、マスク層の透明度とマスク全体のスタイルを設定することもできます。また、初期化中にカスタマイズできる回転にはさまざまなパラメーターがあり、上記のコードには詳細なコメントがあります。
2。クールなスタイル
1。jquery.shcircleloader.jsコンポーネント
言うまでもなく、このコンポーネントは簡単に使用できますが、IE10以下のバージョンではサポートされていません。最初に効果を見てみましょう：
特定のコードの使用に関しては、ブロガーはその奥深くに進むつもりはないため、BaiduまたはGithubで検索できます。
2。fakeloader.jsコンポーネント
より多くのオプション、より良い平坦化効果、携帯電話とタブレットのデバイスでのより良い経験。写真を見てください、そしてあなたは知っているでしょう。オープンソースアドレス。
4。フローチャートプラグイン
しばらく前にワークフローをしなければならなかったので、現在のプロセスがどこに向かっているのかを示す必要がありました。プロセスプラグインYSTEPを見つけました。このコンポーネントの利点は、使用が簡単で軽量であることです。
1。エフェクトディスプレイ
最初に効果を見てみましょう
青い縮小バージョン
2。ソースコードの説明
オープンソースアドレス。
3。コードの例
まず、必要なファイルを参照します
<link href = "〜/content/bootstrap/css/bootstrap.css" rel = "styleSheet"/> <link href = "〜/content/ystep-master/css/ystep.css" rel = "styleSheet"/>> <スクリプトsrc = " src = "〜/content/bootstrap/js/bootstrap.js"> </script>
このコンポーネントには、jqueryとbootstrapの2つのコンポーネントからのサポートが必要です。
次に、空のdivを定義します
<div id = "div_ystep1"> </div>
最後に、ボタンがクリックされたらコンポーネントを初期化します
<script type = "text/javascript"> $（function（）{$（ "＃btn_submit"）。click（function（）{$（ "＃div_ystep1"）。loadal value：small、large size： "like"、// ystep colar // optional valuation：blue coler：blook flue coler： //ステップ名のタイトル：「start」、//ステップコンテンツ（マウスがこのステップのノードに移動すると、プロセススタート」、{タイトル： "承認"、コンテンツ： "すべての役割の開始"}、{タイトル： "exponimant：" end： "end：" end： "end：" end " $（ "＃div_ystep1"）。 </script>動的なステップである場合、ステップ属性を動的に構築する必要がある場合があります。次に、setStep（）を使用して、到達したステップを設定します。
一般的な方法：
//次のステップにスキップ$（ "。ystep1"）。
5。ボタンプロンプトコンポーネントブートストラップの確認
ボタンプロンプトコンポーネントはJSの確認機能に少し似ていますが、この確認はツールチップポップアップ効果であり、ユーザーが決定とキャンセルの判断を提供し、インターフェイスはよりフレンドリーです。このコンポーネントを導入する前に、まずブートストラップのプロンプトボックスの効果を確認できます。
Bootstrap-Confirmationコンポーネントは、このプロンプトボックスの効果に基づいて実装されています。 GitHubには多くのブートストラップ確認コンポーネントがありますが、基本的には同じです。 。
1。エフェクトディスプレイ
最もオリジナルの効果
カスタムタイトル、ボタンテキスト
2。ソースコードの説明
オープンソースアドレス
3。コードの例
（1）引用ファイル：
<link href = "〜/content/bootstrap/css/bootstrap.css" rel = "styleSheet"/> <script src = "〜/content/content/jquery-1.9.1.js"> </scrip> <Src = "〜/content/bootstrap/js/boottrap.js"> </script>
スタイルには、bootstrap.cssのサポートが必要です。 JavaScriptには、jQueryとbootstrap.jsのサポートが必要です。
（2）対応するクリックタグ（任意のタグにすることができます）
<button type = "button" id = "btn_submit1"> <span aria-hidden = "true"> </span> delete </button>
（3）JS初期化
<script type = "text/javascript"> $（function（）{$（ '＃btn_submit1'）。 oncancel：function（）{// alert（ "Clicked Cancel"）}）; </script>（4）その他の属性、イベント、方法
上記の初期化されたプロパティに加えて、一般的に使用されるプロパティがいくつかあります。例えば：
Btnokclass：ボタンのスタイルを決定します。 btncancelclass：ボタンのスタイルをキャンセルします。 Singleton：1つの決定ボックスのみが許可されているかどうか。ポップアウト：ユーザーが別の場所をクリックしたときに決定ボックスを非表示にするかどうか。
たとえば、btnokclassをbtnokclassに設定できます。「btn btn-sm btn-primary」、
6.画像分類およびフィルタリングコンポーネントMuxitup
これは、非常にクールな効果とオープンソースアドレスを備えたグループ化およびフィルタリングコンポーネントです。ブロガーはインターネット上でデモを見て、それが本当に効果的だと思った。これ以上苦労することなく、上の写真。
それはどうですか、効果は大丈夫です。このコンポーネントは当面の間プロジェクトでは使用されていませんが、将来それを必要とする可能性があると感じているので、収集しました。実装コードはオンラインでコピーされます。私はそれを深く勉強していません。興味があれば、見てみましょう。 HTML+JSコードは次のように実装されています。
<html> <head> <メタ名= "Viewport" content = "width = device-width"/> <title> mixitup </title> <link href = "〜/content/css/remormize.css" rel = "styleSheet"/> <link href = "〜/content/image/css/css/layout.cs src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/mixitup-master/jquery.easing.min.js"></script> <script src="~/Content/mixitup-master/build/jquery.mixitup.min.js"></script> <script type="text/javascript"> $(function () { var filterList = { init: function () { debugger; // MixItUp plugin $('#portfoliolist').mixitup({ targetSelector: '.portfolio', filterSelector: '.filter', effects: ['fade'], easing: 'snap', // call the hover effect onMixEnd: filterList.hoverEffect() }); }, hoverEffect: function () { // Simple parallelax effect $('#portfoliolist .portfolio').hover( function () { $(this).find('.label').stop().animate({ bottom: 0 }, 200, 'easeOutQuad'); $(this).find('img').stop().animate({ top: -30 }, 500, 'easeOutQuad'); }, function () { $(this).find('.label').stop().animate({ bottom: -40 }, 200, 'easeInQuad'); $(this).find('img').stop().animate({ top: 0 }, 300, 'easeOutQuad'); } ); } }; // Run the show! filterList.init(); }); </script></head><body> <div> <ul id="filters"> <li><span data-filter="app card icon logo web">All categories</span></li> <li><span data-filter="app">Mobile application</span></li> <li><span data-filter="card">Card</span></li> <li><span data-filter="card">Card</span></li> <li><span data-filter="icon">icon</span></li> <li><span data-filter="logo">Logo</span></li> <li><span data-filter="web">Web page</span></li> </ul> <div id="portfoliolilist"> <div data-cat="logo"> <div> <img src="~/Content/image/Logo/5.jpg" /> <div> <div> <a>Bird Document</a> <span>Logo</span> </div> <div></div> </div> </div> <div> <img src="~/Content/image/app/1.jpg" /> <div> <div> <a>Visual Infography</a> <span>APP</span> </div> <div></div> </div> </div> </div> <div data-cat="web"> <div> <img src="~/Content/image/web/4.jpg" /> <div> <a>Sonor's Design</a> <span>Web design</span> </div> <div></div> </div> </div> </div> <div data-cat="card"> <div> <img src="~/Content/image/card/1.jpg" /> <div> <div> <a>Typography Company</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="app"> <div> <img src="~/Content/image/app/3.jpg" /> <div> <a>Weatherette</a> <span>APP</span> </div> <div></div> </div> </div> </div> <div data-cat="card"> <div> <img src="~/Content/image/card/4.jpg" /> <div> <div> <a>BMF</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="card"> <div> <img src="~/Content/image/card/5.jpg" /> <div> <a>Techlion</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/1.jpg" /> <div> <div> <a>KittyPic</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div data-cat="app"> <div> <img src="~/Content/image/app/2.jpg" /> <div> <a>Graph Plotting</a> <span>APP</span> </div> <div></div> </div> </div> </div> <div> <div> <img src="~/Content/image/card/2.jpg" /> <div> <a>QR Quick Response</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/6.jpg" /> <div> <div> <a>Mobi Sock</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div> <a>Village Community Church</a> <span>Logo</span> </div> <div></div> </div> </div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/4.jpg" /> <div> <div> <a>Domino's Pizza</a> <span>Icon</span> </div> <div></div> </div> </div> </div> <div> <img src="~/Content/image/web/3.jpg" /> <div> <a>Backend Admin</a> <span>Web design</span> </div> <div></div> </div> </div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/1.jpg" /> <div> <div> <a>Instagram</a> <span>Icon</span> </div> <div></div> </div> </div> </div> <div> <img src="~/Content/image/web/2.jpg" /> <div> <a>Student Guide</a> <span>Web design</span> </div> <div></div> </div> </div> </div> <div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/2.jpg" /> <div> <div> <a>Scoccer</a> <span>Icon</span> </div> <div></div> </div> </div> </div> <div> <img src="~/Content/image/icon/5.jpg" /> <div> <a>3D Map</a> <span>Icon</span> </div> <div></div> </div> </div> <div> <img src="~/Content/image/web/1.jpg" /> <div> <div> <a>Note</a> <span>Web design</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/3.jpg" /> <div> <a>Native Designers</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div> <div> <img src="~/Content/image/logo/4.jpg" /> <div> <a>Bookworm</a> <span>Logo</span> </div> <div></div> </div> </div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/3.jpg" /> <div> <div> <a>Sandwich</a> <span>Icon</span> </div> <div></div> </div> </div> </div> </div> <div> <img src="~/Content/image/icon/3.jpg" /> <div> <a>Reality</a> <span>Business card</span> </div> <div></div> </div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/2.jpg" /> <div> <div> <a>Specialisterne</a> <span>Logo</span> </div> <div></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div><!-- container --></body></html>muxitup7。概要
以上是博主最近收藏的一些前端组件，在此分享给大家，有实用型，也有炫酷型，不管如何，希望能帮助需要的园友节省寻找组件的时间。还有一些组件没有整理出来，待整理好后放到后面分享。如果你觉得本文对你有帮助，不妨推荐下。再次感谢园友们的支持，不管是物资奖励还是精神支持，都是对博主分享精神的肯定，博主一定继续努力。
The above is the relevant knowledge of the Bootstrap component series welfare chapter (recommended) that the editor introduced to you.それがあなたに役立つことを願っています。 If you have any questions, please leave me a message and the editor will reply you in time. wulin.comのウェブサイトへのご支援ありがとうございます！