बूटस्ट्रैप उन लोगों के लिए एक अद्भुत सीएसएस ढांचा है जो डिजाइन, सीएसएस के साथ संघर्ष करते हैं, या जल्दी से कुछ बनाने की जरूरत है।  लेकिन दस्तावेज़ से कॉपी और पेस्ट करने वाले बूटस्ट्रैप घटकों में खामियां हैं।  ये खामियां आपके डिजाइनों को रोक रही हैं!  यहां उन कमियों को ठीक करने और बूटस्ट्रैप को बेहतर बनाने के लिए 5 डिज़ाइन युक्तियां दी गई हैं।  1) अलर्ट पर ध्यान दें  उपयोगकर्ता का ध्यान आकर्षित करने के लिए डार्क बॉर्डर और svg आइकन जोड़ें।    <div class="alert alert-primary rounded-0 border-0 border-start border-primary border-4" role="alert"> <p class="fs-6 mb-0 d-flex align-items-center">  <svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="16" height="16" viewBox="0 0 20 20" fill="currentColor"> <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z" /> </svg> <span>A simple primary alert—check it out!</span> </p> </div>  2) टेबल्स का आपके डेटाबेस से मेल नहीं होना चाहिए  HTML तालिकाओं को आपके डेटाबेस संरचना की एक प्रति होने की आवश्यकता नहीं है। कॉलम नाम, आईडी निकालें, और जब यह समझ में आता है तो फ़ील्ड को गठबंधन करें।    <div class="border-0 shadow bg-white rounded"> <h3 class="fs-5 px-3 pt-3">Users</h3> <div class="px-2 pt-2"> <table class="table table-borderless fs-6"> <tbody> <tr> <td>Mark Otto</td> <td class="text-end text-muted">@mdo</td> </tr> <tr class="bg-light rounded-4"> <td>Jacob Thornton</td> <td class="text-end text-muted">@fat</td> </tr> <tr> <td>Larry the Bird</td> <td class="text-end text-muted">@twitter</td> </tr> </tbody> </table> </div> <div class="p-3 bg-light rounded d-flex justify-content-end"> <buttons class="btn btn-link text-secondary text-decoration-none">Cancel</buttons> <buttons class="btn btn-primary">View</buttons> </div> </div>  3) सेकेंडरी बटन को बैकग्राउंड कलर की जरूरत नहीं होती  प्राथमिक क्रियाओं को पृष्ठभूमि का रंग देने और द्वितीयक क्रियाओं को कोई पृष्ठभूमि रंग देने से महत्व की एक विरासत स्थापित नहीं होगी।    <div class="card border-0 shadow p-2"> <div class="card-body"> <h5 class="card-title">Special offer</h5> <p class="card-text">Are you sure you want to cancel your subscription? We have a special offer if you want to stick around!</p> <buttons class="btn btn-primary">View Details</buttons> <buttons class="btn btn-link text-secondary text-decoration-none">Cancel</buttons> </div> </div>  4) सब कुछ लेबल करना बंद करो!  देव मूल्यों को लेबल करना पसंद करते हैं। इसे रोक! जानकारी को इस तरह प्रदर्शित करें जैसे कि वह किसी पुस्तक का एक वाक्य हो, न कि कुंजी मान युग्म।    <div class="card border-0 shadow"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h1 class="card-title fs-5">Rocky Mount, MI</h1> <h2 class="card-title fs-6 text-muted fw-light">100 miles away</h2> <p class="card-text fw-light"><span class="fw-bold">$150</span> night</p> </div> </div>  5) छाया> सीमाएँ  कार्ड बॉर्डर अक्सर भद्दे लगते हैं। छाया तत्वों पर जोर देती है और पृष्ठ को गहराई देती है, जिससे तत्व उपयोगकर्ता के करीब महसूस करता है।    <div class="card border-0 shadow p-2"> <div class="card-body"> <h5 class="card-title fs-5">Collaborate</h5> <p class="card-text"> Share your work with hundreds of like minded individuals around the world! </p> </div> </div>  अधिक बूटस्ट्रैप डिजाइन युक्तियाँ ??  अगर आपको यह पसंद आया, तो मेरे नए प्रोजेक्ट -   की जाँच करने पर विचार करें बेटर बूटस्ट्रैप  वहां आपको इस लेख की तरह अधिक बूटस्ट्रैप डिज़ाइन युक्तियों वाली एक निःशुल्क पुस्तक मिलेगी।  ️ - वेस

Twitter

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

सफल क्लाउड माइग्रेशन के लिए संपूर्ण गाइड: रणनीतियाँ और सर्वोत्तम अभ्यास

अपने वर्कफ़्लो को 10 गुना बेहतर कैसे बनाएं: 17 ज़रूरी ऐप्स

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

जलयात्रा: डेटा झीलों के साथ उत्पादन-ग्रेड आरएजी अनुप्रयोगों का विकास

सफल क्लाउड माइग्रेशन के लिए संपूर्ण गाइड: रणनीतियाँ और सर्वोत्तम अभ्यास

अपने वर्कफ़्लो को 10 गुना बेहतर कैसे बनाएं: 17 ज़रूरी ऐप्स

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

जलयात्रा: डेटा झीलों के साथ उत्पादन-ग्रेड आरएजी अनुप्रयोगों का विकास

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps