1

我希望以与顶栏相同的方式折叠侧栏(折叠+按钮)。

到目前为止,我已经在调整屏幕大小时出现了按钮。但是,它不会展开内容上方的侧边栏。我点击按钮,没有任何反应。

这是我的源文件:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
    padding-top: 60px;
    padding-bottom: 40px;
}

.sidebar-nav {
    padding: 9px 0;
}

@media ( max-width : 980px) { /* Enable use of floated navbar text */
    .navbar-text.pull-right {
        float: none;
        padding-left: 5px;
        padding-right: 5px;
    }
}
</style>
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="assets/js/html5shiv.js"></script>
    <![endif]-->

<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144"
    href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114"
    href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72"
    href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed"
    href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
</head>

<body>

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container-fluid">No menu here...</div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span3">
                <button type="button" class="btn btn-navbar"
 data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <div class="nav-collapse collapse">
                    <div class="sidebar-nav">
                        <ul class="nav nav-list">
                            <li class="nav-header">Sidebar</li>
                            <li class="active"><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li class="nav-header">Sidebar</li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li class="nav-header">Sidebar</li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                        </ul>
                    </div>
                    <!--nav collapse -->
                </div>
                <!--/.span3 -->
            </div>
            <!--/span-->
            <div class="span9">
                <h1>Content in here...</h1>
            </div>
        </div>
        <!--/row-->

        <hr>

        <footer>
            <p>&copy; Company 2013</p>
        </footer>

    </div>
    <!--/.fluid-container-->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap-transition.js"></script>
    <script src="assets/js/bootstrap-alert.js"></script>
    <script src="assets/js/bootstrap-modal.js"></script>
    <script src="assets/js/bootstrap-dropdown.js"></script>
    <script src="assets/js/bootstrap-scrollspy.js"></script>
    <script src="assets/js/bootstrap-tab.js"></script>
    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>
    <script src="assets/js/bootstrap-button.js"></script>
    <script src="assets/js/bootstrap-collapse.js"></script>
    <script src="assets/js/bootstrap-carousel.js"></script>
    <script src="assets/js/bootstrap-typeahead.js"></script>

</body>
</html>

这是我的补丁文件,指示对引导 CSS 文件所做的更改。我主要向 .btn-navbar 添加了与 .navbar .btn-navbar 相同的样式,方法是在任何这些样式之前添加 .btn-navbar 。

diff --git a/assets/css/bootstrap-responsive.css b/assets/css/bootstrap-responsive.css
--- a/assets/css/bootstrap-responsive.css
+++ b/assets/css/bootstrap-responsive.css
@@ -1092,7 +1092,7 @@
     height: 0;
     overflow: hidden;
   }
-  .navbar .btn-navbar {
+  .btn-navbar, .navbar .btn-navbar {
     display: block;
   }
   .navbar-static .navbar-inner {



diff --git a/assets/css/bootstrap.css b/assets/css/bootstrap.css
--- a/assets/css/bootstrap.css
+++ b/assets/css/bootstrap.css
@@ -4631,7 +4631,7 @@
           box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
 }

-.navbar .btn-navbar {
+.btn-navbar, .navbar .btn-navbar {
   display: none;
   float: right;
   padding: 7px 10px;
@@ -4656,6 +4656,12 @@
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
 }

+.btn-navbar:hover,
+.btn-navbar:focus,
+.btn-navbar:active,
+.btn-navbar.active,
+.btn-navbar.disabled,
+.btn-navbar[disabled],
 .navbar .btn-navbar:hover,
 .navbar .btn-navbar:focus,
 .navbar .btn-navbar:active,
@@ -4667,12 +4673,14 @@
   *background-color: #d9d9d9;
 }

+.btn-navbar:active,
+.btn-navbar.active, 
 .navbar .btn-navbar:active,
 .navbar .btn-navbar.active {
   background-color: #cccccc \9;
 }

-.navbar .btn-navbar .icon-bar {
+.btn-navbar .icon-bar, .navbar .btn-navbar .icon-bar {
   display: block;
   width: 18px;
   height: 2px;

目标是在我让它工作后将它们移到我的自定义 CSS 中。

就 .btn 而言,jQuery 文件似乎很简单,没有看到任何需要更改这些文件。

4

1 回答 1

0

哦,看在皮特的份上……

我刚刚注意到这些错误:

“Uncaught TypeError: Object [object Object] has no method ‘on’ 

稍后快速搜索,我发现了这篇可爱的博客文章: http ://brainmachine.mozganostroj.com/2012/05/04/catch-me-if-you-can-uncaught-typeerror-undefined-twitter-bootstrap-and-洛格芬/

我下载了最新的 jQuery 副本,瞧!一切正常……叹息。

于 2013-06-21T00:12:33.800 回答