ブートストラップ、VUEの研究ノート

免責事項：この記事はブロガーオリジナル記事です、続くBY-SAのCC 4.0を著作権契約、複製、元のソースのリンクと、この文を添付してください。

このリンク： https://blog.csdn.net/wh_xia_jun/article/details/84145867

ファイナンス・プロジェクトは、我々の要求を満たすために問題の計算書類、VUE、連携データモデルがあり、

RECATよりよいが、例えば、反応し、動的に生成されたフロントエンドの要件このような類似Excelのテーブル、と反応し、そしておそらくより良いが、私はこのアプローチを実践していなかったかもしれないと、必要なクラスを生成するために、私は複雑な思い、植物のフロントエンドを使用していません。

考えブートストラップ-VUE、要素、UI

私は、それを記録するために、関連する要素-UI、ここでは、ブートストラップ、ブートストラップ-VUEの問題を選びました

.nav-タブのクラスを使用してブートストラップナビゲーションタブに変換することができます

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

タブナビゲーション三つの要素：

ULクラスは、= "NAV NAV-タブ"
各タグの<A>プラスデータトグル=「タブ」
.TABペインは、各オプションに対応するコンテンツに基づいて添加しました。

ダイナミックタブ

また、我々は、同僚の書き込みを上演しました：

2フォームは、同じ要素を意味し、

単位終わり、金融エンドは2フォーム、クリックされた、スイッチボードフォーム、少しの代替表現です。

それが正式な書面による教科書を書くために再び何の効果、プレスを持っていない場合は、時々、クリックのコードをチェックし、少し変更していない、私は、有効かどうかわかりません。

        //document.getElementById('myform').style.display = 'inherit';
        document.getElementById('myform').style.display = 'block';

タブを使用してブートストラップVUE、B-NAV

        <b-nav tabs>
            <b-nav-item active>Active</b-nav-item>
            <b-nav-item>Link</b-nav-item>
            <b-nav-item>Another Link</b-nav-item>
            <b-nav-item disabled>Disabled</b-nav-item>
        </b-nav>

.collapseクラスのbootsrapは折りたたみ要素を指定します（インスタンスの<div>）;

<button data-toggle="collapse" data-target="#demo">折叠</button>
 
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

すべての要素が折りたたまれた隠しオプションが追加のオプションを表示するときに達成することができ、指定された親要素、で折り畳まれていることを確認するために、データ・親プロパティを使用します。

未完、継続的な......

ブートストラップ、VUEの研究ノート

おすすめ