आयकॉनोग्राफी, ड्रॉपडाउन, इनपुट गट, नेव्हिगेशन, अलर्ट आणि बरेच काही प्रदान करण्यासाठी एक डझनहून अधिक पुन्हा वापरण्यायोग्य घटक तयार केले आहेत.
ग्लिफिकॉन्स
उपलब्ध ग्लिफ्स
Glyphicon Halflings संच मधील फॉन्ट स्वरूपात 250 पेक्षा जास्त ग्लिफ समाविष्ट करते. Glyphicons Halflings सहसा विनामूल्य उपलब्ध नसतात, परंतु त्यांच्या निर्मात्याने त्यांना बूटस्ट्रॅपसाठी विनामूल्य उपलब्ध केले आहे. धन्यवाद म्हणून, आम्ही फक्त जेव्हा शक्य असेल तेव्हा Glyphicons वर परत लिंक समाविष्ट करण्यास सांगतो.
glyphicon glyphicon-Asterisk
glyphicon glyphicon-plus
ग्लिफिकॉन ग्लिफिकॉन-युरो
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-Cloud
glyphicon glyphicon-लिफाफा
glyphicon glyphicon-पेन्सिल
glyphicon glyphicon-काच
glyphicon glyphicon-संगीत
glyphicon glyphicon-शोध
glyphicon glyphicon-हृदय
glyphicon glyphicon-तारा
glyphicon glyphicon-तारा-रिक्त
glyphicon glyphicon-वापरकर्ता
glyphicon glyphicon-चित्रपट
glyphicon glyphicon-th-laर्ज
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ठीक आहे
glyphicon glyphicon-काढणे
glyphicon glyphicon-झूम-इन
glyphicon glyphicon-झूम-आउट
glyphicon glyphicon-बंद
glyphicon glyphicon-सिग्नल
glyphicon glyphicon-cog
glyphicon glyphicon-कचरा
glyphicon glyphicon-घर
glyphicon glyphicon-फाइल
glyphicon glyphicon-वेळ
glyphicon glyphicon-road
glyphicon glyphicon-download-alt
glyphicon glyphicon-डाउनलोड
glyphicon glyphicon-अपलोड
glyphicon glyphicon-इनबॉक्स
glyphicon glyphicon-play-sircle
glyphicon glyphicon-पुनरावृत्ती
glyphicon glyphicon-रिफ्रेश
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-ध्वज
glyphicon glyphicon-हेडफोन
glyphicon glyphicon-खंड-बंद
glyphicon glyphicon-volum-down
ग्लिफिकॉन ग्लिफिकॉन-व्हॉल्यूम-अप
glyphicon glyphicon-qrcode
glyphicon glyphicon-बारकोड
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-पुस्तक
glyphicon glyphicon-बुकमार्क
glyphicon glyphicon-मुद्रण
glyphicon glyphicon-camera
glyphicon glyphicon-font
glyphicon glyphicon-ठळक
glyphicon glyphicon-तिरकस
glyphicon glyphicon-टेक्स्ट-उंची
glyphicon glyphicon-मजकूर-रुंदी
glyphicon glyphicon-संरेखित-डावीकडे
glyphicon glyphicon-align-center
glyphicon glyphicon-संरेखित-उजवीकडे
glyphicon glyphicon-align-justify
glyphicon glyphicon-सूची
glyphicon glyphicon-इंडेंट-डावीकडे
glyphicon glyphicon-इंडेंट-उजवे
glyphicon glyphicon-facetime-video
glyphicon glyphicon-चित्र
glyphicon glyphicon-map-marker
glyphicon glyphicon-समायोजित
glyphicon glyphicon-tint
glyphicon glyphicon-संपादन
glyphicon glyphicon-share
glyphicon glyphicon-चेक
glyphicon glyphicon-हलवा
glyphicon glyphicon-step-backward
glyphicon glyphicon-जलद-मागे
glyphicon glyphicon-मागे
glyphicon glyphicon-play
glyphicon glyphicon-विराम
glyphicon glyphicon-स्टॉप
glyphicon glyphicon-पुढे
glyphicon glyphicon-फास्ट-फॉरवर्ड
glyphicon glyphicon-स्टेप-फॉरवर्ड
glyphicon glyphicon-Eject
glyphicon glyphicon-शेवरॉन-डावीकडे
glyphicon glyphicon-शेवरॉन-उजवे
glyphicon glyphicon-plus-sign
glyphicon glyphicon-minus-sign
glyphicon glyphicon-काढून टाकण्याचे चिन्ह
glyphicon glyphicon-ok-sign
glyphicon glyphicon-प्रश्न-चिन्ह
glyphicon glyphicon-माहिती-चिन्ह
glyphicon glyphicon-स्क्रीनशॉट
glyphicon glyphicon-remove-sircle
glyphicon glyphicon-ok-वर्तुळ
glyphicon glyphicon-ban-sircle
glyphicon glyphicon-बाण-डावीकडे
glyphicon glyphicon-बाण-उजवे
glyphicon glyphicon-arrow-up
glyphicon glyphicon-arrow-down
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
glyphicon glyphicon-उद्गारवाचक-चिन्ह
glyphicon glyphicon-भेट
glyphicon glyphicon-पान
ग्लिफिकॉन ग्लिफिकॉन-फायर
glyphicon glyphicon-डोळा उघडा
glyphicon glyphicon-डोळा-बंद
glyphicon glyphicon-चेतावणी-चिन्ह
glyphicon glyphicon-प्लेन
glyphicon glyphicon-कॅलेंडर
glyphicon glyphicon-यादृच्छिक
glyphicon glyphicon-टिप्पणी
glyphicon glyphicon-चुंबक
ग्लिफिकॉन ग्लिफिकॉन-शेवरॉन-अप
ग्लिफिकॉन ग्लिफिकॉन-शेवरॉन-डाउन
glyphicon glyphicon-retweet
glyphicon glyphicon-shopping-cart
glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-open
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
glyphicon glyphicon-प्रमाणपत्र
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-हात-उजवीकडे
glyphicon glyphicon-हात-डावीकडे
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-वर्तुळ-बाण-उजवे
glyphicon glyphicon-वर्तुळ-बाण-डावा
glyphicon glyphicon-वर्तुळ-बाण-अप
glyphicon glyphicon-वर्तुळ-बाण-खाली
glyphicon glyphicon-globe
glyphicon glyphicon-पाना
glyphicon glyphicon-कार्ये
glyphicon glyphicon-filter
glyphicon glyphicon-ब्रीफकेस
glyphicon glyphicon-फुलस्क्रीन
glyphicon glyphicon-डॅशबोर्ड
glyphicon glyphicon-paperclip
glyphicon glyphicon-हृदय-रिक्त
glyphicon glyphicon-link
glyphicon glyphicon-फोन
glyphicon glyphicon-पुशपिन
glyphicon glyphicon-USD
glyphicon glyphicon-gbp
glyphicon glyphicon- क्रमवारी
glyphicon glyphicon-वर्गीकरणानुसार वर्णमाला
glyphicon glyphicon-वर्गीकरणानुसार-अक्षर-alt
glyphicon glyphicon-क्रमानुसार क्रमवारी लावा
glyphicon glyphicon-क्रमवारी-क्रमानुसार-alt
glyphicon glyphicon-श्रेणीनुसार-विशेषता
glyphicon glyphicon-श्रेणीनुसार-विशेषता-alt
glyphicon glyphicon-अनचेक
glyphicon glyphicon-विस्तार
glyphicon glyphicon-कोलॅप्स-डाउन
glyphicon glyphicon-संकुचित-अप
glyphicon glyphicon-लॉग-इन
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-नवीन-विंडो
glyphicon glyphicon-रेकॉर्ड
glyphicon glyphicon-सेव्ह
glyphicon glyphicon-ओपन
glyphicon glyphicon-जतन
glyphicon glyphicon-आयात
glyphicon glyphicon-निर्यात
glyphicon glyphicon-पाठवा
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-फ्लॉपी-सेव्ह
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-फ्लॉपी-ओपन
glyphicon glyphicon-क्रेडिट-कार्ड
glyphicon glyphicon-हस्तांतरण
glyphicon glyphicon-cutlery
glyphicon glyphicon-header
glyphicon glyphicon-संकुचित
glyphicon glyphicon-इयरफोन
glyphicon glyphicon-phone-alt
glyphicon glyphicon-टॉवर
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-उपशीर्षके
glyphicon glyphicon-ध्वनी-स्टिरीओ
glyphicon glyphicon-ध्वनी-डॉल्बी
glyphicon glyphicon-ध्वनी-5-1
glyphicon glyphicon-ध्वनी-6-1
glyphicon glyphicon-ध्वनी-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-नोंदणी-चिन्ह
glyphicon glyphicon-Cloud-download
glyphicon glyphicon-Cloud-upload
glyphicon glyphicon-ट्री-कॉनिफर
glyphicon glyphicon-वृक्ष-पर्णपाती
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-ओपन-फाइल
glyphicon glyphicon-स्तर-अप
glyphicon glyphicon-copy
glyphicon glyphicon-पेस्ट
glyphicon glyphicon-सूचना
glyphicon glyphicon-इक्वेलायझर
glyphicon glyphicon-king
glyphicon glyphicon-राणी
glyphicon glyphicon-प्यादा
glyphicon glyphicon-बिशप
glyphicon glyphicon-नाइट
glyphicon glyphicon-बेबी-फॉर्म्युला
glyphicon glyphicon-तंबू
glyphicon glyphicon-ब्लॅकबोर्ड
glyphicon glyphicon-बेड
glyphicon glyphicon-सफरचंद
glyphicon glyphicon-मिटवणे
glyphicon glyphicon-घंटागाडी
glyphicon glyphicon-दिवा
glyphicon glyphicon-डुप्लिकेट
glyphicon glyphicon-पिगी-बँक
glyphicon glyphicon-कात्री
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-येन
glyphicon glyphicon-jpy
glyphicon glyphicon-ruble
glyphicon glyphicon-rub
glyphicon glyphicon-स्केल
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ice-lolly-चविष्ट
glyphicon glyphicon-शिक्षण
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
glyphicon glyphicon-तेल
glyphicon glyphicon-धान्य
glyphicon glyphicon-सनग्लासेस
glyphicon glyphicon-मजकूर-आकार
glyphicon glyphicon-text-color
glyphicon glyphicon-टेक्स्ट-पार्श्वभूमी
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-ऑब्जेक्ट-संरेखित-क्षैतिज
glyphicon glyphicon-ऑब्जेक्ट-संरेखित-डावीकडे
glyphicon glyphicon-ऑब्जेक्ट-संरेखित-लंबवत
glyphicon glyphicon-ऑब्जेक्ट-संरेखित-उजवीकडे
glyphicon glyphicon-त्रिकोण-उजवे
glyphicon glyphicon-त्रिकोण-डावीकडे
glyphicon glyphicon-त्रिकोण-तळाशी
glyphicon glyphicon-त्रिकोण-शीर्ष
glyphicon glyphicon-console
glyphicon glyphicon-सुपरस्क्रिप्ट
glyphicon glyphicon-subscript
glyphicon glyphicon-मेनू-डावीकडे
glyphicon glyphicon-मेनू-उजवे
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up
कसे वापरावे
कामगिरीच्या कारणास्तव, सर्व चिन्हांना बेस क्लास आणि वैयक्तिक आयकॉन क्लास आवश्यक आहे. वापरण्यासाठी, खालील कोड कुठेही ठेवा. योग्य पॅडिंगसाठी चिन्ह आणि मजकूर दरम्यान जागा सोडण्याची खात्री करा.
इतर घटकांसह मिसळू नका
चिन्ह वर्ग थेट इतर घटकांसह एकत्र केले जाऊ शकत नाहीत. ते समान घटकावरील इतर वर्गांसह वापरले जाऊ नयेत. त्याऐवजी, नेस्टेड जोडा <span>आणि वर चिन्ह वर्ग लागू करा <span>.
फक्त रिकाम्या घटकांवर वापरण्यासाठी
आयकॉन क्लासेसचा वापर फक्त अशा घटकांवर केला पाहिजे ज्यामध्ये मजकूर सामग्री नाही आणि मूल घटक नाहीत.
चिन्ह फॉन्ट स्थान बदलत आहे
../fonts/बूटस्ट्रॅप आयकॉन फॉन्ट फाइल्स संकलित CSS फाइल्सच्या सापेक्ष निर्देशिकेत स्थित असेल असे गृहीत धरते . त्या फॉन्ट फायली हलवणे किंवा पुनर्नामित करणे म्हणजे तीनपैकी एका मार्गाने CSS अपडेट करणे:
स्त्रोत कमी फायलींमध्ये @icon-font-pathआणि/किंवा चल बदला .@icon-font-name
तुमच्या विशिष्ट डेव्हलपमेंट सेटअपला अनुकूल असलेला कोणताही पर्याय वापरा.
प्रवेशयोग्य चिन्हे
सहाय्यक तंत्रज्ञानाच्या आधुनिक आवृत्त्या CSS व्युत्पन्न सामग्री तसेच विशिष्ट युनिकोड वर्णांची घोषणा करतील. स्क्रीन रीडरमध्ये अनपेक्षित आणि गोंधळात टाकणारे आउटपुट टाळण्यासाठी (विशेषत: जेव्हा आयकॉन पूर्णपणे सजावटीसाठी वापरले जातात), आम्ही त्यांना aria-hidden="true"विशेषता सह लपवतो.
तुम्ही अर्थ व्यक्त करण्यासाठी चिन्ह वापरत असल्यास (केवळ सजावटीच्या घटकाऐवजी), हा अर्थ सहाय्यक तंत्रज्ञानापर्यंत देखील पोहोचला आहे याची खात्री करा – उदाहरणार्थ, .sr-onlyक्लासमध्ये दृष्यदृष्ट्या लपवलेली अतिरिक्त सामग्री समाविष्ट करा.
तुम्ही इतर कोणत्याही मजकुराशिवाय नियंत्रणे तयार करत असल्यास (जसे की <button>ज्यामध्ये फक्त एक आयकॉन आहे), तुम्ही नेहमी नियंत्रणाचा उद्देश ओळखण्यासाठी पर्यायी सामग्री प्रदान केली पाहिजे, जेणेकरून ते सहाय्यक तंत्रज्ञानाच्या वापरकर्त्यांना समजेल. या प्रकरणात, आपण aria-labelनियंत्रणावरच एक विशेषता जोडू शकता.
उदाहरणे
टूलबार, नेव्हिगेशन किंवा प्रीपेंडेड फॉर्म इनपुटसाठी बटणे, बटण गटांमध्ये त्यांचा वापर करा.
सहाय्यक तंत्रज्ञानाच्या वापरकर्त्यांना हा इशारा देण्यासाठी अतिरिक्त मजकूरासह, हा एक त्रुटी संदेश आहे हे सांगण्यासाठी अॅलर्टमध्ये वापरलेला एक चिन्ह ..sr-only
त्रुटी:एक वैध ईमेल पत्ता प्रविष्ट करा
ड्रॉपडाउन
लिंक्सच्या सूची प्रदर्शित करण्यासाठी टॉगल करण्यायोग्य, संदर्भ मेनू. ड्रॉपडाउन JavaScript प्लगइनसह परस्परसंवादी केले .
उदाहरण
ड्रॉपडाउनचा ट्रिगर आणि ड्रॉपडाउन मेनू आत गुंडाळा .dropdown, किंवा घोषित करणारा दुसरा घटक position: relative;. नंतर मेनूचा HTML जोडा.
डीफॉल्टनुसार, ड्रॉपडाउन मेनू स्वयंचलितपणे 100% शीर्षस्थानी आणि त्याच्या पालकाच्या डाव्या बाजूला स्थित असतो. ड्रॉपडाउन मेनू उजवीकडे संरेखित .dropdown-menu-rightकरण्यासाठी a मध्ये जोडा ..dropdown-menu
अतिरिक्त स्थितीची आवश्यकता असू शकते
दस्तऐवजाच्या सामान्य प्रवाहामध्ये CSS द्वारे ड्रॉपडाउन स्वयंचलितपणे स्थित केले जातात. याचा अर्थ पालकांद्वारे काही overflowगुणधर्मांसह ड्रॉपडाउन क्रॉप केले जाऊ शकतात किंवा व्ह्यूपोर्टच्या मर्यादेबाहेर दिसू शकतात. या समस्या उद्भवतात तेव्हा ते स्वतःच सोडवा.
बहिष्कृत .pull-rightसंरेखन
v3.1.0 नुसार, आम्ही .pull-rightड्रॉपडाउन मेनूवर नापसंत केले आहे. मेनू उजवीकडे संरेखित करण्यासाठी, वापरा .dropdown-menu-right. navbar मधील उजवे संरेखित nav घटक मेनू आपोआप संरेखित करण्यासाठी या वर्गाची मिक्सिन आवृत्ती वापरतात. ते अधिलिखित करण्यासाठी, वापरा .dropdown-menu-left.
शीर्षलेख
कोणत्याही ड्रॉपडाउन मेनूमधील क्रियांच्या विभागांना लेबल करण्यासाठी शीर्षलेख जोडा.
बटण गटासह एकाच ओळीवर बटणांची मालिका एकत्र करा. आमच्या बटण प्लगइनसह पर्यायी JavaScript रेडिओ आणि चेकबॉक्स शैली वर्तन जोडा .
बटण गटांमध्ये टूलटिप आणि पॉपओव्हरसाठी विशेष सेटिंग आवश्यक आहे
मधील घटकांवर टूलटिप किंवा पॉपओव्हर वापरताना .btn-group, तुम्हाला container: 'body'अवांछित साइड इफेक्ट्स टाळण्यासाठी पर्याय निर्दिष्ट करावा लागेल (जसे की, टूलटिप किंवा पॉपओव्हर ट्रिगर झाल्यावर घटक विस्तीर्ण होणे आणि/किंवा त्याचे गोलाकार कोपरे गमावणे).
बरोबर असल्याची खात्री करा roleआणि लेबल प्रदान करा
सहाय्यक तंत्रज्ञानासाठी - जसे की स्क्रीन रीडर - बटणांची मालिका गटबद्ध केली आहे हे सांगण्यासाठी, एक योग्य roleविशेषता प्रदान करणे आवश्यक आहे. बटण गटांसाठी, हे असेल role="group", तर टूलबारमध्ये role="toolbar".
एक अपवाद असे गट आहेत ज्यात फक्त एकच नियंत्रण असते (उदाहरणार्थ घटकांसह न्याय्य बटण गट<button> ) किंवा ड्रॉपडाउन.
या व्यतिरिक्त, गट आणि टूलबारना स्पष्ट लेबल दिले पाहिजे, कारण बहुतेक सहाय्यक तंत्रज्ञान अन्यथा योग्य roleगुणधर्म असूनही त्यांची घोषणा करणार नाहीत. येथे प्रदान केलेल्या उदाहरणांमध्ये, आम्ही वापरतो aria-label, परंतु पर्याय aria-labelledbyदेखील वापरले जाऊ शकतात.
मूळ उदाहरण
.btnमध्ये बटणांची मालिका गुंडाळा .btn-group.
बटण टूलबार
अधिक जटिल घटकांसाठी <div class="btn-group">a मध्ये संच एकत्र करा .<div class="btn-toolbar">
आकारमान
गटातील प्रत्येक बटणावर बटण आकाराचे वर्ग लागू करण्याऐवजी, एकाधिक गटांना नेस्ट करताना यासह , फक्त .btn-group-*प्रत्येकामध्ये जोडा..btn-group
घरटी
जेव्हा तुम्हाला बटणांच्या मालिकेसह ड्रॉपडाउन मेनू मिसळायचा असेल तेव्हा दुसर्यामध्ये .btn-groupठेवा ..btn-group
त्याच्या पॅरेंटची संपूर्ण रुंदी पसरवण्यासाठी बटणांचा समूह समान आकारात पसरवा. बटण गटातील बटण ड्रॉपडाउनसह देखील कार्य करते.
सीमा हाताळणे
बटणांचे समर्थन करण्यासाठी वापरल्या जाणार्या विशिष्ट HTML आणि CSS मुळे (म्हणजे display: table-cell) त्यांच्यामधील सीमा दुप्पट केल्या जातात. नियमित बटण गटांमध्ये, margin-left: -1pxते काढून टाकण्याऐवजी सीमा स्टॅक करण्यासाठी वापरले जाते. तथापि, marginसह कार्य करत नाही display: table-cell. परिणामी, बूटस्ट्रॅपवर तुमच्या सानुकूलितांच्या आधारावर, तुम्हाला बॉर्डर काढण्याची किंवा पुन्हा रंग देण्याची इच्छा असू शकते.
IE8 आणि सीमा
इंटरनेट एक्सप्लोरर 8 एका न्याय्य बटण गटातील बटणांवर सीमा रेंडर करत नाही, मग ते चालू <a>असो किंवा <button>घटक. त्याभोवती जाण्यासाठी, प्रत्येक बटण दुसर्यामध्ये गुंडाळा .btn-group.
जर <a>घटकांचा वापर बटणे म्हणून कार्य करण्यासाठी केला जात असेल - वर्तमान पृष्ठातील दुसर्या दस्तऐवजावर किंवा विभागात नेव्हिगेट करण्याऐवजी - इन-पेज कार्यक्षमता ट्रिगर करत असेल तर - त्यांना देखील योग्य दिले पाहिजे role="button".
<button>घटकांसह _
<button>घटकांसह न्याय्य बटण गट वापरण्यासाठी , तुम्ही प्रत्येक बटण एका बटण गटामध्ये गुंडाळले पाहिजे . बरेच ब्राउझर घटकांच्या समर्थनासाठी आमचे CSS योग्यरित्या लागू करत नाहीत <button>, परंतु आम्ही बटण ड्रॉपडाउनला समर्थन देत असल्याने, आम्ही त्यावर कार्य करू शकतो.
बटण ड्रॉपडाउन
ड्रॉपडाउन मेनू ट्रिगर करण्यासाठी कोणतेही बटण वापरा आणि ते a मध्ये ठेवून .btn-groupआणि योग्य मेनू मार्कअप प्रदान करा.
प्लगइन अवलंबित्व
बटण ड्रॉपडाउनसाठी ड्रॉपडाउन प्लगइन आपल्या बूटस्ट्रॅपच्या आवृत्तीमध्ये समाविष्ट करणे आवश्यक आहे.
सिंगल बटण ड्रॉपडाउन
काही मूलभूत मार्कअप बदलांसह एक बटण ड्रॉपडाउन टॉगलमध्ये बदला.
कोणत्याही मजकूर-आधारितच्या आधी, नंतर किंवा दोन्ही बाजूंनी मजकूर किंवा बटणे जोडून फॉर्म नियंत्रणे वाढवा <input>. .input-groupएकसह वापरा .input-group-addonकिंवा .input-group-btnघटकांना आधी जोडण्यासाठी किंवा जोडण्यासाठी वापरा .form-control.
केवळ मजकूर <input>एस
येथे घटक वापरणे टाळा <select>कारण ते वेबकिट ब्राउझरमध्ये पूर्णपणे शैलीबद्ध केले जाऊ शकत नाहीत.
<textarea>येथे घटक वापरणे टाळा कारण rowsकाही प्रकरणांमध्ये त्यांच्या गुणधर्माचा आदर केला जाणार नाही.
इनपुट गटांमध्ये टूलटिप आणि पॉपओव्हरसाठी विशेष सेटिंग आवश्यक आहे
मधील घटकांवर टूलटिप किंवा पॉपओव्हर वापरताना .input-group, तुम्हाला container: 'body'अवांछित साइड इफेक्ट्स टाळण्यासाठी पर्याय निर्दिष्ट करावा लागेल (जसे की घटक विस्तृत होणे आणि/किंवा टूलटिप किंवा पॉपओव्हर ट्रिगर झाल्यावर त्याचे गोलाकार कोपरे गमावणे).
इतर घटकांसह मिसळू नका
फॉर्म गट किंवा ग्रिड कॉलम वर्ग थेट इनपुट गटांसह मिक्स करू नका. त्याऐवजी, फॉर्म ग्रुप किंवा ग्रिड-संबंधित घटकाच्या आत इनपुट गट नेस्ट करा.
नेहमी लेबल जोडा
तुम्ही प्रत्येक इनपुटसाठी लेबल समाविष्ट न केल्यास स्क्रीन वाचकांना तुमच्या फॉर्ममध्ये अडचण येईल. या इनपुट गटांसाठी, कोणतेही अतिरिक्त लेबल किंवा कार्यक्षमता सहाय्यक तंत्रज्ञानापर्यंत पोहोचवली आहे याची खात्री करा.
वापरायचे अचूक तंत्र (दृश्यमान <label>घटक, वर्ग <label>वापरून लपवलेले घटक, किंवा , , , किंवा विशेषता वापरणे) आणि कोणती अतिरिक्त माहिती सांगावी लागेल हे तुम्ही अंमलात आणत असलेल्या इंटरफेस विजेटच्या अचूक प्रकारावर अवलंबून असेल. या विभागातील उदाहरणे काही सुचविलेले, केस-विशिष्ट दृष्टिकोन प्रदान करतात..sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder
मूळ उदाहरण
इनपुटच्या दोन्ही बाजूला एक अॅड-ऑन किंवा बटण ठेवा. तुम्ही इनपुटच्या दोन्ही बाजूला एक देखील ठेवू शकता.
आम्ही एकाच बाजूला एकाधिक अॅड-ऑन ( .input-group-addonकिंवा ) ला समर्थन देत नाही..input-group-btn
आम्ही एकाच इनपुट गटामध्ये एकाधिक फॉर्म-नियंत्रणांना समर्थन देत नाही.
आकारमान
संबंधित फॉर्म आकार वर्ग स्वतःमध्ये जोडा .input-groupआणि त्यातील सामग्री आपोआप आकार बदलेल - प्रत्येक घटकावर फॉर्म नियंत्रण आकार वर्गांची पुनरावृत्ती करण्याची आवश्यकता नाही.
चेकबॉक्स आणि रेडिओ अॅडऑन
मजकुराऐवजी इनपुट ग्रुपच्या अॅडऑनमध्ये कोणताही चेकबॉक्स किंवा रेडिओ पर्याय ठेवा.
बटण अॅडऑन
इनपुट गटांमधील बटणे थोडी वेगळी असतात आणि त्यांना एक अतिरिक्त स्तराची घरटी आवश्यक असते. ऐवजी .input-group-addon, तुम्हाला .input-group-btnबटणे गुंडाळण्यासाठी वापरण्याची आवश्यकता असेल. हे डीफॉल्ट ब्राउझर शैलींमुळे आवश्यक आहे जे अधिलिखित केले जाऊ शकत नाही.
ड्रॉपडाउनसह बटणे
विभागलेली बटणे
एकाधिक बटणे
तुमच्याकडे प्रत्येक बाजूला फक्त एक अॅड-ऑन असू शकतो, तुमच्याकडे एकाच मध्ये अनेक बटणे असू शकतात .input-group-btn.
नवस
बूटस्ट्रॅपमध्ये उपलब्ध असलेल्या Navs ने बेस .navक्लासपासून सुरू होणारे मार्कअप शेअर केले आहेत, तसेच शेअर केलेल्या स्टेटस आहेत. प्रत्येक शैली दरम्यान स्विच करण्यासाठी सुधारक वर्ग स्वॅप करा.
टॅब पॅनेलसाठी navs वापरण्यासाठी JavaScript टॅब प्लगइन आवश्यक आहे
टॅब करण्यायोग्य क्षेत्रांसह टॅबसाठी, तुम्ही टॅब JavaScript प्लगइन वापरणे आवश्यक आहे . मार्कअपसाठी अतिरिक्त roleआणि ARIA विशेषता देखील आवश्यक असतील – अधिक तपशीलांसाठी प्लगइनचे उदाहरण मार्कअप पहा.
नेव्हिगेशन प्रवेशयोग्य म्हणून वापरल्या जाणार्या navs बनवा
जर तुम्ही नेव्हिगेशन बार प्रदान करण्यासाठी navs वापरत असाल तर, role="navigation"च्या सर्वात तार्किक पालक कंटेनरमध्ये एक जोडण्याचे सुनिश्चित करा किंवा संपूर्ण नेव्हिगेशनभोवती <ul>एक घटक गुंडाळा. <nav>भूमिका स्वतःमध्ये जोडू नका <ul>, कारण हे सहाय्यक तंत्रज्ञानाद्वारे वास्तविक सूची म्हणून घोषित होण्यापासून प्रतिबंधित करेल.
टॅब
लक्षात घ्या वर्गाला बेस क्लास .nav-tabsआवश्यक आहे ..nav
सह 768px पेक्षा रुंद स्क्रीनवर त्यांच्या पालकांच्या समान रुंदीचे टॅब किंवा गोळ्या सहज बनवा .nav-justified. लहान स्क्रीनवर, एनएव्ही लिंक स्टॅक केलेले आहेत.
न्याय्य नवबार एनएव्ही लिंक्स सध्या समर्थित नाहीत.
सफारी आणि प्रतिसादात्मक न्याय्य एनएव्ही
v9.1.2 नुसार, सफारी एक बग प्रदर्शित करते ज्यामध्ये तुमच्या ब्राउझरचा आडवा आकार बदलल्याने रीफ्रेश केल्यावर साफ केलेल्या न्याय्य एनएव्हीमध्ये रेंडरिंग त्रुटी निर्माण होतात. हा बग न्याय्य एनएव्ही उदाहरणामध्ये देखील दर्शविला आहे .
Navbars हे रिस्पॉन्सिव्ह मेटा घटक आहेत जे तुमच्या ऍप्लिकेशन किंवा साइटसाठी नेव्हिगेशन हेडर म्हणून काम करतात. ते मोबाईल व्ह्यूजमध्ये कोलॅप्स होऊ लागतात (आणि टॉगल करण्यायोग्य असतात) आणि उपलब्ध व्ह्यूपोर्ट रुंदी जसजसे वाढते तसतसे क्षैतिज होतात.
न्याय्य नवबार एनएव्ही लिंक्स सध्या समर्थित नाहीत.
ओव्हरफ्लो सामग्री
तुमच्या navbar मधील सामग्रीला किती जागा आवश्यक आहे हे बूटस्ट्रॅपला माहीत नसल्यामुळे, तुम्हाला दुसऱ्या रांगेत सामग्री गुंडाळताना समस्या येऊ शकतात. याचे निराकरण करण्यासाठी, आपण हे करू शकता:
तुमचा नॅव्हबार कोलॅप्स केलेला आणि क्षैतिज मोड दरम्यान स्विच करतो तो बिंदू बदला. व्हेरिएबल सानुकूल करा @grid-float-breakpointकिंवा तुमची स्वतःची मीडिया क्वेरी जोडा.
JavaScript प्लगइन आवश्यक आहे
JavaScript अक्षम केले असल्यास आणि व्ह्यूपोर्ट नॅव्हबार कोलॅप्स करण्याइतका अरुंद असल्यास, नॅव्हबारचा विस्तार करणे आणि मधील सामग्री पाहणे अशक्य होईल .navbar-collapse.
जेव्हा व्ह्यूपोर्ट पेक्षा अरुंद असतो तेव्हा नॅव्हबार त्याच्या उभ्या मोबाइल व्ह्यूमध्ये कोसळतो आणि @grid-float-breakpointव्ह्यूपोर्ट किमान @grid-float-breakpointरुंदीमध्ये असताना त्याच्या क्षैतिज नॉन-मोबाइल व्ह्यूमध्ये विस्तृत होतो. नॅव्हबार कोलॅप्स/विस्तार केव्हा नियंत्रित करण्यासाठी हे व्हेरिएबल कमी स्त्रोतामध्ये समायोजित करा. डीफॉल्ट मूल्य आहे 768px(सर्वात लहान "लहान" किंवा "टॅबलेट" स्क्रीन).
नवबार प्रवेशयोग्य बनवा
एखादे घटक वापरण्याची खात्री करा <nav>किंवा, अधिक सामान्य घटक वापरत असल्यास , सहाय्यक तंत्रज्ञानाच्या वापरकर्त्यांसाठी एक महत्त्वाचा प्रदेश म्हणून स्पष्टपणे ओळखण्यासाठी प्रत्येक नॅव्हबारमध्ये <div>एक जोडा .role="navigation"
उत्पादन चित्र
मजकूर स्वॅप करून नवबार ब्रँड तुमच्या स्वतःच्या प्रतिमेसह बदला <img>. .navbar-brandची स्वतःची पॅडिंग आणि उंची असल्याने , तुम्हाला तुमच्या इमेजवर अवलंबून काही CSS ओव्हरराइड करण्याची आवश्यकता असू शकते.
फॉर्म
.navbar-formयोग्य उभ्या संरेखनासाठी आणि संकुचित व्ह्यूपोर्टमध्ये फॉर्म सामग्री ठेवा. तो navbar सामग्रीमध्ये कुठे राहतो हे ठरवण्यासाठी संरेखन पर्याय वापरा.
हेड अप म्हणून, त्याचा बराचसा कोड मिक्सिनद्वारे .navbar-formशेअर करतो . काही फॉर्म नियंत्रणे, जसे की इनपुट गटांना, नॅव्हबारमध्ये योग्यरित्या दर्शविण्यासाठी निश्चित रुंदीची आवश्यकता असू शकते..form-inline
तुम्ही प्रत्येक इनपुटसाठी लेबल समाविष्ट न केल्यास स्क्रीन वाचकांना तुमच्या फॉर्ममध्ये अडचण येईल. .sr-onlyया इनलाइन फॉर्मसाठी, तुम्ही वर्ग वापरून लेबले लपवू शकता . सहाय्यक तंत्रज्ञानासाठी लेबल प्रदान करण्याच्या पुढील पर्यायी पद्धती आहेत, जसे की aria-label, aria-labelledbyकिंवा titleविशेषता. यापैकी काहीही उपस्थित नसल्यास, स्क्रीन रीडर उपस्थित placeholderअसल्यास, विशेषता वापरण्याचा अवलंब करू शकतात, परंतु लक्षात ठेवा की placeholderइतर लेबलिंग पद्धतींसाठी बदली म्हणून वापरण्याचा सल्ला दिला जात नाही.
बटणे
नॅव्हबारमध्ये अनुलंब मध्यभागी ठेवण्यासाठी a मध्ये नसलेल्या घटकांमध्ये .navbar-btnवर्ग जोडा .<button><form>
संदर्भ-विशिष्ट वापर
मानक बटण वर्गांप्रमाणे , ऑन आणि घटक .navbar-btnवापरले जाऊ शकतात . तथापि, मधील घटकांवर किंवा मानक बटण वर्ग दोन्ही वापरले जाऊ नयेत .<a><input>.navbar-btn<a>.navbar-nav
नियमित नॅव्हबार नेव्हिगेशन घटकामध्ये नसलेल्या मानक लिंक्स वापरणाऱ्या .navbar-linkलोकांसाठी, डीफॉल्ट आणि इनव्हर्स नॅव्हबार पर्यायांसाठी योग्य रंग जोडण्यासाठी वर्ग वापरा.
घटक संरेखन
.navbar-leftकिंवा .navbar-rightयुटिलिटी क्लासेसचा वापर करून एनएव्ही लिंक्स, फॉर्म, बटणे किंवा मजकूर संरेखित करा . दोन्ही वर्ग निर्दिष्ट दिशेने CSS फ्लोट जोडतील. उदाहरणार्थ, एनएव्ही लिंक्स संरेखित करण्यासाठी, <ul>लागू केलेल्या संबंधित युटिलिटी क्लाससह वेगळ्या ठेवा.
हे वर्ग आणि च्या मिक्सिन-एड आवृत्त्या आहेत .pull-left, .pull-rightपरंतु डिव्हाइसच्या आकारांवरील navbar घटकांच्या सुलभ हाताळणीसाठी ते मीडिया क्वेरीसाठी व्यापलेले आहेत.
एकाधिक घटक उजवीकडे संरेखित करणे
नवबारांना सध्या अनेक .navbar-rightवर्गांसह मर्यादा आहेत. योग्यरित्या जागा सामग्री करण्यासाठी, आम्ही शेवटच्या .navbar-rightघटकावर नकारात्मक मार्जिन वापरतो. जेव्हा त्या वर्गाचा वापर करणारे अनेक घटक असतात, तेव्हा हे समास हेतूप्रमाणे कार्य करत नाहीत.
जेव्हा आम्ही तो घटक v4 मध्ये पुन्हा लिहू शकतो तेव्हा आम्ही यावर पुन्हा भेट देऊ.
शीर्षस्थानी निश्चित
मध्यभागी आणि पॅड नवबार सामग्री जोडा .navbar-fixed-topआणि समाविष्ट .containerकरा ..container-fluid
शरीर पॅडिंग आवश्यक
निश्चित नॅव्हबार तुमची इतर सामग्री आच्छादित करेल, जोपर्यंत तुम्ही paddingशीर्षस्थानी जोडत नाही <body>. तुमची स्वतःची मूल्ये वापरून पहा किंवा खाली आमचे स्निपेट वापरा. टीप: डीफॉल्टनुसार, navbar 50px उच्च आहे.
कोर बूटस्ट्रॅप CSS नंतर हे समाविष्ट केल्याचे सुनिश्चित करा .
तळाशी निश्चित
मध्यभागी आणि पॅड नवबार सामग्री जोडा .navbar-fixed-bottomआणि समाविष्ट .containerकरा ..container-fluid
शरीर पॅडिंग आवश्यक
निश्चित नॅव्हबार तुमची इतर सामग्री आच्छादित करेल, जोपर्यंत तुम्ही paddingतळाशी जोडत नाही <body>. तुमची स्वतःची मूल्ये वापरून पहा किंवा खाली आमचे स्निपेट वापरा. टीप: डीफॉल्टनुसार, navbar 50px उच्च आहे.
कोर बूटस्ट्रॅप CSS नंतर हे समाविष्ट केल्याचे सुनिश्चित करा .
स्थिर शीर्ष
पूर्ण-रुंदीचा नॅव्हबार तयार करा जो पृष्ठासह स्क्रोल करतो आणि मध्यभागी आणि पॅड नॅव्हबार सामग्री जोडून आणि समाविष्ट .navbar-static-topकरतो ..container.container-fluid
वर्गांच्या विपरीत .navbar-fixed-*, तुम्हाला वरील कोणतेही पॅडिंग बदलण्याची आवश्यकता नाही body.
उलटा नवबार
जोडून नवबारचे स्वरूप सुधारित करा .navbar-inverse.
ब्रेडक्रंब
नेव्हिगेशनल पदानुक्रमात वर्तमान पृष्ठाचे स्थान सूचित करा.
विभाजक आपोआप CSS मध्ये :beforeआणि द्वारे जोडले जातात content.
Rdio द्वारे प्रेरित साधे पृष्ठांकन, अॅप्स आणि शोध परिणामांसाठी उत्तम. मोठा ब्लॉक चुकणे कठीण आहे, सहज स्केलेबल आहे आणि मोठ्या क्लिक क्षेत्रे प्रदान करते.
पृष्ठांकन घटक लेबलिंग
<nav>पृष्ठांकन घटक स्क्रीन रीडर आणि इतर सहाय्यक तंत्रज्ञानासाठी नेव्हिगेशन विभाग म्हणून ओळखण्यासाठी घटकामध्ये गुंडाळलेला असावा . या व्यतिरिक्त, एखाद्या पानावर आधीपासून असे एकापेक्षा जास्त नेव्हिगेशन विभाग असण्याची शक्यता आहे (जसे की हेडरमधील प्राथमिक नेव्हिगेशन, किंवा साइडबार नेव्हिगेशन), त्याचा उद्देश प्रतिबिंबित करणारे वर्णनात्मक aria-labelप्रदान करणे उचित आहे. <nav>उदाहरणार्थ, पृष्ठांकन घटक शोध परिणामांच्या संचामध्ये नेव्हिगेट करण्यासाठी वापरला असल्यास, एक योग्य लेबल असू शकते aria-label="Search results pages".
अक्षम आणि सक्रिय राज्ये
दुवे वेगवेगळ्या परिस्थितींसाठी सानुकूल करण्यायोग्य आहेत. .disabledक्लिक न करता येणार्या दुव्यांसाठी आणि .activeवर्तमान पृष्ठ सूचित करण्यासाठी वापरा .
आम्ही शिफारस करतो की तुम्ही च्यासाठी सक्रिय किंवा अक्षम अँकर स्वॅप करा <span>, किंवा मागील/पुढील बाणांच्या बाबतीत अँकर वगळा, इच्छित शैली कायम ठेवताना क्लिक कार्यक्षमता काढून टाका.
आकारमान
फॅन्सी मोठे किंवा लहान पृष्ठांकन? जोडा .pagination-lgकिंवा .pagination-smअतिरिक्त आकारांसाठी.
पेजर
हलके मार्कअप आणि शैलींसह साध्या पृष्ठांकन अंमलबजावणीसाठी द्रुत मागील आणि पुढील दुवे. ब्लॉग किंवा मासिके सारख्या साध्या साइटसाठी हे छान आहे.
डीफॉल्ट उदाहरण
डीफॉल्टनुसार, पेजर लिंक्स केंद्रस्थानी ठेवतात.
संरेखित दुवे
वैकल्पिकरित्या, तुम्ही प्रत्येक दुव्याला बाजूंना संरेखित करू शकता:
पर्यायी अक्षम स्थिती
.disabledपेजर लिंक्स पेजनेशनमधून सामान्य उपयुक्तता वर्ग देखील वापरतात .
लेबल्स
उदाहरण
नवीन शीर्षकाचे उदाहरण
नवीन शीर्षकाचे उदाहरण
नवीन शीर्षकाचे उदाहरण
नवीन शीर्षकाचे उदाहरण
नवीन शीर्षकाचे उदाहरण
नवीन शीर्षकाचे उदाहरण
उपलब्ध भिन्नता
लेबलचे स्वरूप बदलण्यासाठी खालीलपैकी कोणताही सुधारक वर्ग जोडा.
डीफॉल्ट प्राथमिक यश माहिती धोक्याची चेतावणी
टन लेबले आहेत?
जेव्हा तुमच्याकडे एका अरुंद कंटेनरमध्ये डझनभर इनलाइन लेबले असतात, त्या प्रत्येकामध्ये स्वतःचा inline-blockघटक असतो (जसे की आयकॉन). या सभोवतालचा मार्ग सेटिंग आहे display: inline-block;. संदर्भ आणि उदाहरणासाठी, #13219 पहा .
बॅज
<span class="badge">लिंक्स, बूटस्ट्रॅप एनएव्ही आणि बरेच काही जोडून नवीन किंवा न वाचलेले आयटम सहजपणे हायलाइट करा .
जेव्हा कोणतेही नवीन किंवा न वाचलेले आयटम नसतील, तेव्हा बॅज फक्त कोलमडले जातील (CSS च्या :emptyसिलेक्टरद्वारे) जर त्यात कोणतीही सामग्री अस्तित्वात नसेल.
क्रॉस-ब्राउझर सुसंगतता
इंटरनेट एक्सप्लोरर 8 मध्ये बॅज स्वतः कोसळणार नाहीत कारण त्यात :emptyनिवडकर्त्यासाठी समर्थन नाही.
सक्रिय एनएव्ही स्थितींशी जुळवून घेते
पिल नेव्हिगेशनमध्ये सक्रिय स्थितीत बॅज ठेवण्यासाठी अंगभूत शैली समाविष्ट केल्या आहेत.
जंबोट्रॉन पूर्ण रुंदीचा आणि गोलाकार कोपऱ्यांशिवाय बनवण्यासाठी, ते सर्व .containers च्या बाहेर ठेवा आणि त्याऐवजी .containerआत जोडा.
पृष्ठ शीर्षलेख
h1पृष्ठावरील सामग्रीचे विभाग योग्यरित्या बाहेर काढण्यासाठी आणि विभाग करण्यासाठी एक साधा शेल . h1हे डीफॉल्ट smallघटक, तसेच इतर बहुतेक घटक (अतिरिक्त शैलींसह) वापरू शकते .
हेडरसाठी उदाहरण पृष्ठ शीर्षलेख सबटेक्स्ट
लघुप्रतिमा
प्रतिमा, व्हिडिओ, मजकूर आणि अधिकचे ग्रिड सहजपणे प्रदर्शित करण्यासाठी लघुप्रतिमा घटकासह बूटस्ट्रॅपची ग्रिड प्रणाली वाढवा.
तुम्ही वेगवेगळ्या उंची आणि/किंवा रुंदीच्या लघुप्रतिमांचे Pinterest-सारखे सादरीकरण शोधत असल्यास, तुम्हाला Masonry , Isotope , किंवा Salvattore सारखे तृतीय - पक्ष प्लगइन वापरावे लागेल .
डीफॉल्ट उदाहरण
डीफॉल्टनुसार, बूटस्ट्रॅपची लघुप्रतिमा कमीतकमी आवश्यक मार्कअपसह लिंक केलेल्या प्रतिमा प्रदर्शित करण्यासाठी डिझाइन केलेली आहेत.
सानुकूल सामग्री
थोड्या अतिरिक्त मार्कअपसह, लघुप्रतिमांमध्ये शीर्षके, परिच्छेद किंवा बटणे यासारखी HTML सामग्रीचा कोणताही प्रकार जोडणे शक्य आहे.
लघुप्रतिमा लेबल
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. नल्लम आयडी डोलोर आयडी निभ अल्ट्रीसीज वाहने आणि आयडी एलिट.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. नल्लम आयडी डोलोर आयडी निभ अल्ट्रीसीज वाहने आणि आयडी एलिट.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. नल्लम आयडी डोलोर आयडी निभ अल्ट्रीसीज वाहने आणि आयडी एलिट.
मूठभर उपलब्ध आणि लवचिक इशारा संदेशांसह विशिष्ट वापरकर्त्याच्या क्रियांसाठी संदर्भित अभिप्राय संदेश प्रदान करा.
उदाहरणे
मूलभूत सूचना संदेशांसाठी कोणताही मजकूर आणि पर्यायी डिसमिस बटण .alertआणि चार संदर्भित वर्गांपैकी एक (उदा. ) गुंडाळा..alert-success
कोणताही डीफॉल्ट वर्ग नाही
अलर्टमध्ये डीफॉल्ट वर्ग नसतात, फक्त बेस आणि सुधारक वर्ग असतात. डीफॉल्ट ग्रे अलर्टला जास्त अर्थ नाही, म्हणून तुम्हाला संदर्भ वर्गाद्वारे एक प्रकार निर्दिष्ट करणे आवश्यक आहे. यश, माहिती, चेतावणी किंवा धोक्यातून निवडा.
शाब्बास! तुम्ही हा महत्त्वाचा इशारा संदेश यशस्वीरीत्या वाचला.
सावधान! या अलर्टकडे तुमचे लक्ष देणे आवश्यक आहे, परंतु ते फार महत्वाचे नाही.
चेतावणी! स्वत: ला तपासा, तुम्ही खूप चांगले दिसत नाही आहात.
अरे स्नॅप! काही गोष्टी बदला आणि पुन्हा सबमिट करण्याचा प्रयत्न करा.
डिसमिस करण्यायोग्य सूचना
पर्यायी .alert-dismissibleआणि बंद करा बटण जोडून कोणत्याही सूचना तयार करा.
अरे स्नॅप! काही गोष्टी बदला आणि पुन्हा सबमिट करण्याचा प्रयत्न करा.
प्रगती बार
साध्या परंतु लवचिक प्रगती पट्ट्यांसह कार्यप्रवाह किंवा कृतीच्या प्रगतीवर अद्ययावत अभिप्राय प्रदान करा.
क्रॉस-ब्राउझर सुसंगतता
प्रोग्रेस बार त्यांचे काही प्रभाव साध्य करण्यासाठी CSS3 संक्रमण आणि अॅनिमेशन वापरतात. ही वैशिष्ट्ये Internet Explorer 9 आणि Firefox च्या त्याखालील किंवा जुन्या आवृत्त्यांमध्ये समर्थित नाहीत. Opera 12 अॅनिमेशनला सपोर्ट करत नाही.
सामग्री सुरक्षा धोरण (CSP) सुसंगतता
जर तुमच्या वेबसाइटवर सामग्री सुरक्षा धोरण (CSP) असेल जे परवानगी देत नाही , तर तुम्ही आमच्या खाली दिलेल्या उदाहरणांमध्ये दाखवल्याप्रमाणे प्रगती बार रुंदी सेट style-src 'unsafe-inline'करण्यासाठी इनलाइन विशेषता वापरण्यास सक्षम असणार नाही . styleकठोर CSP सह सुसंगत रूंदी सेट करण्याच्या पर्यायी पद्धतींमध्ये थोडे कस्टम JavaScript (जे सेट करते element.style.width) किंवा कस्टम CSS वर्ग वापरणे समाविष्ट आहे.
मूळ उदाहरण
डीफॉल्ट प्रगती बार.
६०% पूर्ण
लेबलसह
दृश्यमान टक्केवारी दर्शविण्यासाठी प्रगती बारमधून वर्गासह <span>काढा ..sr-only
६०%
लेबल मजकूर कमी टक्केवारीसाठी सुवाच्य राहील याची खात्री करण्यासाठी min-width, प्रगती बारमध्ये एक जोडण्याचा विचार करा.
०%
२%
संदर्भित पर्याय
प्रोग्रेस बार सातत्यपूर्ण शैलींसाठी काही समान बटण आणि अलर्ट वर्ग वापरतात.
40% पूर्ण (यश)
20% पूर्ण
60% पूर्ण (चेतावणी)
80% पूर्ण (धोका)
पट्टेदार
स्ट्रीप इफेक्ट तयार करण्यासाठी ग्रेडियंट वापरते. IE9 आणि खाली उपलब्ध नाही.
40% पूर्ण (यश)
20% पूर्ण
60% पूर्ण (चेतावणी)
80% पूर्ण (धोका)
अॅनिमेटेड
उजवीकडून डावीकडे पट्टे अॅनिमेट करण्यासाठी .activeजोडा . .progress-bar-stripedIE9 आणि खाली उपलब्ध नाही.
४५% पूर्ण
स्टॅक केलेले
.progressत्यांना स्टॅक करण्यासाठी अनेक बार एकाच ठिकाणी ठेवा.
35% पूर्ण (यश)
20% पूर्ण (चेतावणी)
10% पूर्ण (धोका)
मीडिया ऑब्जेक्ट
विविध प्रकारचे घटक (जसे की ब्लॉग टिप्पण्या, ट्विट्स इ.) तयार करण्यासाठी अमूर्त ऑब्जेक्ट शैली ज्यात मजकूर सामग्रीसह डावीकडे किंवा उजवीकडे संरेखित प्रतिमा वैशिष्ट्यीकृत आहे.
डीफॉल्ट मीडिया
डीफॉल्ट मीडिया सामग्री ब्लॉकच्या डावीकडे किंवा उजवीकडे मीडिया ऑब्जेक्ट (प्रतिमा, व्हिडिओ, ऑडिओ) प्रदर्शित करतो.
मीडिया हेडिंग
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस. Fusce condimentum nunc ac nisi vulputate fringilla. फॅसिबसमध्ये डोनेक लॅसिनिया कॉंग्यू फेलिस.
मीडिया हेडिंग
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस. Fusce condimentum nunc ac nisi vulputate fringilla. फॅसिबसमध्ये डोनेक लॅसिनिया कॉंग्यू फेलिस.
नेस्टेड मीडिया हेडिंग
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस. Fusce condimentum nunc ac nisi vulputate fringilla. फॅसिबसमध्ये डोनेक लॅसिनिया कॉंग्यू फेलिस.
मीडिया हेडिंग
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस.
मीडिया हेडिंग
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस.
वर्ग .pull-leftआणि .pull-rightसुद्धा अस्तित्वात आहेत आणि पूर्वी मीडिया घटकाचा भाग म्हणून वापरण्यात आले होते, परंतु v3.3.0 नुसार त्या वापरासाठी नापसंत केले आहे. ते अंदाजे समतुल्य आहेत .media-leftआणि .media-right, शिवाय ते html मध्ये .media-rightनंतर ठेवले पाहिजेत ..media-body
मीडिया संरेखन
प्रतिमा किंवा इतर माध्यम शीर्ष, मध्य किंवा तळाशी संरेखित केले जाऊ शकतात. डीफॉल्ट शीर्ष संरेखित आहे.
शीर्ष संरेखित मीडिया
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस. Fusce condimentum nunc ac nisi vulputate fringilla. फॅसिबसमध्ये डोनेक लॅसिनिया कॉंग्यू फेलिस.
Donec sed odio dui. नुल्लम क्विस रिझस एगेट उर्ना मोलिस ऑर्नारे वेल ईयू लिओ. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur dediculus mus.
मध्य संरेखित माध्यम
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस. Fusce condimentum nunc ac nisi vulputate fringilla. फॅसिबसमध्ये डोनेक लॅसिनिया कॉंग्यू फेलिस.
Donec sed odio dui. नुल्लम क्विस रिझस एगेट उर्ना मोलिस ऑर्नारे वेल ईयू लिओ. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur dediculus mus.
तळाशी संरेखित मीडिया
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस. Fusce condimentum nunc ac nisi vulputate fringilla. फॅसिबसमध्ये डोनेक लॅसिनिया कॉंग्यू फेलिस.
Donec sed odio dui. नुल्लम क्विस रिझस एगेट उर्ना मोलिस ऑर्नारे वेल ईयू लिओ. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur dediculus mus.
मीडिया यादी
थोड्या अतिरिक्त मार्कअपसह, तुम्ही सूचीमध्ये मीडिया वापरू शकता (टिप्पणी थ्रेड किंवा लेख सूचीसाठी उपयुक्त).
मीडिया हेडिंग
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस.
नेस्टेड मीडिया हेडिंग
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस.
नेस्टेड मीडिया हेडिंग
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस.
नेस्टेड मीडिया हेडिंग
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस.
यादी गट
सूची गट हे केवळ घटकांच्या साध्या सूचीच नव्हे तर सानुकूल सामग्रीसह जटिल देखील प्रदर्शित करण्यासाठी एक लवचिक आणि शक्तिशाली घटक आहेत.
मूळ उदाहरण
सर्वात मूलभूत सूची गट म्हणजे सूची आयटम आणि योग्य वर्गांसह एक अक्रमित सूची आहे. त्यावर अनुसरण करणार्या पर्यायांसह किंवा आवश्यकतेनुसार तुमचे स्वतःचे CSS तयार करा.
Cras justo odio
Dapibus ac facilisis in
मोरबी लिओ रिसस
Porta ac consectetur ac
इरोस येथे वेस्टिबुलम
बॅज
कोणत्याही सूची गट आयटममध्ये बॅज घटक जोडा आणि ते स्वयंचलितपणे उजवीकडे स्थित केले जाईल.
14Cras justo odio
2Dapibus ac facilisis in
१मोरबी लिओ रिसस
लिंक केलेले आयटम
सूची आयटम ऐवजी अँकर टॅग वापरून सूची गट आयटम लिंक करा (याचा अर्थ <div>ऐवजी पालक देखील आहे <ul>). प्रत्येक घटकाभोवती वैयक्तिक पालकांची आवश्यकता नाही.
सूची गट आयटम सूची आयटम ऐवजी बटणे असू शकतात (याचा अर्थ <div>ऐवजी पालक देखील आहे <ul>). प्रत्येक घटकाभोवती वैयक्तिक पालकांची आवश्यकता नाही. येथे मानक वर्ग वापरू नका ..btn
अक्षम वस्तू
अक्षम दिसण्यासाठी ते राखाडी .disabledकरण्यासाठी a मध्ये जोडा ..list-group-item
नेहमी आवश्यक नसताना, काहीवेळा तुम्हाला तुमचा DOM बॉक्समध्ये ठेवावा लागतो. त्या परिस्थितींसाठी, पॅनेल घटक वापरून पहा.
मूळ उदाहरण
डीफॉल्टनुसार, .panelकाही सामग्री समाविष्ट करण्यासाठी सर्व काही मूलभूत सीमा आणि पॅडिंग लागू करणे आहे.
मूलभूत पॅनेलचे उदाहरण
शीर्षकासह पॅनेल
सह आपल्या पॅनेलमध्ये सहजपणे एक शीर्षलेख कंटेनर जोडा .panel-heading. <h1>तुम्ही प्री - स्टाइल केलेले हेडिंग जोडण्यासाठी वर्गासह <h6>कोणतेही समाविष्ट करू शकता . .panel-titleतथापि, <h1>- चे फॉन्ट आकार <h6>द्वारे अधिलिखित केले जातात .panel-heading.
योग्य लिंक कलरिंगसाठी, मथळ्यांमध्ये दुवे ठेवण्याचे सुनिश्चित करा .panel-title.
शीर्षकाशिवाय पॅनेलचे शीर्षक
पॅनेल सामग्री
पॅनेल शीर्षक
पॅनेल सामग्री
फूटरसह पॅनेल
मध्ये बटणे किंवा दुय्यम मजकूर गुंडाळा .panel-footer. लक्षात ठेवा की पॅनेल तळटीपांना संदर्भातील फरक वापरताना रंग आणि सीमा मिळत नाहीत कारण ते अग्रभागी नसतात.
पॅनेल सामग्री
संदर्भित पर्याय
इतर घटकांप्रमाणेच, कोणत्याही संदर्भीय स्थितीचे वर्ग जोडून पॅनेलला विशिष्ट संदर्भासाठी अधिक अर्थपूर्ण बनवा.
पॅनेल शीर्षक
पॅनेल सामग्री
पॅनेल शीर्षक
पॅनेल सामग्री
पॅनेल शीर्षक
पॅनेल सामग्री
पॅनेल शीर्षक
पॅनेल सामग्री
पॅनेल शीर्षक
पॅनेल सामग्री
टेबलांसह
.tableसीमलेस डिझाइनसाठी पॅनेलमध्ये कोणतेही सीमा नसलेले जोडा . जर असेल तर .panel-body, आम्ही वेगळे करण्यासाठी टेबलच्या शीर्षस्थानी अतिरिक्त सीमा जोडतो.
पॅनेल शीर्षक
येथे काही डीफॉल्ट पॅनेल सामग्री. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. पेलेंटेस्क ऑर्नारे सेम लॅसिनिया क्वाम वेनेनाटिस वेस्टिबुलम. नुल्लम आयडी डोलर आयडी निभ अल्ट्रिकेस वाहने आणि आयडी एलिट.
#
पहिले नाव
आडनाव
वापरकर्तानाव
१
खूण करा
ओटो
@mdo
2
जेकब
थॉर्नटन
@फॅट
3
लॅरी
पक्षी
@ट्विटर
पॅनल बॉडी नसल्यास, घटक कोणत्याही व्यत्ययाशिवाय पॅनेल हेडरमधून टेबलवर हलतो.
येथे काही डीफॉल्ट पॅनेल सामग्री. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. पेलेंटेस्क ऑर्नारे सेम लॅसिनिया क्वाम वेनेनाटिस वेस्टिबुलम. नुल्लम आयडी डोलर आयडी निभ अल्ट्रिकेस वाहने आणि आयडी एलिट.
Cras justo odio
Dapibus ac facilisis in
मोरबी लिओ रिसस
Porta ac consectetur ac
इरोस येथे वेस्टिबुलम
प्रतिसाद एम्बेड
ब्राउझरला त्यांच्या समाविष्ट असलेल्या ब्लॉकच्या रुंदीवर आधारित व्हिडिओ किंवा स्लाइडशो परिमाणे निर्धारित करण्याची अनुमती द्या एक आंतरिक गुणोत्तर तयार करून जे कोणत्याही डिव्हाइसवर योग्यरित्या मोजले जाईल.
नियम थेट <iframe>, <embed>, <video>, आणि <object>घटकांवर लागू होतात; .embed-responsive-itemजेव्हा तुम्ही इतर विशेषतांसाठी शैलीशी जुळवू इच्छित असाल तेव्हा वैकल्पिकरित्या स्पष्ट वंशज वर्ग वापरा .
प्रो-टिप! आम्ही ते तुमच्यासाठी ओव्हरराइड करत असल्यामुळे तुम्हाला frameborder="0"तुमच्या मध्ये समाविष्ट करण्याची गरज नाही .<iframe>
विहिरी
डीफॉल्ट चांगले
एखाद्या घटकावर इनसेट इफेक्ट देण्यासाठी विहीर वापरा.
बघ, मी विहिरीत आहे!
पर्यायी वर्ग
दोन पर्यायी सुधारक वर्गांसह पॅडिंग आणि गोलाकार कोपरे नियंत्रित करा.