मचान

HTML5 doctype इत्यस्य आवश्यकता अस्ति

बूटस्ट्रैप् कतिपय HTML तत्त्वानां CSS गुणानाञ्च उपयोगं करोति येषां कृते HTML5 doctype इत्यस्य उपयोगः आवश्यकः भवति । भवतः सर्वेषां परियोजनानां आरम्भे तत् समावेशयन्तु।

<!DOCTYPE html> इति
<html लङ् = "एन" > 
  ...
</html> इति

टाइपोग्राफी एवं लिंक

बूटस्ट्रैप् मूलभूतवैश्विकप्रदर्शनं, मुद्रणलेखनं, लिङ्कशैल्याः च सेट् करोति । विशेषतः वयं : १.

marginशरीर पर निकाल दें
background-color: white;पर सेट करेंbody
अस्माकं मुद्रणमूलरूपेण @baseFontFamily, @baseFontSize, तथा विशेषतानां उपयोगं कुर्वन्तु@baseLineHeight
माध्यमेन वैश्विकलिङ्कवर्णं सेट् कुर्वन्तु @linkColorतथा केवलं उपरि लिङ्क् अण्डरलाइन्स् प्रयोजयन्तु:hover

एताः शैल्याः scaffolding.less इत्यस्य अन्तः द्रष्टुं शक्यन्ते ।

Normalize के माध्यम से रीसेट करें

Bootstrap 2 इत्यनेन सह, पुरातनं रीसेट् ब्लॉक् Normalize.css इत्यस्य पक्षे त्यक्तम् अस्ति , निकोलस् Gallagher तथा Jonathan Neal इत्येतयोः परियोजना यत् HTML5 Boilerplate इत्यपि शक्तिं ददाति यदा वयं Normalize इत्यस्य बहुभागं अस्माकं reset.less इत्यस्य अन्तः उपयुञ्ज्महे , तदा वयं विशेषतया Bootstrap कृते केचन तत्त्वानि निष्कासितवन्तः ।

लाइव ग्रिड उदाहरण

पूर्वनिर्धारितं Bootstrap जालप्रणाली 12 स्तम्भानां उपयोगं करोति , प्रतिक्रियाशीलविशेषतानां सक्षमीकरणं विना 940px विस्तृतपात्रस्य कृते करोति । प्रतिक्रियाशीलं CSS सञ्चिकां योजितं कृत्वा, जालपुटं भवतः दृश्यस्थानस्य आधारेण 724px तथा 1170px विस्तृतं भवितुं अनुकूलितं भवति । 767px viewports इत्यस्य अधः स्तम्भाः द्रवरूपेण भवन्ति, लम्बवत् च स्तम्भयन्ति ।

१

२

३

४

५

९

मूलभूत जाल HTML

सरलस्य द्वौ स्तम्भविन्यासस्य कृते a रचयन्तु .rowतथा च समुचितसङ्ख्यायां .span*स्तम्भान् योजयन्तु । यतः एतत् १२-स्तम्भजालम् अस्ति, प्रत्येकं .span*तेषां १२ स्तम्भानां संख्यां विस्तृतं करोति, तथा च प्रत्येकं पङ्क्तिः (अथवा मातापितृस्थस्तम्भानां संख्या) कृते सर्वदा १२ यावत् योजयितव्यम्

<div वर्ग = "पङ्क्ति" > 
  <div class = "span4" > ... </div> इति 
  <div class = "span8" > ... </div> इति 
</div> इति

एतत् उदाहरणं दत्त्वा अस्माकं कृते .span4and .span8, 12 कुलस्तम्भानां कृते सम्पूर्णपङ्क्तिः च कृत्वा ।

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

.offset*क्लास् इत्यस्य उपयोगेन स्तम्भान् दक्षिणदिशि चालयन्तु । प्रत्येकं वर्गः स्तम्भस्य वाममार्जिनं सम्पूर्णस्तम्भेन वर्धयति । यथा - चतुर्णां स्तम्भानां उपरि .offset4गच्छति ।.span4

४

३ आफ्सेट् २

३ आफ्सेट् १

३ आफ्सेट् २

६ आफ्सेट् ३

<div वर्ग = "पङ्क्ति" > 
  <div class = "span4" > ... </div> इति 
  <div वर्ग = "span3 ऑफसेट2" > ... </div> 
</div> इति

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

पूर्वनिर्धारितजालेन सह स्वस्य सामग्रीं नेस्ट् कर्तुं, विद्यमानस्य स्तम्भस्य अन्तः नूतनं स्तम्भसमूहं .rowच योजयन्तु । नेस्टेड् पङ्क्तयः स्तम्भसमूहः समाविष्टः भवेत् यत् तस्य मातापितृस्य स्तम्भसङ्ख्यां यावत् योजयति ।.span*.span*

स्तर 1 स्तम्भ

स्तर 2

<div वर्ग = "पङ्क्ति" > 
  <div वर्ग = "span9" > 
    स्तर 1 स्तम्भ
    <div वर्ग = "पङ्क्ति" > 
      <div class = "span6" > स्तर 2 </div> 
      <div class = "span3" > स्तर 2 </div> 
    </div> इति
  </div> इति
</div> इति

लाइव द्रव जाल उदाहरण

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

१

४

८

६

१२

मूल द्रव जाल HTML

परिवर्त्य कस्यापि पङ्क्तिं "द्रवम्" .rowकुर्वन्तु .row-fluid। स्तम्भवर्गाः समानरूपेण एव तिष्ठन्ति, येन स्थिर-द्रव-जालयोः मध्ये प्लवनं सुलभं भवति ।

<div class = "पङ्क्ति-द्रव" > 
  <div class = "span4" > ... </div> इति 
  <div class = "span8" > ... </div> इति 
</div> इति

द्रव ऑफसेटिंग

स्थिरजालप्रणाली-अफसेटिंग् इव कार्यं करोति: .offset*एतावता स्तम्भैः आफ्सेट् कर्तुं कस्मिन् अपि स्तम्भे योजयन्तु ।

४

४ आफ्सेट् ४

३ आफ्सेट् ३

६ आफ्सेट् ६

<div class = "पङ्क्ति-द्रव" > 
  <div class = "span4" > ... </div> इति 
  <div वर्ग = "span4 ऑफसेट2" > ... </div> 
</div> इति

द्रव नीडीकरणम्

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

द्रव 12

द्रव 6.

<div class = "पङ्क्ति-द्रव" > 
  <div वर्ग = "span12" > 
    द्रव 12
    <div class = "पङ्क्ति-द्रव" > 
      <div वर्ग = "span6" > 
        द्रव 6.
        <div class = "पङ्क्ति-द्रव" > 
          <div class = "span6" > द्रव ६ </div> 
          <div class = "span6" > द्रव ६ </div> 
        </div> इति
      </div> इति
      <div class = "span6" > द्रव ६ </div> 
    </div> इति
  </div> इति
</div> इति

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

<div class="container">केवलं आवश्यकेन सह सामान्यं नियत-विस्तारं (वैकल्पिकरूपेण च प्रतिक्रियाशीलं) विन्यासं प्रदाति ।

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

द्रव विन्यास

<div class="container-fluid">अनुप्रयोगानाम् दस्तावेजानां च कृते —great इत्यनेन सह द्रवयुक्तं, द्विस्तम्भयुक्तं पृष्ठं रचयन्तु ।

<div class = "पात्र-द्रव" > 
  <div class = "पङ्क्ति-द्रव" > 
    <div वर्ग = "span2" > 
      <!--पार्श्वपट्टिका सामग्री-->
    </div> इति
    <div वर्ग = "span10" > 
      <!--शरीर सामग्री-->
    </div> इति
  </div> इति
</div> इति

प्रतिक्रियाशीलविशेषताः सक्षमीकरणम्

<head>स्वस्य दस्तावेजस्य अन्तः समुचितं मेटाटैग् अतिरिक्तशैलीपत्रं च समाविष्टं कृत्वा स्वस्य परियोजनायां प्रतिक्रियाशीलं CSS चालू कुर्वन्तु । यदि भवान् Customize पृष्ठतः Bootstrap संकलितवान् अस्ति तर्हि केवलं मेटा टैग् इत्येतत् समावेशयितुं आवश्यकम् ।

<meta name = "viewport" सामग्री = "चौड़ाई = उपकरण-चौड़ाई, प्रारम्भिक-स्केल = 1.0" >  
<link href = "संपत्ति/css/bootstrap-responsive.css" rel = "शैलीपत्रक" >

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

प्रतिक्रियाशील Bootstrap के बारे में

मीडिया प्रश्नाः कतिपयानां शर्तानाम् आधारेण कस्टम् CSS इत्यस्य अनुमतिं ददति-अनुपाताः, विस्ताराः, प्रदर्शनप्रकारः इत्यादयः-किन्तु सामान्यतया परितः min-widthतथा च केन्द्रीक्रियते max-width।

अस्माकं जालपुटे स्तम्भस्य विस्तारं परिवर्तयन्तु
यत्र यत्र आवश्यकं तत्र प्लवकस्य स्थाने तत्त्वानि स्तम्भयन्तु
उपकरणानां कृते अधिकं उपयुक्तं भवितुं शीर्षकाणां पाठस्य च आकारं परिवर्तयन्तु

मीडिया प्रश्नानां उपयोगं उत्तरदायित्वपूर्वकं केवलं स्वस्य मोबाईल-प्रेक्षकाणां आरम्भरूपेण एव कुर्वन्तु। बृहत्तरपरियोजनानां कृते समर्पितसङ्केतआधाराः विचारयन्तु न तु मीडियाप्रश्नानां स्तराः ।

समर्थित उपकरण

बूटस्ट्रैप् एकस्मिन् सञ्चिकायां मुष्टिभ्यां मीडिया-प्रश्नानां समर्थनं करोति यत् भवतः परियोजनानि भिन्न-भिन्न-यन्त्रेषु स्क्रीन-संकल्पेषु च अधिकं उपयुक्तानि कर्तुं साहाय्यं करोति । अत्र किं किं समाविष्टम् अस्ति ।

नामपत्र	विन्यास चौड़ाई	स्तम्भ चौड़ाई	नाली चौड़ाई
विशाल प्रदर्शन	1200px तथा ऊपर	७०px इति	३०px
मूलभूतम्‌	980px तथा ऊपर	६०px इति	२०px इति
चित्र गोलियाँ	768px एवं उससे ऊपर	४२px इति	२०px इति
फोनों को टैबलेट तक	767px तथा नीचे	द्रवस्तम्भाः, नियतविस्ताराः न सन्ति
फ़ोन्स्	480px तथा नीचे	द्रवस्तम्भाः, नियतविस्ताराः न सन्ति

/* बड़ा डेस्कटॉप */ .
@ मीडिया ( न्यूनतम - चौड़ाई : 1200px ) { ... } .     
 
/* लैंडस्केप एवं डेस्कटॉप को पोर्ट्रेट टैबलेट */
@media ( मिनट - चौड़ाई : 768px ) तथा ( अधिकतम - चौड़ाई : 979px ) { ... }        
 
/* लैंडस्केप फोन को पोर्ट्रेट टैबलेट */
@ मीडिया ( अधिकतम - चौड़ाई : 767px ) { ... } .     
 
/* लैंडस्केप फोन एवं नीचे */
@ मीडिया ( अधिकतम - चौड़ाई : 480px ) { ... } .

प्रतिक्रियाशील उपयोगिता वर्ग

द्रुततर-मोबाइल-अनुकूल-विकासाय, उपकरणेन सामग्रीं दर्शयितुं गोपनार्थं च एतान् उपयोगितावर्गान् उपयुज्यताम् । अधः उपलब्धवर्गाणां सारणी अस्ति तथा च दत्तमाध्यमप्रश्नविन्यासे (यन्त्रेण लेबलं कृतम्) तेषां प्रभावः अस्ति । ते responsive.less.

श्रेणी	फ़ोन्स्767px तथा नीचे	गोलियाँ९७९px तः ७६८px पर्यन्तम्	डेस्कटॉप्स्मूलभूतम्‌
`.visible-phone`	दृश्यम्	अदृष्ट	अदृष्ट
`.visible-tablet`	अदृष्ट	दृश्यम्	अदृष्ट
`.visible-desktop`	अदृष्ट	अदृष्ट	दृश्यम्
`.hidden-phone`	अदृष्ट	दृश्यम्	दृश्यम्
`.hidden-tablet`	दृश्यम्	अदृष्ट	दृश्यम्
`.hidden-desktop`	दृश्यम्	दृश्यम्	अदृष्ट

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

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

प्रतिक्रियाशील उपयोगिताएँ परीक्षण प्रकरण

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

पर दृश्यमान...

हरितवर्णीयपरीक्षाचिह्नानि सूचयन्ति यत् भवतः वर्तमानदृश्यक्षेत्रे वर्गः दृश्यते ।

फोनं✔ फ़ोन
गोली✔ गोली
डेस्कटॉप✔ डेस्कटॉप

पर छिपा हुआ...

अत्र हरितवर्णीयं चेकमार्क् भवतः वर्तमानदृश्यपुटे वर्गः निगूढः इति सूचयति ।

फोनं✔ फ़ोन
गोली✔ गोली
डेस्कटॉप✔ डेस्कटॉप

वैश्विक सेटिंग्स्