उपरि

वामः

दक्षिणः

अधः

बूटस्ट्रैप्, ट्विटर तः

बूटस्ट्रैप् इति ट्विटर इत्यस्मात् एकं साधनपुस्तिका अस्ति यत् वेबएप्स तथा साइट् इत्येतयोः विकासस्य किकस्टार्ट् कर्तुं विनिर्मितम् अस्ति ।
अस्मिन् मुद्रणविज्ञानं, प्रपत्राणि, बटन्स्, सारणीः, जालपुटाः, नेविगेशनं, इत्यादीनां कृते आधारभूतं CSS तथा HTML च समाविष्टम् अस्ति ।

Nerd alert: Bootstrap Less इत्यनेन निर्मितम् अस्ति तथा च आधुनिकब्राउजर्स् मनसि कृत्वा गेट् तः बहिः कार्यं कर्तुं डिजाइनं कृतम् आसीत्।

CSS को हॉटलिंक करें

द्रुततमस्य सुलभतमस्य च आरम्भार्थं केवलं एतत् स्निपेट् स्वजालपुटे प्रतिलिख्यताम् ।

Less इत्यनेन सह तस्य उपयोगं कुर्वन्तु

Less इत्यस्य उपयोगस्य एकः प्रशंसकः? समस्या नास्ति, केवलं रेपो क्लोन् कृत्वा एताः पङ्क्तयः योजयन्तु:

GitHub पर फोर्क करें

Github इत्यत्र आधिकारिक Bootstrap repo इत्यनेन सह डाउनलोड्, फोर्क्, पुल, सञ्चिकासमस्याः, इत्यादीनि च ।

GitHub इत्यत्र बूटस्ट्रैप् »

सम्प्रति v1.3.0

इतिहास

ट्विटर-संस्थायाः अभियंताः ऐतिहासिकरूपेण प्रायः यत्किमपि पुस्तकालयं ते परिचिताः आसन्, तस्य उपयोगं कृत्वा अग्रभागस्य आवश्यकताः पूर्तयितुं कृतवन्तः । बूटस्ट्रैप् इत्येतत् यत् आव्हानं प्रस्तुतं तस्य उत्तररूपेण आरब्धम् । अनेकानाम् भयानकजनानाम् साहाय्येन Bootstrap इत्यस्य महती वृद्धिः अभवत् ।

dev.twitter.com इत्यत्र अधिकं पठन्तु ›

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

क्रोम, सफारी, इन्टरनेट् एक्स्प्लोरर, फायरफॉक्स इत्यादिषु प्रमुखेषु आधुनिकब्राउजर्-मध्ये बूटस्ट्रैप् परीक्षितं समर्थितं च अस्ति ।

Chrome, Safari, Internet Explorer, Firefox इत्येतयोः मध्ये परीक्षितं समर्थितं च

नवीनतम सफारी
नवीनतम गूगल क्रोम
फायरफॉक्स 4+
अन्तर्जाल एक्स्प्लोरर 7+
ओपेरा 11

किं समाविष्टम् अस्ति

बूटस्ट्रैप् संकलित-CSS, असंकलित-उदाहरण-सारूप्यैः सह सम्पूर्णतया आगच्छति ।

जावास्क्रिप्ट प्लगइन्स
सर्वाणि मूल .less सञ्चिकाः
पूर्णतया संकलितं लघुकृतं च CSS
styleguide दस्तावेजीकरणं सम्पूर्णं कुर्वन्तु
भिन्नविन्यासयुक्तानि त्रीणि उदाहरणपृष्ठानि

त्वरित-प्रारम्भ-उदाहरणानि

किञ्चित् त्वरितं टेम्पलेट् आवश्यकम् अस्ति वा? अस्माभिः एकत्र स्थापितानि एतानि मूलभूतानि उदाहरणानि पश्यन्तु:

पूर्वनिर्धारितं जालम्

Bootstrap इत्यस्य भागरूपेण प्रदत्तं पूर्वनिर्धारितं जालप्रणाली 940px विस्तृतं 16-स्तम्भजालम् अस्ति । इदं लोकप्रियस्य ९६० जालप्रणाल्याः स्वादः अस्ति, परन्तु वामभागे दक्षिणपार्श्वे च अतिरिक्तमार्जिन/पैडिंगं विना।

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

यथा अत्र दर्शितं, एकं मूलभूतं विन्यासं द्वयोः "स्तम्भयोः" सह निर्मातुं शक्यते, प्रत्येकं अस्माकं जालप्रणाल्याः भागत्वेन अस्माभिः परिभाषितानां १६ मूलस्तम्भानां संख्यां व्याप्नोति । अधिकविविधतायै अधोलिखितानि उदाहरणानि पश्यन्तु ।

<div वर्ग = "पङ्क्ति" > 
  <div वर्ग = "span6" > 
    ...
  </div> इति
  <div वर्ग = "span10" > 
    ...
  </div> इति
</div> इति

१

२

३

१

४

१/३ इति

२/३

४

६

८

५

११

१६

स्तम्भों को ऑफसेट करना

४

८ आफ्सेट् ४

1/3 ऑफसेट 2/3s

४ आफ्सेट् ४

५ आफ्सेट् ३

१० आफ्सेट् ६

नीडं स्तम्भाः

.rowयदि भवन्तः विद्यमानस्य स्तम्भस्य अन्तः एकं निर्माय अवश्यं कुर्वन्ति तर्हि स्वस्य सामग्रीं नेस्ट् कुर्वन्तु ।

नेस्टेड् स्तम्भानां उदाहरणम्

स्तम्भस्य १ स्तरः

स्तर 2

<div वर्ग = "पङ्क्ति" > 
  <div वर्ग = "span12" > 
    स्तम्भस्य १ स्तरः
    <div वर्ग = "पङ्क्ति" > 
      <div वर्ग = "span6" > 
        स्तर 2
      </div> इति
      <div वर्ग = "span6" > 
        स्तर 2
      </div> इति
    </div> इति
  </div> इति
</div> इति

स्वकीयं जालं रोल कुर्वन्तु

Bootstrap इत्यस्मिन् निर्मिताः पूर्वनिर्धारित 940px जालप्रणाल्याः अनुकूलनार्थं मुष्टिभ्यां चराः सन्ति । किञ्चित् अनुकूलनेन, भवान् स्तम्भानां आकारं, तेषां नालिकानां, तेषां निवसतां पात्रं च परिवर्तयितुं शक्नोति ।

जालस्य अन्तः

जालप्रणालीं परिवर्तयितुं आवश्यकाः चराः वर्तमानकाले सर्वे variables.less.

चर इति	पूर्वनिर्धारितं मूल्यम्	वर्णनम्‌
`@gridColumns`	१६	जालस्य अन्तः स्तम्भानां संख्या
`@gridColumnWidth`	४०px इति	जालस्य अन्तः प्रत्येकस्य स्तम्भस्य विस्तारः
`@gridGutterWidth`	२०px इति	प्रत्येकं स्तम्भस्य मध्ये ऋणात्मकं स्थानम्
`@siteWidth`	सर्वेषां स्तम्भानां नालिकानां च योगः गणितः	वयं किञ्चित् मूलभूतं मेलनं उपयुञ्ज्महे स्तम्भानां, नालिकानां च संख्यां गणयितुं तथा च `.fixed-container()`mixin इत्यस्य विस्तारं सेट् कर्तुं ।

अधुना अनुकूलितुं

ग्रिड् परिवर्तनस्य अर्थः अस्ति यत् त्रयः @grid-*चराः परिवर्त्य Less सञ्चिकाः पुनः संकलिताः भवन्ति ।

बूटस्ट्रैप् २४ स्तम्भपर्यन्तं जालप्रणालीं सम्पादयितुं सुसज्जितः आगच्छति; the default is just 16. अत्र भवतः जालचराः 24-स्तम्भजालस्य अनुकूलिताः कथं दृश्यन्ते इति ।

@ gridColumns : 24 ;       
@ ग्रिडस्तम्भ चौड़ाई : 20px ;   
@ ग्रिडगटरविड्थ : 20px ;

एकदा पुनः संकलितं कृत्वा, भवन्तः सेट् भविष्यन्ति!

स्थिर विन्यास

पूर्वनिर्धारितं सरलं च 940px-व्यापकं, केन्द्रितं विन्यासं केवलं प्रायः कस्यापि वेबसाइट् अथवा पृष्ठस्य कृते एकेन प्रदत्तम् <div.container>.

<शरीरं> इति
  <div class = "पात्र" > 
    ...
  </div> इति
</body> इति

द्रव विन्यास

न्यूनतम- एवं अधिकतम-चौड़ाई एवं वाम-हस्त साइडबार के साथ एक वैकल्पिक, लचीला द्रव पृष्ठ संरचना। एप्स् तथा डॉक्स कृते महान्।

<शरीरं> इति
  <div class = "पात्र-द्रव" > 
    <div वर्ग = "पार्श्वपट्टिका" > 
      ...
    </div> इति
    <div वर्ग = "सामग्री" > 
      ...
    </div> इति
  </div> इति
</body> इति

शीर्षक एवं प्रतिलिपि

भवतः जालपुटानां संरचनायै मानकमुद्रणपदानुक्रमणिका ।

सम्पूर्णं मुद्रणजालम् अस्माकं variables.less सञ्चिकायां Less चरद्वये आधारितम् अस्ति: @basefontand @baseline. प्रथमं सम्पूर्णे प्रयुक्तं आधार-फन्ट-आकारं द्वितीयं च आधार-रेखा-उच्चता ।

वयं तान् चरानाम्, किञ्चित् गणितं च, अस्माकं सर्वेषां प्रकारस्य मार्जिन्स्, पैडिंग्स्, रेखा-उच्चताः च निर्मातुं उपयुञ्ज्महे ।

ह1. शीर्षक 1

ह२. शीर्षक 2

ह३. शीर्षक 3

ह४ । शीर्षक 4

ह५ । शीर्षक 5

ह६ । शीर्षक 6

उदाहरण अनुच्छेद

Nullam quis risus eget उर्ना mollis ornare वेल ईउ लियो. सह sociis natoque penatibus एट मैग्निस डिस parturient montes, nascetur हास्यास्पद mus. Nullam id dolor id nibh ultrices vehicula उत id elit.

उदाहरण शीर्षक उपशीर्षक है...

विविध । तत्त्वानि

बल, सम्बोधन, & संक्षिप्त नाम का प्रयोग करते हुए

<strong> <em> <address> <abbr>

कदा प्रयोगः कर्तव्यः

शब्दस्य वा वाक्यस्य वा तस्य परितः प्रतिलिपिः सापेक्षतया अतिरिक्तं महत्त्वं वा बोधनं वा सूचयितुं बोधटैग्स् ( <strong>तथा <em>) प्रयोक्तव्याः। <strong>महत्त्वार्थं तनावबोधार्थं<em> च प्रयोगः ।

एकस्मिन् अनुच्छेदे बोधः

Fusce dapibus , tellus ac cursus commodo , tortor मौरिस condimentum निभ , उत fermentum massa justo बैठो amet risus. Maecenas faucibus मोलिस इंटरडम। नुल्ला विटाए एलिट् लिबेरो, एक फारेत्र औगुए।

नोट्:<b> HTML5 मध्ये तथा टैग् इत्यस्य उपयोगः अद्यापि ठीकः अस्ति तथा <i>च तेषां क्रमशः बोल्ड् तथा इटालिक् च स्टाइल् कर्तुं नावश्यकता वर्तते (यद्यपि यदि अधिकं शब्दार्थतत्त्वं अस्ति तर्हि तस्य उपयोगं कुर्वन्तु)। <b>अतिरिक्त महत्त्वं न बोधयित्वा शब्दान् वा वाक्यानि वा प्रकाशयितुं भवति, यदा <i>तु अधिकतया स्वरस्य, तकनीकीपदानां इत्यादीनां कृते भवति।

सम्बोधयति

तत्त्वं <address>तस्य समीपस्थस्य पूर्वजस्य, अथवा सम्पूर्णस्य कार्यशरीरस्य सम्पर्कसूचनार्थं उपयुज्यते । अत्र द्वे उदाहरणे तस्य उपयोगः कर्तुं शक्यते स्म ।

ट्विटर, इंक
795 फोल्सम एवेन्यू, सुइट 600
सैन फ्रांसिस्को, सीए 94107
पी: (123) 456-7890

पूर्ण नाम
[email protected]

नोट्: एकस्मिन् मस्ट् इत्यस्मिन् प्रत्येकं पङ्क्तिः <address>रेखा-विच्छेदेन ( ) समाप्तं भवेत् अथवा सामग्रीं सम्यक् संरचयितुं <br />खण्ड-स्तरीय-टैग् (उदा., ) इत्यनेन वेष्टनीया भवेत् ।<p>

संक्षेपाः

संक्षिप्तशब्दानां संक्षिप्तनामानां च कृते ( HTML5 मध्ये अप्रचलितः अस्ति ) इति <abbr>टैग् इत्यस्य उपयोगं कुर्वन्तु । आशुलिपिरूपं टैग् अन्तः स्थापयित्वा सम्पूर्णनामस्य शीर्षकं सेट् कुर्वन्तु ।<acronym>

ब्लॉककोट्स्

<blockquote> <p> <small>

उद्धरण कैसे करें

blockquote इत्येतत् समावेशयितुं, wrap <blockquote>around <p>and <small>tags इति । स्वस्य स्रोतः उद्धृतुं तत्त्वस्य उपयोगं कुर्वन्तु ततः पूर्वं <small>भवन्तः em dash प्राप्नुवन्ति —।

लोरेम इप्सम डोलोर बैठा amet, consectetur adipiscing अभिजात वर्ग. पूर्णांक posuere erat एक ante venenatis dapibus posuere velit aliquet.
डॉ. जूलियस हिबर्ट्

<blockquote> इति
  <p> लोरेम इप्सम डोलोर बैठा अमेत, consectetur adipiscing elit. पूर्णांक posuere erat एक ante venenatis dapibus posuere velit aliquet. </p> इति
  <small> डॉ. जूलियस हिबर्ट </small>
</blockquote> इति

सूचीति

अक्रमितम्`<ul>`

लोरेम इप्सम डोलोर बैठा अमेत
Consectetur adipiscing अभिजात वर्ग
पूर्णांक molestie lorem पर massa
Facilisis in pretium nisl aliquet
नुल्ला वोलुत्पात अलिक्वाम वेलित
- Phasellus iaculis नेक्वे इति
- पुरुष सोडलेस उल्ट्रिसीज
- वेस्टिबुलम लाओरीत पोर्टिटोर सेम
- Ac tristique लिबेरो volutpat at
फौसिबस पोर्टा लेकस फ्रिंगिला वेल
Aenean बैठा अमेत एरत nunc
एगेट पोर्टिटोर लोरेम्

अशैली`<ul.unstyled>`

लोरेम इप्सम डोलोर बैठा अमेत
Consectetur adipiscing अभिजात वर्ग
पूर्णांक molestie lorem पर massa
Facilisis in pretium nisl aliquet
नुल्ला वोलुत्पात अलिक्वाम वेलित
- Phasellus iaculis नेक्वे इति
- पुरुष सोडलेस उल्ट्रिसीज
- वेस्टिबुलम लाओरीत पोर्टिटोर सेम
- Ac tristique लिबेरो volutpat at
फौसिबस पोर्टा लेकस फ्रिंगिला वेल
Aenean बैठा अमेत एरत nunc
एगेट पोर्टिटोर लोरेम्

आदेशित`<ol>`

लोरेम इप्सम डोलोर बैठा अमेत
Consectetur adipiscing अभिजात वर्ग
पूर्णांक molestie lorem पर massa
Facilisis in pretium nisl aliquet
नुल्ला वोलुत्पात अलिक्वाम वेलित
फौसिबस पोर्टा लेकस फ्रिंगिला वेल
Aenean बैठा अमेत एरत nunc
एगेट पोर्टिटोर लोरेम्

वर्णनम्‌`dl`

वर्णन सूची: पदपरिभाषायै वर्णनसूची परिपूर्णा भवति ।
यूइस्मोदः: वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस euismod semper eget lacinia odio सेम nec अभिजात वर्ग.; Donec id elit नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस.
मलेसुअदा पोर्टा: Etiam porta सेम malesuada मैग्ना मोलिस euismod.

संहिता

<code> <pre>

द्वयोः सरलयोः टैगयोः सह शैल्यां स्वस्य कोडं पिम्पं कुर्वन्तु। जावास्क्रिप्ट् मार्गेण अधिकाधिकं भयानकतायै गूगलस्य कोड prettify पुस्तकालयं पातयन्तु ततः भवन्तः सेट् भवन्ति।

संहिता प्रस्तुत करना

कोड, ब्लॉक्स् अथवा केवलं स्निपेट्स् इनलाइन्, केवलं सम्यक् टैग् मध्ये वेष्टयित्वा शैली सह प्रदर्शयितुं शक्यते । बहुपङ्क्तयः विस्तृताः कोडस्य खण्डानां कृते, <pre>तत्त्वं उपयुज्यताम् । इन्लाइन् कोड् कृते <code>एलिमेण्ट् इत्यस्य उपयोगं कुर्वन्तु ।

तत्व परिणाम

<code> एतादृशे पाठपङ्क्तौ भवतः वेष्टितः कोडः एतादृशः <html>एलिमेण्ट् इव दृश्यते ।

तत्व	परिणाम
`<code>`	एतादृशे पाठपङ्क्तौ भवतः वेष्टितः कोडः एतादृशः `<html>`एलिमेण्ट् इव दृश्यते ।
`<pre>`	<दिव> इति <h1>शीर्षकम्</h1> <p>किञ्चित् अत्रैव...</p> </div> इति नोट्:`<pre>` टैग्-अन्तर्गतं कोडं यथासम्भवं वामभागे समीपे अवश्यं स्थापयन्तु ; सर्वान् ट्याब्स् रेण्डर् करिष्यति ।
`<pre class="prettyprint">`	google-code-prettify पुस्तकालयस्य उपयोगेन भवतः कोडस्य खण्डाः किञ्चित् भिन्नां दृश्यशैलीं स्वचालितवाक्यविन्यासप्रकाशनं च प्राप्नुवन्ति । <div> <h1> शीर्षकम् </h1> <p> अत्रैव किमपि... </p> </div> google-code-prettify इत्येतत् डाउनलोड् कृत्वा कथं उपयोगः कर्तव्यः इति readme इत्येतत् पश्यन्तु ।

<pre>

<दिव> इति
  <h1>शीर्षकम्</h1>
  <p>किञ्चित् अत्रैव...</p>
</div> इति

नोट्:<pre> टैग्-अन्तर्गतं कोडं यथासम्भवं वामभागे समीपे अवश्यं स्थापयन्तु ; सर्वान् ट्याब्स् रेण्डर् करिष्यति ।

<pre class="prettyprint">

google-code-prettify पुस्तकालयस्य उपयोगेन भवतः कोडस्य खण्डाः किञ्चित् भिन्नां दृश्यशैलीं स्वचालितवाक्यविन्यासप्रकाशनं च प्राप्नुवन्ति ।

<div> <h1> शीर्षकम् </h1> <p> अत्रैव किमपि... </p> </div>

google-code-prettify इत्येतत् डाउनलोड् कृत्वा कथं उपयोगः कर्तव्यः इति readme इत्येतत् पश्यन्तु ।

इनलाइन लेबल

<span class="label">

स्वशरीरपाठे यत्किमपि वाक्यं प्रति ध्यानं आह्वयन्तु अथवा ध्वजं कुर्वन्तु।

किमपि लेबलं कुर्वन्तु

कदापि तेषु आडम्बरपूर्णेषु एकस्य आवश्यकता आसीत् New! अथवा कोड लिखते समय महत्वपूर्ण ध्वज? साधु, इदानीं भवतः तानि सन्ति। अत्र पूर्वनिर्धारितरूपेण किं समाविष्टम् अस्ति ।

नामपत्र	परिणाम
`<span class="label">Default</span>`	मूलभूतम्‌
`<span class="label success">New</span>`	नूतनम्‌
`<span class="label warning">Warning</span>`	चेतवानी
`<span class="label important">Important</span>`	महत्वपूर्णः
`<span class="label notice">Notice</span>`	सूचना

मीडिया जालम्

न्यून HTML पदचिह्नं न्यूनतमशैल्याः च पृष्ठेषु भिन्न-भिन्न-आकारस्य लघुचित्रं प्रदर्शयतु ।

उदाहरण लघुचित्र

मध्ये लघुचित्रं .media-gridकिमपि आकारं भवितुम् अर्हति, परन्तु ते सर्वोत्तमरूपेण कार्यं कुर्वन्ति यदा प्रत्यक्षतया अन्तःनिर्मित-Botstrap-जाल-प्रणाल्यां मैप् भवन्ति । 90, 210, 330 इत्यादीनि चित्रविस्ताराणि कतिपयैः पिक्सेलैः पैडिंग् इत्यनेन सह मिलित्वा .span2, .span4, .span6स्तम्भस्य आकारानां समीकरणं कुर्वन्ति ।

बृहत्‌

मध्यम

लघु

तान् कोडयन्

मीडिया ग्रिड्स् उपयोगाय सुलभाः सन्ति तथा च मार्कअप पक्षे अपि तु सरलाः सन्ति। तेषां परिमाणानि केवलं समाविष्टानां बिम्बानां परिमाणस्य आधारेण भवन्ति ।

<ul class = "मीडिया-जाल" > 
  <लि> इति
    <a href = "#" > इति 
      <img वर्ग = "लघुचित्र" src = "https://placehold.it/330x230" alt = "" >   
    </a> इति
  </li> इति
  <लि> इति
    <a href = "#" > इति 
      <img वर्ग = "लघुचित्र" src = "https://placehold.it/330x230" alt = "" >   
    </a> इति
  </li> इति
</ul> इति

मेजस्य निर्माणम्

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

मेजः महान् भवन्ति—बहुवस्तूनाम् कृते। महान् सारणीः, तथापि, उपयोगी, स्केल-योग्यः, पठनीयः च (कोड्-स्तरस्य) भवितुं किञ्चित् मार्कअप-प्रेमस्य आवश्यकता वर्तते । अत्र साहाय्यं कर्तुं कतिचन युक्तयः सन्ति।

सर्वदा स्वस्य स्तम्भशीर्षकाणि <thead>एतादृशेन वेष्टयन्तु यत् श्रेणीक्रमः <thead>> <tr>> भवति <th>|

स्तम्भशीर्षकाणां सदृशं, भवतः सर्वाणि सारणीयाः शरीरसामग्री a इत्यनेन वेष्टितव्या <tbody>अतः भवतः श्रेणीक्रमः <tbody>> <tr>> अस्ति <td>।

उदाहरणम् : पूर्वनिर्धारितसारणीशैल्याः

पठनीयतां सुनिश्चित्य संरचनां निर्वाहयितुम् सर्वाणि सारणीनि स्वयमेव केवलं आवश्यकसीमाभिः सह शैलीकृतानि भविष्यन्ति। अतिरिक्तवर्गान् विशेषतान् वा योजयितुं आवश्यकता नास्ति।

# .	प्रथम नाम्ना	अंतिम नाम्ना	भाषा
१	केचन	एकम्‌	आंग्ल
२	जो	सिक्सपैक्	आंग्ल
३	स्तु	दन्त इति	संहिता

<सारणी>
  ...
</table> इति

उदाहरणम् : सघनसारणी

येषु सारणीषु कठिनतरस्थानेषु अधिकदत्तांशस्य आवश्यकता भवति, तेषां कृते सघनस्वादस्य उपयोगं कुर्वन्तु यत् गद्दीम् अर्धभागे कटयति । पूर्वनिर्धारितसारणीशैल्याः इव सीमाभिः, ज़ेबरा-पट्टिकाभिः च सह अपि अस्य उपयोगः कर्तुं शक्यते ।

# .	प्रथम नाम्ना	अंतिम नाम्ना	भाषा
१	केचन	एकम्‌	आंग्ल
२	जो	सिक्सपैक्	आंग्ल
३	स्तु	दन्त इति	संहिता

उदाहरणम् : सीमायुक्ता सारणी

तेषां कोणान् गोलं कृत्वा सर्वतः सीमाः योजयित्वा भवतः मेजः केवलं किञ्चित् स्लीकरः दृश्यते इति कुरुत।

# .	प्रथम नाम्ना	अंतिम नाम्ना	भाषा
१	केचन	एकम्‌	आंग्ल
२	जो	सिक्सपैक्	आंग्ल
३	स्तु	दन्त इति	संहिता

<table class = "सीमायुक्त-सारणी" > 
  ...
</table> इति

उदाहरण : ज़ेबरा-पट्टीदार

ज़ेबरा-पट्टिकां योजयित्वा स्वसारणीभिः सह किञ्चित् आडम्बरं प्राप्नुवन्तु-मात्रं .zebra-stripedवर्गं योजयन्तु।

# .	प्रथम नाम्ना	अंतिम नाम्ना	भाषा
१	केचन	एकम्‌	आंग्ल
२	जो	सिक्सपैक्	आंग्ल
३	स्तु	दन्त इति	संहिता
span ४ स्तम्भाः
span 2 स्तम्भ		span 2 स्तम्भ

नोट्: Zebra-striping इति एकं प्रगतिशीलं वर्धनं यत् IE8 इत्यादीनां प्र��चीनब्राउजर्-इत्यस्य कृते उपलब्धं नास्ति तथा च अधः ।

<table class = "ज़ेबरा-पट्टीदार" > 
  ...
</table> इति

उदाहरणम्: ज़ेबरा-धारीदार w / TableSorter.js

पूर्वम् उदाहरणं गृहीत्वा वयं jQuery तथा Tablesorter प्लगिन् मार्गेण क्रमाङ्कनकार्यक्षमतां प्रदातुं अस्माकं सारणीनां उपयोगितायां सुधारं कुर्मः । क्रमणं परिवर्तयितुं कस्यापि स्तम्भस्य शीर्षकं नुदन्तु ।

# .	प्रथम नाम्ना	अंतिम नाम्ना	भाषा
२	जो	सिक्सपैक्	आंग्ल
३	स्तु	दन्त इति	संहिता
१	भवतः	एकम्‌	आंग्ल

<script src = "js/jquery/jquery.tablesorter.min.js" ></स्क्रिप्ट> 
<लिपिः > 
  $ ( फंक्शन () { . 
    $ ( "सारणी # क्रमबद्धसारणीउदाहरण" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script> इति
<table class = "ज़ेबरा-पट्टीदार" > 
  ...
</table> इति

स्थिर शीर्षपट्टिका

किम् इति

अस्माकं शीर्षपट्टिका एकः नियतपट्टिका अस्ति यस्मिन् वेबसाइट् इत्यस्य लोगो अथवा नाम, प्राथमिकं नेविगेशनं, अन्वेषणप्रपत्रं च भवति ।

अनुकूलनीयम्

अन्तः सर्वे तत्त्वा:, सम्पूर्णं च शीर्षपट्टिका अपि, वैकल्पिकम् अस्ति । भवान् एकं लोगो/नाम, nav, अन्वेषणं, गौणं च nav—अथवा तस्य कोऽपि संयोजनं समावेशयितुं चयनं कर्तुं शक्नोति।

ड्रॉपडाउन्स शामिल हैं

मुख्यमार्गदर्शनस्य भागत्वेन वयं भवतः कृते भवतः nav मध्ये dropdowns योजयितुं क्षमताम् अन्तर्भूतवन्तः। उपरि (दक्षिण-संरेखितम्) द्वितीयकं nav पश्यन्तु यत् एतत् कथं कृतम् इति ज्ञातुं शक्नुवन्ति । वर्तमानपृष्ठचयनं दर्शयितुं अपि ड्रॉपडाउन्स् liटैग्स् समर्थयन्ति ।.active

नोट्: कस्मिन् अपि पृष्ठे शीर्षपट्टिकायाः उपयोगं कुर्वन्, स्वस्य कृते योजयित्वा तस्य कारणेन उत्पद्यमानस्य आच्छादनस्य लेखा अवश्यं padding-top: 40px;कुर्वन्तु body।

टैब एवं गोलियाँ

एकं सरलं माध्यमिकं नेविगेशनं रचयन्तु <ul>. उचितवर्गं योजयित्वा ट्याब्स् अथवा गोल्यः मध्ये स्वैप् कुर्वन्तु।

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

मूलभूत ट्याब्स् उदाहरणम्

ट्याब्स् नियमितरूपेण नेविगेशनरूपेण (एकस्मिन् ट्याब् मध्ये बाह्यपृष्ठानि लोड् करणम्) अथवा सामग्रीयाः फलकानाम् अदला-बदलीयै टैब-योग्यसामग्रीक्षेत्ररूपेण उपयोक्तुं शक्यन्ते । अस्माकं कृते एकं tabs प्लगिन् अस्ति यस्य उपयोगेन उत्तरस्य एकीकरणं कर्तुं शक्यते ।

<ul वर्ग = "टैब" > 
  <li class = "सक्रिय" ><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> इति

मूलभूत गोलियाँ उदाहरण

<ul class = "गोलियाँ" > 
  <li class = "सक्रिय" ><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> इति

ब्रेडक्रम्ब्स्

ब्रेडक्रम्ब् नेविगेशनस्य उपयोगः उपयोक्तृभ्यः एप् अथवा साइट् अन्तः कुत्र सन्ति इति दर्शयितुं मार्गरूपेण उपयुज्यते, परन्तु प्राथमिक नेविगेशनार्थं न।

<ul class = "ब्रेडक्रम्ब" > 
  <li><a href = "#" > गृहम् </a> <span class = "विभाजकः" > / </span></li>   
  <li><a href = "#" > मध्यपृष्ठम् </a> <span class = "विभाजकः" > / </span></li>   
  <li><a href = "#" > अन्यः एकः </a> <span class = "विभाजकः" > / </span></li>   
  <li class = "active" > त्वं अत्र </li> असि 
</ul> इति

पृष्ठकरणम्

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

<div वर्ग = "पृष्ठांकन" > 
  <उल> इति
    <li class = "पूर्व अक्षम" ><a href = "#" > ← पूर्वम् </a></li>  
    <li class = "सक्रिय" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > २ </a></li> इति 
    <li><a href = "#" > ३ </a></li> इति 
    <li><a href = "#" > ४ </a></li> इति 
    <li><a href = "#" > ५ </a></li> इति 
    <li class = "अगला" ><a href = "#" > अगला → </a></li> इति  
  </ul> इति
</div> इति

मूलभूत चेतावनी

.alert-message

क्रियायाः विफलतां, सम्भाव्यविफलतां, सफलतां वा प्रकाशयितुं एकपङ्क्तिसन्देशाः । विशेषतः रूपाणां कृते उपयोगी भवति।

जावास्क्रिप्ट प्राप्त करें »

पवित्र गुआकामोल ! Best check yo self, त्वं बहु उत्तमं न दृश्यते .

अहो स्नैप ! एतत् तत् च परिवर्त्य पुनः प्रयासं कुर्वन्तु .

सद् कृत! भवान् एतत् सचेतनासन्देशं सफलतया पठितवान् ।

शिरः उपरि ! एतत् एकं अलर्ट् अस्ति यस्य भवतः ध्यानस्य आवश्यकता वर्तते, परन्तु एतत् अधुना एव महती प्राथमिकता नास्ति।

उदाहरण संहिता

<div class = "सचेतना-सन्देश चेतावनी" > 
  <a class = "बन्द करें" href = "#" > × </a>  
  <p><strong> पवित्र गुआकामोल ! </strong> Best check yo self, त्वं बहु उत्तमं न दृश्यते। </p> इति
</div> इति

सन्देशान् अवरुद्धं कुर्वन्तु

.alert-message.block-message

किञ्चित् व्याख्यानस्य आवश्यकतां विद्यमानानाम् सन्देशानां कृते अस्माकं कृते अनुच्छेदशैलीसचेतनाः सन्ति । एते दीर्घतरदोषसन्देशान् बुदबुदातुं, लम्बितक्रियायाः विषये उपयोक्तारं चेतयितुं, अथवा केवलं पृष्ठे अधिकबोधार्थं सूचनां प्रस्तुतुं परिपूर्णाः सन्ति ।

जावास्क्रिप्ट प्राप्त करें »

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

एतत् कर्म गृहाण एतत् वा कुरुत

अहो स्नैप ! भवतः त्रुटिः प्राप्ता! एतत् तत् च परिवर्त्य पुनः प्रयासं कुर्वन्तु .

Duis mollis est गैर commodo luctus
निसि एरत् पोर्ट्तितोर् लिगुला
Eget lacinia odio सेम nec अभिजात वर्ग

एतत् कर्म गृहाण एतत् वा कुरुत

सद् कृत! भवान् एतत् सचेतनासन्देशं सफलतया पठितवान्। सह sociis natoque penatibus एट मैग्निस डिस parturient montes, nascetur हास्यास्पद mus. Maecenas faucibus मोलिस इंटरडम।

एतत् कर्म गृहाण एतत् वा कुरुत

उदाहरण संहिता

<div class = "सचेतना-सन्देश-अवरोध-सन्देश-चेतावनी" > 
  <a class = "बन्द करें" href = "#" > × </a>  
  <p><strong> पवित्र गुआकामोल ! एतत् चेतावनी अस्ति ! </strong> Best check yo self, त्वं बहु उत्तमं न दृश्यते। नुल्ला विटाए एलिट् लिबेरो, एक फारेत्र औगुए। Praesent commodo cursus मैग्ना, वेल scelerisque nisl consectetur एट. </p> इति
  <div class = "सचेतना-क्रियाएँ" > 
    <a class = "btn small" href = "#" > एतत् कार्यं कुरुत </a> <a class = "btn small" href = "#" > अथवा एतत् कुरुत </a>     
  </div> इति
</div> इति

मोडल्स्

मोडल्स्—संवादाः अथवा प्रकाशपेटिकाः—तेषु परिस्थितिषु सन्दर्भक्रियाणां कृते महान् भवन्ति यत्र पृष्ठभूमिसन्दर्भस्य निर्वाहः महत्त्वपूर्णः भवति ।

जावास्क्रिप्ट प्राप्त करें »

टूलटिप्स

Twipsies एकस्य भ्रमितस्य उपयोक्तुः सहायतां कर्तुं तथा च तान् समीचीनदिशि दर्शयितुं सुपर उपयोगी भवन्ति।

जावास्क्रिप्ट प्राप्त करें »

Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuuntur consequuuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo बैठे अर्ध fugit fugit, totam doloremque उन्दे sunt sed dicta quae accusantium fugit voluptas निमो voluptas voluptatem rem quae aut veritatis अर्ध क्वासी.

पोपोवर्स इति

विन्यासं न प्रभावित्य पृष्ठाय उपपाठसूचनाः प्रदातुं popovers इत्यस्य उपयोगं कुर्वन्तु ।

जावास्क्रिप्ट प्राप्त करें »

प्रारम्भ करना

Bootstrap पुस्तकालयेन सह javascript इत्यस्य एकीकरणं सुपर सुलभम् अस्ति । अधः वयं मूलभूतविषयेषु गत्वा भवन्तं आरम्भं कर्तुं केचन भयानकाः प्लगिन्स् प्रदामः!

जावास्क्रिप्ट डॉक्स देखें »

किं समाविष्टम् अस्ति

Bootstrap इत्यस्य केषाञ्चन प्राथमिकघटकानाम् जीवनं नूतनेन कस्टम् प्लगिन्स् इत्यनेन सह आनयन्तु ये jQuery तथा Ender इत्यनेन सह कार्यं कुर्वन्ति । वयं भवन्तं प्रोत्साहयामः यत् तेषां विस्तारं परिवर्तनं च भवतः विशिष्टविकासस्य आवश्यकतानां अनुरूपं भवतु।

संचिका	वर्णनम्‌
बूटस्ट्रैप-मोडल.जे.एस	अस्माकं मोडल प्लगइन पारम्परिक मोडल js प्लगइन पर एक सुपर स्लिम टेक है! वयं केवलं नग्नकार्यक्षमतां समावेशयितुं विशेषतया सावधानतां कृतवन्तः यत् अस्माकं कृते twitter इत्यत्र आवश्यकम् अस्ति।
बूटस्ट्रैप-अलर्ट्स्.जे.एस	अलर्ट प्लगिन् अलर्ट्स् मध्ये निकटकार्यक्षमतां योजयितुं सुपर टिनी क्लास् अस्ति।
बूटस्ट्रैप-ड्रॉपडाउन.जे.एस	इदं प्लगिन् bootstrap topbar अथवा tabbed navigations इत्यत्र dropdown interaction योजयितुं अस्ति ।
बूटस्ट्रैप-स्क्रॉल्स्पी.जे.एस	ScrollSpy प्लगइन् bootstrap topbar मध्ये scroll position इत्यस्य आधारेण auto updating nav योजयितुं अस्ति ।
बूटस्ट्रैप-बटन.js	ScrollSpy प्लगइन् bootstrap topbar मध्ये scroll position इत्यस्य आधारेण auto updating nav योजयितुं अस्ति ।
बूटस्ट्रैप-टैब्स्.जे.एस	इदं प्लगिन् स्थानीयसामग्रीद्वारा सायक्लिंग् कर्तुं द्रुतं, गतिशीलं ट्याब् तथा गोली कार्यक्षमतां योजयति।
बूटस्ट्रैप-twipsy.js	जेसन फ्रेम द्वारा लिखित उत्कृष्ट jQuery.tipsy प्लगइन के आधार पर; twipsy एकं अद्यतनं संस्करणम् अस्ति, यत् चित्रेषु न अवलम्बते, एनिमेशनस्य कृते css3 इत्यस्य उपयोगं करोति, स्थानीयशीर्षकभण्डारणार्थं च data-attributes इत्यस्य उपयोगं करोति!
बूटस्ट्रैप-पोपोवर.जे.एस	popover प्लगिन् भवतः अनुप्रयोगे popovers योजयितुं सरलं अन्तरफलकं प्रदाति। इदं boostrap-twipsy.js प्लगइनं विस्तारयति, अतः स्वप्रकल्पे popovers समाविष्टं कुर्वन् तां सञ्चिकामपि अवश्यं गृह्णीत!

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

न! बूटस्ट्रैप् प्रथमं CSS पुस्तकालयं भवितुं डिजाइनं कृतम् अस्ति । इदं जावास्क्रिप्ट् समाविष्टशैल्याः उपरि मूलभूतं अन्तरक्रियाशीलं स्तरं प्रदाति ।

तथापि, येषां जावास्क्रिप्ट् इत्यस्य आवश्यकता वर्तते, तेषां कृते वयं उपरिष्टात् प्लगिन्स् प्रदत्तवन्तः यत् भवन्तः Bootstrap इत्यस्य जावास्क्रिप्ट् इत्यनेन सह कथं एकीकरणं कर्तव्यमिति अवगन्तुं साहाय्यं कुर्वन्ति तथा च मूलभूतकार्यक्षमतायाः कृते तत्क्षणमेव द्रुतं, लघुविकल्पं दातुं शक्नुवन्ति।

अधिकसूचनार्थं तथा च केचन लाइव-प्रदर्शनानि द्रष्टुं कृपया अस्माकं प्लगिन्-दस्तावेजीकरणपृष्ठं पश्यन्तु ।

Bootstrap Preboot इत्यस्मात् निर्मितम् आसीत् , यत् Mixins इत्यस्य चरस्य च मुक्त-स्रोत-सङ्कुलम् अस्ति यत् Less इत्यनेन सह उपयुज्यते , यत् द्रुततरं सुलभं च जालविकासाय CSS पूर्वसंसाधकं भवति

Bootstrap मध्ये वयं Preboot इत्यस्य उपयोगं कथं कृतवन्तः तथा च यदि भवान् स्वस्य अग्रिमे परियोजनायां Less चालयितुं चयनं करोति तर्हि भवान् कथं तस्य उपयोगं कर्तुं शक्नोति इति पश्यन्तु ।

तस्य उपयोगः कथं करणीयः

Bootstrap इत्यस्य Less चरस्य, mixins इत्यस्य, CSS मध्ये nesting इत्यस्य च पूर्णतया उपयोगं कर्तुं स्वस्य ब्राउजर् मध्ये javascript मार्गेण एतस्य विकल्पस्य उपयोगं कुर्वन्तु ।

<link rel = "शैलीपत्रक/कम" href = "कम/बूटस्ट्रैप.कम" मीडिया = "सर्व" />    
<script src = "js/less-1.1.3.min.js" ></script> इति

.js समाधानं न अनुभूयते वा? Less Mac app इत्यस्य प्रयोगं कुर्वन्तु अथवा यदा भवान् स्वस्य कोडं परिनियोजयति तदा संकलनार्थं Node.js इत्यस्य उपयोगं कुर्वन्तु।

किं समाविष्टम् अस्ति

अत्र Bootstrap इत्यस्य भागत्वेन Twitter Bootstrap इत्यस्मिन् किं किं समाविष्टम् अस्ति तस्य केचन मुख्यविषयाणि सन्ति। डाउनलोड् कर्तुं अधिकं ज्ञातुं च Bootstrap वेबसाइट् अथवा Github परियोजनापृष्ठं प्रति गच्छन्तु ।

चर

Less इत्यस्मिन् चराः भवतः CSS शिरोवेदनामुक्तस्य परिपालनाय अद्यतनीकरणाय च परिपूर्णाः सन्ति । यदा भवान् वर्णमूल्यं वा बहुधा उपयुज्यमानं मूल्यं परिवर्तयितुम् इच्छति तदा एकस्मिन् स्थाने अद्यतनं कुर्वन्तु ततः भवान् सेट् भवति ।

// लिङ्कानि
@ लिंकरंग : # 8b59c2;         
@ linkColorHover : अंधेरा ( @ linkColor     , 10 ) ; 
 
// ग्रेज
@ काला : # 000;             
@ grayDark :           हल्के ( @ काला , 25 %); 
@ धूसर :               हल्के ( @ काला , 50 %); 
@ grayLight :          हल्के ( @ काला , 70 %); 
@ grayLighter :        हल्के ( @ काला , 90 %); 
@ श्वेत : # fff;             
 
// उच्चारण रंग
@ नीला : # 08b5fb ;              
@ हरे : # 46a546 ;             
@ लाल : # 9d261d ;               
@ पीला : # ffc40d ;            
@ नारंगी : # f89406 ;            
@ गुलाबी : # c3325f ;              
@ बैंगनी : # 7a43b6 ;            
 
// आधार रेखा जाल
@ आधारफॉन्ट : 13px ;          
@ आधाररेखा : 18px ;

टिप्पणी करते हुए

Less इत्यनेन CSS इत्यस्य सामान्यवाक्यविन्यासस्य अतिरिक्तं अन्यां टिप्पणीशैली अपि प्रदत्ता अस्ति /* ... */।

// एषा टिप्पणी अस्ति
/* एषा अपि टिप्पणी */

वाज़ू को मिश्रित करता है

Mixins मूलतः CSS कृते includes अथवा partials भवन्ति, येन भवन्तः कोडस्य एकं खण्डं एकस्मिन् संयोजयितुं शक्नुवन्ति । ते विक्रेता उपसर्गयुक्तगुणानां कृते महान् सन्ति यथा box-shadow, पार-ब्राउजर-ढालः, फन्ट्-स्तम्भः, इत्यादीनां कृते । अधः Bootstrap इत्यनेन सह समाविष्टानां mixins इत्यस्य नमूना अस्ति ।

फॉन्ट स्टैक

# फॉन्ट { .
  . आशुलिपि ( @ वजन : सामान्य , @ आकार : 14px , @ lineHeight : 20px ) { .     
    font - आकार : @ आकार ; 
    font - वजन : @ भार ; 
    रेखा - ऊर्ध्वता : @lineHeight ; 
  } इति ।
  . sans - serif ( @भार : सामान्य , @ आकार : 14px , @lineHeight : 20px ) {     
    font - family : "हेल्वेटिका न्यू" , हेल्वेटिका , एरियल , sans - serif ;   
    font - आकार : @ आकार ; 
    font - वजन : @ भार ; 
    रेखा - ऊर्ध्वता : @lineHeight ; 
  } इति ।
  ...
} इति ।

ढालः

# ढाल { .
  ...
  . ऊर्ध्वाधर ( @ startColor : # 555, @ endColor: # 333) { 
    पृष्ठभूमि - रंग : @endColor ; 
    background - repeat : पुनरावृत्ति - x ;
    पृष्ठभूमि - छवि : - khtml - ढाल ( रैखिक , बाएं ऊपर , बाएं नीचे , से ( @startColor ), to ( @endColor )); // कोंक्वेरो   
    पृष्ठभूमि - छवि : - moz - रैखिक - ढाल ( @ startColor , @endColor ); // FF 3.6+ इति   
    पृष्ठभूमि - छवि : - ms - रैखिक - ढाल ( @ startColor , @endColor ); // आईई१०   
    पृष्ठभूमि - छवि : - वेबकिट - ढाल ( रैखिक , बाएं ऊपर , बाएं नीचे , रंग - रोक ( 0 %, @ startColor ), रंग - रोक ( 100 %, @ endColor )); // सफारी 4+, क्रोम 2+    
    पृष्ठभूमि - छवि : - वेबकिट - रैखिक - ढाल ( @ startColor , @endColor ); // सफारी 5.1+, क्रोम 10+   
    पृष्ठभूमि - छवि : - ओ - रैखिक - ढाल ( @ startColor , @endColor ); // ओपेरा 11.10   
    पृष्ठभूमि - छवि : रैखिक - ढाल ( @ startColor , @endColor ); // मानकम्  
  } इति ।
  ...
} इति ।

संचालन

आडम्बरं प्राप्नुवन्तु तथा च अधोलिखितवत् लचीलानि शक्तिशालिनः च मिक्सिन् जनयितुं किञ्चित् गणितं कुर्वन्तु।

// ग्रिडिट्यूड
@ gridColumns : 16 ;       
@ ग्रिडस्तम्भ चौड़ाई : 40px ;   
@ ग्रिडगटरविड्थ : 20px ;   
@ siteWidth : ( @ ग्रिडस्तंभ * @ ग्रिडस्तंभ चौड़ाई ) + ( @ ग्रिडगटर चौड़ाई * ( @ ग्रिडस्तंभ - 1 ));                 
 
// कुछ स्तम्भ बनाइए
. स्तम्भ ( @columnSpan : 1 ) { .  
  width : ( @ gridColumnWidth * @ कॉलमस्पैन ) + ( @ gridGutterWidth * ( @ कॉलमस्पैन - 1 ));         
} इति ।

कम संकलन करना

/lib/ मध्ये सञ्चिकाः परिवर्तयित्वा .less, bootstrap-*.*.*.css तथा bootstrap-*.*.*.min.css सञ्चिकाः पुनः जनयितुं भवद्भिः तान् पुनः संकलितुं प्रवृत्ताः भविष्यन्ति । यदि भवान् GitHub कृते पुल अनुरोधं प्रस्तौति तर्हि भवान् सर्वदा पुनः संकलनं कर्तव्यम् ।

संकलन के उपाय

प्रक्रिया	पदानि
मेकफाइल सहित नोड	निम्नलिखित आदेशं चाल्य npm इत्यनेन सह less आदेशपङ्क्तिसंकलकं संस्थापयन्तु । $ npm lessc स्थापित करें एकदा संस्थापितं जातं चेत् केवलं `make`भवतः bootstrap निर्देशिकायाः मूलतः चालयन्तु तथा च भवन्तः सर्वे सेट् भवन्ति । अतिरिक्तरूपेण, यदि भवतां समीपे watchr संस्थापितम् अस्ति, तर्हि भवान् प्रत्येकं bootstrap lib मध्ये सञ्चिकां सम्पादयति चेत् bootstrap स्वयमेव पुनर्निर्माणं कर्तुं चालयितुं शक्नोति `make watch`(एतत् आवश्यकं नास्ति, केवलं सुविधाविधिः)
जावास्क्रिप्ट्	नवीनतमं Less.js डाउनलोड् कृत्वा तस्य मार्गं (तथा Bootstrap) `head`. <link rel = "शैलीपत्रक/कम" href = "/मार्ग/प्रति/बूटस्ट्रैप.कम" > <script src = "/मार्ग/तः/कम.js" ></script> .less सञ्चिकाः पुनः संकलयितुं केवलं तानि रक्षित्वा स्वपृष्ठं पुनः लोड् कुर्वन्तु । Less.js तान् संकलयति, स्थानीयभण्डारणे च संगृह्णाति ।
आदेशपङ्क्तिः	यदि भवतां समीपे पूर्वमेव less आदेशपङ्क्तिसाधनं संस्थापितम् अस्ति तर्हि केवलं निम्नलिखितम् आदेशं चालयन्तु । $ lessc ./lib/bootstrap.less > बूटस्ट्रैप.css `--compress`यदि भवान् केचन बाइट् रक्षितुं प्रयतते तर्हि तस्मिन् आदेशे अवश्यमेव समाविष्टं कुर्वन्तु!
कम मैक एप्लिकेशन	अनधिकृतः Mac एप् .less सञ्चिकानां निर्देशिकाः पश्यति तथा च दृष्टस्य .less सञ्चिकायाः प्रत्येकं रक्षणस्य अनन्तरं स्थानीयसञ्चिकासु कोडं संकलयति। यदि भवान् इच्छति तर्हि स्वयमेव लघुकरणार्थं एप् मध्ये प्राधान्यानि टोग्ल् कर्तुं शक्नोति तथा च संकलितसञ्चिकाः कस्मिन् निर्देशिकायां अन्ते गच्छन्ति।

CSS को हॉटलिंक करें

Less इत्यनेन सह तस्य उपयोगं कुर्वन्तु

GitHub पर फोर्क करें

Bootstrap विषये संक्षिप्तः इतिहासः, ब्राउजर् समर्थनम्, इत्यादीनि च

इतिहास

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

किं समाविष्टम् अस्ति

त्वरित-प्रारम्भ-उदाहरणानि

ग्रिड् प्रणाली मानक 940px रॉक करें या अपने रोल करें

पूर्वनिर्धारितं जालम्

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

स्तम्भों को ऑफसेट करना

नीडं स्तम्भाः

नेस्टेड् स्तम्भानां उदाहरणम्

स्वकीयं जालं रोल कुर्वन्तु

जालस्य अन्तः

अधुना अनुकूलितुं

Layouts जालपुटं निर्मातुं मूलभूताः टेम्पलेट्

स्थिर विन्यास

द्रव विन्यास

मुद्रणम् शीर्षकाणि, अनुच्छेदाः, सूचीः, अन्ये च इनलाइन प्रकारतत्त्वानि

शीर्षक एवं प्रतिलिपि

ह1. शीर्षक 1

ह२. शीर्षक 2

ह३. शीर्षक 3

ह४ । शीर्षक 4

ह५ । शीर्षक 5

ह६ । शीर्षक 6

उदाहरण अनुच्छेद

उदाहरण शीर्षक उपशीर्षक है...

विविध । तत्त्वानि

कदा प्रयोगः कर्तव्यः

एकस्मिन् अनुच्छेदे बोधः

सम्बोधयति

संक्षेपाः

ब्लॉककोट्स्

उद्धरण कैसे करें

सूचीति

अक्रमितम्<ul>

अशैली<ul.unstyled>

आदेशित<ol>

वर्णनम्‌dl

संहिता

संहिता प्रस्तुत करना

इनलाइन लेबल

किमपि लेबलं कुर्वन्तु

मीडिया चित्राणि विडियो च प्रदर्शयति

मीडिया जालम्

उदाहरण लघुचित्र

बृहत्‌

मध्यम

लघु

तान् कोडयन्

Tables For, भवान् अनुमानितवान्, सारणीबद्धदत्तांशः

मेजस्य निर्माणम्

उदाहरणम् : पूर्वनिर्धारितसारणीशैल्याः

उदाहरणम् : सघनसारणी

उदाहरणम् : सीमायुक्ता सारणी

उदाहरण : ज़ेबरा-पट्टीदार

उदाहरणम्: ज़ेबरा-धारीदार w / TableSorter.js

रूपाणि

पूर्वनिर्धारितशैल्याः

स्तम्भित रूप

क्षेत्र आकारों को बनाएँ

बटन्स्

उदाहरण बटन

आकारों को वैकल्पिक करें

अक्षम अवस्था

लिङ्कानि

बटन्स्

नेविगेशनम्

स्थिर शीर्षपट्टिका

परियोजना का नाम

किम् इति

अनुकूलनीयम्

ड्रॉपडाउन्स शामिल हैं

टैब एवं गोलियाँ

मूलभूत ट्याब्स् उदाहरणम्

मूलभूत गोलियाँ उदाहरण

ब्रेडक्रम्ब्स्

अक्रमितम्`<ul>`

अशैली`<ul.unstyled>`

आदेशित`<ol>`

वर्णनम्‌`dl`