बूटस्ट्रैप के साथ साइडबार कोलैप करना

Question

मैं बस इस पृष्ठ http://www.elmastudio.de/ पर गया और सोचा कि क्या बूटस्ट्रैप 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>

साइडबार में ही छिपा-एक्स वर्ग है। इसे निम्नलिखित js के साथ हटा दिया जाता है

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

यदि आप बटन पर क्लिक करते हैं तो ऊपर से साइडबार को टॉगल करता है। यह देखने के लिए शानदार है कि साइडबार उपरोक्त शो की वेबसाइट की तरह व्यवहार करता है। किसी भी मदद की सराहना की है!

Comments

क्या हम सभी सहमत हैं कि elmastudio.de के पास अब साइडबार का पतन नहीं है?

— पीटर वी। मॉरच

इसके अलावा इन उपयोगी बूटस्ट्रैप साइडबार मेन्यू कलेक्शन डिज़ाइनरलिब.

— com/

Answer 1

बूटस्ट्रैप ३

हाँ, यह मुमकिन है। यह "ऑफ-कैनवास" उदाहरण आपको शुरू करने में मदद करना चाहिए।

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;
  }
}

इसके अलावा, यहां कई और बूटस्ट्रैप साइडबार उदाहरण हैं

---

बूटस्ट्रैप ४

बूटस्ट्रैप 4 में एक उत्तरदायी नावबार साइडबार "दराज" बनाएं?

Comments

@ डेल्यूसिया: यह एंड्रॉइड पर क्रोम पर काम करता है। बूटपाइयर खुद सही ढंग से काम नहीं करता है, लेकिन "स्विच टू रेंडर व्यू" लिंक पर क्लिक करें।

— डैन डस्केल्सस्कु

यहां सरकारी बूटस्ट्रैप है साथ साइडबार डैशबोर्ड टेम्पलेट

— shaijut

@stom: यह मोबाइल और टैबलेट संस्करणों पर छुपा है जो कि समस्या है।

— फुद्दीन

Answer 2

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

यह आधिकारिक उदाहरण है, कुछ के लिए बेहतर हो सकता है। यह उनके प्रयोग उदाहरण अनुभाग के तहत है, लेकिन चूंकि यह आधिकारिक है, इसे वर्तमान बूटस्ट्रैप रिलीज के साथ अद्यतित रखा जाना चाहिए।

ऐसा लगता है कि उन्होंने अपने उदाहरण में उपयोग की गई कैनवस सीएसएस फ़ाइल को जोड़ा है:

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

और कुछ JS कोड:

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

Answer 3

संपादित करें: मैंने बूटस्ट्रैप साइडबार के लिए एक और विकल्प जोड़ा है।

वास्तव में तीन मैनर्स हैं जिनमें आप बूटस्ट्रैप 3 साइडबार बना सकते हैं। मैंने कोड को यथासंभव सरल रखने की कोशिश की।

फिक्स्ड साइडबार

यहां आप एक साधारण फिक्स्ड साइडबार का डेमो देख सकते हैं जिसे मैंने पेज के समान ऊंचाई के साथ विकसित किया है

एक कॉलम में साइडबार

मैंने एक साधारण स्तंभ स्तंभ भी विकसित किया है जो एक कंटेनर में दो या तीन स्तंभ पृष्ठ में काम करता है। यह सबसे लंबे स्तंभ की लंबाई लेता है। यहां आप एक डेमो देख सकते हैं

डैशबोर्ड

यदि आप बूटस्ट्रैप डैशबोर्ड को गूगल करते हैं, तो आप इस तरह के कई उपयुक्त डैशबोर्ड पा सकते हैं । हालांकि, उनमें से अधिकांश को कोडिंग की बहुत आवश्यकता होती है। मैंने एक डैशबोर्ड विकसित किया है जो अतिरिक्त जावास्क्रिप्ट (बूटस्ट्रैप जावास्क्रिप्ट के बगल में) के बिना काम करता है। यहाँ एक डेमो है

सभी तीन उदाहरणों के लिए आपको पाठ्यक्रम में jquery, बूटस्ट्रैप css, js और theme.css फ़ाइलों को शामिल करना होगा।

स्लाइड पट्टी

यदि आप चाहते हैं कि साइडबार एक बटन दबाने पर छिप जाए तो यह केवल थोड़ी जावास्क्रिप्ट के साथ भी संभव है। यह एक डेमो है

Answer 4

एंगुलर: वाया एंगुलर का उपयोग करके ng-class, हम साइड बार को छिपा सकते हैं और दिखा सकते हैं।

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;
    }
}

Answer 5

इसका उल्लेख डॉक पर नहीं है, लेकिन बूटस्ट्रैप 3 पर लेफ्ट साइडबार "संक्षिप्त करना" विधि का उपयोग करना संभव है।

जैसा कि bootstrap.js द्वारा बताया गया है:

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

इसका अर्थ है, वर्ग "चौड़ाई" को लक्ष्य में जोड़ना, ऊंचाई के बजाय चौड़ाई से विस्तार करेगा:

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

Comments

आप केवल 80% बाएं मेनू को छिपाने के लिए और फिर से मेनू को विस्तारित करने के लिए एक छोटा बटन कैसे दिखा सकते हैं?

— पाथ्रोस