बूटस्ट्रैप सीएसएस के बारे में सबसे अच्छी चीजों में से एक यह है कि यह इसके प्रलेखन में घटक उदाहरणों के साथ आता है।  लेकिन इन उदाहरणों में खामियां हैं। डिजाइन की खामियां।  सौभाग्य से, उन्हें आसानी से थोड़े डिज़ाइन के ज्ञान और आउट-ऑफ-द-बॉक्स बूटस्ट्रैप कक्षाओं के साथ तय किया जा सकता है।  1) एक गर्म, नरम अनुभव के लिए गोलियों को फिर से काम करें  बूटस्ट्रैप गोली रंग कठोर हैं। आप   CSS वैरिएबल का उपयोग कर सकते हैं जो बूटस्ट्रैप के साथ आता है। यह बेहतर कंट्रास्ट बनाने के लिए बैकग्राउंड कलर को सॉफ्ट करेगा।  --bs-bg-opacity   <span class="badge rounded-pill text-primary bg-primary" style="--bs-bg-opacity: .20;">Primary</span> <span class="badge rounded-pill text-secondary bg-secondary" style="--bs-bg-opacity: .20;">Secondary</span> <span class="badge rounded-pill text-success bg-success" style="--bs-bg-opacity: .20;">Success</span> <span class="badge rounded-pill text-danger bg-danger" style="--bs-bg-opacity: .20;">Danger</span>  2) सूची समूहों को खिड़की से बाहर फेंक दें  वे बदसूरत हैं। मानक HTML सूचियों का उपयोग करें। आप अधिक ध्यान आकर्षित करने के लिए मानक सूची बुलेट के बजाय एसवीजी भी जोड़ सकते हैं।    <div class="card border-0 shadow p-2"> <div class="card-body"> <h3 class="fs-5">Some items we sell</h3> <ul class="" style="list-style: none; list-style-position: outside; padding-left: 0px;"> <li class="d-flex align-items-center mb-1"> <svg xmlns="http://www.w3.org/2000/svg" class="me-2 text-primary" height="16" width="16" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> </svg> An item </li> <li class="d-flex align-items-center mb-1"> <svg xmlns="http://www.w3.org/2000/svg" class="me-2 text-primary" height="16" width="16" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> </svg> A second item </li> <li class="d-flex align-items-center mb-1"> <svg xmlns="http://www.w3.org/2000/svg" class="me-2 text-primary" height="16" width="16" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> </svg> A third item </li> </ul> </div> </div>  3) ड्रॉपडाउन को एक छाया और सांस लेने के लिए कुछ जगह दें।  ड्रॉपडाउन में   क्लास के साथ शैडो जोड़ें। यह इसे गहराई और आभास देता है कि यह उपयोगकर्ता के करीब है। सूची को बटन को ओवरलैप करने से रोकने के लिए   के साथ एक छोटा सा मार्जिन जोड़ें।  शैडो एमटी -2   <div class="bg-white p-4 shadow d-flex justify-content-center" style="height: 200px;"> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </button> <ul class="dropdown-menu shadow mt-2" aria-labelledby="dropdownMenuButton1"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div> </div>  4) कार्ड पर छाया और अतिरिक्त पैडिंग का प्रयोग करें  कार्ड बॉर्डर अक्सर भद्दे लगते हैं। छाया तत्वों पर जोर देती है और पृष्ठ को गहराई देती है। अपनी कक्षा में छाया जोड़ने के लिए   वर्ग का उपयोग करें और   वर्ग के साथ पैडिंग बढ़ाएं ताकि इसे कुछ और आंतरिक अंतर दिया जा सके।  छाया p-2   <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>  5) HTML टेबल को उबाऊ नहीं होना चाहिए  टेबल्स को आपके डेटाबेस का प्रत्यक्ष 1-1 प्रतिनिधित्व नहीं होना चाहिए। अगर यह समझ में आता है, तो कॉलम गठबंधन करें और हेडर छुपाएं। यह इसे डेटाबेस की तरह कम और UI घटक की तरह अधिक महसूस कराता है।    <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>  अधिक बूटस्ट्रैप युक्तियाँ ??  अगर आपको यह पसंद आया, तो मेरे नए प्रोजेक्ट -   की जाँच करने पर विचार करें बेटर बूटस्ट्रैप  वहां आपको 15 बूटस्ट्रैप डिज़ाइन युक्तियों वाली एक निःशुल्क पुस्तक मिलेगी। पूरी किताब इस साल के अंत में सामने आएगी।

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

5 आवश्यक बूटस्ट्रैप सीएसएस घटक और उनके डिजाइन में सुधार कैसे करें

About Author

टिप्पणियाँ

लेबल

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

Related Stories

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

He/Him/Master of Discovery

उपयोगकर्ता-केंद्रित क्रिप्टो उत्पाद बनाना: ग्राहक प्रतिक्रिया का महत्व

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

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

He/Him/Master of Discovery

उपयोगकर्ता-केंद्रित क्रिप्टो उत्पाद बनाना: ग्राहक प्रतिक्रिया का महत्व

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

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps