BootStrap实现响应式布局导航栏自动折叠隐藏效果

Bootstrap的响应式布局导航栏自动折叠隐藏效果可以通过以下步骤来实现：

1. 在HTML文件中添加导航栏代码，使用Bootstrap提供的样式类实现基本的导航栏布局。

2. 使用Bootstrap提供的“navbar-toggle”样式类，创建一个按钮，用于在小屏幕设备下展开或者收起导航栏。

3. 使用Bootstrap提供的“collapse”样式类，来实现导航栏内容的自动折叠隐藏。在按钮上添加“data-target”属性和“#navbar-collapse”值，来指定需要折叠的导航栏内容。

4. 使用Bootstrap提供的JavaScript库，实现导航栏按钮的点击事件，使得点击按钮后可以展开或者收起导航栏内容。

下面是一个实现响应式布局导航栏自动折叠隐藏效果的示例代码：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

在上述示例代码中，“navbar-toggle”样式类创建了一个按钮，用于在小屏幕设备下展开或者收起导航栏。使用“collapse”样式类实现导航栏内容的自动折叠隐藏，并在按钮上添加“data-target”属性和“#navbar-collapse”值，来指定需要折叠的导航栏内容。

需要注意的是，为了使JavaScript库正常工作，需要在页面中引入Bootstrap提供的jQuery库和Bootstrap的JavaScript插件库。在HTML文件的底部添加以下代码，即可引入这两个库：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

通过上述步骤，即可实现Bootstrap的响应式布局导航栏自动折叠隐藏效果。