bootstrap、vue学习笔记

原创已于 2023-02-20 19:15:40 修改 · 374 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

于 2019-06-18 16:09:42 首次发布

UI 专栏收录该内容

10 篇文章

订阅专栏

博客围绕财政类项目单据计算问题，探讨前端框架选择。提到在Vue中数据模型联动可满足需求，猜测复杂前端用React更好。最终选择element - ui，还记录了Bootstrap和Bootstrap - Vue的使用，如导航转选项卡、动态选项卡及折叠元素的实现等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

财政类项目，有单据计算问题，vue中，数据模型联动满足了我们的要求，

recat没有用过，我猜测复杂化、需要类工厂生成的前端，也许用react更好，比如，动态生成类似excel表格这样的前端需求，用react，也许更好，只是我没有实践过这种做法。

考虑过bootstrap-vue、element-ui

最终选择了element-ui，这里bootstrap、bootstrap-vue有关问题记录一下，

bootstrap中，使用 .nav-tabs 类可以将导航转化为选项卡

<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导航三要素：

ul class="nav nav-tabs"
每个<a>标签加上data-toggle="tab"
然后在每个选项对应的内容的上添加 .tab-pane类。

动态选项卡

我们同事另外搞了个写法：

2个form,装一样的元素，

单位端、财政端是2个form,点击的时候，切换表单，有点另类的写法。

不过，有时候点击不了，检查代码，略作修改，不晓得有效否，如果还没有效果，则按正规课本写法重新写一道。

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

bootstrap-vue中，b-nav使用 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中 .collapse 类用于指定一个折叠元素 (实例中的 <div>);

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

使用 data-parent 属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示时其他选项就隐藏。

未完，待续......