घटक

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

उदाहरणे

आणखी दोन विशिष्ट भिन्नतेसह दोन मूलभूत पर्याय.

एकल बटण गट

.btnमध्ये बटणांची मालिका गुंडाळा .btn-group.

  1. <div वर्ग = "btn-ग्रुप" >
  2. <button class = "btn" > डावीकडे </button>
  3. <button class = "btn" > मध्य </button>
  4. <button class = "btn" > उजवे </button>
  5. </div>

एकाधिक बटण गट

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

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

अनुलंब बटण गट

बटणांचा संच क्षैतिज ऐवजी अनुलंब स्टॅक केलेला दिसावा.

  1. <div वर्ग = "btn-group btn-group-vertical" >
  2. ...
  3. </div>

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

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

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

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

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

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

  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.

JavaScript आवश्यक आहे

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

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


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

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

  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>

आकार

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

  1. <div वर्ग = "btn-ग्रुप" >
  2. <button class = "btn btn-mini" > क्रिया </button>
  3. <बटण वर्ग = "btn btn-mini 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 द्वारे प्रेरित साधे पृष्ठांकन, अॅप्स आणि शोध परिणामांसाठी उत्तम. मोठा ब्लॉक चुकणे कठीण आहे, सहज स्केलेबल आहे आणि मोठ्या क्लिक क्षेत्रे प्रदान करते.

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

पर्याय

अक्षम आणि सक्रिय राज्ये

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

  1. <div वर्ग = "पृष्ठांकन" >
  2. <ul>
  3. <li वर्ग = "अक्षम" ><a href = "#" > « </a></li>
  4. <li वर्ग = "सक्रिय" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

इच्छित शैली टिकवून ठेवताना क्लिक कार्यक्षमता काढून टाकण्यासाठी तुम्ही स्पॅनसाठी सक्रिय किंवा अक्षम अँकर वैकल्पिकरित्या बदलू शकता.

  1. <div वर्ग = "पृष्ठांकन" >
  2. <ul>
  3. <li वर्ग = "अक्षम" ><span> « </span></li>
  4. <li class = "active" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

आकार

फॅन्सी मोठे किंवा लहान पृष्ठांकन? .pagination-large, .pagination-small, किंवा .pagination-miniअतिरिक्त आकारांसाठी जोडा .

  1. <div वर्ग = "पृष्‍ठांकन पृष्ठांकन-लार्ज" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div वर्ग = "पृष्ठांकन" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div वर्ग = "पृष्ठ क्रमांकन पृष्ठांकन-स्मॉल" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div वर्ग = "पृष्ठ क्रमांकन पृष्ठांकन-मिनी" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

संरेखन

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

  1. <div वर्ग = "पृष्ठांकन पृष्ठांकन-केंद्रित" >
  2. ...
  3. </div>
  1. <div वर्ग = "पृष्ठांकन पृष्ठांकन-उजवे" >
  2. ...
  3. </div>

पेजर

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

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

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

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

संरेखित दुवे

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

  1. <ul class = "पेजर" >
  2. <li वर्ग = "मागील" >
  3. <a href="#" > & larr ; जुने </a>
  4. </li>
  5. <li वर्ग = "पुढील" >
  6. <a href = "#" > नवीन → </a>
  7. </li>
  8. </ul>

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

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

  1. <ul class = "पेजर" >
  2. <li वर्ग = "मागील अक्षम" >
  3. <a href="#" > & larr ; जुने </a>
  4. </li>
  5. ...
  6. </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>

बॅज

नाव उदाहरण मार्कअप
डीफॉल्ट <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>

सहज कोलॅप्सिबल

:emptyसुलभ अंमलबजावणीसाठी, कोणतीही सामग्री आत नसताना लेबले आणि बॅज (CSS च्या सिलेक्टरद्वारे) कोलमडेल.

हिरो युनिट

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

नमस्कार, जग!

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

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

  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> उदाहरण पृष्ठ शीर्षलेख <small> शीर्षलेखासाठी सबटेक्स्ट </small></h1>
  3. </div>

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

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

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

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

  • 300x200

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

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. नल्लम आयडी डोलोर आयडी निभ अल्ट्रीसीज वाहने आणि आयडी एलिट.

    कृती कृती

  • 300x200

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

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. नल्लम आयडी डोलोर आयडी निभ अल्ट्रीसीज वाहने आणि आयडी एलिट.

    कृती कृती

  • 300x200

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

    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 वर्ग = "span4" >
  3. <a href = "#" वर्ग = "थंबनेल" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

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

  1. <ul class = "थंबनेल्स" >
  2. <li वर्ग = "span4" >
  3. <div वर्ग = "थंबनेल" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> थंबनेल लेबल </h3>
  6. <p> लघुप्रतिमा मथळा... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

आणखी उदाहरणे

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

डीफॉल्ट सूचना

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

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

डिसमिस बटणे

data-dismiss="alert"मोबाइल सफारी आणि मोबाइल ऑपेरा ब्राउझर, विशेषता व्यतिरिक्त , टॅग href="#"वापरताना अलर्ट डिसमिस करण्यासाठी एक आवश्यक आहे.<a>

  1. <a href = "#" वर्ग = "close" data-dismiss = "alert" > × </a>

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

  1. <button type = "button" class = "close" data-dismiss = "alert" > × </button>

JavaScript द्वारे सूचना डिसमिस करा

सूचना जलद आणि सहज डिसमिस करण्यासाठी jQuery प्लगइन वापरा .


पर्याय

दीर्घ संदेशांसाठी, अॅलर्ट रॅपरच्या वरच्या आणि खालच्या बाजूस जोडून पॅडिंग वाढवा .alert-block.

चेतावणी!

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

  1. <div वर्ग = "अलर्ट अलर्ट-ब्लॉक" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > × </button>
  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 वर्ग = "बार" शैली = " रुंदी : 60 %; " ></div>
  3. </div>

पट्टेदार

स्ट्रीप इफेक्ट तयार करण्यासाठी ग्रेडियंट वापरते. IE7-8 मध्ये उपलब्ध नाही.

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

अॅनिमेटेड

उजवीकडून डावीकडे पट्टे अॅनिमेट करण्यासाठी .activeजोडा . .progress-stripedIE च्या सर्व आवृत्त्यांमध्ये उपलब्ध नाही.

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

स्टॅक केलेले

.progressत्यांना स्टॅक करण्यासाठी अनेक बार एकाच ठिकाणी ठेवा.

  1. <div वर्ग = "प्रगती" >
  2. <div class = "bar bar-success" शैली = " रुंदी : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " रुंदी : 20 %; " ></div>
  4. <div class = "bar bar-danger" style = " रुंदी : 10 %; " ></div>
  5. </div>

पर्याय

अतिरिक्त रंग

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

  1. <div वर्ग = "प्रगती प्रगती-माहिती" >
  2. <div class = "bar" शैली = " रुंदी : 20 % " ></div>
  3. </div>
  4. <div वर्ग = "प्रगती प्रगती-यश" >
  5. <div class = "bar" शैली = " रुंदी : 40 % " ></div>
  6. </div>
  7. <div वर्ग = "प्रगती प्रगती चेतावणी" >
  8. <div class = "bar" शैली = " रुंदी : 60 % " ></div>
  9. </div>
  10. <div वर्ग = "प्रगती प्रगती-धोका" >
  11. <div वर्ग = "बार" शैली = " रुंदी : 80 % " ></div>
  12. </div>

पट्टेदार बार

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

  1. <div class = "progress progress-info progress-striped" >
  2. <div class = "bar" शैली = " रुंदी : 20 % " ></div>
  3. </div>
  4. <div class = "progress progress-success progress-striped" >
  5. <div class = "bar" शैली = " रुंदी : 40 % " ></div>
  6. </div>
  7. <div class = "progress progress-warning progress-striped" >
  8. <div class = "bar" शैली = " रुंदी : 60 % " ></div>
  9. </div>
  10. <div class = "progress progress-danger progress-striped" >
  11. <div वर्ग = "बार" शैली = " रुंदी : 80 % " ></div>
  12. </div>

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

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

Internet Explorer 10 आणि Opera 12 पेक्षा पूर्वीच्या आवृत्त्या अॅनिमेशनला सपोर्ट करत नाहीत.

विविध प्रकारचे घटक (जसे की ब्लॉग टिप्पण्या, ट्विट्स इ.) तयार करण्यासाठी अमूर्त ऑब्जेक्ट शैली ज्यात मजकूर सामग्रीसह डावीकडे किंवा उजवीकडे संरेखित प्रतिमा वैशिष्ट्यीकृत आहे.

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

डीफॉल्ट मीडिया सामग्री ब्लॉकच्या डावीकडे किंवा उजवीकडे मीडिया ऑब्जेक्ट (इमेज, व्हिडिओ, ऑडिओ) फ्लोट करण्याची परवानगी देतो.

६४x६४

मीडिया हेडिंग

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस. Fusce condimentum nunc ac nisi vulputate fringilla. फॅसिबसमध्ये डोनेक लॅसिनिया कॉंग्यू फेलिस.
६४x६४

मीडिया हेडिंग

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस. Fusce condimentum nunc ac nisi vulputate fringilla. फॅसिबसमध्ये डोनेक लॅसिनिया कॉंग्यू फेलिस.
६४x६४

मीडिया हेडिंग

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस. Fusce condimentum nunc ac nisi vulputate fringilla. फॅसिबसमध्ये डोनेक लॅसिनिया कॉंग्यू फेलिस.
  1. <div वर्ग = "मीडिया" >
  2. <a वर्ग = "पुल-लेफ्ट" href = "#" >
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div वर्ग = "मीडिया-बॉडी" >
  6. <h4 वर्ग = "मीडिया-शीर्षक" > मीडिया शीर्षक </h4>
  7. ...
  8.  
  9. <!-- नेस्टेड मीडिया ऑब्जेक्ट -->
  10. <div वर्ग = "मीडिया" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

मीडिया यादी

थोड्या अतिरिक्त मार्कअपसह, तुम्ही सूचीमध्ये मीडिया वापरू शकता (टिप्पणी थ्रेड किंवा लेख सूचीसाठी उपयुक्त).

  • ६४x६४

    मीडिया हेडिंग

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस.

    ६४x६४

    नेस्टेड मीडिया हेडिंग

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस.
    ६४x६४

    नेस्टेड मीडिया हेडिंग

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस.
    ६४x६४

    नेस्टेड मीडिया हेडिंग

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस.
  • ६४x६४

    मीडिया हेडिंग

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. क्रास पुरस ओडिओ, वेस्टिबुलम इन व्हल्पुटेट एट, टेम्पस व्हिवेरा टर्पिस.
  1. <ul class = "media-list" >
  2. <li वर्ग = "मीडिया" >
  3. <a वर्ग = "पुल-लेफ्ट" href = "#" >
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div वर्ग = "मीडिया-बॉडी" >
  7. <h4 वर्ग = "मीडिया-शीर्षक" > मीडिया शीर्षक </h4>
  8. ...
  9.  
  10. <!-- नेस्टेड मीडिया ऑब्जेक्ट -->
  11. <div वर्ग = "मीडिया" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

विहिरी

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

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

पर्यायी वर्ग

दोन पर्यायी सुधारक वर्गांसह पॅडिंग आणि गोलाकार कोपरे नियंत्रित करा.

बघ, मी विहिरीत आहे!
  1. <div वर्ग = "वेल-लार्ज" >
  2. ...
  3. </div>
बघ, मी विहिरीत आहे!
  1. <div वर्ग = "चांगले-छोटे" >
  2. ...
  3. </div>

चिन्ह बंद करा

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

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

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

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

मदतनीस वर्ग

लहान प्रदर्शन किंवा वर्तन बदलांसाठी साधे, केंद्रित वर्ग.

.डावीकडे ओढा

बाकी एक घटक फ्लोट करा

  1. वर्ग = "डावीकडे खेचा"
  1. . खेचा - डावीकडे {
  2. फ्लोट : डावीकडे ;
  3. }

.उजवीकडे ओढा

एक घटक उजवीकडे फ्लोट करा

  1. वर्ग = "उजवीकडे खेचा"
  1. . खेचा - उजवीकडे {
  2. फ्लोट : बरोबर ;
  3. }

.निःशब्द

घटकाचा रंग यामध्ये बदला#999

  1. वर्ग = "निःशब्द"
  1. . निःशब्द {
  2. रंग : #999;
  3. }

.clearfix

floatकोणत्याही घटकावर साफ करा

  1. वर्ग = "क्लिअरफिक्स"
  1. . क्लिअरफिक्स {
  2. * झूम : 1 ;
  3. &: आधी ,
  4. &: नंतर {
  5. प्रदर्शन : टेबल ;
  6. सामग्री : "" ;
  7. }
  8. &: नंतर {
  9. स्पष्ट : दोन्ही ;
  10. }
  11. }