यदि आप किसी बड़े प्रोजेक्ट पर काम कर रहे हैं, या आधुनिक फ्रंटएंड टूल के साथ काम कर रहे हैं, तो आप प्रोजेक्ट मैनेजर के माध्यम से इंस्टॉल करना चाह सकते हैं। हमारे लिए सौभाग्य की बात है कि यह सरल भी है! अपने टर्मिनल में, यदि एनपीएम का उपयोग कर रहे हैं तो बस एनपीएम इंस्टॉल बूटस्ट्रैप लिखें, या यार्न का उपयोग करते हुए यार्न ऐड बूटस्ट्रैप लिखें। इंस्टॉल करने के बाद आप बूटस्ट्रैप के सीएसएस और जावास्क्रिप्ट को अपनी मुख्य सीएसएस और जेएस फाइलों में सम्मानपूर्वक आयात करना चाहेंगे:

ग्रिड प्रणाली

बूटस्ट्रैप की सबसे शक्तिशाली विशेषताओं में से एक इसकी ग्रिड प्रणाली है। यह आपको प्रतिक्रियाशील लेआउट बनाने की अनुमति देता है जो स्वचालित रूप से विभिन्न स्क्रीन आकारों में समायोजित हो जाते हैं।

संरचना

सामग्री को व्यवस्थित करने के लिए ग्रिड 12-कॉलम संरचना पर आधारित है। इसकी मूल संरचना कुछ इस तरह दिख सकती है:

आकार

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

ब्रेकप्वाइंट

बूटस्ट्रैप ग्रिड पहले मोबाइल है, जिसका अर्थ है कि इसे बड़े उपकरणों तक स्केल करने से पहले मोबाइल उपकरणों के लिए बनाया गया है। इस वजह से, बूटस्ट्रैप में ऐसी कक्षाएं हैं जो परिभाषित करती हैं कि कॉलम विभिन्न स्क्रीन आकारों में कैसे कार्य करते हैं। ये हैं:

इस उदाहरण में, पहला कॉलम छोटी स्क्रीन पर पूरी चौड़ाई लेता है, लेकिन मध्यम या बड़ी स्क्रीन पर केवल आठ ग्रिड इकाइयाँ लेता है। दूसरा छोटे स्क्रीन पर आधी चौड़ाई लेगा, और मध्यम या बड़े पर केवल चार इकाइयाँ।

सामान्य घटक

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

टाइपोग्राफी

हम पाठ के बारे में बात करके शुरुआत करेंगे, क्योंकि आपके उपयोगकर्ताओं को विश्वास करने के लिए पढ़ने की ज़रूरत है। टाइपोग्राफी कक्षाएं शीर्षकों से लेकर मुख्य पाठ और सूचियों तक सुसंगत पाठ शैलियों को परिभाषित करना आसान बनाती हैं। उदाहरण के लिए, विभिन्न शीर्षकों को उनके प्रदर्शन वर्ग द्वारा नोट किया जाता है:

जैसा कि ऊपर देखा गया है, आप बॉडी टेक्स्ट को संशोधित करने के लिए उपयोगिता वर्गों के साथ पैराग्राफ टेक्स्ट को भी परिभाषित कर सकते हैं।

बटन

प्रत्येक वेबसाइट या ऐप को बटन की आवश्यकता होती है! बूटस्ट्रैप बॉक्स से विभिन्न प्रकार की बटन शैलियाँ प्रदान करता है। उनकी कक्षाओं को इस प्रकार परिभाषित किया गया है:

नेवबार

बूटस्ट्रैप का नेवबार घटक संरेखण, ड्रॉपडाउन और बहुत कुछ के लिए अंतर्निहित कक्षाओं के साथ आता है!

इस उदाहरण में, नेवबार छोटी स्क्रीन पर ढह जाएगा।

उपयोगिता वर्ग

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

अंतर

उपयोगकर्ता की पठनीयता के लिए विकास में रिक्ति अत्यंत महत्वपूर्ण है। शुक्र है, बूटस्ट्रैप हमें तत्वों के मार्जिन और पैडिंग को समायोजित करने के लिए कक्षाएं देता है। वे सभी {संपत्ति}{पक्षों}-{आकार} के समान प्रारूप का पालन करते हैं।

प्रदर्शन

प्रदर्शन उपयोगिताएँ तत्वों की दृश्यता और लेआउट को नियंत्रित करने में मदद करती हैं। इनका उपयोग तत्वों के व्यवहार को दिखाने, छिपाने या बदलने के लिए किया जा सकता है। प्रदर्शन वर्गों में शामिल हैं:

बूटस्ट्रैप इन कक्षाओं के उत्तरदायी संस्करण भी प्रदान करता है जो ब्रेकप्वाइंट पर लागू होते हैं, जैसे डी-नॉन डी-एमडी-ब्लॉक, यह छोटे स्क्रीन पर एक तत्व को छुपाता है।

पाठ उपयोगिताएँ

बूटस्ट्रैप निम्न प्रकार की कक्षाओं के साथ बड़ी मात्रा में पाठ अनुकूलन प्रदान करता है:

पाठ संरेखण

पाठ रैपिंग

पाठ का रंग

निष्कर्ष

बूटस्ट्रैप एक शक्तिशाली और लचीला ढांचा है जो डेवलपर्स को कुशलतापूर्वक उत्तरदायी वेबसाइट बनाने की अनुमति देता है। इन मूलभूत अवधारणाओं में महारत हासिल करके, आप अपने वर्कफ़्लो को सुव्यवस्थित करने में सक्षम होंगे और कस्टम सीएसएस और लेआउट प्रबंधन के बजाय अपनी साइट के डिज़ाइन और कार्यक्षमता पर अधिक ध्यान केंद्रित करेंगे। तो इसमें गोता लगाएँ! कुछ उदाहरणों के साथ प्रयोग करें और एक अद्भुत ऐप बनाएं!

सूत्रों का कहना है

मुखपृष्ठ > प्रोग्रामिंग > बूटस्ट्रैप मूल बातें

बूटस्ट्रैप मूल बातें

2024-11-01 को प्रकाशित

ब्राउज़ करें:472

Bootstrap Basics

मेरी स्टाइलिंग श्रृंखला के दूसरे भाग में आपका स्वागत है जहां मैं कुछ लोकप्रिय स्टाइलिंग लाइब्रेरी/फ्रेमवर्क पर चर्चा करता हूं। इस ब्लॉग में, हम बूटस्ट्रैप के बारे में जानेंगे। बूटस्ट्रैप एक शक्तिशाली, ओपन सोर्स फ्रंटएंड फ्रेमवर्क है जो सहज ज्ञान युक्त ग्रिड सिस्टम, यूआई घटकों और उपयोगिता की एक विस्तृत श्रृंखला प्रदान करके वेबसाइटों के निर्माण को तेज और आसान बनाता है।

स्थापित करना

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

सीडीएन के माध्यम से बूटस्ट्रैप

सीडीएन, या सामग्री वितरण नेटवर्क का उपयोग करके बूटस्ट्रैप को बहुत जल्दी सेट किया जा सकता है। इस विधि के लिए किसी इंस्टॉलेशन की आवश्यकता नहीं है, बस बूटस्ट्रैप के सीएसएस और जावास्क्रिप्ट लिंक को अपनी HTML फ़ाइल में जोड़ें और आप दौड़ में शामिल हो जाएंगे!
आप अपने HTML के

टैग के अंदर निम्नलिखित CSS लिंक डालेंगे:

उसके बाद, आप समापन

टैग से पहले निम्नलिखित स्क्रिप्ट डालेंगे:

पैकेज मैनेजर के माध्यम से

// Import Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';

// Import Bootstrap JavaScript
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

ग्रिड प्रणाली

संरचना


  
    Column 1
    Column 2
    Column 3

कंटेनर: कंटेनर स्तंभों और पंक्तियों को संरेखित करते हुए रखता है
पंक्ति: पंक्तियाँ स्तंभों को क्षैतिज रूप से एक साथ रखती हैं और समूह बनाती हैं
कॉलम: कॉलम वह हैं जहां आपकी सामग्री रहेगी, प्रत्येक पंक्ति में 12 हो सकते हैं

आकार


  
    100% Width
  
  
    50% Width
    50% Width
  
  
    33.33% Width
    33.33% Width
    33.33% Width

ब्रेकप्वाइंट

xs: 576px से कम स्क्रीन के लिए
sm: 576px से अधिक स्क्रीन के लिए
md: 768px से अधिक स्क्रीन के लिए
lg: 992px से अधिक स्क्रीन के लिए
xl: 1200px से अधिक स्क्रीन के लिए

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


  
    Wide on medium and larger screens
    Narrower on medium and larger screens

सामान्य घटक

टाइपोग्राफी

Heading 1

Heading 2

Heading 3

This is lead text, which stands out from regular paragraph text.

This is regular paragraph text.

This is small text, which stands out from regular paragraph text.

बटन