Bootstrap下单菜单不显示

最新推荐文章于 2023-06-20 16:41:12 发布
最新推荐文章于 2023-06-20 16:41:12 发布
阅读量216 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Y2L111/article/details/85260247
版权

具体解决方法：
需要引入jQuery才行。
这里给大家提供一个网站链接。我们不需要下载jQuery，直接引用网上的链接即可。
链接：https://www.bootcdn.cn/jquery/

在这里插入图片描述

<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

在这里插入图片描述

Y2L111
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
美团外卖点餐bootstrap网站模板
04-09
此外，由于使用了Bootstrap，模板具有良好的浏览器兼容性和响应式设计，可以在手机、平板和桌面电脑等不同设备上正常显示。 在实际应用中，这个模板可能包括以下几个部分： 1. **首页**：展示推荐的商家或菜品，有...
午后咖啡休闲bootstrap模板
04-02
此外，Bootstrap还包含一系列预先设计的组件，如导航栏、按钮、表单、下拉菜单、模态框等，这些组件极大地简化了开发过程，降低了开发者的编码工作量。 这款午后咖啡休闲模板，充分利用了Bootstrap的这些优势，提供...
bootstrap4中的icon无法出来的其他思路
最新发布
2201_75977481的博客
06-20 217
icon图标引入的方法见转载：https://www.cnblogs.com/ziyoublog/p/10974406.html。下面这行引入icon图标代码放在不用bootstrap4框架的可以运行😢。bootstrap4似乎不支持用其他地方引用的icon图标。
基于bootstrap+vue+html开发的喜茶订单页面项目
qq_58372242的博客
10-24 2214
大家好,这里是果力成,很久没更了，甚是想念CSDN的大家！毕竟今天是属于我们程序猿的节日，还是需要回来看看的哈哈哈。其实我自认为也没达到一个正规的程序员的标准，但也跟程序打交道了不少时间，在学习编程的那段时间，思维上无疑是对我们有了很大的提升的。拥有编程思维，无论是不是从事IT行业，都对我们处理事情、工作有帮助。今天给大家带来一个前端的简单网页设计制作,利用框架写了一个小页面。前端嘛，所见即所得，虽然目前的主流开源框架都很成熟，但当时其中的三件套学习过程也是很让我着迷啊。
Bootstrap(实现搜索书籍页面&&购物车页面以及订单)
m0_68332494的博客
05-04 3510
运用Bootstrap实现以下案例： 案例1：实现搜索书籍页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例1：实现搜索书籍页面</title> <!-- 引入bootstrap样式 --> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/&
bootstrap字体图标在input内显示
weixin_43502084的博客
01-08 1911
效果图： &lt;div class="form-group"&gt; &lt;div class="col-lg-2"&gt; &lt;div class="input-group"&gt; &lt;input type="text" class="form-control" pl
蛋糕网店O2O在线商城bootstrap模板-bootstrap 响应式 手机 蛋糕定制 食品 菜单 棕色 漂亮 精品 生日蛋糕
11-21
“蛋糕网店O2O在线商城bootstrap模板_蛋糕 甜品 o2o 外卖 餐饮 网店 商城 整站 企业 bootstrap 响应式 手机 蛋糕定制 食品 菜单 棕色 漂亮 精品 生日蛋糕”是模板的主要文件，可能包含HTML、CSS、JavaScript等资源，...
蛋糕网店O2O在线商城bootstrap模板-甜品 外卖 餐饮整站 企业 响应式 手机 食品 菜单 棕色 漂亮 精品 生日蛋糕
11-19
“手机 蛋糕定制 食品 菜单”表明此模板特别关注移动端的体验，用户可以在手机上方便地浏览菜单，定制个性化蛋糕，并进行在线下单。食品菜单可能是通过精心设计的交互式界面呈现，方便用户查看各种蛋糕和甜品的详细...
汉堡快餐手机app响应式bootstrap模板
04-02
Bootstrap的进度条可以通过简单的配置，实现不同颜色和进度值的显示，清晰地呈现下单、支付、配送等步骤。 考虑到快餐app可能需要处理在线支付，Bootstrap的按钮组件可以与第三方支付平台的API结合，创建具有不同...
Bootstrap----导航栏
weixin_52247167的博客
04-14 1万+
文章目录 一、导航栏 1、container 2、navbar 3、navbar-expand-xx 4、navbar-xxxx 5、bg-xxxx 6、navbar-brand 7、navbar-toggler 8、navbar-toggler-icon 9、定位 二、导航栏之切换触发器 1、data-toggle="xxx" 2、data-target="#id" 3、aria-controls="id" 4、aria-label 5、aria-expanded="bo.
bootstrap 下拉菜单不显示的解决办法
weixin_30918415的博客
11-10 769
bootstrap 下拉菜单不显示，最后改成如下正常显示： <div class="btn-group open"> <ul class="dropdown-menu"> <li><a href="#">Menu1</a></li> <li><a h...
1-10. Bootstrap Glyphicon字体、图标（组件）
淡泊以明志，宁静以致远
01-21 5121
获取字体图标（Bootstrap 3.0版）： https://v3.bootcss.com/getting-started/下载后fonts文件夹 各个文件的格式不一样但内容是一样的，用于兼容各个浏览器 定义字体图标： <h3 style="color: palevioletred;" > <span class="glyphicon glyphicon-...
vue-cli引入bootstrap时候图标不显示
凉茶冰
01-30 3160
问题描述： vue-cli项目引入bootstrap的css的时候，样式都正常，但是发现图标无法正常显示，有些特殊字体也无法正常显示，F12查看提示找不到对应的字体文件，再具体一看，发现路径不对，多了static/css。 解决办法： build->utils.js文件中，找到 vue-style-loader,添加publicPath:'../../'。如下： 再重新打包发布...
Bootstrap4使用Bootstrap-table时不显示图标
qq_40890601的博客
06-17 2365
Bootstrap-table 图标显示不出来，使用的是Bootstrap4（引入umd的popper.js 和awesome整个文件） font-awesome没有引入，下载地址： https://fontaawesome.dashgame.com/ 如下显示出来了。 ASP.NET MVC get请求 JsonRequestBehavior.AllowGet 最近做的东西好伤脑筋呜呜呜呜呜呜呜弱小孤独无助 ...
Bootstrap4使用图标失效的解决方案
Jack汪喆的技术分享栏
09-17 1万+
博主使用Bootstrap4开发Angular项目时，想使用星星图标但发现不好使，仔细一查是因为Bootstrap移除了收费图标的内容，故搜集了网上相关内容，提供以下解决方案。 1.问题描述 Bootstrap4移除了收费图标的相关内容，如果想使用图标样式需要使用https://octicons.github.com/ 和http://fontawesome.io/提供的内容。当然还可以自行引...
关于bootstrap4无法使用图标
热门推荐
Isaac Lin
06-12 1万+
在菜鸟教程学习bootstrap的时候，按正常操作安装bootstrap，发现无法使用bootstrap里面的自带图标。在其官网看完之后才发现，bootstrap4已经不默认提供图标了，而是分开了，需要在别的地方下载，并使用方法也有所变化。 下载链接如下： https://github.com/iconic/open-iconic 该官网有详细的使用方法，就不再做介绍。 ...
BootStrap引用图标无法显示的解决方法
qq_46456923的博客
10-03 2068
BootStrap引用图标无法显示的解决方法
Bootstrap 4.X版本的图标显示不出来问题
Angus的博客
09-27 9942
因为4.X版本Boostrap把icon分离出来作为一个单独的项目open-iconic，所以单纯的只引入Boostrap项目是不够的，还需要下载open-iconic项目(Git：https://github.com/iconic/open-iconic) 以下介绍webpack的使用方法，常用的使用标签引入的请查看官网：https://useiconic.com/open 下载：npm i ...
利用bootstrap、Isotope等前端技术实现一个二手汽车交易系统的前端页面，要求能实现分类的筛选
05-11
好的，以下是一个简单的实现： 首先，我们需要使用Bootstrap框架来搭建页面的基本结构和样式。在这个系统中，我们需要一个搜索框、一个筛选菜单和一个展示二手车的区域。 ```html <!DOCTYPE html> <html> <head> <title>二手车交易系统</title> <!-- 引入Bootstrap框架 --> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <!-- 引入Isotope插件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/jquery.isotope/3.0.6/isotope.min.css"> <!-- 自定义样式 --> <style> .filter-menu { margin-bottom: 20px; } .filter-menu label { margin-right: 10px; } .car-item { margin-bottom: 20px; } .car-item img { width: 100%; height: 200px; object-fit: cover; margin-bottom: 10px; } .car-item h5 { font-size: 20px; margin-bottom: 10px; } .car-item p { font-size: 14px; color: #999; margin-bottom: 10px; } .car-item .price { font-size: 24px; color: #f00; margin-bottom: 10px; } </style> </head> <body> <div class="container"> <!-- 搜索框 --> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="请输入关键字"> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button">搜索</button> </div> </div> <!-- 筛选菜单 --> <div class="filter-menu"> <label>品牌：</label> <select class="custom-select" id="brand"> <option value="">不限</option> <option value="1">奥迪</option> <option value="2">宝马</option> <option value="3">奔驰</option> </select> <label>价格：</label> <select class="custom-select" id="price"> <option value="">不限</option> <option value="1">10万以下</option> <option value="2">10万-20万</option> <option value="3">20万-30万</option> <option value="4">30万以上</option> </select> <button class="btn btn-primary" id="filter-btn">筛选</button> </div> <!-- 展示区域 --> <div class="row" id="car-list"> <div class="col-md-4 car-item" data-brand="1" data-price="25"> <img src="https://picsum.photos/400/300" alt=""> <h5>2019款奥迪A6L</h5> <p>3.0T 自动 舒适型</p> <p class="price">25万</p> </div> <div class="col-md-4 car-item" data-brand="2" data-price="18"> <img src="https://picsum.photos/400/300" alt=""> <h5>2018款宝马5系</h5> <p>2.0T 自动 豪华型</p> <p class="price">18万</p> </div> <div class="col-md-4 car-item" data-brand="3" data-price="32"> <img src="https://picsum.photos/400/300" alt=""> <h5>2017款奔驰E级</h5> <p>3.0T 自动 豪华型</p> <p class="price">32万</p> </div> </div> </div> <!-- 引入jQuery和Isotope插件 --> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script> <!-- 自定义脚本 --> <script> $(document).ready(function() { // 初始化Isotope插件 var $grid = $('#car-list').isotope({ itemSelector: '.car-item', layoutMode: 'fitRows' }); // 点击筛选按钮时触发 $('#filter-btn').on('click', function() { var brand = $('#brand').val(); // 获取品牌筛选条件 var price = $('#price').val(); // 获取价格筛选条件 // 根据筛选条件过滤展示的二手车 $grid.isotope({ filter: function() { var brandMatch = true; var priceMatch = true; if (brand) { brandMatch = $(this).data('brand') == brand; } if (price) { var priceData = $(this).data('price'); if (price == 1) { priceMatch = priceData < 10; } else if (price == 2) { priceMatch = priceData >= 10 && priceData < 20; } else if (price == 3) { priceMatch = priceData >= 20 && priceData < 30; } else if (price == 4) { priceMatch = priceData >= 30; } } return brandMatch && priceMatch; }}); }); }); </script> </body> </html> ``` 在这个页面中，我们使用了Isotope插件来实现二手车的筛选。当用户点击筛选按钮时，我们会获取品牌和价格的筛选条件，然后根据条件过滤展示的二手车。 这个页面只是一个简单的示例，如果要实现一个真正的二手车交易系统，还需要添加更多的功能和页面，比如用户登录、发布二手车、下单等等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值