bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法

Bootstrap是一个流行的前端框架，提供了大量的组件和样式，以便快速搭建专业的网页。其中面包屑(breadcrumb)是一种常用的导航方式，能够告诉用户当前所处的页面位置。本篇攻略将详细讲解如何在Bootstrap中动态添加面包屑以及如何响应面包屑的事件。

添加面包屑

首先，我们需要在HTML文件中添加包含面包屑的元素，如下所示：

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">首页</a></li>
    <li class="breadcrumb-item active" aria-current="page">文档</li>
  </ol>
</nav>

其中，aria-label属性是用来告诉屏幕阅读器这个元素的作用，而breadcrumb类是用来定义面包屑，其中每个面包屑项需要添加breadcrumb-item类。

如果我们需要在JavaScript中动态地添加面包屑项，可以使用如下代码：

var breadcrumb = document.querySelector('.breadcrumb');
var newLi = document.createElement('li');
newLi.classList.add('breadcrumb-item');
newLi.innerHTML = '<a href="#">动态添加</a>';
breadcrumb.appendChild(newLi);

上述代码首先获取了面包屑元素所在的ol节点，然后使用createElement方法创建了一个新的li节点，并为其添加了breadcrumb-item类和内部HTML内容。最后，使用appendChild方法将该节点添加到了面包屑中。

响应面包屑事件

当用户点击面包屑中的某个项时，我们可能需要做出响应。可以使用jQuery的click方法来实现：

$('.breadcrumb-item a').click(function() {
  alert($(this).text() + '被点击了');
});

上述代码首先使用了jQuery选择器选中了类名为breadcrumb-item的元素下的a标签，然后为其绑定了一个click事件，当点击时会弹出一个提示框，告诉用户该项被点击了，并显示其文本内容。

另外，我们也可以使用原生的JavaScript来为面包屑项添加点击事件，如下所示：

var breadcrumb = document.querySelector('.breadcrumb');
breadcrumb.addEventListener('click', function(event) {
  if(event.target.tagName === 'A') {
    alert(event.target.innerText + '被点击了');
  }
});

以上代码使用querySelector方法选中了类名为breadcrumb的元素，然后使用addEventListener方法为其绑定了一个click事件。在回调函数中，首先判断了被点击的元素是否为a标签，如果是，则弹出一个提示框，告诉用户该项被点击了，并显示其文本内容。

总之，通过以上的方法，我们可以动态地添加面包屑项，并且给面包屑项添加点击事件，从而对用户的操作做出响应。