开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用Bootstrap 4，为什么没有显示navbar-icon-bar？

Bootstrap 4是一个流行的前端开发框架，它提供了一套丰富的组件和样式，可以帮助开发者快速构建响应式网站。在Bootstrap 4中，navbar-icon-bar已经被移除，因此在使用Bootstrap 4时，你不会看到这个类名。

在Bootstrap 3中，navbar-icon-bar是用于创建响应式导航栏（navbar）的图标按钮的类名。它通常与navbar-toggle一起使用，用于在小屏幕设备上展开和折叠导航栏菜单。然而，随着Bootstrap的版本更新，Bootstrap 4引入了一些新的导航栏组件和样式，navbar-icon-bar被废弃并被其他类名所取代。

在Bootstrap 4中，你可以使用以下类名来创建响应式导航栏的图标按钮：

navbar-toggler：用于创建导航栏的折叠按钮。
navbar-toggler-icon：用于显示导航栏折叠按钮的图标。

以下是使用Bootstrap 4创建响应式导航栏的示例代码：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

在上述代码中，navbar-toggler类用于创建导航栏的折叠按钮，navbar-toggler-icon类用于显示折叠按钮的图标。点击折叠按钮时，导航栏菜单会展开或折叠。

腾讯云提供了云服务器（CVM）和云开发（CloudBase）等产品，可以帮助开发者快速部署和扩展应用程序。你可以通过以下链接了解更多关于腾讯云的产品和服务：

请注意，以上答案仅针对Bootstrap 4中navbar-icon-bar的问题，不涉及其他云计算领域的内容。

相关搜索:Bootstrap 4 carousel幻灯片没有动画 Bootstrap 4抛出错误，没有捕获TypeError？Bootstrap 4显示警报 Bootstrap 4模式没有显示-黑屏没有模式？Bootstrap 4的新手，列没有正常运行？Bootstrap 4视频，未显示iframe标签 Bootstrap4 tempus主人DateTimePicker没有出现 Bootstrap4:使用按钮显示/隐藏Div 为什么4个按钮没有显示？为什么在使用Bootstrap导航栏的小型设备上没有显示按钮？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Jump Start Bootstrap 第3章

在这一章，我们将开始使用Bootstrap的一些非常有用的HTML组件。诸如按钮、标题(headers)、导航菜单和评论系统的组件经常被用在网站上。通过组件，Bootstrap可以简单和快速的帮我们在网站上添加这些功能。

02

Java程序员的日常 —— 响应式导航Demo

这两天想要做响应式的页面，于是本着重复造轮子的想法，模仿Bootstrap官网，精简了一个响应式导航的Demo。效果代码 <!DOCTYPE html> <html> <head>

08

Flask学习笔记-Flask模板集成Bootstrap 顶

Flask模板集成Bootstrap。一般情况下Flask都是搭配Jinja2模板引擎来实现视图展现，不过现在Bootstrap比较流行，内置的样式也比较好看，有利于提高开发效率，本篇文章就是讲解在Flask如何集成Bootstrap框架。

02

nodejs+express+jade给我baby做个小相册

去年年底迎来了my little star。从此人生多了一个最重要的牵挂。生了宝宝全家人都太忙了。最近宝宝稍微大点了，终于有空可以研究下技术了。这是14年第一帖。废话不多了。开始吧 1.安装NTVS

05

bootstrap 导航栏

<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body>

</body> </html>

03

bootstrap 网页实例常用样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 一个简单的网页</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> .fakeimg { height: 200px; background: #aaa; } </style> </head> <body>

我的第一个 Bootstrap 页面

重置浏览器窗口大小查看效果！

03

Bootstrap学习（1.1）A：navbar导航简单理解

因为自己前端不熟悉，特别是Bootstrap，也只是学习阶段自己调试，简单记录一些过程

04

bootstrap 滚动监听

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 滚动监听（Scrollspy）插件</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body>

05

BBS论坛（十七）

17.首页导航条实现和代码抽离（1）temlates/common/_head.html <meta name="csrf-token" content="{{ csrf_token() }}"> <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="st

02

BBS论坛（三）

3.1.cms用户名渲染和注销功能实现显示登录的用户名（1）app/cms/hooks.py from .views import bp import config from flask import session,g from .models import CMSUser @bp.before_request def before_request(): if config.CMS_USER_ID in session: user_id = session.get(confi

03

(原创)python发送邮件

这段时间一直在学习flask框架，看到flask扩展中有一个mail插件，所以今天就给大家演示如果发邮件。首先我注册了一个163邮箱，需要开启smtp功能,因为咱们python发送邮件经

03

Python Flask模块

模块是一个包含响应文本的文件，其中包含占用位变量表示的动态部分，其具体值只在请求的上下文中才知道。使用真实值替换变量，再返回最终得到的响应字符串，这一过程称为渲染。为了渲染模块，Flask使用一个名为Jinja2的强大模板引擎。一、Jinja2模板引擎形式最简单的Jinja2模板就是一个包含响应文本的文件。

Hello,World!

Hello,{{name}}!

1、渲染模板默认情况下，Flask在程序文件夹中的templates子文件夹中寻找模板。在下一个hel

05

Bootstrap响应式前端框架笔记十八——导航滚动监听

Bootstrap框架中提供了十分方便的方法来使用导航关联内容快，并且开发者可以监听滚动进行导航按钮的切换，示例如下：

01

Angularjs中UI Router超级详细的教程{{上}}

这篇文章主要介绍了Angularjs中UI Router全攻略，涉及到angularjs ui router的基本用法，需要的朋友参考下吧首先给大家介绍angular-ui-router的基本用法。如何引用依赖angular-ui-router angular.module('app',["ui.router"]) .config(function($stateProvider){ $stateProvider.state(stateName, stateCofig); }) $stateProvid

05

ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件

Bootstrap为我们提供了十几种的可复用组件，包括字体图标、下拉菜单、导航、警告框、弹出框、输入框组等。在你的Web Application中使用这些组件，将为用户提供一致和简单易用的用户体验。 Bootstrap组件本质上是结合了各种现有Bootstrap元素以及添加了一些独特Class来实现。Bootstrap元素我在上一篇文章中涉及到，具体可以参考《ASP.NET MVC使用Bootstrap系列（2）——使用Bootstrap CSS和HTML元素》。在这篇博客中，我将继续探索Bootstr

bootstrap入门-做一个简单的页面

接触bootstrap时间也不算短了，也用这个库做了几个内部系统了，使用的感觉真是很爽。

02

Django+Bootstrap+Mysql 搭建个人博客（一）

1.1.环境搭建（1）虚拟环境 mkvirtualenv website pip install django==1.11.7 （2）创建项目和app：website和blog （3）设置中文se

00

WEB前端响应式布局之BootStarp使用

1. 概念：一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 2. 响应式布局。 * 同一套页面可以兼容不同分辨率的设备。

01

bootstrap教程，SQL

DDL数据定义语言 TPL事务处理语言 DCL数据控制语言 DML数据操作语言

04

ASP.NET 5系列教程 (二)：Hello World

本篇文章内容比较基础，主要是向大家展示如何创建一个 ASP.NET 5 工程，主要包含内容如下：创建ASP.NET 5 工程添加 Todo 控制器安装 K Version Manager 执行

06

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭