बूटस्ट्रैप

का उपयोग कर एकाधिक HTML पृष्ठों पर navbar प्रदर्शित करना मैं थोड़ी देर के लिए इसका उत्तर खोज रहा हूं। मैं एक पोर्टफोलियो वेबसाइट बनाने के लिए बूटस्ट्रैप ढांचे का उपयोग कर रहा हूँ। मैं एक फिक्स्ड-टॉप नेवबार के साथ अपने index.html पूरा कर लिया है:बूटस्ट्रैप

This is the home page. The top shows the navbar.

यह नेवबार एक "जैव" पृष्ठ को "परियोजनाओं" ड्रॉपडाउन मेनू, और एक "संपर्क" पृष्ठ के लिंक हों। मैंने इनमें से प्रत्येक के लिए अलग-अलग HTML पेज बनाए हैं (उदा: मेरे पास index.html, bio.html, contact.html, video.html, design.html, आदि हैं)। हालांकि, जब मैं लिंक दबाता हूं, तो वे navbar नहीं दिखाते हैं, न ही कोई अन्य स्वरूपण।

मैं ग्राफिक डिजाइन एचटीएमएल के लिए इस कोड है:

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Graphic Design</title> 
</head> 
<body> 
    <h1>Graphic Design</h1> 
    <p>Creating</p> 
</body> 
</html>

और यही दिखाता है: graphicdesign.html page

मैं अगर वहाँ नेवबार हर पर संगत के लिए एक तरीका है जानना चाहता था एक परियोजना में एचटीएमएल पेज।

मैंने यह देखा है: Bootstrap Navbar in multiple pages लेकिन मुझे jQuery का उपयोग करके इसे लोड करने में कठिनाई हो रही है।

मैंने यह भी देखा है: Do I have to duplicate the navbar code on every page with Bootstrap? लेकिन मैं PHP का उपयोग नहीं करना चाहता।

आपके समय के लिए धन्यवाद।

स्रोत

2017-01-28 Abby

प्रत्येक पृष्ठ में अपने navbar को शामिल करने के लिए आपको php या javascript का उपयोग करना होगा। अन्यथा आपको बस प्रत्येक पृष्ठ में एचटीएमएल मार्क-अप पेस्ट करना होगा। सिर्फ इस दो steps--

एचटीएमएल

<div class="container-fluid" id="footer"> 

</div>

JAVASCRIPT

<script type="text/javascript"> 
$(function(){ 
$("#footer").load("footer.html"); 
}); 
    </script>

नोट का प्रयास करें: सुनिश्चित करें कि आप footer.html फ़ाइल में बूटस्ट्रैप CDN s जोड़ने नहीं कर रहे हैं।

संपादित

आंद्रेई द्वारा टिप्पणी में उल्लेख किया है, हाँ यह पता चला है कि मेरा उत्तर jquery की आवश्यकता है बहुत महत्वपूर्ण है।

jquery का उपयोग करने के लिए आपको अपने head टैग में निम्नलिखित सीडीएन का उपयोग करने की आवश्यकता है या आप jquery डाउनलोड कर सकते हैं और इसे अपने स्वयं के फाइल सिस्टम से सेवा कर सकते हैं।

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

स्रोत

2017-01-29 00:03:59 neophyte

धन्यवाद। मैं अब यह कोशिश कर रहा हूँ। एचटीएमएल मार्कअप की प्रतिलिपि बनाने और चिपकाने के बारे में आपके दूसरे बिंदु को संबोधित करने के लिए, मैंने पूरे इंडेक्स.html कोड को अन्य पृष्ठों में कॉपी और पिछले कर दिया, लेकिन वे इंडेक्स के रूप में सही ढंग से/समान नहीं दिख रहे थे। – Abby

ग्रीट उम्मीद है कि यह मदद करता है! – neophyte

डाउनवोट! जवाब के साथ क्या लिखा है! – neophyte

सबसे पहले, मैं आपको अपने प्रश्न पर बधाई देता हूं।
यह प्रोग्रामिंग में मौलिक जरूरतों में से एक और सबसे महत्वपूर्ण सिद्धांतों के पते: DRY है, जो विकास और सबसे आम वेब प्रौद्योगिकियों के कार्यान्वयन के पीछे मुख्य कारण है, इस तरह के php या CSS (जो LESS या द्वारा आगे की सूखी-एड के रूप में किया जा सकता है SASS)।

php, उदाहरण के लिए, आविष्कार किया गया था और तुरंत व्यापक रूप से ज्यादातर इस "बहुत बढ़िया नए (उस समय) सुविधा" की वजह से अपनाया: आपको बस इतना करना था .php और आप के लिए .html से विस्तार बदल था अन्य भागों का उपयोग शामिल नहीं कर पाए:

<?php include "part.html"; ?>

आमतौर पर टेम्पलेट/घटक लोड हो रहा है के रूप में संदर्भित, यह भी एक आम कार्य JavaScript का उपयोग कर रहा है। काफी कुछ पुस्तकालय इसे प्रदान करते हैं। उदाहरण के लिए jQuery$.load() प्रदान करता है जबकि AngularJS आपको directive एस का उपयोग करने में सक्षम बनाता है ताकि template एस शामिल हो सके, जिसे या तो इनलाइन या बाहरी HTML के रूप में परिभाषित किया जा सकता है। वास्तव में, सभी पैकेज निर्भरता प्रबंधक और सभी ढांचे इसे एक रूप में या किसी अन्य रूप में प्रदान करते हैं, क्योंकि आज का वेब पुन: प्रयोज्य घटकों के बिना असंभव है।

आप अधिक विकल्प खोजने के लिए चाहते हैं, तो मैं सुझाव है कि आप html, include, templates, loading और components के संयोजन के लिए खोज शुरू करते हैं।

चेतावनी दीजिये, अधिकांश JavaScript पुस्तकालय उपरि के साथ आते हैं। सबसे लोकप्रिय, हालांकि, आमतौर पर कुछ लचीलापन प्रदान करते हैं, जिससे आप चुनिंदा रूप से केवल अपनी इच्छित कार्यक्षमता का निर्माण कर सकते हैं।

सहित टेम्पलेट्स, सबसे शायद, कोर HTML का हिस्सा है, तो (और जब) माइक्रोसॉफ्ट के HTML Components वर्ल्ड वाइड वेब कंसोर्टियम को प्रस्तुत करने अपनाई जाएगी, <component> टैग का उपयोग हो जाएगा।
वर्तमान में, यह AngularJS एस type:"E" निर्देशों का उपयोग कर संभव है।

स्रोत

2017-01-29 00:22:20

मुझे डाउन-वोट का कारण जानना अच्छा लगेगा और वास्तव में डाउन-मतदाता क्या सोचता है या तो मेरे जवाब के बारे में गलत या अपूर्ण है। मुझे इसे सुधारने में खुशी होगी। –

मुझे यह पसंद है कि यह उत्तर इस समस्या को अपने मूल पर कैसे संबोधित करता है। मैं यहां कुछ स्थिर साइट जेनरेटर भी सूचीबद्ध करूंगा।हालांकि मुझे लगता है कि यह ध्यान देने योग्य है कि PHP और एसएसजी की तुलना में अतिरिक्त पुस्तकालयों और HTTP अनुरोधों की आवश्यकता के कारण वर्तमान में सभी जावास्क्रिप्ट समाधान ओवरहेड के साथ आते हैं। * - (डाउनवोट नहीं) * – ppajer

-2

बस index.html (या जो भी आपकी फ़ाइल कहा जाता है) से नेविबार के अपने एचटीएमएल मार्कअप की प्रतिलिपि बनाएँ और उसे किसी अन्य पृष्ठ पर पेस्ट करें। चीजों को जटिल मत करो। नीचे दी गई तस्वीर देखें।

स्रोत

2017-02-20 16:19:34 LXhelili

तो मेरी वेबसाइट पर 5, 10, 50, 100, एक्स पृष्ठों की मात्रा हो सकती है, मुझे अपने संपादित किए गए नेविबार कोड को प्रत्येक * * में कॉपी/पेस्ट करना होगा ?? यह बेहद संदिग्ध लगता है। – BruceWayne

बूटस्ट्रैप

उत्तर

संबंधित मुद्दे