বুটস্ট্র্যাপের সাথে সাইডবারটি ভেঙে ফেলা হচ্ছে

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>

সাইডবারে নিজেই লুকানো-এক্স ক্লাস রয়েছে। এটি নিম্নলিখিত জেএস সহ সরানো হয়েছে

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

আপনি যদি বোতামটি ক্লিক করেন তবে এটি উপরে থেকে সাইডবারটি টগল করে। উপরের ওয়েবসাইটগুলির মতো পার্শ্বদণ্ডটি আচরণ করা দেখে ভাল লাগবে। কোন সাহায্য প্রশংসা করা হয়!

Comments

আমরা সকলেই কি একমত যে elmastudio.de এর আর সেই সাইডবারটি ধসে পড়েছে?

— পিটার ভি।

এছাড়াও এই দরকারী বুটস্ট্র্যাপের সাইডবার মেনু সংগ্রহগুলি ডিজাইনারস্লাইব

— সাইটবার-

Answer 1

বুটস্ট্র্যাপ 3

হ্যাঁ এটা সম্ভব. এই "অফ-ক্যানভাস" উদাহরণটি আপনাকে শুরু করতে সহায়তা করবে।

https://codeply.com/p/esYgHWB2zJ

মূলত আপনাকে একটি বাহ্যিক ডিভের মধ্যে লেআউটটি মোড়ানো দরকার এবং ছোট পর্দার উপর লেআউটটি টগল করতে মিডিয়া ক্যোয়ারীগুলি ব্যবহার করা উচিত।

/* 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

বুটস্ট্র্যাপ 4 এ একটি প্রতিক্রিয়াশীল নাবার সাইডবার "ড্রয়ার" তৈরি করবেন?

Comments

@ ডেলুসিয়া: এটি অ্যান্ড্রয়েডের ক্রোমে কাজ করে। বুটপ্লি নিজেই সঠিকভাবে কাজ করে না, তবে "ভিউ রেন্ডার করতে স্যুইচ করুন" লিঙ্কটিতে ক্লিক করুন।

— ড্যান ড্যাসক্লেস্কু

এখানে সরকারী বুটস্ট্র্যাপ হয় সঙ্গে পার্শ্বদন্ডে ড্যাশবোর্ড টেমপ্লেট

— shaijut

@ স্টম: এটি মোবাইল এবং ট্যাবলেট সংস্করণগুলিতে লুকায় যা সমস্যা।

— ফিউদ্দিন

Answer 2

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

এটি সরকারী উদাহরণ, কারওর জন্য ভাল হতে পারে। এটি তাদের পরীক্ষা-নিরীক্ষার উদাহরণ বিভাগের অধীনে রয়েছে তবে এটি যেহেতু এটি সরকারী তাই এটি বর্তমান বুটস্ট্র্যাপ প্রকাশের সাথে আপডেট হওয়া উচিত।

দেখে মনে হচ্ছে তারা তাদের উদাহরণে ব্যবহৃত একটি অফ ক্যানভাস সিএসএস ফাইল যুক্ত করেছে:

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

এবং কিছু জেএস কোড:

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

Answer 3

সম্পাদনা: বুটস্ট্র্যাপ সাইডবারগুলির জন্য আমি আরও একটি বিকল্প যুক্ত করেছি।

আসলে তিনটি আচার রয়েছে যেখানে আপনি একটি বুটস্ট্র্যাপ 3 সাইডবার তৈরি করতে পারেন। আমি কোডটি যথাসম্ভব সহজ রাখার চেষ্টা করেছি।

স্থির সাইডবার

এখানে আপনি পৃষ্ঠার মতো একই উচ্চতার সাথে বিকাশ করা একটি সাধারণ ফিক্সড সাইডবারের একটি ডেমো দেখতে পারেন

একটি কলামে সাইডবার

আমি একটি সাধারণ কলামের সাইডবারও তৈরি করেছি যা একটি ধারকের ভিতরে দুটি বা তিনটি কলাম পৃষ্ঠায় কাজ করে। এটি দীর্ঘতম কলামটির দৈর্ঘ্য নেয়। এখানে আপনি একটি ডেমো দেখতে পারেন

ড্যাশবোর্ড

আপনি বুটস্ট্র্যাপ ড্যাশবোর্ড google থাকে, তাহলে আপনি যেমন, একাধিক উপযুক্ত ড্যাশবোর্ড জানতে পারেন এই এক । তবে, তাদের বেশিরভাগের জন্য প্রচুর কোডিং প্রয়োজন। আমি একটি ড্যাশবোর্ড তৈরি করেছি যা অতিরিক্ত জাভাস্ক্রিপ্ট ছাড়াই কাজ করে (বুটস্ট্র্যাপ জাভাস্ক্রিপ্টের পাশে)। এখানে একটি ডেমো রয়েছে

তিনটি উদাহরণের জন্য আপনাকে অবশ্যই jquery, বুটস্ট্র্যাপ সিএসএস, জেএস এবং থিম.কম ফাইল অন্তর্ভুক্ত করতে হবে।

স্লাইড বার

আপনি যদি চান যে একটি বোতাম টিপে সাইডবারটি লুকানো থাকে তবে এটি কেবলমাত্র একটি সামান্য জাভাস্ক্রিপ্ট দ্বারা সম্ভব। এখানে একটি ডেমো

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-এর বাম দিকের বারটি সম্ভব।

যেমন বুটস্ট্র্যাপ.জেএস দ্বারা উল্লিখিত:

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

এর অর্থ, শ্রেণীর "প্রস্থ "কে লক্ষ্য হিসাবে যুক্ত করা, উচ্চতার পরিবর্তে প্রস্থে প্রসারিত হবে:

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

Comments

বাম মেনুটি কেবল ৮০% আড়াল করার জন্য এবং কীভাবে পুনরায় মেনুটি প্রসারিত করতে একটি ছোট বোতাম দেখানোর জন্য আপনি এটি করবেন?

— প্যাথ্রোস