bootstrap, vue study notes

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/wh_xia_jun/article/details/84145867

Finance projects, there are documents computing problems, vue, the linkage data model to meet our requirements,

recat not used, I guess complicate, the front end of the plant to generate required class, perhaps with better react, for example, dynamically generated front-end requirements such similar excel table, react with, and perhaps better, but I did not practice this approach .

Considered bootstrap-vue, element-ui

I chose the element-ui, here bootstrap, bootstrap-vue issues related to record it,

bootstrap using .nav-tabs class can be converted into a navigation tab

<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>

 tab navigation three elements:

1. ul class="nav nav-tabs"
2. Each tag <a> plus data-toggle = "tab"
3. .Tab-pane was then added based on the content corresponding to each option.

Dynamic tab

In addition we staged a colleague writing:

2 form, means the same elements,

Units end, the financial end is 2 form, when clicked, switchboard form, little alternative wording.

However, sometimes not click, check the code, slightly modified, I do not know whether valid, if it has no effect, press again to write a formal written textbooks.

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

  the bootstrap-vue, b-nav using tabs

        <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>

 bootsrap in .collapse class specifies a folding element (instance <div>);

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

Using the data-parent property to ensure that all elements of folded at the specified parent element, which can be achieved when a folded hidden option to display additional options.

 

Unfinished, continued ......