बूटस्ट्रैप 3 ट्यूटोरियल

बीएस होम बी एस आरंभ करें बीएस ग्रिड बेसिक बीएस टाइपोग्राफी बीएस टेबल्स बीएस छवियां बीएस जंबोट्रॉन बीएस वेल्स बीएस अलर्ट बीएस बटन बीएस बटन समूह बीएस ग्लिफ़कॉन्स बीएस बैज/लेबल बीएस प्रोग्रेस बार्स बीएस पेजिनेशन बीएस पेजर बीएस सूची समूह बीएस पैनल बीएस ड्रॉपडाउन बीएस पतन बीएस टैब्स/गोलियां बीएस नवबार बीएस फॉर्म बीएस इनपुट्स बीएस इनपुट 2 बीएस इनपुट साइजिंग बीएस मीडिया ऑब्जेक्ट्स बी एस हिंडोला बीएस मोडल बीएस टूलटिप बीएस पॉपओवर बीएस स्क्रॉलस्पाई बीएस एफिक्स बीएस फिल्टर

बूटस्ट्रैप ग्रिड

बीएस ग्रिड सिस्टम बीएस स्टैक्ड/क्षैतिज बीएस ग्रिड छोटा बीएस ग्रिड माध्यम बीएस ग्रिड लार्ज बीएस ग्रिड उदाहरण

बूटस्ट्रैप थीम्स

बीएस टेम्पलेट्स बीएस थीम "सिम्पली मी" बीएस थीम "कंपनी" बीएस थीम "बैंड"

बूटस्ट्रैप उदाहरण

बीएस उदाहरण बी एस प्रश्नोत्तरी बीएस व्यायाम बी एस प्रमाणपत्र

बूटस्ट्रैप सीएसएस रेफरी

सीएसएस सभी वर्ग सीएसएस टाइपोग्राफी सीएसएस बटन सीएसएस फॉर्म सीएसएस हेल्पर्स सीएसएस छवियां सीएसएस टेबल्स सीएसएस ड्रॉपडाउन सीएसएस नवस ग्लिफ़िकन्स

बूटस्ट्रैप जे एस रेफरी

जे एस एफिक्स जेएस अलर्ट जे एस बटन जे एस हिंडोला जे एस संक्षिप्त जेएस ड्रॉपडाउन जेएस मोडल जेएस पॉपओवर जेएस स्क्रॉलस्पी जेएस टैब जेएस टूलटिप


बूटस्ट्रैप अलर्ट


अलर्ट

बूटस्ट्रैप पूर्वनिर्धारित अलर्ट संदेश बनाने का एक आसान तरीका प्रदान करता है:

× सफलता! यह अलर्ट बॉक्स एक सफल या सकारात्मक कार्रवाई का संकेत देता है।
× जानकारी! यह अलर्ट बॉक्स एक तटस्थ सूचनात्मक परिवर्तन या कार्रवाई को इंगित करता है।
× चेतावनी! यह अलर्ट बॉक्स एक चेतावनी को इंगित करता है जिस पर ध्यान देने की आवश्यकता हो सकती है।
× खतरा! यह अलर्ट बॉक्स खतरनाक या संभावित रूप से नकारात्मक कार्रवाई का संकेत देता है।

अलर्ट .alertकक्षा के साथ बनाए जाते हैं, उसके बाद चार प्रासंगिक वर्गों में से .alert-successएक .alert-info, .alert-warningया .alert-danger:

उदाहरण

<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

<div class="alert alert-info">
  <strong>Info!</strong> Indicates a neutral informative change or action.
</div>

<div class="alert alert-warning">
  <strong>Warning!</strong> Indicates a warning that might need attention.
</div>

<div class="alert alert-danger">
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>


अलर्ट लिंक

alert-link"मिलते-जुलते रंगीन लिंक" बनाने के लिए अलर्ट बॉक्स के अंदर किसी भी लिंक में क्लास जोड़ें :

सफलता! आपको यह संदेश पढ़ना चाहिए ।
जानकारी! आपको यह संदेश पढ़ना चाहिए ।
चेतावनी! आपको यह संदेश पढ़ना चाहिए ।
खतरा! आपको यह संदेश पढ़ना चाहिए ।

उदाहरण

<div class="alert alert-success">
  <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>

क्लोजिंग अलर्ट

× मुझे बंद करने के लिए दाईं ओर "x" चिह्न पर क्लिक करें।

अलर्ट संदेश को बंद करने के .alert-dismissible लिए, अलर्ट कंटेनर में एक वर्ग जोड़ें। फिर जोड़ें class="close"और data-dismiss="alert" एक लिंक या एक बटन तत्व (जब आप इस पर क्लिक करते हैं तो अलर्ट बॉक्स गायब हो जाएगा)।

उदाहरण

<div class="alert alert-success alert-dismissible">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

aria-* विशेषता और × स्पष्टीकरण

स्क्रीन रीडर का उपयोग करने वाले लोगों की पहुंच में सुधार करने में सहायता के लिए, आपको बंद करें बटन बनाते समय aria-label="close" विशेषता शामिल करनी चाहिए।

और समय; (×) एक HTML इकाई है जो "x" अक्षर के बजाय क्लोज बटन के लिए पसंदीदा आइकन है।
सभी HTML निकायों की सूची के लिए, हमारे HTML निकाय संदर्भ पर जाएं .


एनिमेटेड अलर्ट

× मुझे बंद करने के लिए दाईं ओर "x" चिह्न पर क्लिक करें। मैं "फीका" हो जाऊंगा।

.fadeचेतावनी संदेश बंद करते समय और कक्षाएं .inएक लुप्त होती प्रभाव जोड़ती हैं:

उदाहरण

<div class="alert alert-danger fade in">

व्यायाम के साथ खुद को परखें

व्यायाम:

एक सफल क्रिया का परिणाम प्रदर्शित करने के लिए बूटस्ट्रैप "अलर्ट" वर्ग जोड़ें।

<div class="">
  Success!
</div>


पूर्ण बूटस्ट्रैप अलर्ट संदर्भ

सभी अलर्ट विकल्पों, विधियों और घटनाओं के संपूर्ण संदर्भ के लिए, हमारे बूटस्ट्रैप जेएस अलर्ट संदर्भ पर जाएं ।