ফ্লুইড টুইটার বুটস্ট্র্যাপ ২.০ এ স্থির সাইডবার নেভিগেশন

Question 1

তরল বিন্যাসে স্ক্রোলের জন্য সাইডবার নেভিগেশন সর্বদা স্থির করা কি সম্ভব?

Question 2

দ্রষ্টব্য: একটি বুটস্ট্র্যাপ jQuery প্লাগইন রয়েছে যা এটি করে এবং আরও অনেক কিছু যা এই উত্তরটি লেখার (প্রায় দু'বছর আগে) আফিক্স নামে পরিচিত হওয়ার পরে কয়েকটি সংস্করণ চালু হয়েছিল । আপনি যদি বুটস্ট্র্যাপ ২.০.৪ বা তার চেয়ে কম ব্যবহার করেন তবে এই উত্তরটি তখনই প্রযোজ্য।

হ্যাঁ, কেবল আপনার সাইডবারের জন্য একটি নতুন নির্দিষ্ট বর্গ তৈরি করুন এবং বাম মার্জিনটি তৈরি করতে আপনার সামগ্রী ডিভিতে একটি অফসেট ক্লাস যুক্ত করুন:

সিএসএস

.sidebar-nav-fixed {
    padding: 9px 0;
    position:fixed;
    left:20px;
    top:60px;
    width:250px;
}

.row-fluid > .span-fixed-sidebar {
    margin-left: 290px;
}

ডেমো: http://jsfiddle.net/U8HGz/1/show/ এখানে সম্পাদনা করুন: http://jsfiddle.net/U8HGz/1/

হালনাগাদ

প্রতিক্রিয়াশীল বুটস্ট্র্যাপ শীট সমর্থন করতে আমার ডেমো স্থির করে, এখন এটি বুটস্ট্র্যাপের প্রতিক্রিয়াশীল বৈশিষ্ট্য সহ প্রবাহিত।

দ্রষ্টব্য: এই ডেমোটি শীর্ষ ফিক্সড নভবারের সাথে প্রবাহিত হয়, সুতরাং উভয় উপাদান position:staticস্ক্রিনের আকারে পরিবর্তন হয়ে যায়, আমি নীচে অন্য একটি ডেমো রেখেছি যা মোবাইল ভিউয়ের জন্য স্ক্রিনটি ড্রপ না হওয়া পর্যন্ত স্থির সাইডবারটি বজায় রাখে।

সিএসএস

.sidebar-nav-fixed {
     position:fixed;
     top:60px;
     width:21.97%;
 }

 @media (max-width: 767px) {
     .sidebar-nav-fixed {
         width:auto;
     }
 }

 @media (max-width: 979px) {
     .sidebar-nav-fixed {
         position:static;
        width: auto;
     }
 }

এইচটিএমএল

<div class="container-fluid">
<div class="row-fluid">
 <div class="span3">
   <div class="well sidebar-nav sidebar-nav-fixed">
    ...
   </div><!--/.well -->
 </div><!--/span-->
 <div class="span9">
    ...
 </div><!--/span-->
</div><!--/row-->

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

ডেমো , এখানে সম্পাদনা করুন ।

^{গৌণ দ্রষ্টব্য: স্থির সাইডবারের প্রস্থে প্রায় 10px / 1% পার্থক্য রয়েছে, কারণ এটি স্প্যান 3 ধারক ডিভ থেকে প্রস্থটি উত্তরাধিকারসূত্রে পায় না কারণ এটি স্থির হয়েছে আমাকে একটি নিয়ে আসতে হয়েছিল প্রস্থ। এটি যথেষ্ট কাছাকাছি।}

গ্রিডটি ছোট স্ক্রিন / মোবাইল ভিউয়ের জন্য ড্রপ না হওয়া পর্যন্ত আপনি সাইডবারটি স্থির রাখতে চাইলে এখানে আরও একটি পদ্ধতি রয়েছে।

সিএসএস

.sidebar-nav-fixed {
    position:fixed;
    top:60px;
    width:21.97%;
}

@media (max-width: 767px) {
    .sidebar-nav-fixed {
        position:static;
        width:auto;
    }
}

@media (max-width: 979px) {
    .sidebar-nav-fixed {
        top:70px;
    }
}

ডেমো , এখানে সম্পাদনা করুন ।

Question 3

সর্বশেষতম বুস্ট্র্যাপ (২.১.০) এ জাতীয় অ্যাপ্লিকেশন, বিশেষ করে FYI এর জন্য একটি নতুন জেএস "affix" বৈশিষ্ট্য রয়েছে।

Question 4

এটি প্রতিক্রিয়াশীল ওয়েব ডিজাইনটিকে স্ক্রু করবে। মিডিয়া ক্যোয়ারিতে স্থির দিকের বারটি মোড়ানো ভাল।

সিএসএস

@media (min-width: 768px) { 
  .sb-fixed{
    position: fixed;
  } 
}

এইচটিএমএল

<div class="span3 sb-fixed">
   <div class="well sidebar-nav">
      <!-- Sidebar Contents -->
   </div>
</div>

এখন সাইডবারটি কেবলমাত্র স্থির, ভিউপটটি যদি বড় হয় তবে 768px।

Question 5

জাভাস্ক্রিপ্ট ছাড়া এটি সম্ভব নয়। আমি affix.js খুব জটিল মনে করি, তাই আমি বরং ব্যবহার করি:

স্টিকিফ্লোট

Question 6

আমি আন্দ্রেসের উত্তর দিয়ে শুরু করেছিলাম এবং এর মতো একটি স্টিকি সাইডবার পেয়ে শেষ করেছি:

এইচটিএমএল:

<div class="span3 sidebar-width">
  <div class="well sidebar-nav-fixed">
    Sidebar
  </div>
</div>

<div class="span9 span-fixed-sidebar">
  Content
</div> <!-- /span -->

সিএসএস:

.sidebar-nav-fixed {
  position:fixed;
}

জেএস / জিকুয়েরি:

sidebarwidth = $(".sidebar-width").css('width');
$('.sidebar-nav-fixed').css('width', sidebarwidth);
contentmargin = parseInt(sidebarwidth) + 60;
$('.span-fixed-sidebar').css('marginLeft', contentmargin);

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

Question 7

খুব সহজেই ফিক্স এনএভি বা আপনার যে সমস্ত ট্যাগ ট্যাগ চান তা পাওয়া যায়। আপনার যা দরকার তা হ'ল এটির মতো আপনার ফিক্স ট্যাগটি লিখতে এবং এটি আপনার দেহের বিভাগে রেখে দেওয়া

   <div style="position: fixed">
       test - try  scroll again. 
   </div>

Question 8

বর্তমান বুটস্ট্র্যাপ সংস্করণ (৩.৩.২) সহ নেভিগেশনের জন্য একটি নির্দিষ্ট পার্শ্বদন্ডটি অর্জন করার একটি দুর্দান্ত উপায় রয়েছে।

এই সমাধানটি পুনরায় প্রবর্তিত ধারক-তরল শ্রেণীর সাথেও ভাল কাজ করে যার অর্থ একটি প্রতিক্রিয়াশীল পূর্ণ-স্ক্রীন বিন্যাস সহজেই সম্ভব।

সাধারণত আপনার নির্দিষ্ট প্রস্থ এবং মার্জিন ব্যবহার করতে হবে বা নেভিগেশন সামগ্রীটি ওভারল্যাপ করবে, তবে খালি স্থানধারক কলামের সাহায্যে সামগ্রীটি সর্বদা সঠিক স্থানে থাকে।

নীচের সেটআপটি যখন আপনি উইন্ডোটিকে 768px এর চেয়ে কম আকারে পরিবর্তন করেন এবং স্থির ন্যাভিগেশন ছেড়ে দেন তখন সামগ্রীটি চারপাশে আবৃত হয়।

কার্যকারী উদাহরণের জন্য http://www.bootply.com/ePvnTy1VII দেখুন ।

সিএসএস

@media (min-width: 767px) { 
    #navigation{
        position: fixed;
    }
}

এইচটিএমএল

<div class="container-fluid">
 <div class="row">
  <div id="navigation" class="col-lg-2 col-md-3 col-sm-3">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 1</a></li>
    </ul>
  </div>

  <div class="col-lg-2 col-md-3 col-sm-3 hidden-xs">
    <!-- Placeholder - keep empty -->
  </div> 

  <div id="main" class="col-lg-10 col-md-9 col-sm-9 fill">
     ...
     Huge Content
     ...
  </div> 
 </div>
</div>