如何在vuejs中使用bootstrap

Posted 2023-05-17

下面我在这里简单的介绍下Bootstrap框架。
　　Bootstrap框架属于UI框架，这个和jQuery不太一样，其实准确的描述Bootstrap框架属于css框架而非javascript框架，但是它本身也使用javascript来完善Bootstrap框架的视觉效果。此外，Bootstrap框架十分超前，在支持html5和css3的浏览器上表现特别好，而且对移动终端的浏览器支持也是相当优秀。
　　一个完整的Bootstrap框架包含如下四个部分：
脚手架（不知道官网为啥这么翻译）：用于重置背景、链接样式、栅格系统等，并包含两个简单的布局结构。Bootstrap的样式使用了lesscss技术，比如重置背景这样的操作，这些比较简单我就不展开叙述了，脚手架里最出彩的是栅格系统和布局。栅格系统是将页面宽度分成12列，栅格系统分为两种类型，一种是默认栅格系统，这时候栅格系统是按940px像素进行等分，我们可以使用span1，span4这样的class属性操作默认栅格布局，另一种是流式栅格系统，这个时候分列的宽度就不是固定，而是根据你可视页面进行12等分，同样可以使用span1，span4操作流式栅格。这个系统非常之好，做css最难的就是div布局，使用栅格系统可以大大简化div的布局操作。另外一个就是做布局操作了，布局也分为固定和流式，让不太精通css布局也能轻松操作布局。
基本的css样式。Bootstrap给出了一样常用的HTML元素的样式，例如：按钮、表单和文字等等。大部分做网站的人都不是美工出身，做出赏心悦目的网页是件很困难的事情，css提供的样式很专业很精美，能让我们轻松开发出一套精美的网站
Css组件：Bootstrap还提供一些常用的css组件，同样很优秀很棒。
Javascript插件：Bootstrap是个开放的系统，我们可以随意扩展Bootstrap，特别是javascript的框架，这样Bootstrap就会更加专业。
　　Bootstrap是个操作性质的框架，没必要做深入分析，最关键是有没有好的使用实例，我下载Bootstrap发现，下载包里的example不是太强大，例子都在它的官网上，很多对css和javascript不是特别熟悉的人使用起来都不太习惯，因此我将这些例子进行了整合，作为单独的例子工程，这个工程非常全面，我在网上找过，目前还没有比我整理的更详尽的例子，大伙下载下来按照我的工程目录结构就可以进行开发了。 参考技术A 下面我在这里简单的介绍下Bootstrap框架。
Bootstrap框架属于UI框架，这个和jQuery不太一样，其实准确的描述Bootstrap框架属于css框架而非javascript框架，但是它本身也使用javascript来完善Bootstrap框架的视觉效果。此外，Bootstrap框架十分超前，在支持html5和css3的浏览器上表现特别好，而且对移动终端的浏览器支持也是相当优秀。
一个完整的Bootstrap框架包含如下四个部分：
脚手架（不知道官网为啥这么翻译）：用于重置背景、链接样式、栅格系统等，并包含两个简单的布局结构。Bootstrap的样式使用了lesscss技术，比如重置背景这样的操作，这些比较简单我就不展开叙述了，脚手架里最出彩的是栅格系统和布局。栅格系统是将页面宽度分成12列，栅格系统分为两种类型，一种是默认栅格系统，这时候栅格系统是按940px像素进行等分，我们可以使用span1，span4这样的class属性操作默认栅格布局，另一种是流式栅格系统，这个时候分列的宽度就不是固定，而是根据你可视页面进行12等分，同样可以使用span1，span4操作流式栅格。这个系统非常之好，做css最难的就是div布局，使用栅格系统可以大大简化div的布局操作。另外一个就是做布局操作了，布局也分为固定和流式，让不太精通css布局也能轻松操作布局。
基本的css样式。Bootstrap给出了一样常用的HTML元素的样式，例如：按钮、表单和文字等等。大部分做网站的人都不是美工出身，做出赏心悦目的网页是件很困难的事情，css提供的样式很专业很精美，能让我们轻松开发出一套精美的网站
Css组件：Bootstrap还提供一些常用的css组件，同样很优秀很棒。
Javascript插件：Bootstrap是个开放的系统，我们可以随意扩展Bootstrap，特别是javascript的框架，这样Bootstrap就会更加专业。
Bootstrap是个操作性质的框架，没必要做深入分析，最关键是有没有好的使用实例，我下载Bootstrap发现，下载包里的example不是太强大，例子都在它的官网上，很多对css和javascript不是特别熟悉的人使用起来都不太习惯，因此我将这些例子进行了整合，作为单独的例子工程，这个工程非常全面，我在网上找过，目前还没有比我整理的更详尽的例子，大伙下载下来按照我的工程目录结构就可以进行开发了。本回答被提问者采纳

Bootstrap 4：如何通过 jquery 或 vuejs 单击列表组项目时使其处于活动状态？

【中文标题】Bootstrap 4：如何通过 jquery 或 vuejs 单击列表组项目时使其处于活动状态？

【英文标题】：Bootstrap 4 : How to make the item of list-group active when clicking it via jquery or vuejs?

【发布时间】：2016-09-21 22:53:41

【问题描述】：

Bootstrap 4 : 如何在通过 jquery 或 vuejs 点击时使列表组的项目处于活动状态？

这是组件：

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

http://v4-alpha.getbootstrap.com/components/list-group/#linked-items

第一个项目是活动的，但点击另一个不会使其活动，如何通过jquery或vuejs做到这一点？提前致谢！

【参考方案1】：

例如：

$('.list-group-item').click(function(e) 
    e.preventDefault();
    $(this).addClass('active').siblings().removeClass('active');
);

JSFiddle：https://jsfiddle.net/mg0xa1ku/

【参考方案2】：

给你的 list-group div 一个 id 并使用$('#name .list-group-item active') 选择它们的活动列表组项。

【讨论】：

哦，不。这是一种“jquery”的做事方式。您不需要使用 VueJS 等动态数据绑定库来执行此操作。在 jquery 世界中，您倾向于（或有时必须）查看 DOM 以存储数据、读取状态（如活动）。最好换个思路，将数据绑定到 DOM，这样当数据发生变化时，DOM 会自动更新。你在 VueJS 中需要的一切都在那里，阅读手册的问题，但你正在寻找的部分在这里：vuejs.org/guide/class-and-style.html

【参考方案3】：

$('.list-group > a').click(function(e)
  // find/remove all active classes from each a
  $('.list-group > a').removeClass('active');

  // add active selected a
  $(this).addClass('active');
);

菜单的特定类

我会添加“mainNav”类，这样我就可以定位它。以防万一我在同一页面上有两个“列表组”

<div class="list-group mainNav">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>


$('.mainNav > a').click(function(e)
  // find/remove all active classes from each a
  $('.mainNav > a').removeClass('active');

  // add active selected a
  $(this).addClass('active');
);

【参考方案4】：

<script>
// es6 js
new Vue(
  el: '#listGroup',
  data 
    selected: 0
  , 
  methods: 
    isSelected (i) 
      return i === this.selected
    
  
)
</script>

<div class="list-group" id='listGroup'>
  <a href="#" class="list-group-item" v-bind:class=" 'active' : isSelected(0) " v-on:click="selected = 0">Cras justo odio</a>
  <a href="#" class="list-group-item" v-bind:class=" 'active' : isSelected(1) "  v-on:click="selected = 1">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item" v-bind:class=" 'active' : isSelected(2) "  v-on:click="selected = 2">Morbi leo risus</a>
  <a href="#" class="list-group-item" v-bind:class=" 'active' : isSelected(3) "  v-on:click="selected = 3">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item" v-bind:class=" 'active' : isSelected(4) "  v-on:click="selected = 4">Vestibulum at eros</a>
</div>

这定义了 selected 的属性。单击列表项时，v-on 挂钩将 selected 的值更改为 v-on 属性表达式中的整数 id。随着 vue 中 this.selected 的值发生变化，类也会发生变化，因为它们绑定了方法 isSelected() 的输出，该方法在选定值发生变化时被调用。

http://codepen.io/tremendusapps/pen/bebGGj