घटकाः

नेविगेशन, अलर्ट्, पोपोवर्स, इत्यादीनि प्रदातुं निर्मिताः दर्जनशः पुनःप्रयोज्यघटकाः ।

उदाहरणानि

द्वौ मूलविकल्पौ, द्वौ अधिकविशिष्टौ भिन्नताभिः सह।

एकल बटन समूह

.btnin इत्यनेन बटन्-श्रृङ्खलां वेष्टयन्तु .btn-group

  1. <दिव वर्ग="बटन-समूह"> वर्ग = "btn-समूह" >
  2. <button class = "btn" > वाम </button>
  3. <button class = "btn" > मध्य </button>
  4. <button class = "btn" > दक्षिण </button>
  5. </div> इति

अनेक बटन समूह

अधिकजटिलघटकानाम् कृते <div class="btn-group">एकं मध्ये सेट्स् संयोजयन्तु ।<div class="btn-toolbar">

  1. <div class="btn-उपकरणपट्टिका"> class = "btn-उपकरणपट्टिका" >
  2. <div वर्ग = "btn-समूह" >
  3. ...
  4. </div> इति
  5. </div> इति

ऊर्ध्वाधर बटन समूह

बटनस्य समुच्चयं क्षैतिजरूपेण न अपितु लम्बवत् स्तम्भितं दृश्यते इति कुर्वन्तु ।

  1. <div class="btn-समूहः btn-समूहः-ऊर्ध्वाधरः"> class = "btn-समूह btn-समूह-ऊर्ध्वाधर" >
  2. ...
  3. </div> इति

चेकबॉक्स एवं रेडियो स्वाद

बटनसमूहाः रेडियोरूपेण अपि कार्यं कर्तुं शक्नुवन्ति, यत्र केवलं एकं बटनं सक्रियं भवितुम् अर्हति, अथवा चेकबॉक्स, यत्र किमपि संख्यायां बटनं सक्रियं भवितुम् अर्हति । तदर्थं जावास्क्रिप्ट् डॉक्स पश्यन्तु ।

बटनसमूहेषु ड्रॉपडाउन्स्

शिरः उपरि !ड्रॉप्डाउन्स् सहितं बटन्स् सम्यक् प्रतिपादनार्थं .btn-groupa अन्तः स्वकीयेषु व्यक्तिगतरूपेण वेष्टितव्यम् ।.btn-toolbar

अवलोकन एवं उदाहरण

a इत्यस्य अन्तः स्थापयित्वा .btn-groupसमुचितं मेनू मार्कअपं च प्रदातुं ड्रॉप् डाउन मेनू ट्रिगर कर्तुं कस्यापि बटनस्य उपयोगं कुर्वन्तु ।

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

सर्वैः बटन् आकारैः सह कार्यं करोति

बटन ड्रॉपडाउन्स् कस्मिन् अपि आकारे कार्यं कुर्वन्ति: .btn-large, .btn-small, अथवा .btn-mini.

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

बटन् ड्रॉप् डाउन्स् कार्यं कर्तुं Bootstrap ड्रॉप् डाउन प्लगिन् इत्यस्य आवश्यकता भवति ।

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


बटन ड्रॉपडाउन विभाजित करें

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

  1. <div वर्ग = "btn-समूह" >
  2. <button class = "btn" > क्रिया </button>
  3. <बटन वर्ग = "btn ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >
  4. <span class = "कैरेट्" </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-मिनी ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >
  4. <span class = "कैरेट्" </span>
  5. </बटन> इति
  6. <ul class = "ड्रॉपडाउन-मेनू" >
  7. <!-- ड्रॉपडाउन मेनू लिंक -->
  8. </ul> इति
  9. </div> इति

ड्रॉपअप मेनू

- इत्यस्य तत्कालीन-मातृपित्रे एकं वर्गं योजयित्वा अधः उपरि अपि ड्रॉप्-डाउन-मेनू-इत्येतत् टोग्ल् कर्तुं शक्यते .dropdown-menu। इदं the इत्यस्य दिशां flip करिष्यति .caretतथा च मेनू स्वयं पुनः स्थापयिष्यति यत् उपरि अधः न स्थाने अधः उपरि गन्तुं शक्नोति ।

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

मानक पृष्ठांकन

Rdio द्वारा प्रेरित सरल पृष्ठांकन, एप्स एवं खोज परिणामों के लिए महान। विशालः खण्डः कठिनः त्यक्तुं शक्यते, सुलभतया स्केल-करणीयः, बृहत् क्लिक्-क्षेत्राणि च प्रदाति ।

  1. <div वर्ग = "पृष्ठांकन" >
  2. <उल> इति
  3. <li><a href = "#" > पूर्व </a></li>
  4. <li><a href = "#" > </a></li> इति
  5. <li><a href = "#" > </a></li> इति
  6. <li><a href = "#" > </a></li> इति
  7. <li><a href = "#" > </a></li> इति
  8. <li><a href = "#" > </a></li> इति
  9. <li><a href = "#" > अग्रिमम् </a></li>
  10. </ul> इति
  11. </div> इति

विकल्पाः

अक्षम एवं सक्रिय अवस्थाएँ

लिङ्कानि भिन्नपरिस्थितिषु अनुकूलनीयानि सन्ति। अक्लिक् कर्तुं .disabledशक्यते लिङ्कानां कृते .activeवर्तमानपृष्ठं सूचयितुं च उपयुज्यताम् ।

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

अभिप्रेतशैल्याः अवधारणं कुर्वन् क्लिक् कार्यक्षमतां दूरीकर्तुं भवान् वैकल्पिकरूपेण spans कृते सक्रियम् अथवा अक्षमम् एंकर्स् स्वैप् आउट् कर्तुं शक्नोति ।

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

आकाराः

आडम्बरपूर्णं बृहत्तरं वा लघुतरं पृष्ठकरणम्? अतिरिक्त आकाराणां कृते .pagination-large, .pagination-small, अथवा योजयन्तु ।.pagination-mini

  1. <div class = "पृष्ठांकन पृष्ठांकन-बड़े" >
  2. <उल> इति
  3. ...
  4. </ul> इति
  5. </div> इति
  6. <div वर्ग = "पृष्ठांकन" >
  7. <उल> इति
  8. ...
  9. </ul> इति
  10. </div> इति
  11. <div class = "पृष्ठांकन पृष्ठांकन-लघु" >
  12. <उल> इति
  13. ...
  14. </ul> इति
  15. </div> इति
  16. <div class = "पृष्ठांकन पृष्ठांकन-मिनी" >
  17. <उल> इति
  18. ...
  19. </ul> इति
  20. </div> इति

संरेखणम्

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

  1. <div class = "पृष्ठांकन पृष्ठांकन-केन्द्रित" >
  2. ...
  3. </div> इति
  1. <div class = "पृष्ठांकन पृष्ठांकन-अधिकार" >
  2. ...
  3. </div> इति

पेजर इति

लघु मार्कअप तथा शैलियों के साथ सरल पृष्ठांकन कार्यान्वयनों के लिए त्वरित पूर्व और अगले लिङ्क। ब्लॉग् वा पत्रिका इत्यादीनां सरलसाइट्-स्थानानां कृते इदं महान् अस्ति।

पूर्वनिर्धारितं उदाहरणम्

पूर्वनिर्धारितरूपेण, पेजरः लिङ्कान् केन्द्रयति ।

  1. <ul वर्ग = "पेजर" >
  2. <li><a href = "#" > पूर्वम् </a></li>
  3. <li><a href = "#" > अग्रिमम् </a></li>
  4. </ul> इति

संरेखित लिंक

वैकल्पिकरूपेण, भवान् प्रत्येकं लिङ्कं पार्श्वेषु संरेखयितुं शक्नोति:

  1. <ul वर्ग = "पेजर" >
  2. <li वर्ग = "पूर्व" >
  3. <a href = "#" > वृद्धः </a>
  4. </li> इति
  5. <li वर्ग = "अगला" >
  6. <a href = "#" > नवीनतम → </a> इति
  7. </li> इति
  8. </ul> इति

वैकल्पिक अक्षम अवस्था

पेजर लिङ्क्स् पृष्ठकरणात् सामान्य .disabledउपयोगिता वर्गस्य अपि उपयोगं कुर्वन्ति ।

  1. <ul वर्ग = "पेजर" >
  2. <li class = "पूर्व अक्षम" >
  3. <a href = "#" > वृद्धः </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>
सफलता <span class="badge badge-success">2</span>
चेतवानी <span class="badge badge-warning">4</span>
महत्वपूर्णः <span class="badge badge-important">6</span>
इन्फो <span class="badge badge-info">8</span>
विलोम १० <span class="badge badge-inverse">10</span>

सहजतया संकुचनीयम्

सुलभकार्यन्वयनाय, लेबल्, बैज च केवलं संकुचितं भविष्यति (CSS इत्यस्य :emptyचयनकर्ताद्वारा) यदा अन्तः कोऽपि सामग्री नास्ति ।

नायक इकाई

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

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

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

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

  1. <div class = "नायक-एकक" >
  2. <h1> शीर्षकम् </h1>
  3. <p> टैग्लाइन् </p> इति
  4. <प> इति
  5. <a class = "btn btn-प्राथमिक btn-बड़े" >
  6. अधिकं ज्ञातुं शक्नुवन्ति
  7. </a> इति
  8. </p> इति
  9. </div> इति

पृष्ठ शीर्षक

h1पृष्ठे सामग्रीखण्डान् समुचितरूपेण स्पेस आउट् कर्तुं खण्डयितुं च सरलं शेल् । h1इदं 's default , element इत्यस्य उपयोगं कर्तुं शक्नोति smallतथा च अन्येषां अधिकांशघटकानाम् (अतिरिक्तशैल्याः सह) ।

  1. <div class = "पृष्ठ-शीर्षक" >
  2. <h1> उदाहरणं पृष्ठशीर्षकं <small> शीर्षकस्य उपपाठः </small></h1>
  3. </div> इति

पूर्वनिर्धारित लघुचित्र

पूर्वनिर्धारितरूपेण, Bootstrap इत्यस्य लघुचित्रं न्यूनतमेन आवश्यकेन मार्कअपेन सह लिङ्क् कृतानि चित्राणि प्रदर्शयितुं डिजाइनं कृतम् अस्ति ।

अत्यधिक अनुकूलन योग्य

किञ्चित् अतिरिक्तं मार्कअपं कृत्वा, लघुचित्रेषु शीर्षकं, अनुच्छेदं, बटनं वा इत्यादीनां किमपि प्रकारस्य HTML सामग्रीं योजयितुं शक्यते ।

  • ३००x२०० इति

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

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

    नामपत्र नामपत्र

  • ३००x२०० इति

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

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

    नामपत्र नामपत्र

  • ३००x२०० इति

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

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

    नामपत्र नामपत्र

लघुचित्रस्य प्रयोगः किमर्थम्

लघुचित्रं (पूर्वं .media-gridv1.4 पर्यन्तं) फोटोनां वा विडियोनां वा जालपुटानां, चित्रसन्धानपरिणामानां, खुदरा-उत्पादानाम्, पोर्टफोलियोनां, इत्यादीनां कृते महान् अस्ति । ते लिङ्क् अथवा स्थिरसामग्री भवितुम् अर्हन्ति ।

सरल, लचीला मार्कअप

लघुचित्रचिह्नं सरलम् अस्ति— ulकिमपि संख्यायां liतत्त्वैः सह a इति सर्वं आवश्यकम् अस्ति । इदमपि सुपर लचीला अस्ति, यत् भवतः सामग्रीं लपेटयितुं केवलं किञ्चित् अधिकं मार्कअपं कृत्वा किमपि प्रकारस्य सामग्रीं अनुमन्यते।

जालस्तम्भ आकाराणां उपयोगं करोति

अन्तिमे, लघुचित्रघटकः लघुचित्रपरिमाणानां नियन्त्रणार्थं विद्यमानजालप्रणालीवर्गाणां उपयोगं करोति—यथा .span2वा — ।.span3

मार्कअप

यथा पूर्वं उक्तं, लघुचित्रस्य कृते आवश्यकं मार्कअपं लघु, सरलं च भवति । अत्र लिङ्क् कृतानां चित्राणां पूर्वनिर्धारितं सेटअपं पश्यन्तु :

  1. <ul class = "लघुचित्रम्" >
  2. <li वर्ग = "span4" >
  3. <a href = "#" वर्ग = "लघुचित्र" >
  4. <img डेटा- src = "धारक.js/300x200" alt = "" >
  5. </a> इति
  6. </li> इति
  7. ...
  8. </ul> इति

लघुचित्रेषु कस्टम् HTML सामग्रीं कृते, मार्कअप किञ्चित् परिवर्तते । कुत्रापि ब्लॉक् लेवल सामग्रीं अनुमन्यते, वयं the <a>for a <div>like so इति स्वैप् कुर्मः:

  1. <ul class = "लघुचित्रम्" >
  2. <li वर्ग = "span4" >
  3. <div class = "लघुचित्र" >
  4. <img डेटा- src = "धारक.js/300x200" alt = "" >
  5. <h3> लघुचित्रलेबल </h3>
  6. <p> लघुचित्र शीर्षक... </p>
  7. </div> इति
  8. </li> इति
  9. ...
  10. </ul> इति

अधिकानि उदाहरणानि

भवतः कृते उपलब्धैः विविधैः जालवर्गैः सह भवतः सर्वान् विकल्पान् अन्वेष्टुम् अर्हति । भवन्तः भिन्न-भिन्न-आकारानाम् अपि मिश्रणं मेलनं च कर्तुं शक्नुवन्ति ।

पूर्वनिर्धारित चेतावनी

मूलभूतचेतावनीसचेतनासन्देशाय किमपि पाठं वैकल्पिकं निष्कासनबटनं च लपेटयन्तु .alert

चेतवानी! Best check yo self, त्वं बहु उत्तमं न दृश्यते।
  1. <div वर्ग = "सचेतना" >
  2. <बटन प्रकार = "बटन" वर्ग = "बंद करें" data-dismiss = "सचेतना" > × </बटन> इति
  3. <strong> चेतावनी ! </strong> Best check yo self, त्वं बहु उत्तमं न दृश्यते।
  4. </div> इति

बटन को खारिज करें

data-dismiss="alert"मोबाईल सफारी तथा मोबाईल ओपेरा ब्राउज़र, विशेषता के अतिरिक्त , टैग href="#"का उपयोग करते समय अलर्टों के निराकरण के लिए एक की आवश्यकता होती है।<a>

  1. <a href = "#" वर्ग = "बंद करें" डेटा-निराकरण = "सचेतना" > × </a> इति

वैकल्पिकरूपेण, भवान् <button>data attribute इत्यनेन सह एलिमेण्ट् इत्यस्य उपयोगं कर्तुं शक्नोति, यत् अस्माभिः अस्माकं docs कृते कर्तुं विकल्पितम् अस्ति । , इत्यस्य उपयोगं कुर्वन् <button>भवान् अवश्यमेव समावेशयति type="button"अथवा भवतां प्रपत्राणि न प्रस्तूयन्ते।

  1. <बटन प्रकार = "बटन" वर्ग = "बंद करें" data-dismiss = "सचेतना" > × </बटन> इति

जावास्क्रिप्ट् मार्गेण सचेतनानि निरस्तं कुर्वन्तु

अलर्ट्स् शीघ्रं सुलभं च निष्कासनार्थं alerts jQuery प्लगइन इत्यस्य उपयोगं कुर्वन्तु ।


विकल्पाः

दीर्घतरसन्देशानां कृते, , योजयित्वा अलर्ट-वेष्टनस्य उपरि अधः च गद्दी वर्धयन्तु .alert-block

चेतवानी!

Best check yo self, त्वं बहु उत्तमं न दृश्यते। नुल्ला विटाए एलिट् लिबेरो, एक फारेत्र औगुए। Praesent commodo cursus मैग्ना, वेल scelerisque nisl consectetur एट.

  1. <div class = "सचेतना-सचेतना-अवरोध" >
  2. <बटन प्रकार = "बटन" वर्ग = "बंद करें" data-dismiss = "सचेतना" > × </बटन> इति
  3. <h4> चेतावनी ! </h4> इति
  4. Best check yo self, त्वं न...
  5. </div> इति

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

अलर्ट् इत्यस्य अर्थं परिवर्तयितुं वैकल्पिकवर्गान् योजयन्तु ।

दोषः संकटः वा

अहो स्नैप ! कतिपयानि वस्तूनि परिवर्त्य पुनः प्रस्तुतुं प्रयतध्वम्।
  1. <div class = "सचेतना-सचेतना-त्रुटि" >
  2. ...
  3. </div> इति

सफलता

सद् कृत! भवान् एतत् महत्त्वपूर्णं सचेतनासन्देशं सफलतया पठितवान्।
  1. <div class = "सचेतना चेतावनी-सफलता" >
  2. ...
  3. </div> इति

सूचना

शिरः उपरि ! अस्य अलर्टस्य भवतः ध्यानस्य आवश्यकता वर्तते, परन्तु एतत् सुपर महत्त्वपूर्णं नास्ति।
  1. <div class = "सचेतना-सचेतना-सूचना" >
  2. ...
  3. </div> इति

उदाहरण एवं मार्कअप

आधारभूत

ऊर्ध्वाधरढालयुक्तं पूर्वनिर्धारितं प्रगतिपट्टिका ।

  1. <div वर्ग = "प्रगति" >
  2. <div वर्ग = "बार" शैली = " चौड़ाई : 60 %; " ></div>
  3. </div> इति

धारीदारः

पट्टिकायुक्तं प्रभावं निर्मातुं ढालस्य उपयोगं करोति । IE7-8 इत्यत्र न उपलब्धम्।

  1. <div class = "प्रगति प्रगति-धारी" >
  2. <div वर्ग = "बार" शैली = " चौड़ाई : 20 %; " ></div>
  3. </div> इति

सजीवः

पट्टिकाः दक्षिणतः वामतः सजीवं कर्तुं Add .activeto । .progress-stripedIE इत्यस्य सर्वेषु संस्करणेषु न उपलब्धम् ।

  1. <div class = "प्रगति प्रगति-धारी सक्रिय" >
  2. <div वर्ग = "बार" शैली = " चौड़ाई : 40 %; " ></div>
  3. </div> इति

स्तम्भितम्

.progressतान् स्तम्भयितुं एकस्मिन् एव बहुविधाः पट्टिकाः स्थापयन्तु ।

  1. <div वर्ग = "प्रगति" >
  2. <div class = "बार बार-सफलता" शैली = " चौड़ाई : 35 %; " ></div>
  3. <div class = "बार बार-चेतावनी" शैली = " चौड़ाई : 20 %; " ></div>
  4. <div class = "बार बार-खतरा" शैली = " चौड़ाई : 10 %; " ></div>
  5. </div> इति

विकल्पाः

अतिरिक्त रंग

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

  1. <div class = "प्रगति प्रगति-सूचना" >
  2. <div वर्ग = "बार" शैली = " चौड़ाई : 20 % " ></div>
  3. </div> इति
  4. <div class = "प्रगति प्रगति-सफलता" >
  5. <div वर्ग = "बार" शैली = " चौड़ाई : 40 % " ></div>
  6. </div> इति
  7. <div class = "प्रगति प्रगति-चेतावनी" >
  8. <div वर्ग = "बार" शैली = " चौड़ाई : 60 % " ></div>
  9. </div> इति
  10. <div class = "प्रगति प्रगति-खतरा" >
  11. <div वर्ग = "बार" शैली = " चौड़ाई : 80 % " ></div>
  12. </div> इति

धारीदार पट्टियाँ

ठोसवर्णानां सदृशं अस्माकं विविधाः पट्टिकायुक्ताः प्रगतिपट्टिकाः सन्ति ।

  1. <div class = "प्रगति प्रगति-सूचना प्रगति-पट्टिका" >
  2. <div वर्ग = "बार" शैली = " चौड़ाई : 20 % " ></div>
  3. </div> इति
  4. <div class = "प्रगति प्रगति-सफलता प्रगति-धारी" >
  5. <div वर्ग = "बार" शैली = " चौड़ाई : 40 % " ></div>
  6. </div> इति
  7. <div class = "प्रगति प्रगति-चेतावनी प्रगति-पट्टिका" >
  8. <div वर्ग = "बार" शैली = " चौड़ाई : 60 % " ></div>
  9. </div> इति
  10. <div class = "प्रगति प्रगति-खतरा प्रगति-पट्टीदार" >
  11. <div वर्ग = "बार" शैली = " चौड़ाई : 80 % " ></div>
  12. </div> इति

ब्राउज़र समर्थन

प्रगतिपट्टिकाः स्वस्य सर्वान् प्रभावान् प्राप्तुं CSS3 ढालस्य, संक्रमणस्य, एनिमेशनस्य च उपयोगं कुर्वन्ति । एतानि विशेषतानि IE7-9 अथवा Firefox इत्यस्य प्राचीनसंस्करणेषु समर्थितानि न सन्ति ।

Internet Explorer 10 तथा Opera 12 इत्यस्मात् पूर्वं संस्करणाः एनिमेशनं समर्थयन्ति न ।

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

पूर्वनिर्धारितं उदाहरणम्

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

६४x६४ इति

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

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

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

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

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

क्रास उपविशात् अमेत निभ लिबेरो, ग्राविदा नुल्ला में। नुल्ला वेल मेतुस scelerisque ante sollicitudin commodo. क्रास पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस। Fusce condimentum nunc एसी निसी vulputate fringilla. Donec lacinia congue felis in faucibus.
  1. <div class = "माध्यम" >
  2. <a class = "पुल-वाम" href = "#" >
  3. <img वर्ग = "मीडिया-वस्तु" डेटा- src = "धारक.js/64x64" >
  4. </a> इति
  5. <div class = "माध्यम-शरीर" >
  6. <h4 class = "माध्यम-शीर्षकम्" > माध्यमशीर्षकं </h4>
  7. ...
  8.  
  9. <!-- नेस्टेड मीडिया वस्तु -->
  10. <div class = "माध्यम" >
  11. ...
  12. </div> इति
  13. </div> इति
  14. </div> इति

मीडिया सूची

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

  • ६४x६४ इति

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

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

    ६४x६४ इति

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

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

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

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

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

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

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

    क्रास उपविशात् अमेत निभ लिबेरो, ग्राविदा नुल्ला में। नुल्ला वेल मेतुस scelerisque ante sollicitudin commodo. क्रास पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस।
  1. <ul class = "माध्यम-सूची" >
  2. <li वर्ग = "माध्यम" >
  3. <a class = "पुल-वाम" href = "#" >
  4. <img वर्ग = "मीडिया-वस्तु" डेटा- src = "धारक.js/64x64" >
  5. </a> इति
  6. <div class = "माध्यम-शरीर" >
  7. <h4 class = "माध्यम-शीर्षकम्" > माध्यमशीर्षकं </h4>
  8. ...
  9.  
  10. <!-- नेस्टेड मीडिया वस्तु -->
  11. <div class = "माध्यम" >
  12. ...
  13. </div> इति
  14. </div> इति
  15. </li> इति
  16. </ul> इति

वेल्स इति

कस्मिंश्चित् तत्वे इन्सेट् प्रभावं दातुं कूपस्य उपयोगं सरलप्रभावरूपेण कुर्वन्तु ।

पश्यतु, अहं कूपे अस्मि!
  1. <div class = "अच्छा" >
  2. ...
  3. </div> इति

वैकल्पिकवर्गाः

वैकल्पिकसंशोधकवर्गद्वयेन सह गद्दीकरणं गोलकोणानि च नियन्त्रयन्तु ।

पश्यतु, अहं कूपे अस्मि!
  1. <div class = "अच्छा सु-बृहत्" >
  2. ...
  3. </div> इति
पश्यतु, अहं कूपे अस्मि!
  1. <div class = "अच्छा सु-लघु" >
  2. ...
  3. </div> इति

चिह्न को बंद करें

मोडाल्स् तथा अलर्ट् इत्यादीनां सामग्रीं निराकरणार्थं सामान्यनिरोधचिह्नस्य उपयोगं कुर्वन्तु ।

  1. <बटन वर्ग = "बंद करें" > × </बटन> इति

iOS उपकरणेषु href="#"क्लिक् इवेण्ट्स् कृते एकं आवश्यकं भवति यदि भवान् एङ्कर् इत्यस्य उपयोगं इच्छति।

  1. <a class = "बंद करें" href = "#" > × </a> इति

सहायकवर्गाः

लघुप्रदर्शनस्य अथवा व्यवहारस्य tweaks कृते सरलाः, केन्द्रीकृतवर्गाः।

.पुल-वाम

एकं तत्वं वामभागे प्लवन्तु

  1. class = "कर्षण-वाम"।
  1. . खींच - वाम { .
  2. float : वामम् ;
  3. } इति ।

.पुल-दक्षिणम्

एकं तत्वं सम्यक् प्लवतु

  1. class = "पुल-राइट"।
  1. . खींच - दक्षिण { .
  2. float : दक्षिणम् ;
  3. } इति ।

.निःशब्दः

कस्यचित् तत्त्वस्य वर्णं परिवर्तयन्तु#999

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

.स्पष्टीकरणम्

floatकिसी भी तत्व पर द साफ करें

  1. class = "स्पष्टीकरणम्" ।
  1. . स्पष्टीकरणम् { .
  2. * जूम : 1 ;
  3. &: पूर्वं , .
  4. &: पश्चात् { .
  5. प्रदर्शन : तालिका ;
  6. content : "" ;
  7. } इति ।
  8. &: पश्चात् { .
  9. स्पष्ट : उभयम् ;
  10. } इति ।
  11. } इति ।