ग्लिफिकॉन्स हें नांव

उपलब्ध आशिल्ले ग्लिफ

Glyphicon Halflings संचांतल्यान फॉन्ट स्वरूपांत 250 वयर ग्लिफ समाविष्ट करता. Glyphicons Halflings सादारणपणान फुकट उपलब्ध नात, पूण तांच्या निर्मात्यान ते Bootstrap खातीर फुकट उपलब्ध केल्यात. उपकार म्हणून, आमी फकत मागतात की तुमी शक्य आसल्यार Glyphicons कडेन परतून दुवो समाविष्ट करचो.

  • ग्लिफिकॉन ग्लिफिकॉन-तारा चिन्ह
  • ग्लिफिकॉन ग्लिफिकॉन-प्लस
  • ग्लिफिकॉन ग्लिफिकॉन-युरो
  • ग्लिफिकॉन ग्लिफिकॉन-eur
  • ग्लिफिकॉन ग्लिफिकॉन-माइनस
  • ग्लिफिकॉन ग्लिफिकॉन-मेघ
  • ग्लिफिकॉन ग्लिफिकॉन-लिफाफा
  • ग्लिफिकॉन ग्लिफिकॉन-पेन्सिल
  • ग्लिफिकॉन ग्लिफिकॉन-ग्लास
  • ग्लिफिकॉन ग्लिफिकॉन-संगीत
  • ग्लिफिकॉन ग्लिफिकॉन-सोद
  • ग्लिफिकॉन ग्लिफिकॉन-काळज
  • ग्लिफिकॉन ग्लिफिकॉन-तारा
  • ग्लिफिकॉन ग्लिफिकॉन-तारा-रिक्त
  • ग्लिफिकॉन ग्लिफिकॉन-वापरपी
  • ग्लिफिकॉन ग्लिफिकॉन-फिल्म
  • ग्लिफिकॉन ग्लिफिकॉन-वें-व्हड
  • ग्लिफिकॉन ग्लिफिकॉन-थ
  • ग्लिफिकॉन ग्लिफिकॉन-थ-लिस्ट
  • ग्लिफिकॉन ग्लिफिकॉन-ओके
  • ग्लिफिकॉन ग्लिफिकॉन-काडून उडोवप
  • ग्लिफिकॉन ग्लिफिकॉन-झूम-इन
  • ग्लिफिकॉन ग्लिफिकॉन-झूम-आउट
  • ग्लिफिकॉन ग्लिफिकॉन-बंद करतात
  • ग्लिफिकॉन ग्लिफिकॉन-संकेत
  • ग्लिफिकॉन ग्लिफिकॉन-कोग
  • ग्लिफिकॉन ग्लिफिकॉन-कचरा
  • ग्लिफिकॉन ग्लिफिकॉन-घर
  • ग्लिफिकॉन ग्लिफिकॉन-फायल
  • ग्लिफिकॉन ग्लिफिकॉन-काळ
  • ग्लिफिकॉन ग्लिफिकॉन-रस्तो
  • ग्लिफिकॉन ग्लिफिकॉन-डावनलोड-अल्ट
  • ग्लिफिकॉन ग्लिफिकॉन-डावनलोड करचें
  • ग्लिफिकॉन ग्लिफिकॉन-अपलोड करचें
  • ग्लिफिकॉन ग्लिफिकॉन-इनबॉक्स
  • ग्लिफिकॉन ग्लिफिकॉन-प्ले-सर्कल
  • ग्लिफिकॉन ग्लिफिकॉन-पुनरावृत्ती करप
  • ग्लिफिकॉन ग्लिफिकॉन-ताजें करतात
  • ग्लिफिकॉन ग्लिफिकॉन-लिस्ट-अल्ट
  • ग्लिफिकॉन ग्लिफिकॉन-लॉक
  • ग्लिफिकॉन ग्लिफिकॉन-ध्वज
  • ग्लिफिकॉन ग्लिफिकॉन-हेडफोन
  • ग्लिफिकॉन ग्लिफिकॉन-आयतन-बंद
  • ग्लिफिकॉन ग्लिफिकॉन-वॉल्यूम-डाउन
  • ग्लिफिकॉन ग्लिफिकॉन-वॉल्यूम-अप
  • ग्लिफिकॉन ग्लिफिकॉन-qrcode
  • ग्लिफिकॉन ग्लिफिकॉन-बारकोड
  • ग्लिफिकॉन ग्लिफिकॉन-टॅग
  • ग्लिफिकॉन ग्लिफिकॉन-टॅग
  • ग्लिफिकॉन ग्लिफिकॉन-पुस्तक
  • ग्लिफिकॉन ग्लिफिकॉन-बुकमार्क
  • ग्लिफिकॉन ग्लिफिकॉन-प्रिंट
  • ग्लिफिकॉन ग्लिफिकॉन-कॅमेरा
  • ग्लिफिकॉन ग्लिफिकॉन-फॉन्ट
  • ग्लिफिकॉन ग्लिफिकॉन-बोल्ड
  • ग्लिफिकॉन ग्लिफिकॉन-इटालिक
  • ग्लिफिकॉन ग्लिफिकॉन-मजकूर-उंचाय
  • ग्लिफिकॉन ग्लिफिकॉन-मजकूर-रुंदी
  • ग्लिफिकॉन ग्लिफिकॉन-संरेखित-डावें
  • ग्लिफिकॉन ग्लिफिकॉन-संरेखित-केंद्र
  • ग्लिफिकॉन ग्लिफिकॉन-संरेखित-उजवें
  • ग्लिफिकॉन ग्लिफिकॉन-संरेखित-समेकित करप
  • ग्लिफिकॉन ग्लिफिकॉन-सूची
  • ग्लिफिकॉन ग्लिफिकॉन-इंडेन्ट-डावें
  • ग्लिफिकॉन ग्लिफिकॉन-इंडेन्ट-उजवें
  • ग्लिफिकॉन ग्लिफिकॉन-फेसटायम-व्हिडियो
  • ग्लिफिकॉन ग्लिफिकॉन-चित्र
  • ग्लिफिकॉन ग्लिफिकॉन-नकाशा-मार्कर
  • ग्लिफिकॉन ग्लिफिकॉन-समायोजित करप
  • ग्लिफिकॉन ग्लिफिकॉन-टिंट
  • ग्लिफिकॉन ग्लिफिकॉन-संपादन करचें
  • ग्लिफिकॉन ग्लिफिकॉन-शेअर करप
  • ग्लिफिकॉन ग्लिफिकॉन-तपासणें
  • ग्लिफिकॉन ग्लिफिकॉन-मूव करप
  • ग्लिफिकॉन ग्लिफिकॉन-स्टेप-फाटीं
  • ग्लिफिकॉन ग्लिफिकॉन-वेगवान-फाटीं
  • ग्लिफिकॉन ग्लिफिकॉन-फाटीं
  • ग्लिफिकॉन ग्लिफिकॉन-खेळटात
  • ग्लिफिकॉन ग्लिफिकॉन-विराम
  • ग्लिफिकॉन ग्लिफिकॉन-थांब
  • ग्लिफिकॉन ग्लिफिकॉन-फुडें
  • ग्लिफिकॉन ग्लिफिकॉन-फास्ट-फॉरवर्ड
  • ग्लिफिकॉन ग्लिफिकॉन-स्टेप-फॉरवर्ड
  • ग्लिफिकॉन ग्लिफिकॉन-इजेक्ट
  • ग्लिफिकॉन ग्लिफिकॉन-शेवरॉन-डावें
  • ग्लिफिकॉन ग्लिफिकॉन-शेवरॉन-उजवें
  • ग्लिफिकॉन ग्लिफिकॉन-प्लस-चिन्ह
  • ग्लिफिकॉन ग्लिफिकॉन-उणें-चिन्ह
  • ग्लिफिकॉन ग्लिफिकॉन-काडून-चिन्ह
  • ग्लिफिकॉन ग्लिफिकॉन-ओके-चिन्ह
  • ग्लिफिकॉन ग्लिफिकॉन-प्रश्न-चिन्ह
  • ग्लिफिकॉन ग्लिफिकॉन-माहिती-चिन्ह
  • ग्लिफिकॉन ग्लिफिकॉन-स्क्रीनशॉट
  • ग्लिफिकॉन ग्लिफिकॉन-काडून-सर्कल
  • ग्लिफिकॉन ग्लिफिकॉन-ओके-सर्कल
  • ग्लिफिकॉन ग्लिफिकॉन-बॅन-सर्कल
  • ग्लिफिकॉन ग्लिफिकॉन-बाण-डावें
  • ग्लिफिकॉन ग्लिफिकॉन-बाण-उजवें
  • ग्लिफिकॉन ग्लिफिकॉन-बाण-ऊपर
  • ग्लिफिकॉन ग्लिफिकॉन-बाण-सकयल
  • ग्लिफिकॉन ग्लिफिकॉन-शेअर-ऑल्ट
  • ग्लिफिकॉन ग्लिफिकॉन-आकार बदलें-पूर्ण
  • ग्लिफिकॉन ग्लिफिकॉन-आकार बदलें-ल्हान
  • ग्लिफिकॉन ग्लिफिकॉन-विस्मयादिबोधक-चिन्ह
  • ग्लिफिकॉन ग्लिफिकॉन-उपहार
  • ग्लिफिकॉन ग्लिफिकॉन-पान
  • ग्लिफिकॉन ग्लिफिकॉन-अग्नी
  • ग्लिफिकॉन ग्लिफिकॉन-दोळे उक्ते
  • ग्लिफिकॉन ग्लिफिकॉन-दोळे बंद करप
  • ग्लिफिकॉन ग्लिफिकॉन-शिटकावणी-चिन्ह
  • ग्लिफिकॉन ग्लिफिकॉन-प्लेन
  • ग्लिफिकॉन ग्लिफिकॉन-पंचांग
  • ग्लिफिकॉन ग्लिफिकॉन-रॅंडम
  • ग्लिफिकॉन ग्लिफिकॉन-टिप्पणी
  • ग्लिफिकॉन ग्लिफिकॉन-चुंबक
  • ग्लिफिकॉन ग्लिफिकॉन-शेवरॉन-अप
  • ग्लिफिकॉन ग्लिफिकॉन-शेवरॉन-डावन
  • ग्लिफिकॉन ग्लिफिकॉन-रिट्वीट करप
  • ग्लिफिकॉन ग्लिफिकॉन-खरेदी-गाडी
  • ग्लिफिकॉन ग्लिफिकॉन-फोल्डर-बंद करचें
  • ग्लिफिकॉन ग्लिफिकॉन-फोल्डर-उगडास
  • ग्लिफिकॉन ग्लिफिकॉन-आकार बदल-उबें
  • ग्लिफिकॉन ग्लिफिकॉन-आकार-आडवें
  • ग्लिफिकॉन ग्लिफिकॉन-एचडीडी
  • ग्लिफिकॉन ग्लिफिकॉन-बुलहॉर्न
  • ग्लिफिकॉन ग्लिफिकॉन-घंटी
  • ग्लिफिकॉन ग्लिफिकॉन-प्रमाणपत्र
  • ग्लिफिकॉन ग्लिफिकॉन-आंगठो-अप
  • ग्लिफिकॉन ग्लिफिकॉन-आंगठो-सकयल
  • ग्लिफिकॉन ग्लिफिकॉन-हात-उजवें
  • ग्लिफिकॉन ग्लिफिकॉन-हात-डावें
  • ग्लिफिकॉन ग्लिफिकॉन-हात-अप
  • ग्लिफिकॉन ग्लिफिकॉन-हात-सकयल
  • ग्लिफिकॉन ग्लिफिकॉन-वर्तुळ-बाण-उजवें
  • ग्लिफिकॉन ग्लिफिकॉन-वर्तुळ-बाण-डावें
  • ग्लिफिकॉन ग्लिफिकॉन-वर्तुळ-बाण-ऊपर
  • ग्लिफिकॉन ग्लिफिकॉन-वर्तुळ-बाण-सकयल
  • ग्लिफिकॉन ग्लिफिकॉन-ग्लोब
  • ग्लिफिकॉन ग्लिफिकॉन-रिंच
  • ग्लिफिकॉन ग्लिफिकॉन-कार्य
  • ग्लिफिकॉन ग्लिफिकॉन-फिल्टर
  • ग्लिफिकॉन ग्लिफिकॉन-ब्रिफकेस
  • ग्लिफिकॉन ग्लिफिकॉन-फुलस्क्रीन
  • ग्लिफिकॉन ग्लिफिकॉन-डॅशबोर्ड
  • ग्लिफिकॉन ग्लिफिकॉन-पेपरक्लिप
  • ग्लिफिकॉन ग्लिफिकॉन-काळज-रिक्त
  • ग्लिफिकॉन ग्लिफिकॉन-लिंक
  • ग्लिफिकॉन ग्लिफिकॉन-फोन
  • ग्लिफिकॉन ग्लिफिकॉन-पुशपिन
  • ग्लिफिकॉन ग्लिफिकॉन-usd
  • ग्लिफिकॉन ग्लिफिकॉन-जीबीपी
  • ग्लिफिकॉन ग्लिफिकॉन-सॉर्ट
  • ग्लिफिकॉन ग्लिफिकॉन-वर्णमाळे प्रमाणें क्रमवारीत करचें
  • ग्लिफिकॉन ग्लिफिकॉन-वर्णमाळे प्रमाणें क्रमवारीत करचें-alt
  • ग्लिफिकॉन ग्लिफिकॉन-क्रमानुसार क्रमवारीत करचें
  • ग्लिफिकॉन ग्लिफिकॉन-क्रमांकन-अल्ट
  • glyphicon glyphicon-गुणधर्मां प्रमाणें क्रमवारीत करचें
  • glyphicon glyphicon-गुणधर्मां प्रमाणें क्रमवारीत करचें-alt
  • ग्लिफिकॉन ग्लिफिकॉन-अनचेक केल्लें
  • ग्लिफिकॉन ग्लिफिकॉन-विस्तार करप
  • ग्लिफिकॉन ग्लिफिकॉन-कोसळप-सकयल
  • ग्लिफिकॉन ग्लिफिकॉन-कोळप-अप
  • ग्लिफिकॉन ग्लिफिकॉन-लॉग-इन
  • ग्लिफिकॉन ग्लिफिकॉन-फ्लॅश
  • ग्लिफिकॉन ग्लिफिकॉन-लॉग-आउट
  • ग्लिफिकॉन ग्लिफिकॉन-नवी-विंडो
  • ग्लिफिकॉन ग्लिफिकॉन-रेकॉर्ड
  • ग्लिफिकॉन ग्लिफिकॉन-सेव्ह करचें
  • ग्लिफिकॉन ग्लिफिकॉन-उक्तें
  • ग्लिफिकॉन ग्लिफिकॉन-वाचयले
  • ग्लिफिकॉन ग्लिफिकॉन-आयात करप
  • ग्लिफिकॉन ग्लिफिकॉन-निर्यात करप
  • ग्लिफिकॉन ग्लिफिकॉन-भेवप
  • ग्लिफिकॉन ग्लिफिकॉन-फ्लॉपी-डिस्क
  • glyphicon glyphicon-फ्लॉपी-वाचयले
  • ग्लिफिकॉन ग्लिफिकॉन-फ्लॉपी-काडून घेवप
  • ग्लिफिकॉन ग्लिफिकॉन-फ्लॉपी-सेव्ह
  • ग्लिफिकॉन ग्लिफिकॉन-फ्लॉपी-ओपन
  • ग्लिफिकॉन ग्लिफिकॉन-क्रेडिट-कार्ड
  • ग्लिफिकॉन ग्लिफिकॉन-हस्तांतरण
  • ग्लिफिकॉन ग्लिफिकॉन-कटलरी
  • ग्लिफिकॉन ग्लिफिकॉन-हेडर
  • ग्लिफिकॉन ग्लिफिकॉन-संकुचीत केल्लें
  • ग्लिफिकॉन ग्लिफिकॉन-इयरफोन
  • ग्लिफिकॉन ग्लिफिकॉन-फोन-ऑल्ट
  • ग्लिफिकॉन ग्लिफिकॉन-गोपुर
  • ग्लिफिकॉन ग्लिफिकॉन-स्टॅट्स
  • ग्लिफिकॉन ग्लिफिकॉन-एसडी-व्हिडियो
  • ग्लिफिकॉन ग्लिफिकॉन-एचडी-व्हिडियो
  • ग्लिफिकॉन ग्लिफिकॉन-उपशीर्षक
  • ग्लिफिकॉन ग्लिफिकॉन-ध्वनि-स्टीरियो
  • ग्लिफिकॉन ग्लिफिकॉन-ध्वनी-डॉल्बी
  • ग्लिफिकॉन ग्लिफिकॉन-ध्वनी-5-1
  • ग्लिफिकॉन ग्लिफिकॉन-ध्वनी-6-1
  • ग्लिफिकॉन ग्लिफिकॉन-ध्वनी-7-1
  • ग्लिफिकॉन ग्लिफिकॉन-कॉपीराइट-मार्क
  • ग्लिफिकॉन ग्लिफिकॉन-नोंदणी-चिन्ह
  • glyphicon glyphicon-मेघ-डावनलोड करचें
  • ग्लिफिकॉन ग्लिफिकॉन-मेघ-अपलोड
  • ग्लिफिकॉन ग्लिफिकॉन-झाड-कोनिफर
  • ग्लिफिकॉन ग्लिफिकॉन-झाड-पर्णपाती
  • ग्लिफिकॉन ग्लिफिकॉन-सीडी
  • glyphicon glyphicon-सांच-फायल
  • glyphicon glyphicon-उगडत-फायल
  • ग्लिफिकॉन ग्लिफिकॉन-स्तर-अप
  • ग्लिफिकॉन ग्लिफिकॉन-प्रत
  • ग्लिफिकॉन ग्लिफिकॉन-पेस्ट
  • ग्लिफिकॉन ग्लिफिकॉन-सचेतक
  • ग्लिफिकॉन ग्लिफिकॉन-समीकरण करपी
  • ग्लिफिकॉन ग्लिफिकॉन-राजा
  • ग्लिफिकॉन ग्लिफिकॉन-राणी
  • ग्लिफिकॉन ग्लिफिकॉन-प्यादे
  • ग्लिफिकॉन ग्लिफिकॉन-बिशप
  • ग्लिफिकॉन ग्लिफिकॉन-शूरवीर
  • ग्लिफिकॉन ग्लिफिकॉन-बेबी-फॉर्मूला
  • ग्लिफिकॉन ग्लिफिकॉन-तंबू
  • ग्लिफिकॉन ग्लिफिकॉन-ब्लॅकबोर्ड
  • ग्लिफिकॉन ग्लिफिकॉन-बेड
  • ग्लिफिकॉन ग्लिफिकॉन-सफरचंद
  • ग्लिफिकॉन ग्लिफिकॉन-मिटोवप
  • ग्लिफिकॉन ग्लिफिकॉन-रेमघड़ी
  • ग्लिफिकॉन ग्लिफिकॉन-दिवो
  • ग्लिफिकॉन ग्लिफिकॉन-डुप्लिकेट
  • ग्लिफिकॉन ग्लिफिकॉन-पिगी-बँक
  • ग्लिफिकॉन ग्लिफिकॉन-कात्री
  • ग्लिफिकॉन ग्लिफिकॉन-बिटकॉइन
  • ग्लिफिकॉन ग्लिफिकॉन-बीटीसी
  • ग्लिफिकॉन ग्लिफिकॉन-xbt
  • ग्लिफिकॉन ग्लिफिकॉन-येन
  • ग्लिफिकॉन ग्लिफिकॉन-jpy
  • ग्लिफिकॉन ग्लिफिकॉन-रूबल
  • ग्लिफिकॉन ग्लिफिकॉन-घसघशीत करप
  • ग्लिफिकॉन ग्लिफिकॉन-स्केल
  • ग्लिफिकॉन ग्लिफिकॉन-आइस-लोली
  • ग्लिफिकॉन ग्लिफिकॉन-आइस-लोली-रुचीक
  • ग्लिफिकॉन ग्लिफिकॉन-शिक्षण
  • ग्लिफिकॉन ग्लिफिकॉन-पर्याय-आडवें
  • ग्लिफिकॉन ग्लिफिकॉन-पर्याय-उबें
  • ग्लिफिकॉन ग्लिफिकॉन-मेनू-हॅम्बर्गर
  • ग्लिफिकॉन ग्लिफिकॉन-मोडल-विंडो
  • ग्लिफिकॉन ग्लिफिकॉन-तेल
  • ग्लिफिकॉन ग्लिफिकॉन-धान्य
  • ग्लिफिकॉन ग्लिफिकॉन-धूपाचे चश्मे
  • ग्लिफिकॉन ग्लिफिकॉन-मजकूर-आकार
  • ग्लिफिकॉन ग्लिफिकॉन-मजकूर-रंग
  • ग्लिफिकॉन ग्लिफिकॉन-मजकूर-पार्श्वभूमी
  • ग्लिफिकॉन ग्लिफिकॉन-वस्तू-संरेखित-शीर्ष
  • ग्लिफिकॉन ग्लिफिकॉन-वस्तू-संरेखित-तळें
  • ग्लिफिकॉन ग्लिफिकॉन-वस्तू-संरेखित-आडवें
  • ग्लिफिकॉन ग्लिफिकॉन-वस्तू-संरेखित-डावें
  • ग्लिफिकॉन ग्लिफिकॉन-वस्तू-संरेखित-उबें
  • ग्लिफिकॉन ग्लिफिकॉन-वस्तू-संरेखित-उजवें
  • ग्लिफिकॉन ग्लिफिकॉन-त्रिकोण-उजवें
  • ग्लिफिकॉन ग्लिफिकॉन-त्रिकोण-डावें
  • ग्लिफिकॉन ग्लिफिकॉन-त्रिकोण-तळें
  • ग्लिफिकॉन ग्लिफिकॉन-त्रिकोण-शीर्ष
  • ग्लिफिकॉन ग्लिफिकॉन-कंसोल
  • ग्लिफिकॉन ग्लिफिकॉन-सुपरस्क्रिप्ट
  • ग्लिफिकॉन ग्लिफिकॉन-सबस्क्रिप्ट
  • ग्लिफिकॉन ग्लिफिकॉन-मेनू-डावें
  • ग्लिफिकॉन ग्लिफिकॉन-मेनू-उजवें
  • ग्लिफिकॉन ग्लिफिकॉन-मेनू-सकयल
  • ग्लिफिकॉन ग्लिफिकॉन-मेनू-अप

वापर कसो करचो

कार्यक्षमताय कारणांक लागून, सगळ्या चिन्नांक बेस वर्ग आनी वैयक्तीक चिन्न वर्ग जाय पडटा. वापरपाक, सकयल दिल्लो कोड फकत खंयच्याय सुवातेर दवरात. योग्य पॅडींग करपाखातीर चिन्न आनी मजकूर हांचेमदीं सुवात सोडपाची खात्री करात.

हेर घटकां वांगडा भरसून घेवचें न्हय

चिन्न वर्ग हेर घटकांवांगडा थेट जोडूंक मेळनात. एकाच घटकाचेर हेर वर्गांवांगडा तांचो वापर करचो न्हय. ताचे बदला, एक नेस्टेड जोडात <span>आनी चिन्न वर्ग लागू करात <span>.

फकत रिकाम्या घटकांचेर वापरपाखातीर

चिन्न वर्ग फकत मजकूर आशय नाशिल्ल्या आनी बाल घटक नाशिल्ल्या घटकांचेर वापरपाक जाय.

चिन्न फॉन्ट स्थान बदलप

बूटस्ट्रॅप चिन्न फॉन्ट फायली ../fonts/निर्देशिकेंत आसतले अशें मानता, संकलित केल्ल्या CSS फायलींच्या सापेक्ष. त्या फॉन्ट फायलींक हालोवप वा नांव बदलप म्हणल्यार तीन मार्गांतल्या एका मार्गान CSS अद्ययावत करप:

  • @icon-font-pathस्त्रोत कमी फायलींनी आनी/वा @icon-font-nameचडांत चड बदलात .
  • कमी संकलकान दिल्ल्या सापेक्ष URLs पर्यायाचो वापर करचो .
  • url()संकलित केल्ल्या CSS त मार्ग बदलात .

तुमच्या विशिश्ट विकास सेटअपाक बरोच फावो असो खंयचोय पर्याय वापरात.

सुलभ चिन्नां

सहाय्यक तंत्रज्ञानाचीं आधुनीक आवृत्ती CSS तयार केल्ली सामुग्री, तशेंच विशिश्ट युनिकोड अक्षरां जाहीर करतले. स्क्रीन रीडरांत अनपेक्षीत आनी गोंदळाचे आउटपुट टाळपाक (खास करून जेन्ना चिन्नां शुध्द सजावटी खातीर वापरतात), आमी तीं aria-hidden="true"गुणधर्मान लिपयतात.

तुमी अर्थ सांगपाक चिन्न वापरतात जाल्यार (फकत सजावटी घटक म्हणून न्हय), हो अर्थ सहाय्यक तंत्रज्ञानांकय पावोवपाची खात्री करात – देखीक, .sr-onlyवर्गा वांगडा दृश्टीन लिपयल्ली अतिरिक्त सामुग्री समाविष्ट करात.

तुमी हेर कसलोच मजकूर नाशिल्ले नियंत्रण तयार करतात जाल्यार (देखीक <button>फकत चिन्न आशिल्लें), नियंत्रणाचो उद्देश वळखुपाक तुमी सदांच पर्यायी सामुग्री दिवंक जाय, जाका लागून सहाय्यक तंत्रज्ञानाच्या वापरप्यांक ती अर्थपूर्ण थारतली. aria-labelअशे स्थितींत, तुमी नियंत्रणाचेरच एक गुणधर्म जोडूंक शकतले .

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

उदाहरणां

बटणां, साधनपट्टी खातीर बटण गट, नेव्हिगेशन, वा पूर्वप्रलंबित फॉर्म इनपुटांत तांचो वापर करचो.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

तो एक त्रुटी संदेश आसा अशें सांगपाक इशाऱ्यांत वापरिल्लें चिन्न , .sr-onlyसहाय्यक तंत्रज्ञानाच्या वापरप्यांक हो संकेत दिवपाक अतिरिक्त मजकूर.

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

ड्रॉपडावन करतात

दुव्यांची वळेरी दाखोवपाखातीर टॉगल करपाक येवपी, संदर्भ मेनू. ड्रॉपडावन जावास्क्रिप्ट प्लगइन कडेन परस्पर संवादात्मक केला .

ड्रॉपडावनाचो ट्रिगर आनी ड्रॉपडावन मेनू भितर रॅप करचो .dropdown, वा जाहीर करपी दुसरो घटक position: relative;. मागीर मेनूचें एचटीएमएल जोडचें.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

पालकांत जोडून वयर (सकयले बदला) विस्तार करपाक ड्रॉपडावन मेनू बदलूं येतात .dropup.

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

पूर्वनिर्धारीतपणान, एक ड्रॉपडावन मेनू आपोआप वयल्यान आनी ताच्या पालकाच्या उजव्या बाजूक 100% स्थापन जाता. .dropdown-menu-righta कडेन जोडात ते .dropdown-menuउजवे वटेन ड्रॉपडावन मेनू संरेखित करात.

अतिरिक्त स्थितीची गरज आसूं येता

दस्तावेजाच्या सामान्य प्रवाहांत CSS वरवीं आपोआप ड्रॉपडावन दवरतात. हाचो अर्थ ड्रॉपडावन कांय गुणधर्म आशिल्ल्या पालकांनी क्रॉप करूंक शकतात overflowवा दृश्यपोर्टाच्या मर्यादे भायर दिसूं येतात. हे प्रस्न जशे जशे उप्रासतात तशे तशे स्वताचेर उपाय काडचे.

नाका आशिल्ली .pull-rightसंरेखण

v3.1.0 सावन, आमी .pull-rightड्रॉपडावन मेनूचेर नाका म्हण्टात. मेनू उजवें-संरेखित करपाक, वापरात .dropdown-menu-right. नावबारांतले उजवे-संरेखित केल्ले nav घटक मेनू आपसूक संरेखित करपाखातीर ह्या वर्गाची मिक्सिन आवृत्ती वापरतात. ताका ओव्हररायड करपाक, वापरात .dropdown-menu-left.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

खंयच्याय ड्रॉपडावन मेनूंत कृतीच्या विभागांक लेबल करपाक शीर्षक जोडात.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

ड्रॉपडावन मेनूंत दुव्यांच्या वेगळ्या माळेक विभाजक जोडात.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

दुवो अक्षम करपाक ड्रॉपडावनांत .disableda कडेन जोडात .<li>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

बटण गट करतात

बटण गटा वांगडा एकाच ओळीचेर बटणांची माळ एकठांय गट करात. आमच्या बटणां प्लगइनान पर्यायी जावास्क्रिप्ट रेडिओ आनी चेकबॉक्स शैली वर्तनाचेर जोडात .

बटण गटांतल्या टूलटिप्स & पॉपओवरांक खाशेली सेटिंग जाय पडटा

a भितर घटकांचेर टूलटिप्स वा पॉपओव्हर वापरतना .btn-group, तुमकां container: 'body'नाका आशिल्ले दुश्परिणाम टाळपाचो पर्याय निर्देशीत करचो पडटलो (देखीक घटक रूंद वाडप आनी/वा टूलटिप वा पॉपओव्हर ट्रिगर करतना ताचे वाटकुळे कोनशे गमावप).

योग्य आसा हाची खात्री करात roleआनी लेबल दिवचें

सहाय्यक तंत्रगिन्यान – जशें स्क्रीन रीडर – बटणांची माळ गटबंदी केल्या हें सांगपा खातीर, योग्य roleगुणधर्म दिवपाची गरज आसा. बटण गटांखातीर, हें आसतलें role="group", जाल्यार साधनपट्ट्यांक एक आसपाक जाय role="toolbar".

एक आडवाद अशे गट आसात जातूंत फकत एकूच नियंत्रण आसता (देखीक घटकां सयत न्याय्य बटण गट<button> ) वा ड्रॉपडावन.

ते भायर, गट आनी साधनपट्ट्यांक स्पश्ट लेबल दिवपाक जाय, कारण चडशे सहाय्यक तंत्रज्ञान हेर तरेन तांकां जाहीर करचे नात, योग्य roleगुणधर्म आसले तरी. हांगा दिल्ल्या उदाहरणांनी, आमी वापरतात aria-label, पूण अशे पर्यायय aria-labelledbyवापरूं येतात.

मुळावें उदाहरण

.btnin च्या आदारान बटणांची माळ गुठलावची .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

बटण साधनपट्टी

चड गुंतागुंतीच्या घटकांखातीर एकांत संच एकठांय करात <div class="btn-group">.<div class="btn-toolbar">

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

आकारमान करप

गटांतल्या दरेक बटणाक बटण आकारमान वर्ग लागू करचे परस, फकत .btn-group-*दरेकाक जोडात , एका .btn-groupपरस चड गट नेस्ट करतना सयत.




<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

घोंस घालप

जेन्ना तुमकां बटणांची माळ भरसून ड्रॉपडावन मेनू जाय तेन्ना .btn-groupदुसर् या भितर एक दवरात ..btn-group

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

उबें बदलप

बटणांचो संच आडवो न्हय तर उबो रांकिल्लो दिसचो. स्प्लिट बटण ड्रॉपडावन हांगा समर्थीत ना.

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

न्याय्य बटण गट

बटणांचो एक गट ताच्या पालकाची पुराय रुंदाय पातळावपाक समान आकारांत ताणून दवरचो. तशेंच बटण गटा भितर बटण ड्रॉपडावन वांगडा काम करता.

शिमो हाताळप

बटणांक न्याय दिवपाक वापरिल्ल्या विशिश्ट एचटीएमएल आनी सीएसएसाक लागून (म्हळ्यार display: table-cell), तांचेमदली शिमो दुप्पट जातात. नेमान बटण गटांत, margin-left: -1pxशिमो काडून उडोवचे बदला रांकोवपाखातीर वापरतात. पूण, marginकडेन काम करीना display: table-cell. ताका लागून, Bootstrap कडेन तुमच्या पसंतीचेर आदारून, तुमकां शिमो काडून उडोवपाची वा परतून रंगोवपाची इत्सा आसूं येता.

आयई8 आनी शिमो

Internet Explorer 8 न्याय्य बटण गटांतल्या बटणांचेर शिमो रेंडर करिना, मागीर तो चालू आसूं <a>वा <button>घटक आसूं. तें भोंवपाक, दरेक बटण दुसऱ्यांत गुठलावचें .btn-group.

चड म्हायती खातीर पळयात #12476 .

<a>घटकांवांगडा _

.btnफकत s ची एक माळ गुठलावची .btn-group.btn-group-justified.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

बटण म्हणून काम करपी दुवे

घटक बटण म्हणून काम करपाक वापरतात जाल्यार <a>– सद्याच्या पानांतल्या दुसऱ्या दस्तावेजांत वा विभागांत वचचे परस, पानांतली कार्यक्षमताय सुरू करप – तांकां योग्य role="button".

<button>घटकांवांगडा _

<button>घटकां सयत न्याय्य बटण गट वापरपाक , तुमी दरेक बटण बटण गटांत गुठलावपाक जाय . चडशे ब्राउझर घटकांक न्याय दिवपा खातीर आमचो CSS योग्य रितीन लागू करिनात <button>, पूण आमी बटण ड्रॉपडावनांक तेंको दितात देखून, आमी ताचे भोंवतणी काम करूंक शकतात.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

बटण ड्रॉपडावन करतात

ड्रॉपडावन मेनू a भितर दवरून .btn-groupआनी योग्य मेनू मार्कअप दिवन ट्रिगर करपाक खंयचेंय बटण वापरात.

प्लगइन अवलंबन

बटण ड्रॉपडावनांक ड्रॉपडावन प्लगइन तुमच्या Bootstrap आवृत्तींत आस्पाव करपाची गरज आसा.

एकूच बटण ड्रॉपडावन

कांय मुळाव्या मार्कअप बदलां सयत बटण ड्रॉपडावन टॉगलांत रुपांतरीत करात.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

विभाजन बटण ड्रॉपडावन

तेच प्रमाणें, फकत वेगळ्या बटणान, समान मार्कअप बदलां सयत स्प्लिट बटण ड्रॉपडावन तयार करात.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

आकारमान करप

बटण ड्रॉपडावन सगळ्या आकाराच्या बटणां वांगडा काम करतात.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

ड्रॉपअप वेरिएशन

पालकांत जोडून घटकां वयर ड्रॉपडावन मेनू ट्रिगर .dropupकरात.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

इनपुट गट

खंयच्याय मजकूर-आधारीत <input>. .input-groupएक .input-group-addonवा .input-group-btnएकाच घटकाक पूर्वपेंड करपाक वा जोडपाक वापरात .form-control.

मजकूर <input>s फक्त

हांगा घटक वापरप टाळचें <select>कारण ते WebKit ब्राउझरांत पुरायपणान स्टायल करूंक शकनात.

<textarea>हांगा घटक वापरप टाळचें rowsकारण कांय प्रकरणांनी तांच्या गुणधर्माक आदर मेळचो ना.

इनपुट गटांतल्या टूलटिप्स & पॉपओवरांक खाशेली सेटिंग जाय पडटा

एक भितर घटकांचेर टूलटिप्स वा पॉपओव्हर वापरतना .input-group, तुमकां container: 'body'नाका आशिल्ले दुश्परिणाम टाळपाचो पर्याय निर्देशीत करचो पडटलो (देखीक घटक रूंद वाडप आनी/वा टूलटिप वा पॉपओव्हर ट्रिगर करतना ताचे वाटकुळे कोनशे गमावप).

हेर घटकां वांगडा भरसून घेवचें न्हय

फॉर्म गट वा ग्रिड स्तंभ वर्ग थेट इनपुट गटां वांगडा मिसळूंक नाकात. ताचे बदला, इनपुट गटाक फॉर्म गट वा ग्रिडा संबंदीत घटका भितर नेस्ट करात.

सदांच लेबलां जोडचीं

दर एका इनपुटा खातीर लेबल समाविष्ट करूंक ना जाल्यार स्क्रीन रीडरांक तुमच्या फॉर्मांत त्रास जातलो. ह्या इनपुट गटां खातीर, खंयचेंय अतिरिक्त लेबल वा कार्यक्षमताय सहाय्यक तंत्रज्ञानांक पावोवपाची खात्री करात.

वापरपाचें नेमकें तंत्र (दृश्य <label>घटक, वर्ग <label>वापरून लिपयल्ले घटक, वा , , , वा गुणधर्म वापरप) आनी खंयची अतिरिक्त म्हायती दिवपाची गरज आसतली तें तुमी चालीक लायिल्ल्या संवाद विजेटाच्या अचूक प्रकाराचेर आदारून बदलतलें. ह्या विभागांतलीं उदाहरणां कांय सुचयल्ले, केस-विशिश्ट पद्दती दितात..sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder

मुळावें उदाहरण

इनपुटाच्या दोनूय वटांनी एक ऍड-ऑन वा बटण दवरात. तशेंच एका इनपुटाच्या दोनूय वटांनी एक दवरूं येता.

आमी एकाच वटेन जायत्या ऍड-ऑन ( .input-group-addonवा ) चो समर्थन करिनात ..input-group-btn

आमी एकाच इनपुट गटांत जायत्या फॉर्म-कंट्रोलांक तेंको दिना.

@ हांणी केला.

@ उदाहरण.कॉम हांणी केला

$ हें नांव .०० हें

https://देखीक.कॉम/वापरप्यांक/
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

आकारमान करप

सापेक्ष फॉर्म आकार वर्ग स्वताक जोडात .input-groupआनी भितर आशिल्ली सामग्री आपोआप आकार बदलतली-दर एका घटकाचेर फॉर्म नियंत्रण आकार वर्ग परतून करपाची गरज ना.

@ हांणी केला.

@ हांणी केला.

@ हांणी केला.
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

चेकबॉक्स आनी रेडिओ अॅडॉन

मजकूर बदला इनपुट गटाच्या अॅडॉनांत खंयचोय चेकबॉक्स वा रेडिओ पर्याय दवरात.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

बटण जोडटा

इनपुट गटांतले बटण मात्शे वेगळे आसतात आनी तांकां एक अतिरिक्त पातळेचेर नेस्टिंग करचें पडटा. बदला .input-group-addon, तुमकां .input-group-btnबटणां गुठलावपाक वापरची पडटली. अधिलिखित करूंक शकना अशा मुलभूत ब्राउझर शैलींक लागून हाची गरज आसा.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

ड्रॉपडावन आशिल्ले बटण

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

विभागणी केल्लीं बटणां

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

एका परस चड बटण

तुमकां दरेक वटेन फकत एक ऍड-ऑन आसूं येता, जाल्यार तुमकां एकाच भितर जायतीं बटणां आसूं येतात .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

नवस हें नांव

बूटस्ट्रॅपांत उपलब्ध आशिल्ल्या Navs कडेन वांटणी केल्ली मार्कअप आसा, बेस .navवर्गा पासून सुरू जावन, तशेंच वांटणी केल्लीं स्थिती. दरेक शैली मदीं वळोवपाक संशोधक वर्ग स्वॅप करात.

टॅब पॅनेला खातीर navs वापरपाक जावास्क्रिप्ट टॅब प्लगइन जाय

टॅब करपाक योग्य क्षेत्रां आशिल्ल्या टॅबांक, तुमी टॅब वापरपाक जाय JavaScript प्लगइन . मार्कअपाक अतिरिक्त roleआनी ARIA गुणधर्मांचीय गरज आसतली – फुडल्या तपशीलां खातीर प्लगइनाचे उदाहरण मार्कअप पळयात.

नेव्हिगेशन म्हणून वापरिल्ले navs सुलभ करात

जर तुमी नेव्हिगेशन बार पुरवण करपाक navs वापरतात जाल्यार, role="navigation"च्या चड तार्कीक पालक कंटेनरांत a जोडपाची खात्री करात <ul>, वा <nav>पुराय नेव्हिगेशन भोंवतणी एक घटक गुठलावचो. भुमिका स्वता कडेन जोडूंक नाकात <ul>, कारण हाका लागून सहाय्यक तंत्रगिन्याना वरवीं ती प्रत्यक्ष वळेरी म्हणून जाहीर करपाक मेळची ना.

लक्षांत दवरात वर्गाक बेस क्लास .nav-tabsजाय पडटा ..nav

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

तोच HTML घेयात, पूण .nav-pillsताचे बदला वापरात:

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

गोळ्यांचोय उबो रांको करपाक मेळटा. फकत जोडचें .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

सहजतायेन टॅब वा गोळ्यां 768px परस रुंद पडद्याचेर तांच्या पालकाच्या समान रुंदायेचीं करात .nav-justified. ल्हान स्क्रीनांचेर, nav दुवे स्टॅक केल्ले आसतात.

सद्या न्याय्य navbar nav दुवे समर्थीत नात.

सफारी आनी प्रतिसाद दिवपी न्याय्य नवस

v9.1.2 सावन, Safari एक बग दाखयता जातूंत तुमचो ब्राउझर आडवो आकार बदलल्यार न्याय्य nav त रेंडरींग चुको जातात जीं रिफ्रेश करतना निवळ जातात. हो बग न्याय्य nav उदाहरणांतय दाखयला .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

खंयच्याय nav घटका खातीर (टॅब वा गोळ्या), ग्रे दुवे .disabledखातीर जोडात आनी होवर प्रभाव ना .

दुवो कार्यक्षमतायचेर परिणाम जावंक ना

हो वर्ग फकत 's दिसप बदलतलो <a>, ताची कार्यक्षमताय न्हय. हांगा दुवे अक्षम करपाक सानुकूल जावास्क्रिप्ट वापरात.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

मात्शें अतिरिक्त HTML आनी ड्रॉपडावन जावास्क्रिप्ट प्लगइन आशिल्लें ड्रॉपडावन मेनू जोडात .

ड्रॉपडावन आशिल्ले टॅब

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

ड्रॉपडावन आशिल्लीं गोळ्यां

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

नवबर हें नांव

Navbars हे प्रतिसाद दिवपी मेटा घटक आसात जे तुमच्या ऍप्लिकेशनाक वा साइट खातीर नेव्हिगेशन हेडर म्हणून काम करतात. मोबायल दृश्यांत ते कोसळपाक सुरवात करतात (आनी टॉगल करपाक येतात) आनी उपलब्ध दृश्यपोर्ट रुंदाय वाडत वचत आडवे जातात.

सद्या न्याय्य navbar nav दुवे समर्थीत नात.

उफेवपी आशय

तुमच्या navbar तल्या सामुग्रीक कितली सुवात जाय तें Bootstrap कळनाशिल्ल्यान, तुमकां दुसरे ओळींत सामुग्री रॅप करपाक समस्या येवंक शकतात. हें सोडोवपाखातीर तुमी करूंक शकतात:

  1. नवबार आयटमांची रक्कम वा रुंदाय उणी करात.
  2. प्रतिसाद दिवपी उपयुक्तताय वर्ग वापरून कांय स्क्रीन आकारांचेर कांय नवबार आयटम लिपोवचे .
  3. तुमचो navbar संकुचीत आनी आडवो मोडांत बदलता तो बिंदू बदलात. चडांत चड पसंतीचे करात @grid-float-breakpointवा तुमची स्वताची मिडिया क्वेरी जोडात.

जावास्क्रिप्ट प्लगइनाची गरज आसा

जावास्क्रिप्ट अक्षम केल्यार आनी व्यूपोर्ट इतलो अरुंद आसल्यार नॅव्हबार कोसळटा जाल्यार, नॅव्हबार विस्तारप आनी भितर आशिल्ली सामुग्री पळोवप अशक्य जातलें .navbar-collapse.

प्रतिसाद दिवपी navbar कडेन तुमच्या Bootstrap आवृत्तींत संकुचीत प्लगइन समाविष्ट करपाची गरज आसा.

कोसळिल्लो मोबायल नवबार ब्रेकपॉइंट बदलप

दृश्यपोर्ट , परस अरुंद आसतना navbar ताच्या उब्या मोबायल दृश्यांत कोसळटा , आनी दृश्यपोर्ट उण्यांत उणी रुंदाय @grid-float-breakpointआसतना ताच्या आडव्या बिगर मोबायल दृश्यांत विस्तारता . @grid-float-breakpointनावबार केन्ना कोसळटा/विस्तार जाता तें नियंत्रीत करपाक कमी स्त्रोतांत हें चड समायोजीत करचें. मुलभूत मोल आसा 768px(सगल्यांत ल्हान "ल्हान" वा "टॅबलेट" पडदो).

नवबार सुलभ करात

घटक वापरपाची खात्री करात <nav>वा, जर a सारको चड सामान्य घटक वापरत जाल्यार , सहाय्यक तंत्रज्ञानाच्या वापरप्यां खातीर तो एक लॅंडमार्क प्रदेश म्हूण स्पश्टपणान वळखुपाक दरेक नवबारांत <div>a जोडात .role="navigation"

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

मजकूर एक <img>. the .navbar-brandकडेन स्वताची पॅडींग आनी उंचाय आशिल्ल्यान, तुमच्या प्रतिमेचेर आदारून तुमकां कांय CSS ओव्हररायड करचें पडटलें.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

.navbar-formसंकुचीत दृश्यपोर्टांत योग्य उब्या संरेखण आनी संकुचीत वागणूकाखातीर फॉर्म सामुग्री भितर दवरात . नावबार सामुग्री भितर तो खंय रावता तें थारावपाक संरेखण पर्याय वापरात.

एक हेड अप म्हणून, via mixin .navbar-formकडेन आपलो चडसो कोड वांटता . कांय फॉर्म नियंत्रणां, इनपुट गटांभशेन, नावबारांत योग्य रितीन दाखोवपाक थारावीक रुंदायांची गरज आसूं येता..form-inline

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

मोबायल डिव्हायसाची खबरदारी

मोबायल डिव्हायसांचेर स्थिर घटकां भितर फॉर्म नियंत्रण वापरपा संबंदी कांय सावधानताय आसात. तपशीलां खातीर आमचे ब्राउझर आदार डॉक्स पळयात.

सदांच लेबलां जोडचीं

दर एका इनपुटा खातीर लेबल समाविष्ट करूंक ना जाल्यार स्क्रीन रीडरांक तुमच्या फॉर्मांत त्रास जातलो. .sr-onlyह्या इनलायन फॉर्मां खातीर, तुमी वर्ग वापरून लेबलां लिपोवंक शकतात . सहाय्यक तंत्रज्ञानाक लेबल दिवपाच्यो आनीक पर्यायी पद्दती आसात, जशे की aria-label, aria-labelledbyवा titleगुणधर्म. जर हातूंतलें खंयचेंय नासल्यार, स्क्रीन रीडरांनी placeholderगुणधर्म वापरपाचो आदार घेवंक शकता, आसल्यार, पूण लक्षांत दवरात की placeholderहेर लेबलिंग पद्दतींच्या बदला म्हणून वापरपाची सल्ला दिवंक ना.

a मदीं रावनाशिल्ल्या घटकांक .navbar-btnवर्ग जोडात तांकां नवबारांत उबें केंद्रीत करपाक.<button><form>

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

संदर्भविशिश्ट वापर

मानक बटण वर्गां प्रमाणें , आनी घटकांचेर .navbar-btnवापरूं येता . पूण, भितरल्या घटकांचेर वा मानक बटण वर्ग वापरूंक फावना .<a><input>.navbar-btn<a>.navbar-nav

.navbar-text, चड करून <p>योग्य लीडिंग आनी रंगाखातीर टॅगाचेर आशिल्ल्या घटकांत मजकूराचीं स्ट्रिंग्स गुठलावचीं .

<p class="navbar-text">Signed in as Mark Otto</p>

नेमान नॅव्हबार नेव्हिगेशन घटका भितर नाशिल्ले मानक दुवे वापरपी .navbar-linkलोकांखातीर, मुलभूत आनी उलट नॅव्हबार पर्यायांखातीर योग्य रंग जोडपाक वर्ग वापरात.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

.navbar-leftवा .navbar-rightउपयुक्तताय वर्ग वापरून, nav दुवे, फॉर्म, बटण, वा मजकूर संरेखित करात . दोनूय वर्ग निर्दिश्ट दिशेन CSS फ्लोट जोडटले. देखीक, nav दुवे संरेखित करपाक, <ul>लागू केल्ल्या संबंदीत उपयुक्तताय वर्गा वांगडा वेगळ्यांत दवरात.

हे वर्ग .pull-leftआनी ची mixin-ed आवृत्ती आसात .pull-right, पूण डिव्हायस आकारांतल्यान navbar घटकांक सोंपें हाताळपा खातीर माध्यम क्वेरींक ते व्याप्ती केल्यात.

एका परस चड घटकांक उजवें संरेखित करप

नवबारांक सद्या एका परस चड .navbar-rightवर्गांची मर्यादा आसा. सामुग्री योग्य रितीन सुवात दिवपाक, आमी निमाण्या .navbar-rightघटकाचेर नकारात्मक मार्जिन वापरतात. जेन्ना त्या वर्गाचो वापर करपी जायते घटक आसतात, तेन्ना हे मार्जिन हेतू प्रमाणें काम करिनात.

जेन्ना आमी v4 त तो घटक परतून बरोवंक शकतले तेन्ना आमी हाचेर परतून नदर मारतले.

एक वा केंद्रांत आनी पॅड नवबार सामुग्री जोडात .navbar-fixed-topआनी समाविष्ट करात..container.container-fluid

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

बॉडी पॅडींग करपाची गरज आसा

स्थिर नवबार तुमची हेर सामुग्री आच्छादीत करतली, जो मेरेन तुमी paddingवयल्या भागांत जोडटात <body>. तुमचीं स्वताचीं मोलां वापरून पळयात वा सकयल दिल्लो आमचो स्निपेट वापरात. टिप: पूर्वनिर्धारीतपणान, नवबार 50px उंच आसा.

body { padding-top: 70px; }

कोर बूटस्ट्रॅप CSS उपरांत हें समाविष्ट करपाची खात्री करात .

एक वा केंद्रांत आनी पॅड नवबार सामुग्री जोडात .navbar-fixed-bottomआनी समाविष्ट करात..container.container-fluid

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

बॉडी पॅडींग करपाची गरज आसा

स्थिर नवबार तुमची हेर सामुग्री आच्छादीत करतली, जो मेरेन paddingतुमी <body>. तुमचीं स्वताचीं मोलां वापरून पळयात वा सकयल दिल्लो आमचो स्निपेट वापरात. टिप: पूर्वनिर्धारीतपणान, नवबार 50px उंच आसा.

body { padding-bottom: 70px; }

कोर बूटस्ट्रॅप CSS उपरांत हें समाविष्ट करपाची खात्री करात .

एक वा केंद्रांत आनी पॅड नावबार सामुग्री जोडून .navbar-static-topआनी समाविष्ट करून पान वांगडा पयस स्क्रोल करपी पुराय रुंदायेचो नावबार तयार करचो..container.container-fluid

वर्गां परस वेगळे तरेन .navbar-fixed-*, तुमकां कसलेंच पॅडींग बदलपाची गरज ना body.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

जोडून नवबाराचो देखावो बदलचो .navbar-inverse.

<nav class="navbar navbar-inverse">
  ...
</nav>

ब्रेडक्रंब हें नांव

नेव्हिगेशनल क्रमवारींत सद्याच्या पानाचें स्थान दाखोवचें.

विभाजक आपसूक CSS त :beforeआनी वरवीं जोडटात content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

पृष्ठांकन करप

तुमच्या साइट वा ऍप्लिकेशनाक पृष्ठांकन दुवे दिवचे बहु-पान पृष्ठांकन घटका वांगडा, वा सोपो पेजर पर्याय .

मुलभूत पृष्ठांकन

Rdio कडल्यान प्रेरीत केल्लें सादें पृष्ठांकन, ऍप्लिकेशनां आनी सोद परिणामां खातीर उत्तम. व्हडलो ब्लॉक चुकप कठीण, सहज मापनीय, आनी व्हड क्लिक क्षेत्र पुरवण करता.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

पृष्ठांकन घटकाक लेबल करप

पृष्ठांकन घटक <nav>वाचप्यांक आनी हेर सहाय्यक तंत्रज्ञानांक स्क्रीन करपाक नेव्हिगेशन विभाग म्हूण वळखुपा खातीर घटकांत गुठलावपाक जाय. ते भायर, पानांत अशे एका परस चड नेव्हिगेशन विभाग पयलींच आसपाची शक्यताय आशिल्ल्यान (देखीक शीर्षकातलें प्राथमीक नेव्हिगेशन, वा सायडबार नेव्हिगेशन), ताच्या उद्देशाचें प्रतिबिंबीत aria-labelकरपी ताचे खातीर वर्णनात्मक दिवप सल्ला दितात. <nav>देखीक, सोद परिणामांच्या संचांतल्यान नेव्हिगेट करपाखातीर पृष्ठांकन घटक वापरल्यार, योग्य लेबल आसूं येता aria-label="Search results pages".

अपंग आनी सक्रिय राज्यां

दुवे वेगवेगळ्या परिस्थिती खातीर अनुकूल करपाक मेळटात. .disabledक्लिक करूंक शकना अशा दुव्यां खातीर आनी .activeसद्याचें पान दाखोवपाक वापरात .

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

आमी शिफारस करतात की तुमी सक्रिय वा अक्षम केल्ले एंकर , खातीर स्वॅप आउट <span>करचे, वा फाटल्या/फुडल्या बाणांच्या बाबतींत एंकर वगळचे, हेतू आशिल्लीं शैलीं तिगोवन दवरतना क्लिक कार्यक्षमताय काडून उडोवपाक.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

आकारमान करप

फॅन्सी व्हड वा ल्हान पृष्ठांकन? जोडचें .pagination-lgवा .pagination-smअतिरिक्त आकारां खातीर.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

पेजर हें नांव

उजवाड मार्कअप आनी शैलीं सयत साद्या पृष्ठांकन कार्यान्वयनांक जलद आदले आनी फुडले दुवे. ब्लॉग वा नेमाळीं सारकिल्या साद्या सायटीं खातीर हें बरें.

मुलभूत उदाहरण

पूर्वनिर्धारीतपणान, पेजर दुवे केंद्रीत करता.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

पर्यायान, तुमी दरेक दुवो बाजूंक संरेखित करूंक शकतात:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

पर्यायी अक्षम स्थिती

पेजर दुवे पृष्ठांकनांतल्यान सामान्य .disabledउपयुक्तताय वर्गूय वापरतात.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

लेबलां

उदारण

उदाहरण शीर्षक नवें

उदाहरण शीर्षक नवें

उदाहरण शीर्षक नवें

उदाहरण शीर्षक नवें

उदाहरण शीर्षक नवें
उदाहरण शीर्षक नवें
<h3>Example heading <span class="label label-default">New</span></h3>

उपलब्ध आशिल्ले बदल

लेबलाचें रूप बदलपाखातीर सकयल दिल्ल्या खंयचेय संशोधक वर्ग जोडात.

मुलभूत प्राथमीक यशस्वी म्हायती शिटकावणी धोको
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

टन लेबलां आसात?

जेन्ना तुमचे कडेन अरुंद कंटेनरा भितर डझनभर इनलायन लेबलां आसतात, दरेकल्याक आपलो स्वताचो inline-blockघटक (चिना सारके) आसता तेन्ना रेंडरींग समस्या निर्माण जावंक शकतात. हाचे भोंवतणीचो मार्ग म्हणल्यार सेटिंग display: inline-block;. संदर्भ आनी एक उदाहरणा खातीर, पळयात #13219 .

बॅज घालतात

<span class="badge">दुवे, Bootstrap navs, आनी हेर कडेन a जोडून नवी वा वाचूंक नाशिल्लीं वस्तू सहजतायेन हायलाइट करात.

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

स्वताक कोसळप

जेन्ना नवी वा वाचूंक नाशिल्लीं वस्तू नात, तेन्ना बॅज फकत कोसळटले (CSS च्या :emptyनिवडका वरवीं) भितर कसलीच सामुग्री अस्तित्वांत नासल्यार.

क्रॉस-ब्राउझर सुसंगती

Internet Explorer 8 त बॅज स्वता कोसळचे नात कारण तातूंत निवडकाखातीर आदार ना :empty.

सक्रिय nav राज्यांक अनुकूल जाता

गोळी नेव्हिगेशनांत सक्रिय राज्यांत बॅज दवरपा खातीर बिल्ट-इन शैलींचो आस्पाव केला.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

जंबोट्रॉन हें नांव

एक हलको, लवचीक घटक जो तुमच्या साइटचेर कळ सामुग्री दाखोवंक पर्यायीपणान पुराय व्यूपोर्ट विस्तार करूंक शकता.

नमस्कार, संवसार!

हो एक सादो नायक एकक, वैशिश्ट्यपूर्ण सामुग्री वा म्हायतीचेर चड लक्ष ओडपा खातीर एक सादो जंबोट्रॉन शैलीचो घटक.

चड जाणून घेयात

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

जंबोट्रॉन पुराय रुंदायेची करपाक, आनी वाटकुळे कोनशे नासतना, सगळ्या .containers भायर दवरात आनी ताचे बदला .containerभितर एक जोडात.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

पृष्ठ शीर्षक

h1एक पानाचेर सामुग्री विभाग योग्य रितीन स्पेस करपाक आनी विभागपाक एक सादें शेल . तो h1's मुलभूत smallघटकाचो वापर करूंक शकता, तशेंच चडशे हेर घटक (अतिरिक्त शैलीं सयत).

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

लघुप्रतिमा

प्रतिमा, व्हिडियो, मजकूर आनी हेर ग्रिड सहजपणान दाखोवपाक लघुप्रतिमा घटका वांगडा Bootstrap ची ग्रिड प्रणाली वाडोवची.

तुमी वेगवेगळ्या उंचायेचे आनी/वा रुंदायेच्या लघुप्रतिमांचें Pinterest-सारकें सादरीकरण सोदतात जाल्यार, तुमकां Masonry , Isotope , वा Salvattore सारकें तिसऱ्या पक्षाचें प्लगइन वापरचें पडटलें .

मुलभूत उदाहरण

पूर्वनिर्धारीतपणान, Bootstrap ची लघुप्रतिमा उण्यांत उणी गरज आशिल्ल्या मार्कअपान दुवो केल्लीं प्रतिमा दाखोवपाक तयार केल्यात.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

सानुकूल सामुग्री

थोडें अतिरिक्त मार्कअप आसल्यार, शीर्षकां, परिच्छेद, वा बटणां सारकिल्या खंयच्याय प्रकारची HTML सामुग्री लघुप्रतिमांत जोडप शक्य आसा.

100%x200 इतलें आसा

लघुप्रतिमा लेबल

क्रास जुस्टो ओडियो, डापिबस असि फेसिलिस इन, एगेस्तास एगेट क्वाम. डोनेक आयडी एलिट नॉन मी पोर्टा ग्रेविडा अॅट एगेट मेटस. नुल्लम आयडी डोलोर आयडी निभ उल्ट्रिसीस वेहिकुला उत आयडी एलिट.

बटन बटन

100%x200 इतलें आसा

लघुप्रतिमा लेबल

क्रास जुस्टो ओडियो, डापिबस असि फेसिलिस इन, एगेस्तास एगेट क्वाम. डोनेक आयडी एलिट नॉन मी पोर्टा ग्रेविडा अॅट एगेट मेटस. नुल्लम आयडी डोलोर आयडी निभ उल्ट्रिसीस वेहिकुला उत आयडी एलिट.

बटन बटन

100%x200 इतलें आसा

लघुप्रतिमा लेबल

क्रास जुस्टो ओडियो, डापिबस असि फेसिलिस इन, एगेस्तास एगेट क्वाम. डोनेक आयडी एलिट नॉन मी पोर्टा ग्रेविडा अॅट एगेट मेटस. नुल्लम आयडी डोलोर आयडी निभ उल्ट्रिसीस वेहिकुला उत आयडी एलिट.

बटन बटन

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

सावधानताय दिता

उपलब्ध आनी लवचीक सावधानताय संदेशांच्या मुठींतल्यान सादारण वापरप्याच्या कृतीं खातीर संदर्भ प्रतिसाद संदेश पुरवण करात.

उदाहरणां

खंयचोय मजकूर आनी एक पर्यायी डिसमिस बटण आनी मुळाव्या सावधानताय संदेशांखातीर .alertचार संदर्भ वर्गांतल्या एका वर्गांत (देखीक, ) गुठलायात..alert-success

मुलभूत वर्ग ना

सावधानतायेंत मुलभूत वर्ग नात, फकत बेस आनी संशोधक वर्ग आसात. मुलभूत राखाडी इशारो चड अर्थ ना, देखून तुमकां संदर्भ वर्गा वरवीं प्रकार निर्देशीत करपाची गरज आसा. यश, म्हायती, शिटकावणी, वा धोको हातूंतल्यान निवडात.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

खारिज करपाक येवपी सावधानताय

पर्यायी .alert-dismissibleआनी बंद बटण जोडून खंयच्याय इशाऱ्याचेर तयार करात.

जावास्क्रिप्ट इशारो प्लगइनाची गरज आसा

पुरायपणान कार्य करपी, न्हयकारपाक येवपी सावधानताय खातीर, तुमी सावधानताय वापरपाक जाय JavaScript प्लगइन .

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

सगळ्या साधनां वयल्यान योग्य वागणूक सुनिश्चीत करात

डेटा गुणधर्म आशिल्लो <button>घटक वापरपाची खात्री करात .data-dismiss="alert"

.alert-linkखंयच्याय सावधानते भितर जुळपी रंगीत दुवे बेगीन पुरवण करपाक उपयुक्तताय वर्ग वापरात .

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

प्रगती पट्ट्यो

साद्या तरी लवचीक प्रगती पट्ट्यां सयत कार्यप्रवाह वा कृतीच्या प्रगतीचेर अद्ययावत प्रतिसाद दिवप.

क्रॉस-ब्राउझर सुसंगती

प्रगती पट्टी तांचे कांय परिणाम साध्य करपाक CSS3 संक्रमण आनी एनिमेशन वापरतात. Internet Explorer 9 आनी सकयल वा Firefox च्या पोरन्या आवृत्त्यांनी हीं वैशिश्ट्यां समर्थीत नात. ओपेरा 12 एनिमेशनाक तेंको दिना.

सामुग्री सुरक्षा धोरण (CSP) सुसंगती

तुमच्या संकेतथळा कडेन सामुग्री सुरक्षा धोरण (CSP) आसल्यार जें परवानगी दिना , मागीर तुमकां सकयल दिल्ल्या आमच्या उदाहरणांनी दाखयल्ले प्रमाणें प्रगती पट्टी रुंदाय सेट करपाक style-src 'unsafe-inline'इनलायन गुणधर्म वापरूंक मेळचे नात . styleकडक CSP कडेन सुसंगत आशिल्लीं रुंदायो सेट करपाच्यो पर्यायी पद्दतींनी थोडी सानुकूल JavaScript वापरप (जें सेट करता element.style.width) वा सानुकूल CSS वर्ग वापरप हांचो आस्पाव जाता.

मुळावें उदाहरण

मुलभूत प्रगती पट्टी.

60% पुराय जालें
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

लेबल आशिल्लें

दृश्य टक्केवारी दाखोवपाखातीर प्रगती पट्टी भितरल्यान <span>with वर्ग काडून उडोवचो ..sr-only

६०% आनी .
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

लेबल मजकूर उण्या टक्केवारी खातीर लेगीत वाचपासारको उरता हाची खात्री min-widthकरपाक, प्रगती पट्टेंत a जोडपाचो विचार करात.

०% इतलें आसा.
२% आनी .
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

संदर्भात्मक पर्याय

प्रगती पट्टी सुसंगत शैलींखातीर कांय समान बटण आनी सावधान वर्ग वापरतात.

40% पुराय (यशस्वी) .
२०% पुराय जालें
60% पुराय (शिटकावणी) .
८०% पूर्ण (धोको) ४.
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

पट्टीदार

पट्टेदार प्रभाव तयार करपाखातीर ग्रेडियेंट वापरता. IE9 आनी सकयल उपलब्ध ना.

40% पुराय (यशस्वी) .
२०% पुराय जालें
60% पुराय (शिटकावणी) .
८०% पूर्ण (धोको) ४.
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

एनिमेटेड केल्लें

पट्ट्यांक उजवे कडल्यान दावेक एनिमेट करपाक .activeजोडात . .progress-bar-stripedIE9 आनी सकयल उपलब्ध ना.

४५% पुराय जालें
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

स्टॅक केल्लें

एकाच भितर जायत्यो बार दवरून .progressतांचो रांको दवरचो.

३५% पूर्ण (यशस्वी) ६.
२०% पुराय (शिटकावणी) .
१०% पूर्ण (धोको) ४.
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

माध्यम वस्तू

मजकूर सामुग्री वांगडा डावी- वा ​​उजवी-संरेखित प्रतिमा दाखोवपी वेगवेगळ्या प्रकारचे घटक (जशे की ब्लॉग टिप्पणी, ट्विट, आदी) तयार करपाखातीर अमूर्त वस्तू शैली.

मुलभूत माध्यम

मुलभूत माध्यम सामुग्री ब्लॉकाचे दावे वा उजवे वटेन एक माध्यम वस्तू (प्रतिमा, व्हिडियो, ऑडियो) दाखयता.

मिडिया शीर्षक

क्रास बस आमेत निभ लिबेरो, ग्रेविडा नुल्ला में. नुल्ला वेल मेटस स्केलेरिस्क आंत सोलिसिटुडीन कोमोडो. क्रास पुरस ओडियो, वेस्टिबुलम इन वल्पुटेट अॅट, टेम्पस व्हिवेरा टर्पिस. फ्युसे कॉन्डिमेंटम ननक एसी निसी वल्पुटेट फ्रिंजिला. फॉसिबसांत डोनेक लॅसिनिया कॉंग फेलिस.

मिडिया शीर्षक

क्रास बस आमेत निभ लिबेरो, ग्रेविडा नुल्ला में. नुल्ला वेल मेटस स्केलेरिस्क आंत सोलिसिटुडीन कोमोडो. क्रास पुरस ओडियो, वेस्टिबुलम इन वल्पुटेट अॅट, टेम्पस व्हिवेरा टर्पिस. फ्युसे कॉन्डिमेंटम ननक एसी निसी वल्पुटेट फ्रिंजिला. फॉसिबसांत डोनेक लॅसिनिया कॉंग फेलिस.

नेस्टेड माध्यम शीर्षक

क्रास बस आमेत निभ लिबेरो, ग्रेविडा नुल्ला में. नुल्ला वेल मेटस स्केलेरिस्क आंत सोलिसिटुडीन कोमोडो. क्रास पुरस ओडियो, वेस्टिबुलम इन वल्पुटेट अॅट, टेम्पस व्हिवेरा टर्पिस. फ्युसे कॉन्डिमेंटम ननक एसी निसी वल्पुटेट फ्रिंजिला. फॉसिबसांत डोनेक लॅसिनिया कॉंग फेलिस.

मिडिया शीर्षक

क्रास बस आमेत निभ लिबेरो, ग्रेविडा नुल्ला में. नुल्ला वेल मेटस स्केलेरिस्क आंत सोलिसिटुडीन कोमोडो. क्रास पुरस ओडियो, वेस्टिबुलम इन वल्पुटेट अॅट, टेम्पस व्हिवेरा टर्पिस.

मिडिया शीर्षक

क्रास बस आमेत निभ लिबेरो, ग्रेविडा नुल्ला में. नुल्ला वेल मेटस स्केलेरिस्क आंत सोलिसिटुडीन कोमोडो. क्रास पुरस ओडियो, वेस्टिबुलम इन वल्पुटेट अॅट, टेम्पस व्हिवेरा टर्पिस.
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

वर्ग .pull-leftआनी .pull-rightतशेंच अस्तित्वांत आसात आनी आदीं माध्यम घटकाचो भाग म्हणून वापरिल्ले, पूण v3.3.0 मेरेन त्या वापरा खातीर नाका म्हण्टात. ते अदमासाक .media-leftआनी च्या समतुल्य आसात .media-right, सोडल्यार html च्या .media-rightउपरांत दवरपाक जाय ..media-body

माध्यम संरेखण

प्रतिमा वा हेर माध्यमां वयल्यान, मदीं वा सकयल एके वळीन दवरूं येतात. मुलभूत शीर्ष संरेखित आसा.

शीर्ष संरेखित माध्यमां

क्रास बस आमेत निभ लिबेरो, ग्रेविडा नुल्ला में. नुल्ला वेल मेटस स्केलेरिस्क आंत सोलिसिटुडीन कोमोडो. क्रास पुरस ओडियो, वेस्टिबुलम इन वल्पुटेट अॅट, टेम्पस व्हिवेरा टर्पिस. फ्युसे कॉन्डिमेंटम ननक एसी निसी वल्पुटेट फ्रिंजिला. फॉसिबसांत डोनेक लॅसिनिया कॉंग फेलिस.

डोनेक सेड ओडियो दुई. नुल्लम क्विस रिसुस एगेट उर्ना मोलिस ऑर्नारे वेल इउ लियो. कम सोसायस नाटोक पेनाटिबस एट मॅग्निस डिस पार्ट्युरिएंट मोंटेस, नास्केटर रिडिकुलस मस.

मदल्या संरेखित माध्यमां

क्रास बस आमेत निभ लिबेरो, ग्रेविडा नुल्ला में. नुल्ला वेल मेटस स्केलेरिस्क आंत सोलिसिटुडीन कोमोडो. क्रास पुरस ओडियो, वेस्टिबुलम इन वल्पुटेट अॅट, टेम्पस व्हिवेरा टर्पिस. फ्युसे कॉन्डिमेंटम ननक एसी निसी वल्पुटेट फ्रिंजिला. फॉसिबसांत डोनेक लॅसिनिया कॉंग फेलिस.

डोनेक सेड ओडियो दुई. नुल्लम क्विस रिसुस एगेट उर्ना मोलिस ऑर्नारे वेल इउ लियो. कम सोसायस नाटोक पेनाटिबस एट मॅग्निस डिस पार्ट्युरिएंट मोंटेस, नास्केटर रिडिकुलस मस.

तळाक संरेखित केल्ली माध्यमां

क्रास बस आमेत निभ लिबेरो, ग्रेविडा नुल्ला में. नुल्ला वेल मेटस स्केलेरिस्क आंत सोलिसिटुडीन कोमोडो. क्रास पुरस ओडियो, वेस्टिबुलम इन वल्पुटेट अॅट, टेम्पस व्हिवेरा टर्पिस. फ्युसे कॉन्डिमेंटम ननक एसी निसी वल्पुटेट फ्रिंजिला. फॉसिबसांत डोनेक लॅसिनिया कॉंग फेलिस.

डोनेक सेड ओडियो दुई. नुल्लम क्विस रिसुस एगेट उर्ना मोलिस ऑर्नारे वेल इउ लियो. कम सोसायस नाटोक पेनाटिबस एट मॅग्निस डिस पार्ट्युरिएंट मोंटेस, नास्केटर रिडिकुलस मस.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

माध्यमांची वळेरी

थोडें अतिरिक्त मार्कअप आसल्यार, तुमी यादी भितर माध्यम वापरूं येता (टिप्पणी धागे वा लेख यादी खातीर उपेगी).

  • मिडिया शीर्षक

    क्रास बस आमेत निभ लिबेरो, ग्रेविडा नुल्ला में. नुल्ला वेल मेटस स्केलेरिस्क आंत सोलिसिटुडीन कोमोडो. क्रास पुरस ओडियो, वेस्टिबुलम इन वल्पुटेट अॅट, टेम्पस व्हिवेरा टर्पिस.

    नेस्टेड माध्यम शीर्षक

    क्रास बस आमेत निभ लिबेरो, ग्रेविडा नुल्ला में. नुल्ला वेल मेटस स्केलेरिस्क आंत सोलिसिटुडीन कोमोडो. क्रास पुरस ओडियो, वेस्टिबुलम इन वल्पुटेट अॅट, टेम्पस व्हिवेरा टर्पिस.

    नेस्टेड माध्यम शीर्षक

    क्रास बस आमेत निभ लिबेरो, ग्रेविडा नुल्ला में. नुल्ला वेल मेटस स्केलेरिस्क आंत सोलिसिटुडीन कोमोडो. क्रास पुरस ओडियो, वेस्टिबुलम इन वल्पुटेट अॅट, टेम्पस व्हिवेरा टर्पिस.

    नेस्टेड माध्यम शीर्षक

    क्रास बस आमेत निभ लिबेरो, ग्रेविडा नुल्ला में. नुल्ला वेल मेटस स्केलेरिस्क आंत सोलिसिटुडीन कोमोडो. क्रास पुरस ओडियो, वेस्टिबुलम इन वल्पुटेट अॅट, टेम्पस व्हिवेरा टर्पिस.
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

यादी गट

यादी गट हो फकत घटकांची सादी वळेरी न्हय, तर सानुकूल आशय आशिल्लीं जटिलां दाखोवपाखातीर एक लवचीक आनी बळिश्ट घटक आसा.

मुळावें उदाहरण

सगळ्यांत मुळावो यादी गट फकत यादी वस्तू आशिल्ली एक अक्रमबध्द वळेरी, आनी योग्य वर्ग. उपरांत येवपी पर्यायां सयत ताचेर उबारात, वा गरज पडल्यार तुमचो स्वताचो CSS.

  • क्रास जस्टो ओडियो
  • दापिबस एसी सुविधा इन
  • मोरबी लियो रिसुस हें नांव
  • पोर्टा एसी कॉन्सेक्टेतुर एसी
  • इरोस हांगा वेस्टिबुलम
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

बॅज घालतात

खंयच्याय यादी गट आयटमांत बॅज घटक जोडात आनी तो आपोआप उजवे वटेन स्थापन जातलो.

  • १४ हें नांवक्रास जस्टो ओडियो
  • दापिबस एसी सुविधा इन
  • मोरबी लियो रिसुस हें नांव
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

लिंक केल्लीं वस्तू

वळेरी वस्तू बदला एंकर टॅग वापरून यादी गट आयटमांचो दुवो करचो (म्हळ्यार एक पालक <div>बदला एक पालक असोय जाता <ul>). दर एका घटका भोंवतणी वैयक्तीक पालकांची गरज ना.

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

बटणाचीं वस्तू

यादी गट वस्तू यादी वस्तू बदला बटण आसूं येतात (म्हळ्यारय एक पालक <div>बदला एक <ul>). दर एका घटका भोंवतणी वैयक्तीक पालकांची गरज ना. हांगा मानक वर्ग वापरूं नाकात ..btn

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

अक्षम केल्लीं वस्तू

अक्षम दिसपाक तो ग्रे .disabledकरपाक a कडेन जोडात ..list-group-item

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

संदर्भात्मक वर्ग

आयटम वळेरी शैली करपाक संदर्भ वर्ग वापरात, मुलभूत वा दुवो. तशेंच .activeराज्याचोय आस्पाव जाता.

  • दापिबस एसी सुविधा इन
  • क्रास बस आमेत निभ लिबेरो
  • पोर्टा एसी कॉन्सेक्टेतुर एसी
  • इरोस हांगा वेस्टिबुलम
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

सानुकूल सामुग्री

भितर लागीं लागीं खंयचोय HTML जोडचो, सकयल दिल्ल्या सारकिल्या दुवो केल्ल्या यादी गटां खातीर लेगीत.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

पॅनल हांचो आस्पाव जाता

सदांच गरजेचें नासलें तरी केन्ना केन्नाय तुमकां तुमचो DOM एका बॉक्सांत घालपाची गरज आसता. त्या परिस्थिती खातीर, पॅनल घटक वापरून पळयात.

मुळावें उदाहरण

पूर्वनिर्धारीतपणान, सगळें .panelकरता कांय मुळावी शिमो आनी कांय सामुग्री आसपावपाक पॅडींग लागू करप.

मुळावें पॅनल उदाहरण
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

शीर्षक आशिल्लें पॅनल

सहजतायेन तुमच्या पॅनलांत शीर्षक कंटेनर जोडात .panel-heading. तुमी खंयचेंय <h1>- पूर्व-स्टायल केल्लें शीर्षक जोडपाक वर्गा <h6>वांगडाय समाविष्ट करूंक शकतात. .panel-titleपूण, <h1>- च्या फॉन्ट आकारांक लागून <h6>अधिलिखित केल्यात .panel-heading.

योग्य दुवो रंगोवपाखातीर, भितर शीर्षकांत दुवे दवरपाची खात्री करात .panel-title.

शीर्षक नाशिल्लें पॅनल शीर्षक
पॅनल आशय

पॅनल शीर्षक

पॅनल आशय
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

बटण वा दुय्यम मजकूर रॅप करात .panel-footer. संदर्भ बदल वापरतना पॅनल फूटर रंग आनी शिमो वारसा दिना कारण ते अग्रभूमिंत आसपाक जायनात हें लक्षांत दवरात.

पॅनल आशय
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

संदर्भात्मक पर्याय

हेर घटकां प्रमाणें, खंयचोय संदर्भ स्थिती वर्ग जोडून सहजपणान पॅनल एका विशिश्ट संदर्भाक चड अर्थपूर्ण करचो.

पॅनल शीर्षक

पॅनल आशय

पॅनल शीर्षक

पॅनल आशय

पॅनल शीर्षक

पॅनल आशय

पॅनल शीर्षक

पॅनल आशय

पॅनल शीर्षक

पॅनल आशय
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

मेजांवांगडा

.tableविनाविलंब डिझायनाक पॅनेला भितर खंयचेय बिगर-बॉर्डर जोडात . जर एक आसल्यार .panel-body, आमी वेगळे करपा खातीर कोश्टकाच्या वयल्या भागांत एक अतिरिक्त शिमो जोडटात.

पॅनल शीर्षक

हांगा कांय मुलभूत पॅनल सामुग्री. नुल्ला व्हिटॅ एलिट लिबेरो, एक फारेत्रा ऑग. एनियन लॅसिनिया बायबेंडम नुला सेड कॉन्सेक्टेतुर. एनियन यु लियो क्वाम. पेलेन्टेस्क ऑर्नारे सेम लॅसिनिया क्वाम व्हेनेनेटिस वेस्टिबुलम. नुल्लम आयडी डोलोर आयडी निभ उल्ट्रिसीस वेहिकुला उत आयडी एलिट.

# 1 . पयलें नांव निमाणें नांव वापरप्याचें नांव
मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
जाकोब थॉर्नटन हांणी केला @चरबी
लॅरी हांणी केला सुकणें हें @twitter हांणी केला
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

पॅनल बॉडी ना जाल्यार, घटक पॅनल हेडरांतल्यान कोश्टकांत व्यत्यय करिनासतना वता.

पॅनल शीर्षक
# 1 . पयलें नांव निमाणें नांव वापरप्याचें नांव
मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
जाकोब थॉर्नटन हांणी केला @चरबी
लॅरी हांणी केला सुकणें हें @twitter हांणी केला
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

यादी गटां वांगडा

खंयच्याय पॅनेला भितर पुराय रुंदायेचे यादी गट सहजतायेन समाविष्ट करात.

पॅनल शीर्षक

हांगा कांय मुलभूत पॅनल सामुग्री. नुल्ला व्हिटॅ एलिट लिबेरो, एक फारेत्रा ऑग. एनियन लॅसिनिया बायबेंडम नुला सेड कॉन्सेक्टेतुर. एनियन यु लियो क्वाम. पेलेन्टेस्क ऑर्नारे सेम लॅसिनिया क्वाम व्हेनेनेटिस वेस्टिबुलम. नुल्लम आयडी डोलोर आयडी निभ उल्ट्रिसीस वेहिकुला उत आयडी एलिट.

  • क्रास जस्टो ओडियो
  • दापिबस एसी सुविधा इन
  • मोरबी लियो रिसुस हें नांव
  • पोर्टा एसी कॉन्सेक्टेतुर एसी
  • इरोस हांगा वेस्टिबुलम
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

प्रतिसाद दिवपी एम्बेड करप

खंयच्याय डिव्हायसाचेर योग्य रितीन स्केल करतले अशें अंतर्गत प्रमाण तयार करून ब्राउझरांक तांच्या आशिल्ल्या ब्लॉकाचे रुंदायेचेर आदारीत व्हिडियो वा स्लाइडशो परिमाण थारावपाक परवानगी दिवची.

नेम थेट <iframe>, <embed>, <video>, आनी <object>घटकांक लागू करतात; .embed-responsive-itemहेर गुणधर्मांखातीर स्टायलिंग जुळोवंक जाय तेन्ना पर्यायीपणान स्पश्ट वंशज वर्ग वापरात .

प्रो-टिप हें! आमी तुमकां तें ओव्हररायड करतात म्हणून तुमकां frameborder="0"तुमच्या s मदीं आस्पाव करपाची गरज ना .<iframe>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

वेल्स हांणी केला

बरी डिफॉल्ट करात

घटकाचेर सादो परिणाम म्हणून कुंड वापरून ताका इनसेट परिणाम दिवचो.

पळय, हांव एका कुंडांत आसां!
<div class="well">...</div>

पर्यायी वर्ग

दोन पर्यायी संशोधक वर्गां सयत पॅडींग आनी वाटकुळे कोनशे नियंत्रीत करात.

पळय, हांव एका व्हडल्या कुंडांत आसां!
<div class="well well-lg">...</div>
पळय, हांव एका ल्हान कुंडांत आसां!
<div class="well well-sm">...</div>