bootstrap左右折叠_折叠 bootstrap左右 - CSDN
  • bootstrap侧边伸缩菜单

    2018-11-22 16:27:53
    <div class="panel-group table-responsive classify" role="tablist"> ...-- 利用data-target指定要折叠的分组列表 --> <div class="p

     

    <div class="panel-group table-responsive classify" role="tablist">
      <div class="panel panel-primary leftMenu">
        <!-- 利用data-target指定要折叠的分组列表 -->
        <div class="panel-heading" id="collapseListGroupHeading1" data-toggle="collapse"
             data-target="#collapseListGroup1" role="tab">
          <h4 class="panel-title">
            技术类
            <span class="glyphicon glyphicon-chevron-up right"></span>
          </h4>
        </div>
        <!-- .panel-collapse和.collapse标明折叠元素 .in表示要显示出来 -->
        <div id="collapseListGroup1" class="panel-collapse collapse in" role="tabpanel"
             aria-labelledby="collapseListGroupHeading1">
          <ul class="list-group">
            <li class="list-group-item">
              <a href="#">HTML5</a>
            </li>
            <li class="list-group-item">
              <a href="">CSS</a>
            </li>
            <li class="list-group-item">
              <a href="">JavaScript</a>
            </li>
            <li class="list-group-item">
              <a href="">Vue.js</a>
            </li>
            <li class="list-group-item">
              <a href="">Django</a>
            </li>
            <li class="list-group-item">
              <a href="">MySql</a>
            </li>
            <li class="list-group-item">
              <a href="">Python</a>
            </li>
            <li class="list-group-item">
              <a href="">Java</a>
            </li>
          </ul>
        </div>
      </div><!--panel end-->
      <div class="panel panel-primary leftMenu">
        <div class="panel-heading" id="collapseListGroupHeading2" data-toggle="collapse"
             data-target="#collapseListGroup2" role="tab">
          <h4 class="panel-title">
            其他类
            <span class="glyphicon glyphicon-chevron-down right"></span>
          </h4>
        </div>
        <div id="collapseListGroup2" class="panel-collapse collapse" role="tabpanel"
             aria-labelledby="collapseListGroupHeading2">
          <ul class="list-group">
            <li class="list-group-item">
              <a href="">感悟</a>
            </li>
            <li class="list-group-item">
              <a href="">游记</a>
            </li>
            <li class="list-group-item">
              <a href="">日记</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    要记得配上jquery
    $(function () {
      $(".panel-heading").click(function (e) {
        /*切换折叠指示图标*/
        $(this).find("span").toggleClass("glyphicon-chevron-down");
        $(this).find("span").toggleClass("glyphicon-chevron-up");
      });
    });
    展开全文
  • 效果图: 源码:<!DOCTYPE html> <html lang="zh-CN"> <meta name="viewport" content="width=device

    效果图:
    这里写图片描述
    这里写图片描述

    源码:

    <!DOCTYPE html>
    <html lang="zh-CN">
    
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
            <title>表格</title>
            <meta name="keywords" content="侧边导航菜单(可分组折叠)">
            <meta name="description" content="侧边导航菜单(可分组折叠)" />
            <meta name="HandheldFriendly" content="True" />
            <link rel="shortcut icon" href="img/favicon.ico">
            <!-- Bootstrap3.3.5 CSS -->
            <link href="css/bootstrap.min.css" rel="stylesheet">
    
            <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
            <!--[if lt IE 9]>
                <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
                <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
            <![endif]-->
            <style>
                .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:36px;color:white;position:relative;cursor:pointer;}/*转成手形图标*/
                .leftMenu .panel-heading span{position:absolute;right:10px;top:12px;}
                .leftMenu .menu-item-left{padding: 2px; background: transparent; border:1px solid transparent;border-radius: 6px;}
                .leftMenu .menu-item-left:hover{background:#C4E3F3;border:1px solid #1E90FF;}
            </style>
        </head>
    
        <body>
            <div class="row">
                <div class="col-md-2">
                    <div class="panel-group table-responsive" role="tablist">
                        <div class="panel panel-primary leftMenu">
                            <!-- 利用data-target指定要折叠的分组列表 -->
                            <div class="panel-heading" id="collapseListGroupHeading1" data-toggle="collapse" data-target="#collapseListGroup1" role="tab" >
                                <h4 class="panel-title">
                                    分组1
                                    <span class="glyphicon glyphicon-chevron-up right"></span>
                                </h4>
                            </div>
                            <!-- .panel-collapse和.collapse标明折叠元素 .in表示要显示出来 -->
                            <div id="collapseListGroup1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="collapseListGroupHeading1">
                                <ul class="list-group">
                                  <li class="list-group-item">
                                    <!-- 利用data-target指定URL -->
                                    <button class="menu-item-left" data-target="test2.html">
                                        <span class="glyphicon glyphicon-triangle-right"></span>分组项1-1
                                    </button>
                                  </li>
                                  <li class="list-group-item">
                                    <button class="menu-item-left">
                                        <span class="glyphicon glyphicon-triangle-right"></span>分组项1-2
                                    </button>
                                  </li>
                                  <li class="list-group-item">
                                    <button class="menu-item-left">
                                        <span class="glyphicon glyphicon-triangle-right"></span>分组项1-3
                                    </button>
                                  </li>
                                  <li class="list-group-item">
                                    <button class="menu-item-left">
                                        <span class="glyphicon glyphicon-triangle-right"></span>分组项1-4
                                    </button>
                                  </li>
                                  <li class="list-group-item">
                                    <button class="menu-item-left">
                                        <span class="glyphicon glyphicon-triangle-right"></span>分组项1-5
                                    </button>
                                  </li>
                                  <li class="list-group-item">
                                    <button class="menu-item-left">
                                        <span class="glyphicon glyphicon-triangle-right"></span>分组项1-6
                                    </button>
                                  </li>
                                  <li class="list-group-item">
                                    <button class="menu-item-left">
                                        <span class="glyphicon glyphicon-triangle-right"></span>分组项1-7
                                    </button>
                                  </li>
                                  <li class="list-group-item">
                                    <button class="menu-item-left">
                                        <span class="glyphicon glyphicon-triangle-right"></span>分组项1-8
                                    </button>
                                  </li>
                                  <li class="list-group-item">
                                    <button class="menu-item-left">
                                        <span class="glyphicon glyphicon-triangle-right"></span>分组项1-9
                                    </button>
                                  </li>
                                  <li class="list-group-item">
                                    <button class="menu-item-left">
                                        <span class="glyphicon glyphicon-triangle-right"></span>分组项1-10
                                    </button>
                                  </li>
                                  <li class="list-group-item">
                                    <button class="menu-item-left">
                                        <span class="glyphicon glyphicon-triangle-right"></span>分组项1-11
                                    </button>
                                  </li>
                                </ul>
                            </div>
                        </div><!--panel end-->
                        <div class="panel panel-primary leftMenu">
                            <div class="panel-heading" id="collapseListGroupHeading2" data-toggle="collapse" data-target="#collapseListGroup2" role="tab" >
                                <h4 class="panel-title">
                                    分组2
                                    <span class="glyphicon glyphicon-chevron-down right"></span>
                                </h4>
                            </div>
                            <div id="collapseListGroup2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading2">
                                <ul class="list-group">
                                  <li class="list-group-item">
                                    <button class="menu-item-left">
                                        <span class="glyphicon glyphicon-triangle-right"></span>分组项2-1
                                    </button>
                                  </li>
                                  <li class="list-group-item">
                                    <button class="menu-item-left">
                                        <span class="glyphicon glyphicon-triangle-right"></span>分组项2-2
                                    </button>
                                  </li>
                                  <li class="list-group-item">
                                    <button class="menu-item-left">
                                        <span class="glyphicon glyphicon-triangle-right"></span>分组项2-3
                                    </button>
                                  </li>
                                  <li class="list-group-item">
                                    <button class="menu-item-left">
                                        <span class="glyphicon glyphicon-triangle-right"></span>分组项2-4
                                    </button>
                                  </li>
                                </ul>
                            </div>
                        </div>  
                    </div>
                </div>
                <div class="col-md-10">
                    内容
                </div>
            </div>
            <!-- jQuery1.11.3 (necessary for Bo otstrap's JavaScript plugins) -->
            <script src="js/jquery-1.11.3.min.js "></script>
            <!-- Include all compiled plugins (below), or include individual files as needed -->
            <script src="js/bootstrap.min.js "></script>
            <script>
            $(function(){
                $(".panel-heading").click(function(e){
                    /*切换折叠指示图标*/
                    $(this).find("span").toggleClass("glyphicon-chevron-down");
                    $(this).find("span").toggleClass("glyphicon-chevron-up");
                });
            });
            </script>
        </body>
    
    </html>
    展开全文
  • 实现的效果就是把左边的菜单栏整体折叠(隐藏),只漏出一个按钮,这个按钮可以控制这个菜单栏的展现和隐藏,bootstrap有提供相应的方法么??? 想在主菜单的位置加一个回收的按钮,控制菜单伸缩,也就是下面代码的...
  • Bootstrap折叠效果

    2017-04-05 09:02:42
    Bootstrap折叠效果 声明式用法 1.新建一个web项目ch27,将ch26里面bootstrap所要用到的css、JavaScript文件等复制到ch27。 2.声明式用法实例   //data-...

    Bootstrap折叠效果



    声明式用法


    1.新建一个web项目ch27,将ch26里面bootstrap所要用到的css、JavaScript文件等复制到ch27。


    2.声明式用法实例


    <body>

     <div class="container">

    //data-toggle="collapse" 用来触发JavaScript插件。

    //给这个<button>加一个data-toggle="collapse"属性。

    //data-target用来指定当你点击按钮时对应显示/隐藏的div。

    <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#shows">折叠</button>

    //当点击这个按钮时对应显示隐藏一个div。

    //给这个<div>添加一个collapse in

    <div id="shows" class="collapse">

      <div class="well">

       显示的内容

      </div>

    </div>

     </div>

    </body>


    3.运行效果


    (默认是隐藏的)


    fold1.png


    (点击,显示)


    fold2.png



    Javascript用法


    1.javascript用法实例


      <div class="container">

          <div class="panel-group">

           //这是一个panel的组

         //panel里面右包括panel的头、panel的body和panel的bottom。

           <!--一个功能 -->

     <div class="panel panel-default">

          <div class="panel-heading">

    //<h4>作为panel的头

           <h4 class="panel-title">

      <a href="#" data-toggle="collapse" data-target="#channel_demo1">栏目管理1</a>

    //panel的头应该是可以点击的,所以这里是一个超链接。

    //data-toggle="collapse"

    //data-target="#channel_demo1"注意一定要以#开头选择你要隐藏的    

      项目。

               </h4>

           </div>           

           <div class=" collapse panel-collapse" id="channel_demo1">

               <div class="panel-body">

    //在<ul>里面写内容

                 <ul>

                  <li><a href="#">增加栏目</a></li>

                  <li><a href="#">增加栏目</a></li>

                  <li><a href="#">增加栏目</a></li>

                 </ul>

                </div>

           </div>

      </div>


    2.运行效果


    fold3.png


    (点击“栏目管理”隐藏掉,再点击“栏目管理”显示出来。)


    fold4.png


    fold5.png


    3.新建demo02.html,我们可以再copy上面的代码三份,得到三个“栏目管理”,为了区分我们可以分别改成“栏目管理1”、“栏目管理2”和“栏目管理3”。


    fold6.png


    fold7.png


    fold8.png


    4.运行效果


    fold9.png


    fold10.png


    5.新建demo03.html复制demo02.html的内容。


    (实现当我们点击“栏目管理1”,先将“栏目管理2”和“栏目管理3”关闭后,再打开“栏目管理1”下面的内容。)


    我们只需要栏目管理1上加了一个data-parent="#panelcontainer",当单击栏目管理1,把这个容器里面的所有collapse都给隐藏掉,然后再展开栏目管理1对应的collapse,并在它的panel-group上加了一个id叫panelcontainer。


    <a href="#" data-toggle="collapse" data-target="#channel_demo1" data-parent="#panelcontainer">栏目管理1</a>


    <div class="panel-group" id="panelcontainer">


    6.运行效果


    fold11.png



    事件


    1.将demo03.html里面的内容复制到新建的demo04.html。


    2.用事件触发来实现当“栏目管理2”的collapse显示的时候,我们在最下方显示一句话“栏目2展开了。。。”。


    (我们只需要在demo03.html的头文件中加一个script语句,


     <script language="JavaScript">

               $(function(){

     //给容器加个事件注册

               $('#channel_demo2').on('show.bs.collapse', function () {

                  $("#tashow").html("栏目2展开了。。。");

                });     

           });

     </script>


    3.运行效果


    fold12.png

    展开全文
  • 一· 引用文件:CSS: bootstrap.min  js: 1. jquery-3.2.1.min  2. bootstrap.min    简介:1.Collapse 类用于指定一个折叠元素 (实例中的 &lt;div&gt;); 点击按钮后会在隐藏与显示之间...

           一· 引用文件:CSS:  bootstrap.min

                          js: 1. jquery-3.2.1.min

                               2. bootstrap.min

     

           简介:1.Collapse 类用于指定一个折叠元素 (实例中的 <div>); 点击按钮后会在隐藏与显示之间切换。

            2.控制内容的隐藏与显示,需要在 <a> 或 <button> 元素上添加 data-toggle="collapse" 属性。

              3.data-target="#id" 属性是对应折叠的内容 (<div id="demo">)
            注意: <a> 元素上你可以使用 href 属性来代替 data-target 属性。

         二· 运用Bootstarp搭建框架

          目标完成效果图:

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>bootstrap4-Collapse 折叠</title>
        <link rel="stylesheet" href="bootstrap-4.1.3-dist/css/bootstrap.min.css">
        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
    </head>
    
    <body>
        <div class="container">
            <h3 class="h3">Collapse</h3>
            <p>
                <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">
                    Link 和 href
                </a>
                <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample">
                    Button 和 data-target
                </button>
            </p>
            <div class="collapse" id="collapseExample">
                <div class="card card-body">
                    <h3>人之有好也,学而顺之;人之有恶也,避而讳之,故阴道而阳取之也。</h3>如果对方有某种嗜好,就要仿效以迎合他的兴趣;如果对方厌恶什么,就要加以避讳以免引起反感。所以要进行隐密谋划而公开的进行获取。
                </div>
            </div>
            <h3 class="h3 mt-2">多个目标</h3>
            <p>
                <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1">切换第一个元素</a>
                <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2">切换第二个元素</button>
                <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse">切换两个元素</button>
            </p>
            <div class="row">
                <div class="col">
                    <div class="collapse multi-collapse" id="multiCollapseExample1">
                        <div class="card card-body">
                            <h3>故知之始己,自知而后知人也。</h3>所以要想掌握情况,要先从自己开始,只有了解自己,然后才能了解别人。
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="collapse multi-collapse" id="multiCollapseExample2">
                        <div class="card card-body">
                            <h3>貌者不美,又不恶,故至情托焉。</h3>无论遇到什么事情,既不喜形于色,也不怒目相待的人,是让人感觉深沉的人,是一个值得信赖的人,是可以托之以机密大事的。
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $('.collapse').collapse();
        </script>
    </body>
    </html>
    

          这样就全部完成了,    想要了解更多的私信 

     

                                                                                                                   新手上路 多多支持

    展开全文
  • bootstrap手风琴折叠

    2017-05-25 16:12:35
    手风琴折叠 XXX Bootstrap --> Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS/
  • 折叠(Collapse)插件可以很容易地让页面区域折叠起来。
  • link rel="stylesheet" href="css/bootstrap.min.css"/> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/bootstrap.min.js"></script> 加入...
  • bootstrap为我们提供了非常丰富的js插件和css样式,如何运用bootstrap来实现分栏选择行显示和折叠效果,如下所示: 1、分栏显示 <!doctype html> <html> <head> <!--导入bootstrap样式--&...
  • bootstrap实现响应式导航栏 PC机显示正常的长条导航,手机端实现折叠隐藏的按钮效果 向 标签添加 class .navbar、.navbar-default(导航条背景白)navbar-inverse导航条背景黑。向上面的元素添加 role=...
  • 最近在学习响应式网页布局Bootstrap,今天在学可折叠导航栏时,遇到一个问题,点击右侧可折叠图标时,隐藏的导航栏显示了,但是再单击可折叠图标时,显示的导航栏却死活不隐藏。 我以为是我的代码什么地方敲错了,...
  • 1. 前言 最近需要做一个后台管理系统,我打算使用bootstrap弄...首先从左侧的折叠菜单开始。看图。 2. CSS 代码 以下是自定义的css代码,由于系统是内部使用,所以优先考虑chrome,firefox 不考虑IE了。 #...
  • 更多 BootStrap 详情请移步菜鸟教程 1.Bootstrap 字体图标(Glyphicons) 字体图标 2.Bootstrap 下拉菜单 如需使用下拉菜单,只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单: ...
  • bootstrap之collapse(折叠)

    2017-03-08 14:01:33
    说这个之前我们可以看看bootstrap的官网对它的说明:http://v3.bootcss.com/javascript/#collapse class为以下值时: .collapse hides content.collapsing is applied during transitions.collapse.in shows ...
  • 首页            系统管理
  • 轮播图组件 使用类名carousel 使用carousel就是相对定位,使用在父级上 基本用法: <div class="container">... slide是左右滚动,不加的话有点像幻灯片 carousel-fade 轮播图是否需要过渡 必须要使用slide
  • 1.下拉菜单相关说明:下拉菜单对应.dropdown 类,我们可以使用button按钮或a链接来打开下拉菜单,需要添加class="dropdown-toggle" 和 data-toggle="dropdown" 属性。主要代码:&...
  • http://www.17sucai.com/pins/demo-show?id=27353
  • Bootstrap 布局组件Bootstrap 字体图标(Glyphicons)什么是字体图标?字体图标是在 Web 项目中使用的图标字体。获取字体图标Bootstrap 3.x 版本,在 fonts 文件夹内可以找到字体图标,它包含了下列这些文件: ...
  • Bootstrap

    2016-10-21 13:01:58
    终于下定决心来学习bootstrap了,2016-10-03。bootstrap安装 先看CDN:<!-- 放在head标签内 --> <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/...
1 2 3 4 5 ... 20
收藏数 1,540
精华内容 616
热门标签
关键字:

bootstrap左右折叠