सामान्य तौर पर, एक टेबल एक रो और कॉलम के सेट के बीच संबंध का वर्णन करती है। यह डेटा को व्यवस्थित और चित्रित करने का एक शानदार तरीका है।
बूटस्ट्रैप एक CSS फ्रेमवर्क है जो हमें सामग्री को सुपर जल्दी बनाने में मदद कर सकता है। इस लेख में, हम समीक्षा करते हैं कि बूटस्ट्रैप कैसे सेट अप करें, हमें टेबल की आवश्यकता क्यों हो सकती है, और बूटस्ट्रैप फ्रेमवर्क का उपयोग करके एक्शन में टेबल के कुछ उदाहरण देखें।
शुरुआत करना
यह सुनिश्चित करने के लिए कि हम अपने वेब पेज पर एक मॉडल देख सकते हैं, सुनिश्चित करें कि हमारे पास उचित निर्भरताएं हैं। इस प्रदर्शन के लिए, हमें बूटस्ट्रैप, Popper.JS और jQuery की आवश्यकता नहीं है, लेकिन वैसे भी इसे जोड़ना एक अच्छा विचार है क्योंकि आप शायद अन्य घटकों के साथ काम करेंगे जिन्हें इसकी आवश्यकता है। सभी निर्भरताएं प्राप्त करने में सहायता के लिए बूटस्ट्रैप के क्विक स्टार्ट पेज पर जाएं।
यह आप पर निर्भर है कि आप उन पैकेजों को कैसे लिंक करते हैं जिनकी हमें आवश्यकता है, लेकिन सबसे आसान, सबसे शुरुआती-अनुकूल तरीका है jQuery, Popper.js, और बूटस्ट्रैप के लिए कंटेंट डिलीवरी नेटवर्क - CDN का उपयोग करना। अपने <script> टैग्स के क्रम से सावधान रहें - यहां क्रम मायने रखता है।
टेबल कब उपयोग करें
टेबल का उपयोग तब करें जब आप एक साथ बहुत सारा डेटा एकत्र करना चाहते हैं। बूटस्ट्रैप टेबल का उपयोग तब करें जब आप आसानी से रिस्पॉन्सिव टेबल बनाना चाहते हैं। बूटस्ट्रैप टेबल की बुनियादी HTML संरचना का उपयोग करता है। आपको बस उनके CSS और अपनी कस्टम स्टाइलिंग को शामिल करना है ताकि आपकी वेबसाइट के लिए कस्टमाइज़्ड, रिस्पॉन्सिव टेबल शामिल हो सकें।
बूटस्ट्रैप का उपयोग करके टेबल बनाएं
टेबल पारंपरिक रूप से HTML और CSS के साथ बनाए जाते हैं। यह हमारी टेबल की बुनियादी संरचना और स्टाइलिंग को स्क्रीन पर लाएगा। हम बूटस्ट्रैप का उपयोग करते हैं ताकि रिस्पॉन्सिव डिज़ाइन जल्दी से तैयार हो जाए और हम अपने एप्लिकेशन के लिए करने के लिए आइटम्स की सूची में उच्च प्राथमिकता वाली वस्तुओं पर आगे बढ़ सकें।
बूटस्ट्रैप का उपयोग करते समय, डॉक्यूमेंटेशन को हाथ में रखें ताकि आप टेबल को ठीक से संरचित कर सकें। टेबल के बारे में मॉडल या नेवबार के विपरीत क्या अलग है, यह है कि यह काम करने के लिए आवश्यक रूप से JavaScript पर निर्भर नहीं करता है इसलिए इसे एक वास्तविक घटक के बजाय एक सामग्री सुविधा के रूप में अधिक माना जाता है। आप साइडबार में Components मेनू के विपरीत Content मेनू के तहत टेबल बनाने के बारे में जानकारी पाएंगे।
आइए एक बुनियादी संरचना से शुरू करें:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Table Demo</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <table> <thead> <tr> <th>Bootstrap Table Demo</th> </tr> </thead> <tbody> <tr> <th scope="col">No. </th> <th scope="col">Drink</th> <th scope="col">Price</th> </tr> <tr> <td scope="row">#1</td> <td>Iced Tea</td> <td>$3.25</td> </tr> <tr> <td scope="row">#2</td> <td>Fountain Soda</td> <td>$3.00</td> </tr> <tr> <td scope="row">#3</td> <td>Coffee</td> <td>$2.00</td> </tr> <tr> <td scope="row">#4</td> <td>Latte</td> <td>$4.25</td> </tr> </tbody> </table> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <script src="script.js"> </script> </body> </html>
यदि आप उपरोक्त मार्कअप चलाते हैं, तो आप एक बहुत ही बुनियादी टेबल देखेंगे जिसमें एक हेडर और कई रो हैं जो ड्रिंक्स, कीमतों और उनकी रो संख्या का वर्णन करते हैं। पूरे दस्तावेज़ के लिए बूटस्ट्रैप द्वारा स्थापित स्टाइलिंग के अलावा कोई स्टाइलिंग नहीं है।
टेबल में स्टाइलिंग जोड़ने के लिए, आपको बस <table> टैग में .table क्लास जोड़ने की आवश्यकता है।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Table Demo</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <table class="table"> <thead> <tr> <th scope="colgroup"> Bootstrap Table Demo</th> </tr> </thead> <tbody> <tr> <th scope="col">No. </th> <th scope="col">Drink</th> <th scope="col">Price</th> </tr> <tr> <td scope="row">#1</td> <td>Iced Tea</td> <td>$3.25</td> </tr> <tr> <td scope="row">#2</td> <td>Fountain Soda</td> <td>$3.00</td> </tr> <tr> <td scope="row">#3</td> <td>Coffee</td> <td>$2.00</td> </tr> <tr> <td scope="row">#4</td> <td>Latte</td> <td>$4.25</td> </tr> </tbody> </table> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <script src="script.js"> </script> </body> </html>
यह टेबल में बहुत बुनियादी स्टाइलिंग और रिस्पॉन्सिवनेस जोड़ता है। आइए देखें कि हम अपनी आवश्यकताओं के अनुरूप स्टाइलिंग को और कैसे अनुकूलित कर सकते हैं।
डिफ़ॉल्ट रंगों को उल्टा करें
अपने <table> टैग में क्लास नामों की सूची में .table के अलावा .table-dark जोड़ें ताकि टेबल की बुनियादी रंग योजना डार्क में बदल जाए।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Table Demo</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <table class="table table-dark"> <thead> <tr> <th scope="colgroup"> Bootstrap Table Demo</th> </tr> </thead> <tbody> <tr> <th scope="col">No. </th> <th scope="col">Drink</th> <th scope="col">Price</th> </tr> <tr> <td scope="row">#1</td> <td>Iced Tea</td> <td>$3.25</td> </tr> <tr> <td scope="row">#2</td> <td>Fountain Soda</td> <td>$3.00</td> </tr> <tr> <td scope="row">#3</td> <td>Coffee</td> <td>$2.00</td> </tr> <tr> <td scope="row">#4</td> <td>Latte</td> <td>$4.25</td> </tr> </tbody> </table> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <script src="script.js"> </script> </body> </html>
आप बेसिक बूटस्ट्रैप कलर प्रॉपर्टीज का उपयोग डार्क और लाइट के अलावा संदर्भात्मक क्लास को नियंत्रित करने के लिए भी कर सकते हैं (यानी .table-primary, table-danger, table-success, आदि।)
<thead> स्टाइल विकल्प
यदि आप टेबल के हेड की रंग योजना को बॉडी से अलग नियंत्रित करना चाहते हैं, तो आप <thead> क्लास एट्रिब्यूट में .thead-dark या .thead-light जोड़कर ऐसा कर सकते हैं।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Table Demo</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <table class="table table-danger"> <thead class="thead-light"> <th>Bootstrap Table Demo</th> <th /> <th /> </thead> <tbody> <tr> <th scope="col">No. </th> <th scope="col">Drink</th> <th scope="col">Price</th> </tr> <tr> <td scope="row">#1</td> <td>Iced Tea</td> <td>$3.25</td> </tr> <tr> <td scope="row">#2</td> <td>Fountain Soda</td> <td>$3.00</td> </tr> <tr> <td scope="row">#3</td> <td>Coffee</td> <td>$2.00</td> </tr> <tr> <td scope="row">#4</td> <td>Latte</td> <td>$4.25</td> </tr> </tbody> </table> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <script src="script.js"> </script> </body> </html>
स्ट्राइप्स (पट्टियां)
हर दूसरी रो का रंग समायोजित करने के लिए <table> टैग में .table-striped जोड़ें।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Table Demo</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <table class="table table-striped table-warning"> <thead class="thead-light"> <th>Bootstrap Table Demo With Stripes</th> <th /> <th /> </thead> <tbody> <tr> <th scope="col">No. </th> <th scope="col">Drink</th> <th scope="col">Price</th> </tr> <tr> <td scope="row">#1</td> <td>Iced Tea</td> <td>$3.25</td> </tr> <tr> <td scope="row">#2</td> <td>Fountain Soda</td> <td>$3.00</td> </tr> <tr> <td scope="row">#3</td> <td>Coffee</td> <td>$2.00</td> </tr> <tr> <td scope="row">#4</td> <td>Latte</td> <td>$4.25</td> </tr> </tbody> </table> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <script src="script.js"> </script> </body> </html>
बॉर्डर्स
प्रत्येक सेल के सभी किनारों पर बॉर्डर जोड़ने के लिए .table-bordered का उपयोग करें - प्रत्येक सेल के सभी किनारों से सभी बॉर्डर हटाने के लिए .table-borderless का उपयोग करें।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Table Demo</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <table class="table table-primary table-bordered"> <thead class="thead-light"> <th>Bootstrap Table Demo With Borders</th> <th /> <th /> </thead> <tbody> <tr> <th scope="col">No. </th> <th scope="col">Drink</th> <th scope="col">Price</th> </tr> <tr> <td scope="row">#1</td> <td>Iced Tea</td> <td>$3.25</td> </tr> <tr> <td scope="row">#2</td> <td>Fountain Soda</td> <td>$3.00</td> </tr> <tr> <td scope="row">#3</td> <td>Coffee</td> <td>$2.00</td> </tr> <tr> <td scope="row">#4</td> <td>Latte</td> <td>$4.25</td> </tr> </tbody> </table> <table class="table table-primary table-borderless"> <thead class="thead-light"> <th>Bootstrap Table Demo Without Borders</th> <th /> <th /> </thead> <tbody> <tr> <th scope="col">No. </th> <th scope="col">Drink</th> <th scope="col">Price</th> </tr> <tr> <td scope="row">#1</td> <td>Iced Tea</td> <td>$3.25</td> </tr> <tr> <td scope="row">#2</td> <td>Fountain Soda</td> <td>$3.00</td> </tr> <tr> <td scope="row">#3</td> <td>Coffee</td> <td>$2.00</td> </tr> <tr> <td scope="row">#4</td> <td>Latte</td> <td>$4.25</td> </tr> </tbody> </table> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <script src="script.js"> </script> </body> </html>
होवर
<table> टैग के क्लास एट्रिब्यूट में .table-hover जोड़ने से <tbody> में सभी रो होवर करने योग्य हो जाएंगे।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Table Demo</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <table class="table table-hover table-primary table-bordered"> <thead class="thead-light"> <th>Bootstrap Table Demo With Hover</th> <th /> <th /> </thead> <tbody> <tr> <th scope="col">No. </th> <th scope="col">Drink</th> <th scope="col">Price</th> </tr> <tr> <td scope="row">#1</td> <td>Iced Tea</td> <td>$3.25</td> </tr> <tr> <td scope="row">#2</td> <td>Fountain Soda</td> <td>$3.00</td> </tr> <tr> <td scope="row">#3</td> <td>Coffee</td> <td>$2.00</td> </tr> <tr> <td scope="row">#4</td> <td>Latte</td> <td>$4.25</td> </tr> </tbody> </table> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <script src="script.js"> </script></body> </html>
रिस्पॉन्सिव टेबल्स
अपने <table> को <div> के साथ कैप्सुलेट करें जिसका क्लास नाम .table-responsive हो ताकि आपकी टेबल सभी ब्रेकपॉइंट्स पर रिस्पॉन्सिव बने। यह मूल रूप से आपकी टेबल को क्षैतिज रूप से स्क्रॉल करने योग्य बनाता है यदि सामग्री कभी टेबल के आकार से काटी जाती है।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Table Demo</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <table class="table table-hover table-primary table-bordered"> <thead class="thead-light"> <th>Bootstrap Table Demo With Hover</th> <th /> <th /> </thead> <tbody> <tr> <th scope="col">No. </th> <th scope="col">Drink</th> <th scope="col">Price</th> </tr> <tr> <td scope="row">#1</td> <td>Iced Tea</td> <td>$3.25</td> </tr> <tr> <td scope="row">#2</td> <td>Fountain Soda</td> <td>$3.00</td> </tr> <tr> <td scope="row">#3</td> <td>Coffee</td> <td>$2.00</td> </tr> <tr> <td scope="row">#4</td> <td>Latte</td> <td>$4.25</td> </tr> </tbody> </table> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <script src="script.js"> </script></body> </html>
निष्कर्ष
HTML के साथ संयोजन में बूटस्ट्रैप का उपयोग करके टेबल्स को अनुकूलित करने के कई तरीके हैं। इन तरीकों का उपयोग करके अपने बूटस्ट्रैप टेबल्स को स्टाइल करने में महारत हासिल करने के बाद, अपनी खुद की अनुकूलन योग्य स्टाइल्स का उपयोग करने का प्रयास करें!
