बूटस्ट्रैप

घटकाः

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

बटन समूह

उदाहरणानि

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

एकल बटन समूह

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

<दिव वर्ग="बटन्-समूह">
  <button class="btn">१</बटन> इति
  <button class="btn">२</बटन> इति
  <button class="btn">३</बटन> इति
</div> इति

अनेक बटन समूह

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

<div class="btn-उपकरणपट्टिका">
  <दिव वर्ग="बटन-समूह">
    ...
  </div> इति
</div> इति

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

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

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

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

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

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

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

बटन ड्रॉपडाउन मेनू

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

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

<दिव वर्ग="बटन्-समूह">
  <a class="btn ड्रॉपडाउन-टॉग्ल" data-toggle="ड्रॉपडाउन" href="#">
    नामपत्र
    <span class="caret"></span> इति
  </a> इति
  <ul class="अवरोहण-मेनू">
    <!-- ड्रॉपडाउन मेनू लिंक -->
  </ul> इति
</div> इति

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

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

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

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

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

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

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

<दिव वर्ग="बटन्-समूह">
  <button class="btn">क्रिया</button> इति
  <button class="btn ड्रॉपडाउन-टॉग्ल" data-toggle="ड्रॉपडाउन">
    <span class="caret"></span> इति
  </बटन> इति
  <ul class="अवरोहण-मेनू">
    <!-- ड्रॉपडाउन मेनू लिंक -->
  </ul> इति
</div> इति

आकाराः

अतिरिक्तबटनवर्गाणां उपयोगं कुर्वन्तु .btn-mini, .btn-small, अथवा .btn-largeआकारनिर्धारणार्थम् ।

<दिव वर्ग="बटन्-समूह">
  <button class="btn btn-mini">क्रिया</button> इति
  <button class="btn btn-मिनी ड्रॉपडाउन-टॉगल" data-toggle="ड्रॉपडाउन">
    <span class="caret"></span> इति
  </बटन> इति
  <ul class="अवरोहण-मेनू">
    <!-- ड्रॉपडाउन मेनू लिंक -->
  </ul> इति
</div> इति

ड्रॉपअप मेनू

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

<div class="btn-समूहस्य पतनम्">
  <button class="btn">द्रोपप्</button> इति
  <button class="btn ड्रॉपडाउन-टॉग्ल" data-toggle="ड्रॉपडाउन">
    <span class="caret"></span> इति
  </बटन> इति
  <ul class="अवरोहण-मेनू">
    <!-- ड्रॉपडाउन मेनू लिंक -->
  </ul> इति
</div> इति

Pagination सामग्रीद्वारा पृष्ठीकरणार्थं द्वौ विकल्पौ

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

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

<दिव वर्ग="पृष्ठांकन">
  <उल> इति
    <li><a href="#">पूर्व</a></li> इति
    <li><a href="#">१</a></li> इति
    <li><a href="#">२</a></li> इति
    <li><a href="#">३</a></li> इति
    <li><a href="#">४</a></li> इति
    <li><a href="#">अग्रे</a></li> इति
  </ul> इति
</div> इति

विकल्पाः

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

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

<दिव वर्ग="पृष्ठांकन">
  <उल> इति
    <li class="disabled"><a href="#">पूर्व</a></li> इति
    <li class="सक्रिय"><a href="#">१</a></li> इति
    ...
  </ul> इति
</div> इति

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

<दिव वर्ग="पृष्ठांकन">
  <उल> इति
    <li class="अक्षम"><span>पूर्व</span></li>
    <li class="सक्रिय"><span>१</span></li> इति
    ...
  </ul> इति
</div> इति

आकाराः

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

<div class="पृष्ठांकन-बृहत्">
  <उल> इति
    ...
  </ul> इति
</div> इति
<दिव वर्ग="पृष्ठांकन">
  <उल> इति
    ...
  </ul> इति
</div> इति
<div class="पृष्ठांकन पृष्ठकरण-लघु">
  <उल> इति
    ...
  </ul> इति
</div> इति
<div class="पृष्ठांकन पृष्ठकरण-मिनी">
  <उल> इति
    ...
  </ul> इति
</div> इति

संरेखणम्

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

<div class="पृष्ठांकन पृष्ठकेन्द्रित">
  ...
</div> इति

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

पेजर इति

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

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

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

<ul class="pager"> इति
  <li><a href="#">पूर्व</a></li> इति
  <li><a href="#">अग्रे</a></li> इति
</ul> इति

संरेखित लिंक

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

<ul class="pager"> इति
  <li class="पूर्वम्">
    <a href="#">&लार्र्; प्राचीन</a> इति
  </li> इति
  <li class="अनन्तरं">
    <a href="#">नवतरः →</a> इति
  </li> इति
</ul> इति

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

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

<ul class="pager"> इति
  <li class="पूर्वं अक्षमम्">
    <a href="#">&लार्र्; प्राचीन</a> इति
  </li> इति
  ...
</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>

मुद्रण घटक

नायक इकाई

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

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

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

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

<div class="नायक-एककम्">
  <h1>शीर्षकम्</h1>
  <p>टैग्लाइन</p> इति
  <प> इति
    <a class="बटन् बटन्-प्राथमिक बटन्-बृहत्">
      अधिकं ज्ञातुं शक्नुवन्ति
    </a> इति
  </p> इति
</div> इति

पृष्ठ शीर्षक

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

उदाहरणं पृष्ठशीर्षकं शीर्षकस्य उपपाठः

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

लघुचित्रम् चित्राणि, विडियो, पाठः, इत्यादीनां जालपुटानि

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

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

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

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

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

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

    क्रिया क्रिया

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

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

    क्रिया क्रिया

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

    क्रास 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—लघुचित्रपरिमाणानां नियन्त्रणार्थं ।

मार्कअप

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

<ul class="लघुचित्रम्">
  <li class="span4"> इति
    <a href="#" वर्ग="थम्बचित्रम्">
      <img src="https://placehold.it/300x200" alt=""> इति
    </a> इति
  </li> इति
  ...
</ul> इति

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

<ul class="लघुचित्रम्">
  <li class="span4"> इति
    <div class="थम्बचित्रम्">
      <img src="https://placehold.it/300x200" alt=""> इति
      <h3>लघुचित्रलेबल</h3>
      <p>लघुचित्र शीर्षक...</p>
    </div> इति
  </li> इति
  ...
</ul> इति

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

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

सफलता, चेतावनी, त्रुटिसन्देशानां च कृते शैल्याः अलर्ट् करोति

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

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

चेतवानी! Best check yo self, त्वं बहु उत्तमं न दृश्यते। 
<दिव वर्ग="अलर्ट">
  <button type="बटन" class="बन्द" data-dismiss="alert">×</बटन>
  <strong>चेतावनी!</strong> Best check yo self, त्वं बहु उत्तमं न दृश्यते।
</div> इति

बटन को निरस्त करें

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

<a href="#" class="close" data-dismiss="alert">×</a> इति

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

<button type="बटन" class="बन्द" data-dismiss="alert">×</बटन>

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

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

विकल्पाः

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

चेतवानी!

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

<div class="सचेतना-अवरोधः">
  <button type="बटन" class="बन्द" data-dismiss="alert">×</बटन>
  <h4>चेतावनी !</h4>
  Best check yo self, त्वं न...
</div> इति

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

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

दोषः संकटः वा

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

सफलता

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

सूचना

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

प्रगतिपट्टिकाः लोडिंग्, पुनर्निर्देशन, अथवा क्रियास्थितेः कृते

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

आधारभूत

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

<दिव वर्ग="प्रगति">
  <div class="bar" शैली="विस्तार: ६०%;"></div>
</div> इति

धारीदारः

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

<div class="प्रगति-प्रगति-पट्टिकायुक्ता">
  <div class="bar" शैली="विस्तार: २०%;"></div>
</div> इति

सजीवः

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

<div class="प्रगति-प्रगति-पट्टिका-सक्रियः">
  <div class="bar" शैली="विस्तार: ४०%;"></div>
</div> इति

स्तम्भितम्

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

<दिव वर्ग="प्रगति">
  <div class="बार बार-सफलता" शैली="विस्तार: ३५%;"></div>
  <div class="बार बार-चेतावनी" style="width: 20%;"></div>
  <div class="बार बार-खतरा" शैली="विस्तार: १०%;"></div>
</div> इति

विकल्पाः

अतिरिक्त रंग

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

<div class="प्रगति-प्रगति-सूचना">
  <div class="bar" शैली="विस्तार: २०%"></div>
</div> इति
<div class="प्रगति प्रगति-सफलता">
  <div class="bar" शैली="विस्तार: ४०%"></div>
</div> इति
<div class="प्रगति-प्रगति-चेतावनी">
  <div class="bar" शैली="विस्तार: ६०%"></div>
</div> इति
<div class="प्रगति-प्रगति-संकट">
  <div class="bar" शैली="विस्तार: 80%"></div>
</div> इति

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

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

<div class="प्रगतिप्रगति-सूचना प्रगति-पट्टिकायुक्ता">
  <div class="bar" शैली="विस्तार: २०%"></div>
</div> इति
<div class="प्रगति प्रगति-सफलता प्रगति-पट्टिका">
  <div class="bar" शैली="विस्तार: ४०%"></div>
</div> इति
<div class="प्रगतिप्रगति-चेतावनी प्रगति-पट्टिकायुक्ता">
  <div class="bar" शैली="विस्तार: ६०%"></div>
</div> इति
<div class="प्रगति प्रगति-संकट प्रगति-पट्टिका">
  <div class="bar" शैली="विस्तार: 80%"></div>
</div> इति

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

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

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

मीडिया वस्तु

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

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

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

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

क्रास उपविशात् अमेत निभ लिबेरो, ग्राविदा नुल्ला में। नुल्ला वेल मेतुस 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. 
<दिव वर्ग="मीडिया">
  <a class="कर्षण-वाम" href="#">
    <img class="माध्यम-वस्तु" src="https://placehold.it/64x64"> इति
  </a> इति
  <div class="माध्यम-शरीरम्">
    <h4 class="media-heading">माध्यमशीर्षकं</h4>
    ...

    <!-- नेस्टेड मीडिया वस्तु -->
    <दिव वर्ग="मीडिया">
      ...
    </div> इति
  </div> इति
</div> इति

मीडिया सूची

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

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

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

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

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

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

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

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

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

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

    क्रास उपविशात् अमेत निभ लिबेरो, ग्राविदा नुल्ला में। नुल्ला वेल मेतुस scelerisque ante sollicitudin commodo. क्रास पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस। 
<ul class="माध्यम-सूची">
  <li class="मीडिया"> इति
    <a class="कर्षण-वाम" href="#">
      <img class="माध्यम-वस्तु" src="https://placehold.it/64x64"> इति
    </a> इति
    <div class="माध्यम-शरीरम्">
      <h4 class="media-heading">माध्यमशीर्षकं</h4>
      ...

      <!-- नेस्टेड मीडिया वस्तु -->
      <दिव वर्ग="मीडिया">
        ...
     </div> इति
    </div> इति
  </li> इति
</ul> इति

विविध हल्के उपयोगिता घटक

वेल्स इति

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

पश्यतु, अहं कूपे अस्मि! 
<दिव वर्ग="अच्छा">
  ...
</div> इति

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

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

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

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

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

<button class="close">&समयानि;</button> इति

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

<a class="निमीलित" href="#">×</a> इति

सहायकवर्गाः

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

.पुल-वाम

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

class="पुल-वाम"।

.पुल-वाम { .
  float: वाम;
} .

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

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

class="पुल-राइट"।

.पुल-दक्षिण { .
  float: सम्यक्;
} .

.निःशब्दः

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

class="निःशब्दः" ।

.निःशब्दः { .
  रंग: # 999;
} .

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

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

class="स्पष्टीकरणम्" ।

.क्लियरफिक्स् { .
  *जूम: 1;
  &:पूर्वम्‌,
  &:अनन्तरम्‌ {
    प्रदर्शनम् : तालिका;
    विषयः: "";
  } .
  &:अनन्तरम्‌ {
    clear: उभयम्;
  } .
} .