Bootstrap 4，CSS -隐藏选项卡菜单上的文本

Bootstrap 4是一个流行的前端开发框架，它通过提供预定义的样式和组件来简化网站和应用程序的设计和开发。它基于HTML、CSS和JavaScript，并具有响应式设计的特性，使得网站在不同设备上的显示效果良好。

CSS - 隐藏选项卡菜单上的文本，可以通过以下步骤实现：

创建一个基本的选项卡菜单结构，可以使用HTML和Bootstrap的nav和nav-tabs类来实现。

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#home">首页</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#profile">个人资料</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#messages">消息</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#settings">设置</a>
  </li>
</ul>

使用自定义CSS样式来隐藏选项卡菜单上的文本。你可以通过为nav-link类添加以下样式来实现隐藏：

.nav-link {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

这段CSS样式将文本缩进并隐藏超出容器的部分，从而隐藏选项卡菜单上的文本。

在需要显示的地方添加文本内容。你可以使用data-content属性来添加选项卡菜单对应的内容，然后使用JavaScript代码来切换显示内容。

<div class="tab-content">
  <div id="home" class="tab-pane fade show active" data-content="这是首页的内容">
    <!-- 首页的内容 -->
  </div>
  <div id="profile" class="tab-pane fade" data-content="这是个人资料的内容">
    <!-- 个人资料的内容 -->
  </div>
  <div id="messages" class="tab-pane fade" data-content="这是消息的内容">
    <!-- 消息的内容 -->
  </div>
  <div id="settings" class="tab-pane fade" data-content="这是设置的内容">
    <!-- 设置的内容 -->
  </div>
</div>

使用JavaScript代码来处理选项卡的切换和内容的显示。可以通过监听nav-link元素的点击事件，然后根据data-content属性的值来切换显示对应的内容。

$(document).ready(function(){
  $(".nav-link").click(function(){
    var content = $(this).attr("href");
    $(".tab-pane").hide();
    $(content).show();
  });
});

这段代码使用jQuery来实现选项卡的切换和内容的显示。

在腾讯云的产品中，可以使用腾讯云提供的云服务器（CVM）来部署和运行基于Bootstrap 4开发的网站或应用程序。你可以通过以下链接了解腾讯云云服务器的相关产品和详细介绍：