घटक

नेव्हिगेशन, अलर्ट, पॉपओव्हर आणि बरेच काही प्रदान करण्यासाठी डझनभर पुन्हा वापरता येण्याजोगे घटक बूटस्ट्रॅपमध्ये तयार केले आहेत.

बटण गट

एक संमिश्र घटक म्हणून एकाधिक बटणे एकत्र जोडण्यासाठी बटण गट वापरा. त्यांना मालिका <a>किंवा <button>घटकांसह तयार करा.

चांगला सराव

बटण गट आणि टूलबार वापरण्यासाठी आम्ही खालील मार्गदर्शक तत्त्वांची शिफारस करतो:

  • एकाच बटणाच्या गटामध्ये नेहमी समान घटक वापरा <a>किंवा <button>.
  • एकाच बटणाच्या गटात वेगवेगळ्या रंगांची बटणे मिसळू नका.
  • मजकूराच्या व्यतिरिक्त किंवा त्याऐवजी चिन्ह वापरा, परंतु योग्य असेल तेथे Alt आणि शीर्षक मजकूर समाविष्ट करा.

ड्रॉपडाउनसह संबंधित बटण गट (खाली पहा) स्वतंत्रपणे बोलावले जावे आणि इच्छित वर्तन दर्शवण्यासाठी नेहमी ड्रॉपडाउन कॅरेट समाविष्ट करा.

डीफॉल्ट उदाहरण

अँकर टॅग बटणांसह तयार केलेल्या मानक बटण गटासाठी HTML कसे दिसते ते येथे आहे:

  1. <div वर्ग = "btn-ग्रुप" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </button>
  5. </div>

टूलबारचे उदाहरण

अधिक जटिल घटकांसाठी <div class="btn-group">a मध्ये संच एकत्र करा .<div class="btn-toolbar">

  1. <div वर्ग = "btn-टूलबार" >
  2. <div वर्ग = "btn-ग्रुप" >
  3. ...
  4. </div>
  5. </div>

चेकबॉक्स आणि रेडिओ फ्लेवर्स

बटण गट रेडिओ म्हणून देखील कार्य करू शकतात, जेथे फक्त एक बटण सक्रिय असू शकते किंवा चेकबॉक्सेस, जेथे कितीही बटणे सक्रिय असू शकतात. त्यासाठी Javascript डॉक्स पहा .

जावास्क्रिप्ट मिळवा »

बटण गटांमध्ये ड्रॉपडाउन

सावधान! योग्य रेंडरिंगसाठी ड्रॉपडाउनसह बटणे वैयक्तिकरित्या त्यांच्या .btn-groupस्वतःमध्ये गुंडाळलेली असणे आवश्यक आहे ..btn-toolbar

बटण ड्रॉपडाउन

विहंगावलोकन आणि उदाहरणे

ड्रॉपडाउन मेनू ट्रिगर करण्यासाठी कोणतेही बटण वापरा आणि ते a मध्ये ठेवून .btn-groupआणि योग्य मेनू मार्कअप प्रदान करा.

उदाहरण मार्कअप

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

  1. <div वर्ग = "btn-ग्रुप" >
  2. <a class = "btn dropdown-toggle" data-toggle = "ड्रॉपडाउन" href = "#" >
  3. कृती
  4. <span वर्ग = "कॅरेट" ></span>
  5. </a>
  6. <ul class = "ड्रॉपडाउन-मेनू" >
  7. <!-- ड्रॉपडाउन मेनू लिंक्स -->
  8. </ul>
  9. </div>

सर्व बटण आकारांसह कार्य करते

बटण ड्रॉपडाउन कोणत्याही आकारात कार्य करतात. तुमच्या बटणाचा आकार .btn-large, .btn-smallकिंवा .btn-mini.

जावास्क्रिप्ट आवश्यक आहे

बटण ड्रॉपडाउनला कार्य करण्यासाठी बूटस्ट्रॅप ड्रॉपडाउन प्लगइन आवश्यक आहे.

काही प्रकरणांमध्ये - जसे की मोबाइल - ड्रॉपडाउन मेनू व्ह्यूपोर्टच्या बाहेर वाढेल. तुम्हाला स्वहस्ते किंवा सानुकूल जावास्क्रिप्टसह संरेखन सोडवणे आवश्यक आहे.


स्प्लिट बटण ड्रॉपडाउन

विहंगावलोकन आणि उदाहरणे

बटणाच्या गट शैली आणि मार्कअपवर बिल्डिंग, आम्ही सहजपणे विभाजित बटण तयार करू शकतो. स्प्लिट बटणे डावीकडे मानक क्रिया आणि संदर्भित लिंकसह उजवीकडे ड्रॉपडाउन टॉगल वैशिष्ट्यीकृत करतात.

आकार

अतिरिक्त बटण वर्ग वापरा .btn-mini, .btn-smallकिंवा .btn-largeआकारमानासाठी.

  1. <div वर्ग = "btn-ग्रुप" >
  2. ...
  3. <ul class = "ड्रॉपडाउन-मेनू पुल-राइट" >
  4. <!-- ड्रॉपडाउन मेनू लिंक्स -->
  5. </ul>
  6. </div>

उदाहरण मार्कअप

वेगळे ड्रॉपडाउन ट्रिगर म्हणून काम करणारी दुसरी बटण क्रिया प्रदान करण्यासाठी आम्ही सामान्य बटण ड्रॉपडाउनवर विस्तृत करतो.

  1. <div वर्ग = "btn-ग्रुप" >
  2. <button class = "btn" > क्रिया </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "ड्रॉपडाउन" >
  4. <span वर्ग = "कॅरेट" ></span>
  5. </ बटन>
  6. <ul class = "ड्रॉपडाउन-मेनू" >
  7. <!-- ड्रॉपडाउन मेनू लिंक्स -->
  8. </ul>
  9. </div>

ड्रॉपअप मेनू

च्या तत्काळ पालकामध्ये एकल वर्ग जोडून ड्रॉपडाउन मेनू तळापासून वर टॉगल केले जाऊ शकतात .dropdown-menu. हे ची दिशा फ्लिप करेल .caretआणि वरच्या खाली ऐवजी तळापासून वर जाण्यासाठी मेनू स्वतःच पुनर्स्थित करेल.

  1. <div वर्ग = "btn-ग्रुप ड्रॉपअप" >
  2. <button class = "btn" > ड्रॉपअप </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "ड्रॉपडाउन" >
  4. <span वर्ग = "कॅरेट" ></span>
  5. </ बटन>
  6. <ul class = "ड्रॉपडाउन-मेनू" >
  7. <!-- ड्रॉपडाउन मेनू लिंक्स -->
  8. </ul>
  9. </div>

मल्टीकॉन-पृष्ठ पृष्ठांकन

कधी वापरायचे

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

स्टेटफुल पेज लिंक्स

लिंक्स सानुकूल करण्यायोग्य आहेत आणि योग्य वर्गासह अनेक परिस्थितींमध्ये कार्य करतात. .disabledक्लिक न करता येणार्‍या दुव्यांसाठी आणि .activeवर्तमान पृष्ठासाठी.

लवचिक संरेखन

पृष्ठांकन दुव्यांचे संरेखन बदलण्यासाठी दोनपैकी एक पर्यायी वर्ग जोडा: .pagination-centeredआणि .pagination-right.

उदाहरणे

डीफॉल्ट पृष्ठांकन घटक लवचिक आहे आणि अनेक भिन्नतेमध्ये कार्य करतो.

मार्कअप

एक <div>मध्ये गुंडाळलेले, पृष्ठांकन फक्त एक आहे <ul>.

  1. <div वर्ग = "पृष्ठांकन" >
  2. <ul>
  3. <li><a href = "#" > मागील </a></li>
  4. <li वर्ग = "सक्रिय" >
  5. <a href="#" > 1 </a> _ _
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > </a></li>
  10. <li><a href = "#" > पुढे </a></li>
  11. </ul>
  12. </div>

त्वरित मागील आणि पुढील दुव्यांसाठी पेजर

पेजर बद्दल

पेजर घटक हा लाइट मार्कअप आणि अगदी हलक्या शैलीसह साध्या पृष्ठांकन अंमलबजावणीसाठी लिंक्सचा संच आहे. ब्लॉग किंवा मासिके सारख्या साध्या साइटसाठी हे छान आहे.

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

.disabledपेजर लिंक्स पेजनेशनमधून सामान्य वर्ग देखील वापरतात .

डीफॉल्ट उदाहरण

डीफॉल्टनुसार, पेजर लिंक्स केंद्रस्थानी ठेवतात.

  1. <ul class = "पेजर" >
  2. <li>
  3. <a href="#" > मागील </a> _ _
  4. </li>
  5. <li>
  6. <a href="#" > पुढे </a> _ _
  7. </li>
  8. </ul>

संरेखित दुवे

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

  1. <ul class = "पेजर" >
  2. <li वर्ग = "मागील" >
  3. <a href="#" > & larr ; जुने </a>
  4. </li>
  5. <li वर्ग = "पुढील" >
  6. <a href = "#" > नवीन → </a>
  7. </li>
  8. </ul>
लेबल्स मार्कअप
डीफॉल्ट <span class="label">Default</span>
यश <span class="label label-success">Success</span>
चेतावणी <span class="label label-warning">Warning</span>
महत्वाचे <span class="label label-important">Important</span>
माहिती <span class="label label-info">Info</span>
उलटा <span class="label label-inverse">Inverse</span>

बद्दल

बॅज हे काही प्रकारचे सूचक किंवा संख्या प्रदर्शित करण्यासाठी लहान, साधे घटक आहेत. ते सामान्यतः Mail.app सारख्या ईमेल क्लायंटमध्ये किंवा पुश सूचनांसाठी मोबाइल अॅप्सवर आढळतात.

उपलब्ध वर्ग

नाव उदाहरण मार्कअप
डीफॉल्ट <span class="badge">1</span>
यश 2 <span class="badge badge-success">2</span>
चेतावणी 4 <span class="badge badge-warning">4</span>
महत्वाचे 6 <span class="badge badge-important">6</span>
माहिती 8 <span class="badge badge-info">8</span>
उलटा 10 <span class="badge badge-inverse">10</span>

हिरो युनिट

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

मार्कअप

तुमची सामग्री divअशा प्रकारे गुंडाळा:

  1. <div वर्ग = "नायक-युनिट" >
  2. <h1> शीर्षक </h1>
  3. <p> टॅगलाइन </p>
  4. <p>
  5. <a वर्ग = "btn btn-प्राथमिक btn-लार्ज" >
  6. अधिक जाणून घ्या
  7. </a>
  8. </p>
  9. </div>

नमस्कार, जग!

हे एक साधे हिरो युनिट आहे, वैशिष्ट्यीकृत सामग्री किंवा माहितीकडे अतिरिक्त लक्ष वेधण्यासाठी एक साधा जंबोट्रॉन-शैलीचा घटक आहे.

अधिक जाणून घ्या

पृष्ठ शीर्षलेख

h1पृष्ठावरील सामग्रीचे विभाग योग्यरित्या काढण्यासाठी आणि विभाग करण्यासाठी एक साधा शेल . h1हे डीफॉल्ट small, घटक तसेच इतर बहुतेक घटक (अतिरिक्त शैलींसह) वापरू शकते .

  1. <div वर्ग = "पृष्ठ-हेडर" >
  2. <h1> उदाहरण पृष्ठ शीर्षलेख </h1>
  3. </div>

डीफॉल्ट लघुप्रतिमा

डीफॉल्टनुसार, बूटस्ट्रॅपची लघुप्रतिमा कमीतकमी आवश्यक मार्कअपसह लिंक केलेल्या प्रतिमा प्रदर्शित करण्यासाठी डिझाइन केलेली आहेत.

अत्यंत सानुकूल करण्यायोग्य

थोड्या अतिरिक्त मार्कअपसह, लघुप्रतिमांमध्ये शीर्षके, परिच्छेद किंवा बटणे यासारखी 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. नल्लम आयडी डोलोर आयडी निभ अल्ट्रीसीज वाहने आणि आयडी एलिट.

    कृती कृती

लघुप्रतिमा का वापरा

लघुप्रतिमा (पूर्वी .media-gridv1.4 पर्यंत) फोटो किंवा व्हिडिओंच्या ग्रिड, प्रतिमा शोध परिणाम, किरकोळ उत्पादने, पोर्टफोलिओ आणि बरेच काही यासाठी उत्तम आहेत. ते दुवे किंवा स्थिर सामग्री असू शकतात.

साधे, लवचिक मार्कअप

थंबनेल मार्कअप सोपे आहे—कित्‍याही ulघटकांसह liसर्व आवश्यक आहे. हे अतिशय लवचिक देखील आहे, तुमची सामग्री गुंडाळण्यासाठी फक्त थोडी अधिक मार्कअपसह कोणत्याही प्रकारच्या सामग्रीस अनुमती देते.

ग्रिड स्तंभ आकार वापरते

शेवटी, लघुप्रतिमा घटक थंबनेल परिमाणांच्या नियंत्रणासाठी विद्यमान ग्रिड सिस्टम वर्ग-जसे .span2किंवा —वापरतात..span3

मार्कअप

आधी सांगितल्याप्रमाणे, लघुप्रतिमांसाठी आवश्यक मार्कअप हलके आणि सरळ आहे. लिंक केलेल्या प्रतिमांसाठी डीफॉल्ट सेटअप येथे पहा :

  1. <ul class = "थंबनेल्स" >
  2. <li वर्ग = "span3" >
  3. <a href = "#" वर्ग = "थंबनेल" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

लघुप्रतिमांमध्ये सानुकूल HTML सामग्रीसाठी, मार्कअप थोडेसे बदलते. कोठेही ब्लॉक लेव्हल सामग्रीला अनुमती देण्यासाठी, आम्ही याप्रमाणे अदलाबदल <a>करतो :<div>

  1. <ul class = "थंबनेल्स" >
  2. <li वर्ग = "span3" >
  3. <div वर्ग = "थंबनेल" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> थंबनेल लेबल </h5>
  6. <p> येथे लघुप्रतिमा मथळा... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

आणखी उदाहरणे

तुमच्यासाठी उपलब्ध असलेल्या विविध ग्रिड वर्गांसह तुमचे सर्व पर्याय एक्सप्लोर करा. तुम्ही वेगवेगळे आकार मिक्स आणि मॅच करू शकता.

लाइटवेट डीफॉल्ट

आधार वर्ग पुन्हा लिहिला

Bootstrap 2 सह, आम्ही बेस क्लास सरलीकृत केला आहे: .alertऐवजी .alert-message. आम्ही किमान आवश्यक मार्कअप देखील कमी केले आहे-नाही <p>डीफॉल्टनुसार आवश्यक आहे, फक्त बाह्य <div>.

एकल इशारा संदेश

कमी कोडसह अधिक टिकाऊ घटकासाठी, आम्ही ब्लॉक अलर्ट, अधिक पॅडिंगसह येणारे संदेश आणि सामान्यत: अधिक मजकूरासाठी वेगळे स्वरूप काढून टाकले आहे. वर्ग देखील मध्ये बदलला आहे .alert-block.


जावास्क्रिप्ट सह उत्तम जाते

बूटस्ट्रॅप एक उत्कृष्ट jQuery प्लगइनसह येतो जे अलर्ट संदेशांना समर्थन देते, त्यांना जलद आणि सुलभपणे डिसमिस करते.

प्लगइन मिळवा »

उदाहरणे सूचना

तुमचा संदेश आणि पर्यायी क्लोज आयकॉन साध्या वर्गासह डिव्हमध्ये गुंडाळा.

चेतावणी! स्वत: ला उत्तम प्रकारे तपासा, तुम्ही खूप चांगले दिसत नाही आहात.
  1. <div वर्ग = "सूचना" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> चेतावणी! </strong> स्वतःची उत्तम तपासणी करा, तुम्ही फार चांगले दिसत नाही.
  4. </div>

सावधान! iOS डिव्‍हाइसेसना href="#"अलर्ट डिसमिस करण्‍यासाठी एक आवश्‍यक आहे. अँकर क्लोज आयकॉनसाठी ते आणि डेटा विशेषता समाविष्ट करण्याचे सुनिश्चित करा. वैकल्पिकरित्या, तुम्ही डेटा विशेषता असलेले घटक वापरू शकता <button>, जे आम्ही आमच्या डॉक्ससाठी निवडले आहे. वापरताना <button>, आपण समाविष्ट करणे आवश्यक आहे type="button"किंवा आपले फॉर्म सबमिट करू शकत नाहीत.

दोन पर्यायी वर्गांसह मानक सूचना संदेश सहजपणे विस्तारित करा: .alert-blockअधिक पॅडिंग आणि मजकूर नियंत्रणासाठी आणि .alert-headingजुळणार्‍या शीर्षकासाठी.

चेतावणी!

स्वत:ची उत्तम तपासणी करा, तुम्ही फार चांगले दिसत नाही. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div वर्ग = "अलर्ट अलर्ट-ब्लॉक" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 वर्ग = "अलर्ट-हेडिंग" > चेतावणी! </h4>
  4. स्वत: ला उत्तम तपासा, तुम्ही नाही...
  5. </div>

संदर्भित पर्याय अलर्टचा अर्थ बदलण्यासाठी पर्यायी वर्ग जोडा

चूक किंवा धोका

अरे स्नॅप! काही गोष्टी बदला आणि पुन्हा सबमिट करण्याचा प्रयत्न करा.
  1. <div वर्ग = "सूचना इशारा-त्रुटी" >
  2. ...
  3. </div>

यश

शाब्बास! तुम्ही हा महत्त्वाचा इशारा संदेश यशस्वीरीत्या वाचला.
  1. <div वर्ग = "सूचना अलर्ट-यशस्वी" >
  2. ...
  3. </div>

माहिती

सावधान! या अलर्टकडे तुमचे लक्ष देणे आवश्यक आहे, परंतु ते फार महत्वाचे नाही.
  1. <div वर्ग = "अलर्ट अलर्ट-माहिती" >
  2. ...
  3. </div>

उदाहरणे आणि मार्कअप

बेसिक

उभ्या ग्रेडियंटसह डीफॉल्ट प्रगती बार.

  1. <div वर्ग = "प्रगती" >
  2. <div वर्ग = "बार"
  3. शैली = " रुंदी : 60 %; " ></div>
  4. </div>

पट्टेदार

स्ट्रीप इफेक्ट तयार करण्यासाठी ग्रेडियंट वापरते (IE नाही).

  1. <div class = "progress progress-striped" >
  2. <div वर्ग = "बार"
  3. शैली = " रुंदी : 20 %; " ></div>
  4. </div>

अॅनिमेटेड

स्ट्रीप केलेले उदाहरण घेते आणि ते अॅनिमेट करते (IE नाही).

  1. <div वर्ग = "प्रगती प्रगती-पट्टी
  2. सक्रिय" >
  3. <div वर्ग = "बार"
  4. शैली = " रुंदी : 40 %; " ></div>
  5. </div>

पर्याय आणि ब्राउझर समर्थन

अतिरिक्त रंग

प्रगती बार सुसंगत शैलींसाठी काही समान बटण आणि अलर्ट वर्ग वापरतात.

पट्टेदार बार

घन रंगांप्रमाणेच, आमच्याकडे विविध स्ट्रीप प्रोग्रेस बार आहेत.

वागणूक

प्रोग्रेस बार CSS3 संक्रमणे वापरतात, त्यामुळे तुम्ही javascript द्वारे रुंदी डायनॅमिकरित्या समायोजित केल्यास, ते सहजतेने आकार बदलेल.

तुम्ही .activeवर्ग वापरल्यास, तुमचे .progress-stripedप्रोग्रेस बार डावीकडून उजवीकडे पट्टे अॅनिमेट करतील.

ब्राउझर समर्थन

प्रोग्रेस बार त्यांचे सर्व प्रभाव साध्य करण्यासाठी CSS3 ग्रेडियंट, संक्रमण आणि अॅनिमेशन वापरतात. ही वैशिष्ट्ये IE7-9 किंवा Firefox च्या जुन्या आवृत्त्यांमध्ये समर्थित नाहीत.

ऑपेरा आणि IE यावेळी अॅनिमेशनला सपोर्ट करत नाहीत.

विहिरी

एखाद्या घटकावर इनसेट इफेक्ट देण्यासाठी विहीर वापरा.

बघ, मी विहिरीत आहे!
  1. <div वर्ग = "वेल" >
  2. ...
  3. </div>

चिन्ह बंद करा

मॉडेल आणि सूचनांसारखी सामग्री डिसमिस करण्यासाठी जेनेरिक क्लोज आयकॉन वापरा.

  1. <button class = "बंद करा" > × </button>

तुम्ही अँकर वापरत असल्‍यास iOS डिव्‍हाइसेसना क्लिक इव्‍हेंटसाठी एक href="#" आवश्‍यक आहे.

  1. <a वर्ग = "बंद करा" href = "#" > × </a>