开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Bootstrap 4:如何在没有jQuery /最小bootstrap.js的情况下使用NavBars？

在没有jQuery或最小化bootstrap.js的情况下，可以使用Bootstrap 4的NavBars。NavBars是Bootstrap中常用的导航栏组件，用于创建响应式的导航菜单。

要在没有jQuery或最小化bootstrap.js的情况下使用NavBars，可以按照以下步骤进行操作：

引入Bootstrap 4的CSS文件：在HTML文件的头部，使用link标签引入Bootstrap 4的CSS文件。例如：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

创建导航栏结构：在HTML文件的合适位置，创建导航栏的结构。例如：

<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>

自定义样式：根据需要，可以使用Bootstrap提供的CSS类来自定义导航栏的样式。例如，可以添加fixed-top类使导航栏固定在页面顶部。

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <!-- 导航栏内容 -->
</nav>

添加交互效果（可选）：如果需要添加导航栏的交互效果，可以使用自定义的JavaScript代码来实现。例如，可以使用JavaScript代码来处理导航栏的折叠和展开。

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var navbarToggler = document.querySelector(".navbar-toggler");
    var navbarCollapse = document.querySelector(".navbar-collapse");

    navbarToggler.addEventListener("click", function() {
      navbarCollapse.classList.toggle("show");
    });
  });
</script>

这样，就可以在没有jQuery或最小化bootstrap.js的情况下使用Bootstrap 4的NavBars了。

推荐的腾讯云相关产品：腾讯云服务器（CVM）、腾讯云对象存储（COS）、腾讯云内容分发网络（CDN）等。你可以通过访问腾讯云官网（https://cloud.tencent.com/）了解更多关于这些产品的详细信息和使用方式。

相关搜索:如何在没有bootstrap-vue的情况下在vue.js 2中使用bootstrap 4？如何使用bootstrap 5在没有jQuery的情况下编写JavaScript代码？如何在没有动画的情况下使用jquery变换？我们如何在没有bootstrap样式的情况下对angularjs使用分页如何在没有标志的情况下使用ngx-bootstrap angular进行折叠如何在.NET中没有jQuery的情况下让Bootstrap模式停留在屏幕上？如何在没有jQuery或Bootstrap的情况下对切换的导航栏进行动画处理？如何在没有CSS而只使用JavaScript或jQuery/jQuery/jQuery的情况下改变设备方向？如何在没有表单的情况下使用jquery验证文本框字段？如何在没有xml的情况下使用FF4J获取java中的特性如何在没有npm服务器的情况下运行Angular 4项目，并在本地使用tomcat 当没有从我的表中选择记录时，我如何在按钮上放置一个模式。我正在使用bootstrap 4

相关搜索:

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

有帮助

没帮助

相关·内容

--save-dev和--save的区别

网上对于这两个的区别解释都是统一口径的，一个是开发依赖，一个是线上依赖，打包发布需要用到的要添加到线上依赖，一模一样的回答，误导了很多人。今天自己测试一下这两个命令，记录一下。

01

友好的Bootstrap，让你越码越“上瘾”

你是否使用过智能手机浏览真正的网页? 你是否因为自己作为后端程序员而不能开发出较漂亮的页面? 你是否开发过能够同时适应不同分辨率的屏幕的页面? 如果你出现过上述问题并想解决这些问题，那么友好的Boo

02

第120天：移动端-Bootstrap基本使用方法

``` 　　├─ /weijinsuo/ ··················· 项目所在目录　　└─┬─ /css/ ······················· 我们自己的CSS文件　　├─ /font/ ······················ 使用到的字体文件　　├─ /img/ ······················· 使用到的图片文件　　├─ /js/ ························ 自己写的JS脚步　　├─ /lib/ ······················· 从第三方下载回来的库【只用不改】　　├─ /favicon.ico ················ 站点图标　　└─ /index.html ················· 入口文件

04

bootstrap笔记（一）——布局容器和排版样式

一般习惯于把引用的jquery.js 和 boostrap.js <body></body>标签中，bootstrap.css放在<style></style>标签中。

02

Bootstrap学习文档（四）

注意： 1、弹出层必需放在body里 2、弹出层里面不能再嵌套别的层 3、弹出层出来以后，页面的滚动条会被覆盖

02

bootstrap笔记（二）——列表样式和表格样式

table-striped配合 “:nth-child”选择器使用，来改变默认的颜色效果，也称之为隔行变色或斑马线，起到两种不同颜色变化的效果，条纹状态的表格

02

grunt[mismatched:define]

最近，在做项目优化，想将用到的jquery.js、bootstrap.js、angular.js、angular-ui-router.js、validator.js以及require.js做all in one（统一合并为一个文件），已减少http的请求数量。然而，在合并的过程中，报错：

03

Bootstrap3和4模板

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/161537.html原文链接：https://javaforall.cn

01

python web开发 Bootstrap框架基础

popper.js cdn：https://unpkg.com/@popperjs/core@2 jquery.js https://code.jquery.com/jquery-3.6.0.js

03

Webpack5 跨应用代码共享 - Module Federation

Webpack 5 的消息尽管已经出来了许久，但是正式版一直还未发布。Webpack 5 的 ChangeLog 中，除了常规的性能优化、编译提速之外，有一个比较让人期待的功能就是 Module Federation。Module Federation 可以强行翻译成「模块联邦」，但是听起来很是怪异，我在某个前端群也抛出了这个问题，没想到大家的回复也是五花八门。所以，本文就直接用 Module Federation 了，不进行翻译听起来好像更舒服一点。

02

bootstrap笔记（六）——列偏移与嵌套列

嵌套列为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

04

bootstrap笔记（八）——表单样式和下拉菜单

<!DOCTYPE html> <html lang="en"> <

03

【应用】信息短时存储

这是一个在线的应用，用来短时间存储一些信息，以实现在不同设备上共享这些信息的功能。其实目的就是可以将手机上的一些信息快速的复制到电脑上，尤其是在使用Linux系统的时候。下面是该应用的截图。其中阅后即焚是指信息被访问一次之后就会被销毁。

03

Web前端基础（09）

1.下载框架文件（也可从Bootstrap官网下载） Bootstrap V3.3.7 Starter ZIP 下载并解压出template和bootstrap3两个文件夹放到工程中 2.复制template文件夹中的starter.html 粘贴到需要创建页面的地方,改名字即可

02

在 Laravel 项目中使用 Bootstrap 框架

如官方文档所言，Laravel 并不强制你使用 CSS 框架，但是开箱提供了对 Bootstrap 的支持，在 resources/js/bootstrap.js（在 Laravel 5.7 之前的版本位于 resources/assets/js/bootstrap.js）中，我们可以看到对 bootstrap js库的引入：

03

WordPress 函数：wp_enqueue_script() 安全引入 JS

WordPress 主题最佳引用 js 文件的方法是使用 WordPress 内置的 wp_enqueue_script() 函数，通过该函数可以安全地将javascript 代码加入到 WordPress 创建的页面中，不仅可以最大限度地保证兼容性，还是提高 WordPress 性能效率的一个方法。

02

bootstrap笔记（七）——表单样式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap/css/boots

01

Bootstrap组件福利篇：几款好用的组件推荐，你值得拥有！

bootstrap风格的时间组件非常多，你可以在github上面随便搜索“datepicker”关键字，可以找到很多的时间组件。博主原来也用过其中的两个，发现都会有一些大大小小的问题。经过一番筛选，找到一个效果不错、能适用各种场景的时间组件，下面就来一睹它的风采吧。

01

ASP.NET MVC使用Bootstrap系列（1）——开始使用Bootstrap

作为一名Web开发者而言，如果不借助任何前端框架，从零开始使用HTML和CSS来构建友好的页面是非常困难的。特别是对于Windows Form的开发者而言，更是难上加难。正是由于这样的原因，Bootstrap诞生了。Twitter Bootstrap为开发者提供了丰富的CSS样式、组件、插件、响应式布局等。同时微软已经完全集成在ASP.NET MVC 模板中。 Bootstrap结构介绍你可以通过http://getbootstrap.com.来下载最新版本的Bootstrap。解压文件夹后，可以

bootstrap笔记（三）——按钮样式

上面的btn-bg修改为btn-lg <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href

01

python测试开发django-154.bootstrap-formvalidation

表单输入框对输入内容校验，这是一个很基本的功能，像这种非常普遍的功能，当然是先找下有没有现成的插件可以使用。这里介绍一款很好用的表单验证插件，formvalidation，实际上也是bootstrap的一个插件，之前叫bootstrapValidator，现在独立出来了。官网：http://formvalidation.io/

04

BootStarp模版

BootStarp基本模版 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi

01

.net core版文件上传/ 支持批量上传，拖拽以及预览，bootstrap fileinput上传文件

asp.net mvc请移步 mvc文件上传支持批量上传，拖拽以及预览，文件内容校验

04

BootstrapTable固定头和底部

采用的bootstrapTable样式与js的版本是1.15.4，采用比较低的版本会在有滚动条的情况下，表格不对齐

02

ASP.NET Core 2.1以上 Bootstrap 4前端模板文件，开发环境与发布环境前端模板 environment的使用

笔者增加Bootstrap 4 和 FontAwersome(字体图标)，因为Bootsrap 4已经不再包含图标了。

03

laravel5.1框架基础之Blade模板继承简单使用方法分析

本文实例讲述了laravel5.1框架基础之Blade模板继承简单使用方法。分享给大家供大家参考，具体如下：

02

Bootstrap 响应式框架第二集

<meta name="viewport" content="width=device=width,initial-scale=1,user-scalable=0">

03

BootStrap

iconfont的使用：https://www.cnblogs.com/changxin7/p/11479216.html

03

AngularJS DEMO – 不断更新中

<!DOCTYPE html> <html> <head> <title>Angular DEMO 1</title> <script type="text/javascript" src="/bower_components/angularjs/angular.js"></script> </head> <body ng-app ng-init="name='World'" >

Hello,{{name}}!

</body> </html> <!DOCTYPE html> <ht

02

bootstrap笔记（五）——栅格参数

col-md-数字： xs：手机设备大小 sm:平板设备大小 md:笔记本设备大小 lg:台式电脑设备大小数字：代表着在一行12列中所占的单元格数。

04

前端之bootstrap模态框

简介：模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 Modal简介 Modal实现弹出表单 Modal实现删除提示框其他用法 Bootstrap 模态框（Modal）插件模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。如果您想要单独引用该插件的功能，那么您需要引用 modal.js。或者，正如

05

三种方式实现网页二级菜单

首先是Html代码，习惯上会将菜单放在一个div里，使用盒子模型，方便以后的操作和设置样式。

02

tablecloth 使用笔记

tablecloth.js是一个能够只用寥寥几行代码即可快速美化你页面上HTML代码的jQuery插件。 tablecloth.js自身携带了多种表格风格，同时支持表格的排序功能，使用也极其简单。如何使用在你的HTML导入jQuery、Bootstrap以及tablecloth.js随包发行的其他几个js文件（如果你想要tablecloth.js的全部功能的话）。 <link href="assets/css/bootstrap.css" rel="stylesheet"> <l

06

探寻ASP.NET MVC鲜为人知的奥秘（1）：对LESS的支持

在ASP.NET MVC3中（从那时开始），我们拥有了对js和css等文件的捆绑（Bundling）和压缩（Minification）的能力，这是ASP.NET性能优化工作的一部分。想一下很久以前，我们在mvc2的时代，我们使用这样的方式引入js和css文件： <script type="text/javascript" src="@Url.Content("~/Script/Script.js")"></script> Why 刚开始没有什么问题，而随着我们项目的越来越大，需要引入的资源文件越来越多的时

06

Python Django个人网站搭建4-配置使用 Bootstrap 4 并改写模板文件

作者： zifanwang 发布于2020-05-08

03

vue脚手架基础demo1

【table-striped】【table-bordered】【table-hover】【table-condensed】

02

bootstrap typeahead 输入填充常用

<!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.js"></script> <script src="js/bootstrap3-typeahead.min.js"></script> </head> <body>

<input type="text" id="txtUser" name="txtUser" value="" />

02

可视化-bokeh-02-Django中部署

系统：Windows 7 语言版本：Anaconda3-4.3.0.1-Windows-x86_64 编辑器：pycharm-community-2016.3.2 bokeh：0.12.7

01

Bootstrap 4/3 页面基础模板与兼容旧版本浏览器

Bootstrap 3 与 4 差别很大，目录文件结构、所引入的内容也不同，这里说说一下 Bootstrap 引入的文件、网页模板和兼容性问题。本网站刚刚搭建好，正好发一下文章原来测试网站。

03

AngularJS7那些不得不说的事故

最近简直要忙死，所以停更了很久，你们会不会以为我人间蒸发了？正文之前，请允许我先跑个题，就是关于忙的问题。做了Freelance，每天过的比上班还累，这完全不是我想要的生活啊？所以痛定思痛，需要检讨一下自己：

01

各种常用的CDN加速服务

使用CDN链接可以大大减小自己项目包的大小，把大部分的公共代码资源已经放在了云服务器上，只需要链接请求就可以。比如要引用jquery，可以自己下载jQuery.js文件导入，也可以直接导入一个链接，请求jQuery源代码。

02

python测试开发django-113.使用Bootstrap框架

前端页面开发用到bootstrap框架，有2种实现方式： 1.直接在html头部导入css和js文件 2.下载bootstarp课件源码到项目本地放到static目录

01

bootstrap typeahead 异步从后台提取数据常用 *

<!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.js"></script> <script src="js/bootstrap3-typeahead.min.js"></script> </head> <body>

<input type="text" id="txtUser" name="txtUser" value="" />

01

Bootstrap Table 插件实现固定左侧列

bootstrap-table-fixed-columns.css与bootstrap-table-fixed-columns.js

02

Bootstrap 模态框（Modal）插件的基本应用

通常用来显示一个单独的源内容或者是对一些模块进行进一步详细的介绍，可以在不离开父窗体的情况下进行一些互动和内容的交互。

00

bootstrap笔记（四）——图片样式与栅格系统基本格式

图片随着浏览器大小的改变而改变

03

python测试开发django-188.Bootstrap折叠（Collapse）插件

前言折叠（Collapse）插件可以很容易地让页面区域折叠起来。如果您想要单独引用该插件的功能，那么您需要引用 collapse.js， bootstrap已经包含了这个插件。可以直接引用 bootstrap.js 或压缩版的 bootstrap.min.js 折叠（Collapse）以使用带有属性的链接href或带有属性的按钮data-target。在这两种情况下，data-toggle=”collapse”都是必需的。单击下面的按钮以通过类更改显示和隐藏另一个元素： .collapse隐藏内容

05

Laravel整合BootStrap等前端框架

Laravel提供了对Bootstrap的支持，在Laravel 5.5之后的版本，预设了Bootstrap 4，我们无需再单独引入Bootstrap资源文件，便可在Laravel中引入Bootstrap。

02

mvc文件上传支持批量上传，拖拽以及预览，文件内容校验

网站中的上传相信大家都不陌生，也算是一个小小的技术难点，尤其时在asp.net中，上传的一些大小限制以及上传的进度的控制，以及用户体验等方面，今天在这里分享一个在asp.net mvc模式下的文件上传，同样适用于其它web类型bootstrap-fileinput ，

02

Bootstrap里的文件分别代表什么意思及其引用方法

*bootstrap.css 是完整的bootstrap样式表，未经压缩过的，可供开发的时候进行调试用 *bootstrap.min.css 是经过压缩后的bootstrap样式表，内容和bootstrap.css完全一样，但是把中间不必要的空格之类的东西都删掉了，所以文件大小会比bootstrap.css小，可以在部署网站的时候引用，如果引用了这个文件，就没必要引用bootstrap.css了，下面的文件同样。

00

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭