bootstrap伸缩导航

最新推荐文章于 2024-06-24 09:41:50 发布
最新推荐文章于 2024-06-24 09:41:50 发布
阅读量881 收藏
点赞数
分类专栏： Jquery 前端样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!--<link rel="stylesheet" type="text/css" href="css/action.css"/>-->
        <!--<script type="text/javascript" src="script/require.js" data-main="script/main.js"></script>-->
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <title>测试</title>
    </head>
    <body>
        <div class="navbar navbar-fixed-top navbar-inverse" >  
      <div class="container">  
          <div class="nav-logo">
            <a class="" href="#">
                <img class="img-responsive" alt="北京市XXXX科技有限公司" style="height: 100%;width: auto;" />
            </a>
        </div>
        <div class="navbar-header">  
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navBar">  
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>  
        <div class="collapse navbar-collapse navbar-right" id="navBar">  
          <ul class="nav navbar-nav">
            <li><a href="#">首页</a></li>
            <li><a href="#">公司介绍</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    产品中心<span class="caret"></span>
                </a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">SmartCall智能呼</a></li>
                    <li><a href="#">运营管理平台ＯＭＳ</a></li>
                    <li><a href="#">客户关系管理系统</a></li>
                    <li><a href="#">电销系统</a></li>
                    <li><a href="#">知识库管理</a></li>
                    <li><a href="#">排班管理模块</a></li>
                    <li><a href="#">考试培训系统</a></li>
                    <li><a href="#">多媒体调度指挥系统</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    行业方案<span class="caret"></span>
                </a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">多媒体呼叫中心</a></li>
                    <li><a href="#">保险行业</a></li>
                    <li><a href="#">制造行业</a></li>
                    <li><a href="#">政府部门</a></li>
                    <li><a href="#">教育行业</a></li>
                    <li><a href="#">酒店/旅游</a></li>
                    <li><a href="#">电子商务</a></li>
                    <li><a href="#">社区服务</a></li>
                    <li><a href="#">铁路/客运</a></li>
                    <li><a href="#">医疗卫生</a></li>
                </ul>
            </li>
            <li><a href="#">公司新闻</a></li>
            <li><a href="#">典型客户</a></li>
            <li><a href="#">合作伙伴</a></li>
            <li><a href="#">联系我们</a></li>
          </ul>  
        </div>
      </div>
   </div>
    </body>
 <script type="text/javascript" src="script/jquery/jquery-3.2.1.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</html>

aliven1
关注
专栏目录
【Bootstrap作业】flex布局实现可伸缩菜单
MruAn的博客
12-06 391
flex布局实现可伸缩菜单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
bootstrap导航栏折叠
vinc_ent的博客
02-09 2726
在使用bootstrap时发现navbar-header不明确含义，多次搜索后发现可以在页面过小时赋予折叠按钮的东西，虽然还是不是很懂，但是可以使用。 <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ex...
基于bootstrap实现收缩导航条
12-03
本文实例为大家分享了bootstrap实现收缩导航条的具体代码，供大家参考，具体内容如下 效果图 贴上我的代码 <!DocType html> <html> <head> <meta charset="utf-8"> <!--设置浏览器优先使用什么模式来渲染页面--> <!--告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=divice-width,initial-s
引入创新：bootstrap-drawer —— 您的导航抽屉解决方案
最新发布
gitblog_00095的博客
06-24 407
???? 引入创新：bootstrap-drawer —— 您的导航抽屉解决方案 项目地址:https://gitcode.com/clineamb/bootstrap-drawer 在网页设计中，一个引人注目的趋势是抽屉式（off-canvas）菜单的流行。它不仅节省空间，还提供了优雅和直观的用户交互体验。如果你正在寻找一种简单而有效的方法来实现这种风格的导航，不妨深入了解 bootstrap-dra...
《程序猿的第n+3天》bootstrap做收缩导航
sinat_35803474的博客
03-16 269
今天用bootstrap做一个收缩导航条，犯了一个比较低级的错误 点击按钮的时候，并没有弹出来导航 查看好久代码，觉得没问题。最后想想，才发现，原来自己没有引入bootstrap的js文件。万恶啊。。。 <script src="https://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></scr
详解bootstrap自定义侧边导航栏的方法
qq_43067585的博客
04-09 4427
本篇文章给大家介绍一下bootstrap自定义侧边导航栏的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 bootstrap自带的响应式导航栏是向下滑动的，有时满足不了个性化的需求，需要做一个类似于android drawerLayout 侧滑的菜单，这就是我要实现的bootstrap自定义侧滑菜单，参考了很多官网的侧滑，实现方法各有不同，优缺点也十分明显，有的官网首页为了仅仅实现一个侧滑的效果，用了owl.carousel滑屏的插件，个人觉得小题大做了。这个bootstrap
bootstrap侧边导航栏
07-25
bootstrap侧边导航栏简单的实现，代码比较少，实现效果良好，原文链接http://blog.csdn.net/kebi007/article/details/76038251
bootstrap侧边伸缩菜单
qq_37969201的博客
11-22 5530
  &lt;div class="panel-group table-responsive classify" role="tablist"&gt; &lt;div class="panel panel-primary leftMenu"&gt; &lt;!-- 利用data-target指定要折叠的分组列表 --&gt; &lt;div class="p
bootstrap菜单展开收起_Bootstrap之侧边导航菜单(可折叠分组)
weixin_31002059的博客
12-31 1602
点击右侧的箭头，该选项卡会展开或收起。效果图：html>表格.panel-group{max-height:770px;overflow:auto;}.leftMenu{margin:10px;margin-top:5px;}.leftMenu.panel-heading{font-size:14px;padding-left:20px;height:36px;line-height:3...
Bootstrap 5-导航栏-可折叠导航栏
m0_73839298的博客
09-25 1424
可折叠导航栏代码图效果图。
基于jquery+bootstrap的侧边栏收缩菜单
05-05
基于jquery+bootstrap的侧边栏收缩菜单，实现切换伸展收缩菜单的功能。
bootstrap3 侧边导航栏
11-15
这是一个 bootstrap3 的侧边导航栏,东西大家应该都很熟习。希望对大家有所帮助
Bootstrap左侧下拉三级菜单导航
11-19
Bootstrap左侧下拉三级菜单导航
bootstrap自定义样式之bootstrap实现侧边导航栏功能
12-02
bootstrap自带的响应式导航栏是向下滑动的，有时满足不了个性化的需求，需要做一个类似于android drawerLayout 侧滑的菜单，这就是我要实现的bootstrap自定义侧滑菜单，参考了很多官网的侧滑，实现方法各有不同，优缺点也十分明显，有的官网首页为了仅仅实现一个侧滑的效果，用了owl.carousel滑屏的插件，个人觉得小题大做了。这个bootstrap侧滑菜单更专业的名字叫做手机导航栏。我也比较这个名字，更符合bootstrap的特性。所以我这篇文章介绍的更容易的一种做法，新手更容易接受。 bootstrap侧边导航栏实现原理 1.侧滑栏使用定位fixed 2.使用bo
Bootstrap响应式侧边栏导航菜单代码.zip
07-11
Bootstrap响应式侧边栏导航菜单代码
bootstrap4 左侧导航栏 优秀 大气_UI设计干货|抽屉导航（汉堡菜单）模板素材
weixin_39891438的博客
11-22 1330
1.简介抽屉导航也叫汉堡菜单，是将一个导航页（菜单）隐藏在当前页面，点击汉堡按钮，导航页会像抽屉一样从页面左侧或右侧拉出。我们可以通过现实意义的抽屉来理解这种导航： 美丽的汉堡菜单 美丽的汉堡动画菜单 汉堡动画菜单 汉堡菜单动画 1）抽屉作为收纳物品的容器，通常可以存放多个物品（抽屉导航可以放置多个次级功能入口）2）抽屉通常是关起来的，需要时才打开，因此抽屉内的物品通常不可见...
bootstrap 页面分成三列_bootstrap响应式布局
weixin_39613712的博客
12-14 1669
哈喽，大家好呀，我是滑稽君。响应式布局是什么？其实就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。简单来说，我们希望网站在移动设备和PC上都能有一个好的呈现效果。当检测到设备不同时，我们可以给出不同的浏览、布局方案。我们可以通过Bootstrap来实现，那么它又是什么呢？Bootstrap基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，...
bootstrap 侧导航栏
CCGLF的博客
12-16 997
<!doctype html> xxx <link href="../../css/bootstrap.min.css" rel="stylesheet" /> <link href="../../css/sidebars.css" rel="stylesheet" /> <script src="../../js/bootstrap.bundle.min.js"></script>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值