ग्लिफिकॉन्स इति

उपलब्ध ग्लिफ

Glyphicon Halflings सेट् तः font प्रारूपे 250 तः अधिकानि ग्लिफ्-पत्राणि समाविष्टानि सन्ति । Glyphicons Halflings सामान्यतया निःशुल्कं न प्राप्यते, परन्तु तेषां निर्माता Bootstrap कृते निःशुल्कं उपलब्धं कृतवान् अस्ति । धन्यवादरूपेण वयं केवलं याचयामः यत् यदा सम्भवं तदा Glyphicons इत्यस्य पुनः लिङ्कं समावेशयतु।

  • ग्लिफिकॉन् ग्लिफिकॉन-तारा चिह्न
  • ग्लिफिकॉन् ग्लिफिकॉन्-प्लस
  • ग्लिफिकॉन ग्लिफिकॉन-यूरो
  • ग्लिफिकॉन ग्लिफिकॉन-eur
  • ग्लिफिकोन् ग्लिफिकोन-माइनस
  • ग्लिफिकॉन् ग्लिफिकॉन-मेघ
  • ग्लिफिकॉन ग्लिफिकॉन-लिफाफा
  • glyphicon ग्लिफिकॉन-पेंसिल
  • ग्लिफिकॉन ग्लिफिकॉन-ग्लास
  • glyphicon ग्लिफिकॉन-संगीत
  • glyphicon glyphicon-अन्वेषणम्
  • ग्लिफिकॉन ग्लिफिकॉन-हृदय
  • ग्लिफिकॉन ग्लिफिकॉन-तार
  • ग्लिफिकॉन ग्लिफिकॉन-तार-रिक्त
  • glyphicon glyphicon-उपयोक्ता
  • ग्लिफिकॉन ग्लिफिकॉन-फिल्म
  • ग्लिफिकॉन ग्लिफिकॉन-थ-बड़े
  • ग्लिफिकॉन् ग्लिफिकोन्-थ
  • glyphicon glyphicon-थ-सूची
  • ग्लिफिकॉन् ग्लिफिकॉन्-ok
  • glyphicon glyphicon-हटाओ
  • glyphicon ग्लिफिकॉन्-ज़ूम-इन
  • glyphicon ग्लिफिकॉन-जूम-आउट
  • ग्लिफिकॉन ग्लिफिकॉन-बंद
  • ग्लिफिकॉन ग्लिफिकॉन-संकेत
  • ग्लिफिकॉन् ग्लिफिकोन्-cog
  • ग्लिफिकॉन् ग्लिफिकॉन-कचरा
  • glyphicon glyphicon-गृहम्
  • glyphicon glyphicon-सञ्चिका
  • ग्लिफिकॉन ग्लिफिकॉन-समय
  • ग्लिफिकॉन ग्लिफिकॉन-रोड
  • glyphicon glyphicon-डाउनलोड-alt
  • glyphicon glyphicon-डाउनलोड करें
  • glyphicon ग्लिफिकॉन-अपलोड करें
  • glyphicon glyphicon-इनबॉक्स
  • ग्लिफिकोन् ग्लिफिकोन-खेल-वृत्त
  • ग्लिफिकॉन ग्लिफिकॉन-पुनरावृत्ति
  • ग्लिफिकॉन ग्लिफिकॉन-ताजगी
  • ग्लिफिकॉन् ग्लिफिकॉन-सूची-alt
  • ग्लिफिकॉन ग्लिफिकॉन-लॉक
  • ग्लिफिकॉन ग्लिफिकॉन-ध्वज
  • glyphicon glyphicon-हेडफोन
  • glyphicon glyphicon-मात्रा-बन्द
  • ग्लिफिकॉन् ग्लिफिकॉन-आयतन-अधः
  • glyphicon ग्लिफिकॉन-आयतन-अप
  • ग्लिफिकॉन ग्लिफिकॉन-qrcode
  • glyphicon ग्लिफिकॉन-बारकोड
  • ग्लिफिकॉन् ग्लिफिकॉन-टैग
  • ग्लिफिकॉन ग्लिफिकॉन-टैग
  • ग्लिफिकॉन ग्लिफिकॉन-पुस्तक
  • glyphicon ग्लिफिकॉन-पुस्तकचिह्न
  • glyphicon ग्लिफिकॉन-मुद्रण
  • glyphicon ग्लिफिकॉन-कैमरा
  • ग्लिफिकॉन् ग्लिफिकॉन-font
  • ग्लिफिकॉन ग्लिफिकॉन-बोल्ड
  • ग्लिफिकोन् ग्लिफिकोन्-इटालिक
  • glyphicon glyphicon-पाठ-उच्चता
  • glyphicon ग्लिफिकॉन्-पाठ-विस्तार
  • glyphicon ग्लिफिकॉन-संरेखित-वाम
  • glyphicon ग्लिफिकॉन-संरेखित-केन्द्र
  • glyphicon ग्लिफिकॉन-संरेखित-दक्षिण
  • glyphicon ग्लिफिकॉन-संरेखित-justify
  • 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-आकार बदलें-पूर्ण
  • glyphicon ग्लिफिकॉन-आकार बदलें-लघु
  • glyphicon ग्लिफिकोन-विस्मयादिबोधक-चिह्न
  • ग्लिफिकॉन ग्लिफिकॉन-उपहार
  • ग्लिफिकॉन ग्लिफिकॉन-पत्र
  • ग्लिफिकॉन् ग्लिफिकॉन्-अग्नि
  • ग्लिफिकोन् ग्लिफिकोन्-नेत्र-मुक्त
  • ग्लिफिकोन् ग्लिफिकोन्-नेत्र-निमीलित
  • glyphicon glyphicon-चेतावनी-चिह्न
  • ग्लिफिकॉन ग्लिफिकॉन-प्लेन
  • glyphicon glyphicon-पञ्चाङ्गः
  • ग्लिफिकॉन ग्लिफिकॉन-यादृच्छिक
  • glyphicon glyphicon-टिप्पणी
  • ग्लिफिकॉन ग्लिफिकॉन-चुम्बक
  • ग्लिफिकॉन ग्लिफिकॉन-शेवरॉन-अप
  • ग्लिफिकॉन ग्लिफिकॉन-शेव्रॉन-डाउन
  • glyphicon glyphicon-पुनः ट्वीट करें
  • glyphicon glyphicon-शॉपिंग-कार्ट
  • glyphicon glyphicon-पुट-बन्द करें
  • glyphicon glyphicon-पुट-खुला
  • glyphicon glyphicon-आकार बदलें-ऊर्ध्वाधर
  • glyphicon glyphicon-आकार बदलें-क्षैतिज
  • ग्लिफिकॉन् ग्लिफिकोन्-hdd
  • ग्लिफिकॉन ग्लिफिकॉन-bullhorn
  • ग्लिफिकॉन ग्लिफिकॉन-घण्टा
  • glyphicon glyphicon-प्रमाण पत्र
  • ग्लिफिकोन् ग्लिफिकोन्-अङ्गुष्ठाभ्यां नमः
  • ग्लिफिकोन् ग्लिफिकोन्-अङ्गुष्ठाभ्यां अधः
  • ग्लिफिकॉन ग्लिफिकॉन-हस्त-दक्षिण
  • ग्लिफिकॉन् ग्लिफिकोन-हस्त-वाम
  • ग्लिफिकॉन ग्लिफिकॉन-हस्त-ऊपर
  • ग्लिफिकॉन् ग्लिफिकोन्-हस्त-अधः
  • ग्लिफिकोन् ग्लिफिकोन-वृत्त-बाण-दक्षिण
  • ग्लिफिकोन् ग्लिफिकोन्-वृत्त-बाण-वाम
  • ग्लिफिकोन् ग्लिफिकोन्-वृत्त-बाण-ऊपर
  • ग्लिफिकोन् ग्लिफिकोन्-वृत्त-बाण-अधः
  • ग्लिफिकॉन ग्लिफिकॉन-ग्लोब
  • glyphicon ग्लिफिकॉन-कुंजी
  • glyphicon glyphicon-कार्यम्
  • glyphicon ग्लिफिकॉन-छिद्रक
  • glyphicon ग्लिफिकॉन-अटैची
  • glyphicon ग्लिफिकॉन-पूर्णस्क्रीन
  • glyphicon glyphicon-डैशबोर्ड
  • ग्लिफिकॉन ग्लिफिकॉन-पेपरक्लिप
  • ग्लिफिकोन् ग्लिफिकोन्-हृदय-शून्यम्
  • ग्लिफिकॉन ग्लिफिकॉन-लिंक
  • glyphicon ग्लिफिकॉन-फोन
  • ग्लिफिकॉन ग्लिफिकॉन-पुशपिन
  • ग्लिफिकॉन् ग्लिफिकोन्-usd
  • ग्लिफिकॉन् ग्लिफिकॉन्-gbp
  • ग्लिफिकॉन् ग्लिफिकॉन्-sort
  • glyphicon glyphicon-वर्णमाला द्वारा क्रमबद्ध करें
  • glyphicon glyphicon-वर्णमाला द्वारा क्रमबद्ध करें-alt
  • glyphicon glyphicon-क्रमेण क्रमेण
  • glyphicon glyphicon-क्रम-क्रमेण-alt
  • glyphicon glyphicon-विशेषणों द्वारा क्रमबद्ध करें
  • glyphicon glyphicon-विशेषणों द्वारा-क्रमबद्ध करें-alt
  • glyphicon glyphicon-अनिरीक्षित
  • ग्लिफिकॉन् ग्लिफिकॉन-विस्तार
  • ग्लिफिकॉन् ग्लिफिकॉन-collapse-down
  • ग्लिफिकॉन् ग्लिफिकॉन-collapse-up
  • glyphicon glyphicon-लॉग-इन
  • ग्लिफिकॉन ग्लिफिकॉन-फ्लैश
  • glyphicon glyphicon-लॉग-आउट
  • glyphicon glyphicon-नवीन-विण्डो
  • glyphicon ग्लिफिकॉन-अभिलेख
  • ग्लिफिकॉन् ग्लिफिकॉन-सेव करें
  • ग्लिफिकॉन ग्लिफिकॉन-ओपन
  • glyphicon glyphicon-रक्षितः
  • ग्लिफिकॉन ग्लिफिकॉन-आयात
  • ग्लिफिकॉन ग्लिफिकॉन-निर्यात
  • ग्लिफिकॉन् ग्लिफिकॉन्-प्रेषयति
  • glyphicon ग्लिफिकॉन-फ्लॉपी-डिस्क
  • glyphicon glyphicon-फ्लॉपी-रक्षित
  • glyphicon glyphicon-फ्लॉपी-हटाओ
  • glyphicon glyphicon-फ्लॉपी-रक्षा
  • glyphicon glyphicon-फ्लॉपी-खुला
  • glyphicon glyphicon-क्रेडिट-कार्ड
  • ग्लिफिकॉन ग्लिफिकॉन-हस्तांतरण
  • glyphicon ग्लिफिकॉन-कटलरी
  • glyphicon ग्लिफिकॉन-शीर्षक
  • ग्लिफिकॉन ग्लिफिकॉन-संपीड़ित
  • glyphicon glyphicon-इयरफोन
  • ग्लिफिकॉन ग्लिफिकॉन-फोन-alt
  • glyphicon ग्लिफिकॉन-गोपुर
  • glyphicon ग्लिफिकॉन-आँकड़े
  • glyphicon glyphicon-sd-वीडियो
  • glyphicon ग्लिफिकॉन-hd-वीडियो
  • glyphicon ग्लिफिकॉन-उपशीर्षक
  • ग्लिफिकॉन् ग्लिफिकॉन-ध्वनि-स्टीरियो
  • ग्लिफिकॉन ग्लिफिकॉन-ध्वनि-डोल्बी
  • ग्लिफिकोन् ग्लिफिकोन्-ध्वनि-५-१
  • ग्लिफिकोन् ग्लिफिकोन्-ध्वनि-६-१
  • ग्लिफिकॉन् ग्लिफिकोन्-ध्वनि-७-१
  • glyphicon glyphicon-प्रतिलिपि अधिकार-चिह्न
  • glyphicon glyphicon-पञ्जीकरण-चिह्न
  • glyphicon glyphicon-मेघ-डाउनलोड
  • glyphicon glyphicon-मेघ-अपलोड
  • ग्लिफिकॉन ग्लिफिकॉन-वृक्ष-शंकुधारी
  • ग्लिफिकोन् ग्लिफिकोन्-वृक्ष-पर्णपाती
  • ग्लिफिकॉन् ग्लिफिकॉन्-cd
  • glyphicon glyphicon-रक्षण-सञ्चिका
  • glyphicon glyphicon-उद्घाटित-सञ्चिका
  • glyphicon ग्लिफिकॉन-स्तर-ऊपर
  • glyphicon ग्लिफिकॉन-प्रतिलिपि
  • ग्लिफिकॉन ग्लिफिकॉन-पेस्ट
  • ग्लिफिकॉन ग्लिफिकॉन-सचेतक
  • glyphicon ग्लिफिकॉन-समीकरण करने वाला
  • ग्लिफिकॉन् ग्लिफिकोन-राजा
  • ग्लिफिकॉन ग्लिफिकॉन-राज्ञी
  • ग्लिफिकॉन ग्लिफिकॉन-प्यादा
  • ग्लिफिकॉन ग्लिफिकॉन-बिशप
  • glyphicon ग्लिफिकॉन-शूरवीर
  • ग्लिफिकॉन ग्लिफिकॉन-शिशु-सूत्र
  • ग्लिफिकॉन् ग्लिफिकॉन्-tent
  • glyphicon ग्लिफिकॉन-ब्लैकबोर्ड
  • ग्लिफिकॉन ग्लिफिकॉन-शय्या
  • ग्लिफिकॉन ग्लिफिकॉन-सेब
  • ग्लिफिकॉन ग्लिफिकॉन-मेटना
  • glyphicon ग्लिफिकॉन-रेत घड़ी
  • ग्लिफिकॉन ग्लिफिकॉन-दीप
  • ग्लिफिकॉन ग्लिफिकॉन-डुप्लिकेट
  • ग्लिफिकॉन ग्लिफिकॉन-गुल्लक-बैंक
  • glyphicon ग्लिफिकॉन-कैंची
  • ग्लिफिकॉन ग्लिफिकॉन-बिटकॉइन
  • ग्लिफिकॉन ग्लिफिकॉन-btc
  • ग्लिफिकॉन् ग्लिफिकॉन्-xbt
  • ग्लिफिकोन् ग्लिफिकोन्-येन्
  • ग्लिफिकॉन् ग्लिफिकोन्-jpy
  • ग्लिफिकॉन ग्लिफिकॉन-रूबल
  • ग्लिफिकॉन् ग्लिफिकॉन-रब
  • ग्लिफिकॉन ग्लिफिकॉन-स्केल
  • ग्लिफिकॉन ग्लिफिकॉन-हिम-लोली
  • ग्लिफिकॉन ग्लिफिकोन-हिम-लोली-स्वादित
  • ग्लिफिकॉन ग्लिफिकॉन-शिक्षा
  • 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-मेनू-अधः
  • ग्लिफिकॉन् ग्लिफिकॉन्-मेनू-अप

कथं प्रयोगः

कार्यप्रदर्शनकारणात् सर्वेषु चिह्नेषु आधारवर्गस्य व्यक्तिगतचिह्नवर्गस्य च आवश्यकता भवति । उपयोगाय निम्नलिखितसङ्केतं प्रायः कुत्रापि स्थापयन्तु । सम्यक् पैडिंग् कृते चिह्नस्य पाठस्य च मध्ये एकं स्थानं अवश्यं त्यजन्तु ।

अन्यैः घटकैः सह मिश्रणं न कुर्वन्तु

चिह्नवर्गाः अन्यैः घटकैः सह प्रत्यक्षतया संयोजितुं न शक्यन्ते । समानतत्त्वे अन्यैः वर्गैः सह न प्रयोक्तव्याः । तस्य स्थाने, एकं nested योजयन्तु <span>तथा च चिह्नवर्गान् प्रयोजयन्तु <span>

केवलं रिक्ततत्त्वेषु उपयोगाय

चिह्नवर्गाः केवलं तेषु तत्त्वेषु उपयोक्तव्याः येषु पाठसामग्री नास्ति तथा च बालतत्त्वानि नास्ति ।

चिह्न font स्थानं परिवर्तयति

बूटस्ट्रैप् कल्पयति यत् चिह्न-फॉन्ट-सञ्चिकाः निर्देशिकायां स्थिताः भविष्यन्ति ../fonts/, संकलित-CSS-सञ्चिकानां सापेक्षम् । तानि font सञ्चिकाः स्थानान्तरयितुं वा पुनर्नामकरणं वा कृत्वा CSS इत्यस्य अद्यतनीकरणं त्रयाणां मार्गानाम् एकेन प्रकारेण भवति ।

यत्किमपि विकल्पं भवतः विशिष्टविकासव्यवस्थापनं सर्वोत्तमरूपेण अनुकूलं भवति तस्य उपयोगं कुर्वन्तु।

सुलभ चिह्न

सहायकप्रौद्योगिकीनां आधुनिकसंस्करणं CSS उत्पन्नसामग्रीणां, तथैव विशिष्टानां यूनिकोडवर्णानां च घोषणां करिष्यति । स्क्रीन रीडर् मध्ये अनभिप्रेतं भ्रान्तं च आउटपुट् परिहरितुं (विशेषतः यदा चिह्नानि केवलं अलङ्कारार्थं उपयुज्यन्ते), वयं तान् aria-hidden="true"विशेषतायाः सह गोपयामः ।

यदि भवान् अर्थं प्रसारयितुं चिह्नस्य उपयोगं करोति (केवलं अलङ्कारिकतत्त्वरूपेण न अपितु) तर्हि सुनिश्चितं कुरुत यत् एषः अर्थः सहायकप्रौद्योगिकीभ्यः अपि प्रसारितः भवति – उदाहरणार्थं, अतिरिक्तसामग्री समावेशयन्तु, .sr-onlyवर्गेण सह दृग्गतरूपेण निगूढम्

यदि भवान् अन्येन पाठेन सह नियन्त्रणानि निर्माति (यथा a <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;। ततः मेन्यू इत्यस्य HTML योजयन्तु ।

<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। navbar मध्ये दक्षिण-संरेखिताः nav घटकाः स्वयमेव मेनू संरेखयितुं अस्य वर्गस्य mixin संस्करणस्य उपयोगं कुर्वन्ति । तत् अधिलिखितुं, उपयुज्यताम् .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>

बटन समूह

बटनसमूहेन सह एकस्मिन् पङ्क्तौ बटन्-श्रृङ्खलां एकत्र समूहयन्तु । अस्माकं बटन्स् प्लगिन् इत्यनेन वैकल्पिकं जावास्क्रिप्ट् रेडियो तथा चेकबॉक्स शैली व्यवहारं योजयन्तु |

बटनसमूहेषु Tooltips & popovers इत्यस्य विशेषसेटिंग् आवश्यकम् अस्ति

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>

न्याय्य बटन समूह

बटनसमूहं समानप्रमाणेषु प्रसारितं कृत्वा तस्य मातापितृस्य सम्पूर्णविस्तारं व्याप्नुवन्तु । बटनसमूहस्य अन्तः बटन् ड्रॉप्डाउन् इत्यनेन सह अपि कार्यं करोति ।

सीमाओं को संभालना

बटन् न्याय्यं कर्तुं प्रयुक्तस्य विशिष्टस्य HTML तथा CSS इत्यस्य कारणात् (अर्थात् display: table-cell), तेषां मध्ये सीमाः द्विगुणाः भवन्ति । नियमितबटनसमूहेषु margin-left: -1px, सीमां निष्कासयितुं स्थाने स्तम्भयितुं उपयुज्यते । तथापि, marginसह कार्यं न करोति display: table-cell। फलतः, ​​Bootstrap कृते भवतः अनुकूलनस्य आधारेण, भवान् सीमां निष्कासयितुं वा पुनः वर्णयितुं वा इच्छति ।

IE8 तथा सीमाएँ

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 बटन ड्रॉप् डाउन रचयन्तु, केवलं पृथक् बटनेन सह ।

<!-- 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>ष एव

अत्र तत्त्वानां उपयोगं परिहरन्तु <select>यतः ते WebKit ब्राउजर् मध्ये पूर्णतया शैलीं कर्तुं न शक्नुवन्ति ।

<textarea>अत्र तत्त्वानां प्रयोगं परिहरन्तु यतः तेषां rowsविशेषणं केषुचित् सन्दर्भेषु न सम्माननीयं भविष्यति ।

इनपुट् समूहेषु Tooltips & popovers इत्यस्य विशेषसेटिंग् आवश्यकम् अस्ति

an इत्यस्य अन्तः तत्त्वेषु टूल्टिप्स अथवा पोपोवर्स् इत्यस्य उपयोगं कुर्वन् .input-group, भवद्भिः अवांछितदुष्प्रभावान् container: 'body'परिहरितुं विकल्पं निर्दिष्टव्यं भविष्यति (यथा तत्त्वस्य विस्तृतं वर्धनं तथा/वा टूल्टिप् अथवा पोपोवर इत्यस्य प्रवर्तने सति तस्य गोलकोणानि नष्टं भवति)

अन्यैः घटकैः सह मिश्रणं न कुर्वन्तु

रूपसमूहान् अथवा जालस्तम्भवर्गान् प्रत्यक्षतया निवेशसमूहैः सह न मिश्रयन्तु । तस्य स्थाने, रूपसमूहस्य अथवा जालसम्बद्धस्य तत्त्वस्य अन्तः निवेशसमूहं नेस्ट् कुर्वन्तु ।

सदैव लेबल् योजयन्तु

यदि भवान् प्रत्येकं निवेशस्य कृते लेबलं न समावेशयति तर्हि स्क्रीन रीडर्-भ्यः भवतः प्रपत्रेषु समस्या भविष्यति। एतेषां निवेशसमूहानां कृते, सुनिश्चितं कुर्वन्तु यत् किमपि अतिरिक्तं लेबलं वा कार्यक्षमतां वा सहायकप्रौद्योगिकीभ्यः प्रसारितं भवति।

प्रयोक्तव्या सटीकप्रविधिः ( <label>दृश्यतत्त्वानि, वर्गस्य <label>उपयोगेन निगूढाः तत्त्वानि , अथवा , , , अथवा विशेषतायाः उपयोगः) तथा च किं अतिरिक्तसूचनाः प्रसारणीयाः भविष्यन्ति, तत् भवता कार्यान्वितं सटीकप्रकारस्य अन्तरफलकविजेट् इत्यस्य आधारेण भिन्नं भविष्यति अस्मिन् खण्डे उदाहरणानि कतिपयानि सुझातानि, प्रकरणविशिष्टानि उपायानि प्रददति ।.sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder

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

एकं निवेशस्य उभयतः एकं add-on अथवा बटनं स्थापयन्तु । भवन्तः अपि निवेशस्य उभयतः एकं स्थापयितुं शक्नुवन्ति ।

वयं एकस्मिन् पक्षे बहुविध-अड-ऑन्स् ( .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>

अनेक बटन

यद्यपि भवन्तः प्रतिपक्षं केवलं एकं add-on भवितुं शक्नुवन्ति, तथापि भवन्तः एकस्य अन्तः बहुविधं बटन् भवितुं शक्नुवन्ति .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>

नवस्

Bootstrap इत्यस्मिन् उपलभ्यमानाः Navs इत्यत्र आधारवर्गात् आरभ्य साझाः मार्कअपः अस्ति, .navतथैव साझास्थितयः अपि सन्ति । प्रत्येकशैल्याः मध्ये स्विच् कर्तुं परिवर्तकवर्गान् स्वैप् कुर्वन्तु ।

tab panels कृते navs इत्यस्य उपयोगाय JavaScript tabs plugin इत्यस्य आवश्यकता वर्तते

टैब-योग्यक्षेत्रैः सह ट्याब्स् कृते, भवद्भिः ट्याब्स् JavaScript प्लगिन् इत्यस्य उपयोगः अवश्यं करणीयः । मार्कअप कृते अतिरिक्तानि ARIA विशेषतानि अपि आवश्यकानि भविष्यन्ति – अधिकविवरणार्थं roleप्लगिन् इत्यस्य उदाहरणमार्कअपं पश्यन्तु ।

नेविगेशनरूपेण उपयुज्यमानाः 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 इत्यस्मात् विस्तृतेषु स्क्रीनषु स्वस्य मातापितृस्य समानविस्तारं कुर्वन्तु with .nav-justified. लघुपट्टिकासु nav लिङ्क्स् स्तम्भिताः भवन्ति ।

न्याय्यं navbar nav लिङ्कानि सम्प्रति समर्थितानि न सन्ति।

सफारी एवं प्रतिक्रियाशील जायज नवस

v9.1.2 तः, Safari एकं दोषं प्रदर्शयति यस्मिन् भवतः ब्राउजर् क्षैतिजरूपेण परिवर्तयितुं न्याय्य nav मध्ये प्रतिपादनदोषाः भवन्ति ये ताजगीं कृत्वा स्वच्छाः भवन्ति इदं दोषं justified nav उदाहरणे अपि दर्शितम् अस्ति |

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

कस्यचित् nav घटकस्य (टैब्स् वा गोल्यः) कृते, ग्रे लिङ्कानां.disabled कृते योजयन्तु तथा च कोऽपि होवर प्रभावः नास्ति .

लिङ्क कार्यक्षमता प्रभाविता न

अयं वर्गः केवलं <a>'s स्वरूपं परिवर्तयिष्यति, न तु तस्य कार्यक्षमतां । अत्र लिङ्कानि निष्क्रियं कर्तुं कस्टम् जावास्क्रिप्ट् उपयुज्यताम् ।

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

किञ्चित् अतिरिक्त HTML सह ड्रॉपडाउन मेनू योजयन्तु तथा च ड्रॉपडाउन JavaScript प्लगिन् योजयन्तु .

ड्रॉपडाउन सहित ट्याब्स्

<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>

नवबर

नवबार्स् प्रतिक्रियाशीलमेटाघटकाः सन्ति ये भवतः अनुप्रयोगस्य अथवा साइट् कृते नेविगेशन हेडररूपेण कार्यं कुर्वन्ति । ते चलदृश्येषु संकुचिताः (तथा च टॉगल-योग्याः) आरभन्ते तथा च यथा यथा उपलब्धं दृश्य-पोर्ट्-विस्तारं वर्धते तथा तथा क्षैतिजं भवन्ति ।

न्याय्यं navbar nav लिङ्कानि सम्प्रति समर्थितानि न सन्ति।

अतिप्रवाहित सामग्री

यतः Bootstrap न जानाति यत् भवतः navbar मध्ये सामग्रीं कियत् स्थानस्य आवश्यकता अस्ति, भवन्तः द्वितीयपङ्क्तौ सामग्रीवेष्टनस्य समस्यां प्राप्नुवन्ति । एतस्य समाधानार्थं भवान् कर्तुं शक्नोति : १.

  1. नवबार-वस्तूनाम् मात्रां वा विस्तारं वा न्यूनीकरोतु ।
  2. प्रतिक्रियाशील-उपयोगितावर्गाणां उपयोगेन कतिपयेषु स्क्रीन-आकारेषु कतिपयानि नवबार-वस्तूनि गोपयन्तु |
  3. यस्मिन् बिन्दौ भवतः navbar collapsed तथा horizontal mode मध्ये स्विच करोति तत् परिवर्तयन्तु । चर अनुकूलितं कुर्वन्तु @grid-float-breakpointअथवा स्वकीयं मीडिया प्रश्नं योजयन्तु।

जावास्क्रिप्ट् प्लगइन् आवश्यकम्

यदि जावास्क्रिप्ट् अक्षमम् अस्ति तथा च दृश्यपोर्ट् पर्याप्तं संकीर्णं भवति यत् नवबारः संकुचितः भवति तर्हि नवपट्टिकां विस्तारयितुं तथा च अन्तः सामग्रीं द्रष्टुं असम्भवं भविष्यति .navbar-collapse

प्रतिक्रियाशील navbar कृते collapse प्लगिन् भवतः Bootstrap संस्करणे समाविष्टं कर्तुं आवश्यकम् अस्ति ।

संकुचितं चलनवबारविरामबिन्दुं परिवर्तयति

नवबारः यदा दृश्यपोर्ट् - इत्यस्मात् संकीर्णः भवति तदा स्वस्य ऊर्ध्वाधर-चल-दृश्ये संकुचति @grid-float-breakpoint, तथा च यदा दृश्य-पोर्ट् न्यूनातिन्यूनं विस्तारे भवति तदा तस्य क्षैतिज-अचल-दृश्ये @grid-float-breakpointविस्तारं करोति navbar कदा संकुचितः/विस्तारितः भवति इति नियन्त्रयितुं Less source मध्ये एतत् चरं समायोजयन्तु । पूर्वनिर्धारितं मूल्यं 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>

navbar ब्राण्ड् इत्यस्य स्थाने स्वस्य प्रतिबिम्बेन पाठं स्वैप् कृत्वा <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संकीर्णदृश्यपोर्ट्स् मध्ये सम्यक् ऊर्ध्वाधरसंरेखणस्य संकुचितव्यवहारस्य च कृते प्रपत्रसामग्री अन्तः स्थापयन्तु । navbar सामग्रीयाः अन्तः कुत्र निवसति इति निर्णयार्थं संरेखणविकल्पानां उपयोगं कुर्वन्तु ।

एकः हेड्स् अप इव, 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>

मोबाईल उपकरण चेतावनी

चलयन्त्रेषु नियततत्त्वानां अन्तः रूपनियन्त्रणानां उपयोगविषये केचन चेतावनीः सन्ति । विस्तरेण ज्ञातुं अस्माकं ब्राउज़र समर्थन डॉक्स पश्यन्तु।

सदैव लेबल् योजयन्तु

यदि भवान् प्रत्येकं निवेशस्य कृते लेबलं न समावेशयति तर्हि स्क्रीन रीडर्-भ्यः भवतः प्रपत्रेषु समस्या भविष्यति। एतेषां inline forms कृते, भवान् .sr-onlyclass इत्यस्य उपयोगेन labels गोपयितुं शक्नोति । सहायकप्रौद्योगिकीनां कृते लेबलं प्रदातुं अन्ये वैकल्पिकाः पद्धतयः सन्ति, यथा aria-label, aria-labelledbyअथवा titleविशेषता । यदि एतेषु कश्चन अपि उपस्थितः नास्ति तर्हि स्क्रीन रीडर्-जनाः placeholderविशेषतायाः उपयोगस्य आश्रयं कर्तुं शक्नुवन्ति, यदि वर्तते, परन्तु placeholderअन्येषां लेबलिंग-विधिनाम् प्रतिस्थापनरूपेण of इत्यस्य उपयोगः न सल्लाहितः इति ज्ञातव्यम्

a इत्यस्मिन् न निवसन्तः एलिमेण्ट्स् मध्ये .navbar-btnक्लास् योजयन्तु यत् ते नवबार मध्ये लम्बवत् केन्द्रीक्रियन्ते ।<button><form>

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

सन्दर्भविशिष्टप्रयोगः

यथा standard button classes , on and elements .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-leftor .navbar-rightउपयोगितावर्गाणां उपयोगेन, nav लिङ्कानि, प्रपत्राणि, बटनानि, पाठं वा संरेखयन्तु । उभयवर्गः निर्दिष्टदिशि CSS float योजयिष्यति । यथा, nav लिङ्क्स् संरेखयितुं, तान् पृथक् मध्ये स्थापयन्तु <ul>यत्र तत्तत् उपयोगितावर्गः प्रयुक्तः अस्ति ।

एते वर्गाः and , इत्यस्य mixin-ed संस्करणाः सन्ति .pull-left, .pull-rightपरन्तु ते उपकरणस्य आकारेषु navbar घटकानां सुलभतया नियन्त्रणार्थं मीडियाप्रश्नानां कृते व्याप्ताः सन्ति ।

अनेक घटकों को सही संरेखित करना

नवबारेषु सम्प्रति बहुवर्गैः सह सीमा अस्ति .navbar-right। सामग्रीं सम्यक् स्पेस कर्तुं वयं अन्तिमे .navbar-rightएलिमेण्ट् उपरि negative margin इत्यस्य उपयोगं कुर्मः । यदा तस्य वर्गस्य उपयोगेन बहुविधाः तत्त्वानि सन्ति तदा एते मार्जिन्स् यथा अभिप्रेतम् कार्यं न कुर्वन्ति ।

यदा वयं v4 मध्ये तत् घटकं पुनः लिखितुं शक्नुमः तदा वयं एतत् पुनः आगमिष्यामः ।

a or to center तथा pad navbar सामग्री को जोड़ें .navbar-fixed-topएवं शामिल करें।.container.container-fluid

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

शरीर गद्दी आवश्यक है

नियत नवपट्टिका भवतः अन्यसामग्रीम् आच्छादयिष्यति, यावत् paddingभवन्तः <body>. स्वकीयानि मूल्यानि प्रयतस्व अथवा अधः अस्माकं स्निपेट् उपयुज्यताम् । युक्तिः: पूर्वनिर्धारितरूपेण, navbar 50px ऊर्ध्वं भवति ।

body { padding-top: 70px; }

कोर Bootstrap CSS इत्यस्य अनन्तरं एतत् अवश्यं समाविष्टं कुर्वन्तु ।

a or to center तथा pad navbar सामग्री को जोड़ें .navbar-fixed-bottomएवं शामिल करें।.container.container-fluid

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

शरीर गद्दी आवश्यक है

नियत नवपट्टिका भवतः अन्यसामग्रीम् आच्छादयिष्यति, यावत् paddingभवन्तः <body>. स्वकीयानि मूल्यानि प्रयतस्व अथवा अधः अस्माकं स्निपेट् उपयुज्यताम् । युक्तिः: पूर्वनिर्धारितरूपेण, navbar 50px ऊर्ध्वं भवति ।

body { padding-bottom: 70px; }

कोर Bootstrap CSS इत्यस्य अनन्तरं एतत् अवश्यं समाविष्टं कुर्वन्तु ।

एकं पूर्ण-विस्तारं नवबारं रचयन्तु यत् पृष्ठेन सह दूरं स्क्रॉलं कृत्वा .navbar-static-topएकं .containeror .container-fluidto center तथा च navbar सामग्रीं पैड कृत्वा समाविष्टं करोति ।

वर्गाणां विपरीतम् .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>

लेबल

उदाहरण

उदाहरण शीर्षक New

उदाहरण शीर्षक New

उदाहरण शीर्षक New

उदाहरण शीर्षक New

उदाहरण शीर्षक New
उदाहरण शीर्षक New
<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">a to links, Bootstrap navs, इत्यादीनि च योजयित्वा नूतनानि अथवा अपठितानि वस्तूनि सहजतया प्रकाशयन्तु ।

इनबॉक्स४२

<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>

जम्बोट्रोन्

एकः लघुः, लचीलः घटकः यः वैकल्पिकरूपेण सम्पूर्णं viewport विस्तारयितुं शक्नोति यत् भवतः साइट् मध्ये मुख्यसामग्री प्रदर्शयितुं शक्नोति।

नमस्कार, जगत् !

इदं सरलं नायक-एककं, विशेष-सामग्री-सूचनायां वा अतिरिक्तं ध्यानं आकर्षयितुं सरलं जम्बोट्रॉन्-शैली-घटकम् अस्ति ।

अधिकं ज्ञातुं शक्नुवन्ति

<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>

जम्बोट्रोन् पूर्णविस्तारं कर्तुं, तथा च गोलकोणानि विना, सर्वेषां s बहिः स्थापयन्तु तस्य स्थाने अन्तः .containerएकं योजयन्तु ।.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 सामग्रीं योजयितुं शक्यते ।

१००%x२०० इति

लघुचित्र लेबल

Cras justo odio, dapibus ac facilisis में, egestas eget quam. Donec id elit नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस. Nullam id dolor id nibh ultrices vehicula उत id elit.

कड्मल कड्मल

१००%x२०० इति

लघुचित्र लेबल

Cras justo odio, dapibus ac facilisis में, egestas eget quam. Donec id elit नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस. Nullam id dolor id nibh ultrices vehicula उत id elit.

कड्मल कड्मल

१००%x२०० इति

लघुचित्र लेबल

Cras justo odio, dapibus ac facilisis में, egestas eget quam. Donec id elit नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस. Nullam id dolor id nibh ultrices vehicula उत id elit.

कड्मल कड्मल

<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>

सर्वेषु उपकरणेषु सम्यक् व्यवहारं सुनिश्चितं कुर्वन्तु

data attribute <button>इत्यनेन सह element इत्यस्य उपयोगं अवश्यं कुर्वन्तु ।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 इत्यस्य प्राचीनसंस्करणेषु समर्थितानि न सन्ति । ओपेरा १२ एनिमेशनं समर्थयति नास्ति ।

सामग्री सुरक्षा नीति (CSP) संगतता

यदि भवतः वेबसाइट् मध्ये सामग्रीसुरक्षानीतिः (CSP) अस्ति या अनुमन्यते न style-src 'unsafe-inline', तर्हि भवन्तः styleप्रगतिपट्टिकाविस्तारं सेट् कर्तुं अन्तःरेखाविशेषतानां उपयोगं कर्तुं न शक्नुवन्ति यथा अधः अस्माकं उदाहरणेषु दर्शितम्। कठोर CSPs इत्यनेन सह संगतानि विस्ताराणि सेट् कर्तुं वैकल्पिकविधयः किञ्चित् कस्टम् JavaScript (that sets element.style.width) इत्यस्य उपयोगः अथवा कस्टम् CSS वर्गानां उपयोगः अन्तर्भवति

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

पूर्वनिर्धारित प्रगतिपट्टिका।

६०% सम्पूर्ण
<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>

सन्दर्भविकल्पाः

प्रगतिपट्टिकाः सुसंगतशैल्याः कृते केचन समानबटन् तथा सचेतनावर्गाणां उपयोगं कुर्वन्ति ।

४०% सम्पूर्ण (सफलता) ९.
२०% सम्पूर्ण
६०% सम्पूर्ण (चेतावनी) २.
८०% सम्पूर्ण (खतरा) २.
<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 इत्यत्र अधः च न उपलभ्यते ।

४०% सम्पूर्ण (सफलता) ९.
२०% सम्पूर्ण
६०% सम्पूर्ण (चेतावनी) २.
८०% सम्पूर्ण (खतरा) २.
<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>

सजीवः

पट्टिकाः दक्षिणतः वामतः सजीवं कर्तुं Add .activeto । .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>

मीडिया वस्तु

पाठ्यसामग्रीणां पार्श्वे वाम- वा दक्षिण-संरेखितं चित्रं दर्शयति इति विविधप्रकारस्य घटकानां निर्माणार्थं अमूर्तवस्तुशैल्याः (यथा ब्लॉगटिप्पणीः, ट्वीट् इत्यादयः)

पूर्वनिर्धारितं माध्यमम्

पूर्वनिर्धारितं माध्यमं सामग्रीखण्डस्य वामभागे दक्षिणभागे वा माध्यमवस्तुं (चित्रं, भिडियो, श्रव्यं) प्रदर्शयति ।

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

क्रास उपविशात् अमेत निभ लिबेरो, ग्राविदा नुल्ला में। नुल्ला वेल मेतुस scelerisque ante sollicitudin commodo. क्रास पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस। Fusce condimentum nunc एसी निसी vulputate fringilla. Donec lacinia congue felis in faucibus.

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

क्रास उपविशात् अमेत निभ लिबेरो, ग्राविदा नुल्ला में। नुल्ला वेल मेतुस scelerisque ante sollicitudin commodo. क्रास पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस। Fusce condimentum nunc एसी निसी vulputate fringilla. Donec lacinia congue felis in faucibus.

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

क्रास उपविशात् अमेत निभ लिबेरो, ग्राविदा नुल्ला में। नुल्ला वेल मेतुस scelerisque ante sollicitudin commodo. क्रास पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस। Fusce condimentum nunc एसी निसी vulputate fringilla. Donec lacinia congue felis in faucibus.

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

क्रास उपविशात् अमेत निभ लिबेरो, ग्राविदा नुल्ला में। नुल्ला वेल मेतुस scelerisque ante sollicitudin commodo. क्रास पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस।

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

क्रास उपविशात् अमेत निभ लिबेरो, ग्राविदा नुल्ला में। नुल्ला वेल मेतुस scelerisque ante sollicitudin commodo. क्रास पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस।
<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 इत्यत्र the इत्यत्र .media-rightस्थापनीयम् ।.media-body

मीडिया संरेखण

चित्राणि अन्ये वा माध्यमानि उपरि, मध्यं, अधः वा संरेखितुं शक्यन्ते । पूर्वनिर्धारितं शीर्षसंरेखितम् अस्ति ।

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

क्रास उपविशात् अमेत निभ लिबेरो, ग्राविदा नुल्ला में। नुल्ला वेल मेतुस scelerisque ante sollicitudin commodo. क्रास पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस। Fusce condimentum nunc एसी निसी vulputate fringilla. Donec lacinia congue felis in faucibus.

डोनेक सेद ओडियो दुई। Nullam quis risus eget उर्ना mollis ornare वेल ईउ लियो. सह sociis natoque penatibus एट मैग्निस डिस parturient montes, nascetur हास्यास्पद mus.

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

क्रास उपविशात् अमेत निभ लिबेरो, ग्राविदा नुल्ला में। नुल्ला वेल मेतुस scelerisque ante sollicitudin commodo. क्रास पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस। Fusce condimentum nunc एसी निसी vulputate fringilla. Donec lacinia congue felis in faucibus.

डोनेक सेद ओडियो दुई। Nullam quis risus eget उर्ना mollis ornare वेल ईउ लियो. सह sociis natoque penatibus एट मैग्निस डिस parturient montes, nascetur हास्यास्पद mus.

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

क्रास उपविशात् अमेत निभ लिबेरो, ग्राविदा नुल्ला में। नुल्ला वेल मेतुस scelerisque ante sollicitudin commodo. क्रास पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस। Fusce condimentum nunc एसी निसी vulputate fringilla. Donec lacinia congue felis in faucibus.

डोनेक सेद ओडियो दुई। Nullam quis risus eget उर्ना mollis ornare वेल ईउ लियो. सह sociis natoque penatibus एट मैग्निस डिस parturient montes, nascetur हास्यास्पद mus.

<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>

मीडिया सूची

किञ्चित् अतिरिक्तं मार्कअपं कृत्वा, भवान् सूचीयाः अन्तः मीडिया (टिप्पणीसूत्राणां वा लेखसूचीनां वा कृते उपयोगी) उपयोक्तुं शक्नोति ।

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

    क्रास उपविशात् अमेत निभ लिबेरो, ग्राविदा नुल्ला में। नुल्ला वेल मेतुस scelerisque ante sollicitudin commodo. क्रास पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस।

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

    क्रास उपविशात् अमेत निभ लिबेरो, ग्राविदा नुल्ला में। नुल्ला वेल मेतुस scelerisque ante sollicitudin commodo. क्रास पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस।

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

    क्रास उपविशात् अमेत निभ लिबेरो, ग्राविदा नुल्ला में। नुल्ला वेल मेतुस scelerisque ante sollicitudin commodo. क्रास पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस।

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

    क्रास उपविशात् अमेत निभ लिबेरो, ग्राविदा नुल्ला में। नुल्ला वेल मेतुस scelerisque ante sollicitudin commodo. क्रास पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस।
<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 ।

  • क्रास जस्टो ओडियो
  • Dapibus ac सुविधा in
  • Morbi leo risus इति
  • पोर्टा ac consectetur ac
  • वेस्टिबुलम एट इरोस
<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>

बैज

कस्मिन् अपि list group item मध्ये badges घटकं योजयन्तु ततः स्वयमेव दक्षिणभागे स्थितं भविष्यति ।

  • १४क्रास जस्टो ओडियो
  • Dapibus ac सुविधा in
  • Morbi leo risus इति
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

लिङ्क् कृतानि वस्तूनि

सूचीवस्तूनाम् स्थाने anchor tags इत्यस्य उपयोगेन सूचीसमूहवस्तूनाम् लिङ्क् कुर्वन्तु (तस्य अर्थः अपि अस्ति एकस्य <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राज्यम् अपि अन्तर्भवति ।

  • Dapibus ac सुविधा in
  • क्रास बैठामेत निभ लिबेरो
  • पोर्टा ac consectetur ac
  • वेस्टिबुलम एट इरोस
<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>- इत्यस्य font ��काराः <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निर्बाधडिजाइनार्थं पटलस्य अन्तः किमपि असीमायुक्तं योजयन्तु । यदि a अस्ति तर्हि .panel-bodyपृथक्करणार्थं वयं सारणीयाः उपरि अतिरिक्तं सीमां योजयामः ।

फलक शीर्षक

अत्र काश्चन पूर्वनिर्धारितपटलसामग्री। नुल्ला विटाए एलिट् लिबेरो, एक फारेत्र औगुए। Aenean lacinia bibendum nulla सेड consectetur. एनेन ईउ लियो क्वाम् । Pellentesque ornare सेम लेसिनिया क्वाम वेनेनेटिस वेस्टिबुलम. Nullam id dolor id nibh ultrices vehicula उत id elit.

# . प्रथम नाम्ना अंतिम नाम्ना उपयोक्तृनाम
मार्क ओटो @मडो
याकूबः थॉर्न्टन इति @स्थूलः
ल्यारी the Bird इति @ 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>

यदि panel body नास्ति तर्हि घटकः panel header तः table मध्ये विना व्यत्ययं गच्छति ।

फलक शीर्षक
# . प्रथम नाम्ना अंतिम नाम्ना उपयोक्तृनाम
मार्क ओटो @मडो
याकूबः थॉर्न्टन इति @स्थूलः
ल्यारी the Bird इति @ twitter इति
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

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

सूचीसमूहैः सह

कस्यापि फलकस्य अन्तः पूर्णविस्तारसूचीसमूहान् सहजतया समावेशयन्तु ।

फलक शीर्षक

अत्र काश्चन पूर्वनिर्धारितपटलसामग्री। नुल्ला विटाए एलिट् लिबेरो, एक फारेत्र औगुए। Aenean lacinia bibendum nulla सेड consectetur. एनेन ईउ लियो क्वाम् । Pellentesque ornare सेम लेसिनिया क्वाम वेनेनेटिस वेस्टिबुलम. Nullam id dolor id nibh ultrices vehicula उत id elit.

  • क्रास जस्टो ओडियो
  • Dapibus ac सुविधा in
  • Morbi leo risus इति
  • पोर्टा ac consectetur ac
  • वेस्टिबुलम एट इरोस
<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>