बूटस्ट्रैप 3.0

Question

में चिपचिपा साइड नेविबार बनाएं, मैं अपनी वेब साइट में बाईं तरफ चिपचिपा साइड नवरबार बनाना चाहता हूं। & मैं बूटस्ट्रैप 3 आरसी 2 का उपयोग कर रहा हूं। मुझे नहीं पता कि इसे कैसे बनाया जाए।

Answer 1

ट्विटर के बूटस्ट्रैप 3 का डिफ़ॉल्ट Navbar क्षैतिज है। इसके चार प्रकार हैं, डिफ़ॉल्ट, स्थैतिक शीर्ष और निश्चित शीर्ष और नीचे, इस पृष्ठ का उदाहरण अनुभाग देखें: http://getbootstrap.com/getting-started

लेकिन निश्चित रूप से आप ट्विटर के बूटस्ट्रैप 3 का उपयोग (बाएं) पक्ष नेविगेशन बनाने के लिए कर सकते हैं। कृपया पहले डॉक्स पढ़ें, इसमें कई उदाहरण हैं। अपने विचार का एक स्केच बनाएं, इसे उदाहरणों के साथ कोड करने का प्रयास करें। अपने कोड की समस्या निवारण के लिए यहां प्रश्न पूछें। एफ़िक्स (http://getbootstrap.com/javascript/#affix) और एनएवी सेक्शन (http://getbootstrap.com/components/#nav) पहले शुरू करें।

हो सकता है कि यह भी जाँच: how to make bootstrap off canvas nav overlap content instead of move it

Answer 2

आप जब साइडबार स्थिर हो जाती है के लिए सीएसएस परिभाषित करने की जरूरत ...

उदाहरण के लिए,

#sidebar.affix { 
    position: fixed; 
    top:25px; 
    width:228px; 
    } 

यहाँ एक उदाहरण काम कर रहा है: http://bootply.com/73864

Answer 3

चिपचिपा नौसेना जिसे आप रेफर कर रहे हैं, संभव है एएफ के लिए धन्यवाद ix प्लगइन। आप view the bootstrap documentation on this कर सकते हैं।

यह Jsfiddle में एक काम करने वाली चिपचिपा साइडबार है (परिणाम विंडो को ठीक से काम करने के लिए बड़ा बनाएं)। एक ही साइडबार बनाने के लिए पढ़ें।

1. अपनी साइडबार के लिए HTML बनाएं। इस उदाहरण के लिए हम एक कुएं के भीतर बूटस्ट्रैप्स एनवी-गोलियों का उपयोग करेंगे।

<div class="row"> 
    <div class="col-sm-3"> 
    <div class="well bs-sidebar affix" id="sidebar"> 
     <ul class="nav nav-pills nav-stacked"> 
     <li><a href="#">Link 1</a></li> 
     <li><a href="#">Link 2</a></li> 
     </ul> 
    </div> <!--well bs-sidebar affix--> 
    </div> <!--col-sm-3--> 
    <div class="col-sm-9"> 
    <p>Main body content goes here</p> 
    </div> <!--col-sm-9--> 
</div> <!--row--> 

2. अपने js में प्रत्यय प्लगइन फाइल

$('#sidebar').affix({ 
    offset: { 
    top: $('header').height() 
    } 
}); 

आप के साथ जो कुछ भी साइडबार ऊपर हो जाएगा 'शीर्षक के बदलने की आवश्यकता आह्वान। यदि आप एक बूटस्ट्रैप नेवबार का उपयोग कर रहे हैं और यह साइडबार सीधे ऊपर है, तो, वर्ग आप नेवबार के लिए उपयोग कर रहे हैं के साथ 'शीर्षक' की जगह ले उदाहरण के लिए: प्रत्यय वर्ग के लिए सीएसएस

top: $('.navbar navbar-default').height() 

3. जोड़ें

उत्तरदायी लेआउट के लिए गैर उत्तरदायी लेआउट

.bs-sidebar.affix { 
    width: 263px; 
    top: 25px; 
} 

सीएसएस के लिए

सीएसएस

@media (min-width: 768px) { 
    .bs-sidebar.affix { 
    width: 158px; 
    top: 25px; 
    } 
} 

@media (min-width: 992px) { 
    .bs-sidebar.affix { 
    width: 213px; 
    position: fixed; 
    top: 25px; 
    } 
} 

@media (min-width: 1200px) { 
    .bs-sidebar.affix { 
    width: 263px; 
    } 
}