जब साइट बनाने की बात आती है तो बूटस्ट्रैप में बहुत सारे पूर्ण-स्टैक देवों के हाथ होते हैं। हम में से बहुत से लोग यह नहीं जानते हैं कि Figma का उपयोग कैसे किया जाता है, इस बारे में अनिश्चित हैं कि "डिज़ाइन" क्या अच्छा है, और CSS गुणों के साथ कुशल नहीं हैं।  लेकिन क्या हम डेटाबेस स्कीमा को तैयार करने, अपने नियंत्रकों और मॉडलों का निर्माण करने, हमारे विचारों में Google पर पाए गए बूटस्ट्रैप थीम को थप्पड़ मारने और इसे एक दिन बुलाने में अच्छे हैं।  अंतिम परिणाम आमतौर पर एक व्यक्ति को अपनी साइट बनाने की दक्षता से संतुष्ट लेकिन   छोड़ देता है। परिणाम से असंतुष्ट    - सामान्य पूर्ण-स्टैक देव। "यह ठीक दिखता है, लेकिन हाल ही में देखे गए कुछ अद्भुत डिजाइनर की उस भयानक साइट की तरह नहीं है"  यह लेख आपके बूटस्ट्रैप-थीम वाली साइट के स्वरूप से संतुष्टि प्राप्त करने के लिए   पर एक ट्यूटोरियल है। कार्रवाई योग्य डिज़ाइन युक्तियों  स्थापित करना  मैं इस मुफ्त बूटस्ट्रैप   के साथ शुरुआत करने जा रहा हूं। अब इसे सुधारें! थीम  अपने रंगों का विस्तार करें  अपना रंग पैलेट अपडेट करें  बूटस्ट्रैप एक पूरे रंग के पैलेट के साथ आता है जिसके बारे में आप नहीं जानते होंगे। अन्य कुकी-कटर बूटस्ट्रैप साइटों से अलग दिखने के लिए इसका लाभ उठाएं।   इन रंगों तक पहुँच प्राप्त करने के लिए, हमें बस उन्हें अपनी   बूटस्ट्रैप फ़ाइल में जोड़ना होगा। scss/_variables.scss   $theme-colors: ( "primary": $teal-300, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark ) !default;  या यदि आप बूटस्ट्रैप के लिए npm सेटअप का उपयोग कर रहे हैं, तो अपनी कस्टम sass फ़ाइल को अपडेट करें जो संकलित हो जाती है।   @import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/variables"; $custom-colors: ( primary: $teal-300, ); $theme-colors: map-merge($theme-colors, $custom-colors); @import "../node_modules/bootstrap/scss/bootstrap";  अब हम उस ग्रॉस बूटस्ट्रैप प्राइमरी ब्लू को हमारे गेट स्टार्ट बटन के लिए एक अच्छे सॉफ्ट टील में अपडेट कर सकते हैं। हम   क्लास को हटाकर टेक्स्ट को सफेद से काले रंग में भी बदलना चाहेंगे। यह हल्के पृष्ठभूमि रंग पर पठनीयता के लिए है।  text-white  अपने नायक अनुभाग के शीर्ष पर एक रंग संकेत जोड़ें  हम   माध्यम से नए चैती प्राथमिक रंग के साथ अपने पृष्ठ पर कुछ अतिरिक्त जीवन लाने के लिए नौसेना के शीर्ष पर एक छोटी सी सीमा जोड़ सकते हैं।  सीमा-प्राथमिक के  मूलपाठ  लाइन-ऊंचाई को सामान्य तत्वों में बदलें  एक सूक्ष्म परिवर्तन जिसके बारे में बहुत से लोग नहीं जानते हैं, वह है आपकी लाइन की ऊंचाई को कम करना टेक्स्ट जितना बड़ा होगा। आइए हमारी सीएसएस फ़ाइल में सामान्य HTML तत्वों के लिए डिफ़ॉल्ट लाइन हाइट्स को ओवरराइड करें।     h1 { line-height: 1.1; } h2 { line-height: 1.125; } h3 { line-height: 1.25; } p { line-height: 1.5; }  अद्यतन पत्र रिक्ति  बड़े शीर्षकों में आमतौर पर डिफ़ॉल्ट रूप से बहुत अधिक अक्षर अंतर होते हैं। हमारी CSS फ़ाइल को अपडेट करके अपने h1 और h2 टैग के अक्षर रिक्ति को संक्षिप्त करें जैसा कि हमने लाइन की ऊंचाई के लिए किया था।     h1 { line-height: 1.1; letter-spacing: -0.05em; } h2 { line-height: 1.125; letter-spacing: -0.025em; }  भारी हेडलाइन सपोर्टिंग टेक्स्ट  अब हम नायक में सहायक पाठ को जोड़ सकते हैं। इसके और H1 टैग के बीच का अंतर चरम पर है। हम   क्लास को हटा देंगे और इसे   क्लास देंगे। यह मोटे फ़ॉन्ट वजन के साथ आता है।  लीड fs-5  सारांश  हम इतनी दूर कहाँ हैं...   मैं इस विषय को 1 ब्लॉग पोस्ट में रिफैक्टर करना चाहता था लेकिन यह बहुत अधिक सामग्री है। मैं इसे कई लेखों में विभाजित कर रहा हूं।  लेख 2 के लिए अगले सप्ताह वापस देखें या   पर मेरे न्यूज़लेटर की सदस्यता लें। मैं थीम के फीचर सेक्शन को अपडेट करता रहूंगा और आपके लिए कुछ टिप्स दूंगा। thefreelancedev.com  मैं   की जांच करने की अत्यधिक अनुशंसा करता हूं। इसने एक देव के रूप में डिजाइन पर मेरे दृष्टिकोण को पूरी तरह से बदल दिया। रिफैक्टरिंग यूआई  ️    भी प्रकाशित हो चुकी है।. यहाँ

Google

2022 - HackerNoon Contributor of the Year - Design

2022 - HackerNoon Contributor of the Year - Website Development

I simplify complex topics - like development and design - and cure your imposter syndrome.

.NET remote job board

Nominated for 2022 - HackerNoon Contributor of the Year - Design

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

यह ऑडियो कहानी की मूल भाषा में निर्मित है!

बहुत लंबा; पढ़ने के लिए

Make resilience your competitive advantage

बेहतर दिखने वाली वेबसाइटों के लिए बूटस्ट्रैप सीएसएस को कैसे हैक करें

About Author

टिप्पणियाँ

लेबल

इस लेख में चित्रित किया गया था

Related Stories

HackerNoon एक बहुभाषी प्लेटफ़ॉर्म है: सभी शीर्ष कहानियाँ अब 13 भाषाओं में उपलब्ध हैं

फ्लोकी का वल्लाह भारत के श्रीलंका दौरे के लिए सहयोगी प्रायोजक के रूप में शामिल हुआ

हैकरनून कोडेड: शीर्ष 10 देश जहां हैकरनून सबसे अधिक सक्रिय है

क्रिप्टो ग्रोथ: प्रभावी उपयोगकर्ता व्यक्तित्व बनाना

HackerNoon एक बहुभाषी प्लेटफ़ॉर्म है: सभी शीर्ष कहानियाँ अब 13 भाषाओं में उपलब्ध हैं

फ्लोकी का वल्लाह भारत के श्रीलंका दौरे के लिए सहयोगी प्रायोजक के रूप में शामिल हुआ

हैकरनून कोडेड: शीर्ष 10 देश जहां हैकरनून सबसे अधिक सक्रिय है

क्रिप्टो ग्रोथ: प्रभावी उपयोगकर्ता व्यक्तित्व बनाना

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps