नेविगेशन, अलर्ट्, पोपोवर्स, इत्यादीनि प्रदातुं निर्मिताः दर्जनशः पुनःप्रयोज्यघटकाः ।
लिङ्कानां सूचीं प्रदर्शयितुं टॉगल-योग्यं, सन्दर्भ-मेनू । ड्रॉपडाउन जावास्क्रिप्ट प्लगइन इत्यनेन सह अन्तरक्रियाशीलं कृतम् .
- <ul class="ड्रॉपडाउन-मेनू" भूमिका="मेनू" aria-labelledby="ड्रॉपडाउनमेनू">
- <li><a tabindex="-1" href="#">कर्म</a></li> इति
- <li><a tabindex="-1" href="#">अन्यं कर्म</a></li>
- <li><a tabindex="-1" href="#">किञ्चित् अन्यत् अत्र</a></li>
- <li class="विभाजकः"></li> इति
- <li><a tabindex="-1" href="#">पृथक् लिङ्क्</a></li>
- </ul> इति
केवलं ड्रॉप् डाउन मेन्यू पश्यन्, अत्र आवश्यकं HTML अस्ति । भवद्भिः ड्रॉप् डाउन इत्यस्य ट्रिगरं ड्रॉप् डाउन मेन्यू च अन्तः वेष्टयितुं आवश्यकम् .dropdown
, अथवा अन्यत् एलिमेण्ट् यत् घोषयति position: relative;
। ततः केवलं मेनू रचयन्तु।
- <div class="अवरोहणम्">
- <!-- ड्रॉपडाउन् टॉगल कर्तुं लिङ्क् अथवा बटन् -->
- <ul class="ड्रॉपडाउन-मेनू" भूमिका="मेनू" aria-labelledby="dLabel">
- <li><a tabindex="-1" href="#">कर्म</a></li> इति
- <li><a tabindex="-1" href="#">अन्यं कर्म</a></li>
- <li><a tabindex="-1" href="#">किञ्चित् अन्यत् अत्र</a></li>
- <li class="विभाजकः"></li> इति
- <li><a tabindex="-1" href="#">पृथक् लिङ्क्</a></li>
- </ul> इति
- </div> इति
मेनू दक्षिणतः संरेखयन्तु तथा च ड्रॉपडाउन्स् इत्यस्य अतिरिक्तस्तरं समाविष्टं योजयन्तु ।
.pull-right
a मध्ये योजयन्तु .dropdown-menu
दक्षिणतः ड्रॉपडाउन मेनू संरेखयन्तु ।
- <ul class="ड्रॉपडाउन-मेनू पुल-राइट" भूमिका="मेनू" aria-labelledby="dLabel">
- ...
- </ul> इति
ड्रॉपडाउन मेनू इत्यस्य अतिरिक्तस्तरं योजयन्तु, OS X इत्यस्य इव होवर इत्यत्र दृश्यन्ते, केषाञ्चन सरलमार्कअप-योजनाभिः सह । स्वचालित-स्टाइलिंग् कृते विद्यमान-ड्रॉप्-डाउन-मेनू-मध्ये .dropdown-submenu
कस्मिन् अपि योजयन्तु ।li
मूलभूतम्
ड्रॉपअप
वाम उपमेनू
- <ul class="ड्रॉपडाउन-मेनू" भूमिका="मेनू" aria-labelledby="dLabel">
- ...
- <li class="पर्ण-उपमेनू">
- <a tabindex="-1" href="#">अधिकविकल्पाः</a>
- <ul class="अवरोहण-मेनू">
- ...
- </ul> इति
- </li> इति
- </ul> इति
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 सामग्रीं योजयितुं शक्यते ।
लघुचित्रं (पूर्वं .media-grid
v1.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
।
- <दिव वर्ग="अलर्ट">
- <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-striped
IE इत्यस्य सर्वेषु संस्करणेषु न उपलब्धम् ।
- <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 इत्यस्मात् पूर्वं संस्करणाः एनिमेशनं समर्थयन्ति न ।
पाठ्यसामग्रीणां पार्श्वे वाम- वा दक्षिण-संरेखितं चित्रं दर्शयति इति विविधप्रकारस्य घटकानां निर्माणार्थं अमूर्तवस्तुशैल्याः (यथा ब्लॉगटिप्पणीः, ट्वीट् इत्यादयः)
पूर्वनिर्धारितं माध्यमं सामग्रीखण्डस्य वामभागे वा दक्षिणभागे वा माध्यमवस्तुं (चित्रं, भिडियो, श्रव्यं) प्लवितुं शक्नोति ।
- <दिव वर्ग="मीडिया">
- <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. क्रास पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस।
- <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: उभयम्;
- } .
- } .