ฉันเพิ่งไปที่หน้านี้http://www.elmastudio.de/และสงสัยว่าเป็นไปได้หรือไม่ที่จะสร้างการยุบแถบด้านข้างด้านซ้ายด้วย Bootstrap 3

รหัสเพื่อยุบแถบด้านข้างจากด้านบน (โทรศัพท์เท่านั้น):

<button type="button" class="navbar-toggle sidebar-toggle" data-toggle="collapse" data-target=".sidebar-ex1-collapse">
    <span class="sr-only">Sidebar</span>
    <span class="glyphicon glyphicon-check"></span>
</button>

แถบด้านข้างมีคลาส xs ที่ซ่อนอยู่ มันถูกลบออกด้วย js ต่อไปนี้

$('.sidebar-toggle').click(function(){
     $('#sidebar').removeClass('hidden-xs');            
});

หากคุณคลิกปุ่มจะเป็นการสลับแถบด้านข้างจากด้านบน เป็นการดีที่จะเห็นแถบด้านข้างทำงานเหมือนที่เว็บไซต์ด้านบนแสดง ขอความช่วยเหลือใด ๆ !

Bootstrap 3

ใช่มันเป็นไปได้ ตัวอย่าง "นอกผ้าใบ" นี้จะช่วยให้คุณเริ่มต้นได้

https://codeply.com/p/esYgHWB2zJ

โดยทั่วไปคุณต้องรวมเค้าโครงใน div ภายนอกและใช้แบบสอบถามสื่อเพื่อสลับเค้าโครงบนหน้าจอขนาดเล็ก

/* collapsed sidebar styles */
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }
  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -41.6%;
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -41.6%;
  }
  .row-offcanvas-right.active {
    right: 41.6%;
  }
  .row-offcanvas-left.active {
    left: 41.6%;
  }
  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 41.6%;
  }
  #sidebar {
    padding-top:0;
  }
}

นอกจากนี้ยังมีตัวอย่างแถบด้านข้าง Bootstrap อีกมากมายที่นี่

Bootstrap 4

สร้าง "ลิ้นชัก" แถบด้านข้าง navbar ที่ตอบสนองใน Bootstrap 4 หรือไม่

http://getbootstrap.com/examples/offcanvas/

นี่เป็นตัวอย่างอย่างเป็นทางการอาจดีกว่าสำหรับบางคน อยู่ในหัวข้อตัวอย่างการทดสอบ แต่เนื่องจากเป็นทางการจึงควรอัปเดตเวอร์ชัน bootstrap ปัจจุบันอยู่เสมอ

ดูเหมือนว่าพวกเขาได้เพิ่มไฟล์ off canvas css ที่ใช้ในตัวอย่าง:

http://getbootstrap.com/examples/offcanvas/offcanvas.css

และรหัส JS:

$(document).ready(function () {
  $('[data-toggle="offcanvas"]').click(function () {
    $('.row-offcanvas').toggleClass('active')
  });
});

แก้ไข: ฉันได้เพิ่มอีกหนึ่งตัวเลือกสำหรับแถบด้านข้าง bootstrap

มีมารยาทสามประการที่คุณสามารถสร้างแถบด้านข้าง bootstrap 3 ได้ ฉันพยายามทำให้โค้ดเรียบง่ายที่สุด

แถบด้านข้างคงที่

ที่นี่คุณสามารถดูการสาธิตของแถบด้านข้างที่เรียบง่ายซึ่งฉันได้พัฒนาขึ้นโดยมีความสูงเท่ากับหน้า

แถบด้านข้างในคอลัมน์

ฉันยังได้พัฒนาแถบด้านข้างของคอลัมน์ที่ค่อนข้างเรียบง่ายซึ่งทำงานในหน้าคอลัมน์สองหรือสามคอลัมน์ภายในคอนเทนเนอร์ ใช้ความยาวของคอลัมน์ที่ยาวที่สุด คุณสามารถดูการสาธิตได้ที่นี่

แผงควบคุม

หากคุณ google แดชบอร์ดบูตคุณสามารถหาแดชบอร์ดที่เหมาะสมหลายอย่างเช่นนี้ อย่างไรก็ตามส่วนใหญ่ต้องการการเข้ารหัสเป็นจำนวนมาก ฉันได้พัฒนาแดชบอร์ดที่ทำงานได้โดยไม่ต้องใช้จาวาสคริปต์เพิ่มเติม (ถัดจากจาวาสคริปต์ bootstrap) นี่คือการสาธิต

สำหรับทั้งสามตัวอย่างที่คุณปิดหลักสูตรจะต้องมีไฟล์ jquery, bootstrap css, js และ theme.css

แถบเลื่อน

หากคุณต้องการให้แถบด้านข้างซ่อนเมื่อกดปุ่มคุณสามารถทำได้ด้วยจาวาสคริปต์เพียงเล็กน้อยนี่คือการสาธิต

ผ่าน Angular: การใช้ng-classAngular เราสามารถซ่อนและแสดงแถบด้านข้างได้

http://jsfiddle.net/DVE4f/359/

<div class="container" style="width:100%" ng-app ng-controller="AppCtrl">
<div class="row">
    <div ng-class="showgraphSidebar ? 'col-xs-3' : 'hidden'" id="colPush" >
        Sidebar
    </div>
    <div ng-class="showgraphSidebar ? 'col-xs-9' : 'col-xs-12'"  id="colMain"  >
        <button  ng-click='toggle()' >Sidebar Toggle</a>
    </div>    
  </div>
</div>

.

function AppCtrl($scope) {
    $scope.showgraphSidebar = false;
    $scope.toggle = function() {
        $scope.showgraphSidebar = !$scope.showgraphSidebar;
    }
}

ไม่ได้กล่าวถึงในเอกสาร แต่แถบด้านข้างซ้ายของ Bootstrap 3 สามารถทำได้โดยใช้วิธี "ยุบ"

ดังกล่าวโดย bootstrap.js:

Collapse.prototype.dimension = function () {
    var hasWidth = this.$element.hasClass('width')
    return hasWidth ? 'width' : 'height'
  }

หมายความว่าการเพิ่มคลาส "width" เข้าไปในเป้าหมายจะขยายตามความกว้างแทนที่จะเป็นความสูง:

http://jsfiddle.net/2316sfbz/2/