2019-08-20 21:00:18 qq_41003773 阅读数 286

折叠导航栏

组成结构

div.navbar.navbar-expand-*.navbar-dark.bg-dark
>a.navbar-brand             不折叠的菜单首项
+button.navbar-toggler        *以上屏幕不显示,*以下屏幕显示按钮
 >span.navbar-toggler-icon        按钮上的三条线
+div.collapse.navbar-collapse          折叠的内容
 >ul.navbar-nav>li.nav-item>a.nav-link
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <!--注意顺序-->
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="navbar navbar-expand-sm navbar-dark bg-dark">
    	<!--1.最前面不折叠的菜单-->
        <a href="" class="navbar-brand">Bootstrap中文网</a>
        <!--2.在小屏幕下出现的按钮,按钮上有三条线-->
        <button data-toggle="collapse" data-target="#content" class="navbar-toggler">
            <span class="navbar-toggler-icon"></span>
        </button>
        <!--3.折叠的菜单,小屏以上横向显示,小屏幕以下纵向显示-->
        <div id="content" class="collapse navbar-collapse">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="" class="nav-link">Boot3</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">Boot4</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">Less教程</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">示例</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">jQuery API</a>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

1. .navbar-expand- 。*指md/lg/xs/sm
让按钮在
以上屏幕不显示,以下屏幕显示**

.navbar-expand-sm .navbar-toggler {
  display: none;
}

在ul中的li在*以上的屏幕,横向显示在*以下的屏幕,垂直显示

.navbar-expand-sm .navbar-nav {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}
.navbar-nav {
  display: flex;
  flex-direction: column;
}
  1. .navbar-dark
    对当前div没有任何样式
    告诉子元素,这个导航栏是深色背景
    .navbar-dark .navbar-brand
    .navbar-dark .navbar-toggler
    .navbar-dark .navbar-toggler-icon
    .navbar-dark …nav-link
    都是浅色
.navbar-dark .navbar-brand {
  color: #fff; //白色
}
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.5); //浅灰色
}
.navbar-dark .navbar-toggler {
  color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
}

3. .navbar-collapse 让折叠导航,打开的位置为导航栏的下方

.navbar-collapse {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
2016-07-24 21:01:40 u013046097 阅读数 2492

        今天做项目有一个功能是从表里加载某个班每个教师的获得的荣誉列表,想实现的是加载出该班的教师,点击教师是列出该教师的所有荣誉,再点击将荣誉折叠。最后用Bootstrap的折叠(Collapse)插件方法实现,这里记录一下。

        【知识点】

        1、Bootstrap

        Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。

        2、具体代码

        使用Bootstrap需要引用三个js文件:可以从网上下载:

<span style="font-size:18px;">   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script></span>

       具体实现:

<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
   <title>Bootstrap折叠(Collapse)插件方法</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel-group" id="accordion">
   <div class="panel panel-default">
      <div class="panel-heading">
         <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" 
               href="#collapseOne">
               王建军
            </a>
         </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in">
         <div class="panel-body">
            省级一级教师
         </div>
		  <div class="panel-body">
            全国优秀教师
         </div>
      </div>
   </div>
   <div class="panel panel-success">
      <div class="panel-heading">
         <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" 
               href="#collapseTwo">
               余小二
            </a>
         </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
         <div class="panel-body">
            省级一级教师
         </div>
		  <div class="panel-body">
            全国优秀教师
         </div>
      </div>
   </div>
   <div class="panel panel-info">
      <div class="panel-heading">
         <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" 
               href="#collapseThree">
               王媛媛
            </a>
         </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse">
         <div class="panel-body">
            省级一级教师
         </div>
		  <div class="panel-body">
            全国优秀教师
         </div>
      </div>
   </div>
   <div class="panel panel-warning">
      <div class="panel-heading">
         <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" 
               href="#collapseFour">
               冯远程
            </a>
         </h4>
      </div>
      <div id="collapseFour" class="panel-collapse collapse">
         <div class="panel-body">
            省级一级教师
         </div>
		  <div class="panel-body">
            全国优秀教师
         </div>
      </div>
   </div>
</div>
<script type="text/javascript">
   $(function () { $('#collapseFour').collapse({
      toggle: false
   })});
   $(function () { $('#collapseTwo').collapse('show')});
   $(function () { $('#collapseThree').collapse('toggle')});
   $(function () { $('#collapseOne').collapse('hide')});
</script>  

</body>
</html></span>
        运行效果

          

        【小结】

         这里只是一个小例子,具体代码中的实现也基本类似,只是大部分HTML都是在后头拼写的,用到了Literal服务器控件,还挺方便的。


2016-12-07 23:49:41 kikaylee 阅读数 369

折叠(Collapse)插件可以很容易地让页面区域折叠起来。

0x01 例子

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../../css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <title>折叠插件</title>
</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>折叠插件</h1>
    </div>
    <div class="panel-group" id="panelGroup">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse1" data-toggle="collapse" data-parent="#panelGroup">
                        折叠1
                    </a>
                </h4>
            </div>
            <div id="collapse1" class="panel-collapse collapse in">
                <div class="panel-body">
                    内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1
                    内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse2" data-toggle="collapse" data-parent="#panelGroup">
                        折叠2
                    </a>
                </h4>
            </div>
            <div id="collapse2" class="panel-collapse collapse">
                <div class="panel-body">
                    内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2
                    内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2
                    内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse3" data-toggle="collapse" data-parent="#panelGroup">
                        折叠3
                    </a>
                </h4>
            </div>
            <div id="collapse3" class="panel-collapse collapse">
                <div class="panel-body">
                    内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3
                    内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3
                    内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse4" data-toggle="collapse" data-parent="#panelGroup">
                        折叠4
                    </a>
                </h4>
            </div>
            <div id="collapse4" class="panel-collapse collapse">
                <div class="panel-body">
                    内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1
                    内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

效果如下:

这里有个新的属性:data-parent ,用于把折叠面板(accordion)的 id 添加到要展开或折叠的组件的链接上。

0x02 JS方式

也可以通过JS代码来动态显示:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../../css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <title>JS代码</title>
</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>折叠插件</h1>
    </div>
    <div class="panel-group" id="panelGroup">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse1" data-toggle="collapse" data-parent="#panelGroup">
                        折叠1
                    </a>
                </h4>
            </div>
            <div id="collapse1" class="panel-collapse collapse">
                <div class="panel-body">
                    内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1
                    内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1
                </div>
            </div>
        </div>
        <div class="panel panel-success">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse2" data-toggle="collapse" data-parent="#panelGroup">
                        折叠2
                    </a>
                </h4>
            </div>
            <div id="collapse2" class="panel-collapse collapse">
                <div class="panel-body">
                    内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2
                    内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2
                    内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2
                </div>
            </div>
        </div>
        <div class="panel panel-warning">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse3" data-toggle="collapse" data-parent="#panelGroup">
                        折叠3
                    </a>
                </h4>
            </div>
            <div id="collapse3" class="panel-collapse collapse">
                <div class="panel-body">
                    内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3
                    内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3
                    内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3
                </div>
            </div>
        </div>
        <div class="panel panel-danger">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse4" data-toggle="collapse" data-parent="#panelGroup">
                        折叠4
                    </a>
                </h4>
            </div>
            <div id="collapse4" class="panel-collapse collapse">
                <div class="panel-body">
                    内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1
                    内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        $("#collapse1").collapse({
            toggle:false
        });
        $("#collapse2").collapse({
            toggle:false
        });
        $("#collapse3").collapse({
            toggle:false
        });
        $("#collapse4").collapse({
            toggle:false
        });
    })
</script>
</body>
</html>

效果如下:

初始全部是折叠状态,因为toggle初始化均为false。

滑动展开功能

博文 来自: wu631464569
没有更多推荐了,返回首页