मचान

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 इत्यस्य पक्षे त्यक्तम् अस्ति , Nicolas Gallagher इत्यस्य परियोजना यत् 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*

उदाहरण

अत्र द्वौ नेस्टेड् .span4स्तम्भौ a .span8.

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

स्तर 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> इति

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

द्रवजालैः सह नेस्टिंग् किञ्चित् भिन्नं भवति: नेस्टेड् स्तम्भानां संख्या मातापितृणां स्तम्भसङ्ख्यायाः सङ्गतिं न कर्तव्या । तस्य स्थाने, नेस्टेड् स्तम्भानां प्रत्येकं स्तरं पुनः सेट् भवति यतोहि प्रत्येकं पङ्क्तिः मूलस्तम्भस्य 100% भागं गृह्णाति ।

द्रव 12

द्रव 6.

<div class = "पङ्क्ति-द्रव" > 
  <div वर्ग = "span12" > 
    स्तम्भस्य १ स्तरः
    <div class = "पङ्क्ति-द्रव" > 
      <div class = "span6" > स्तर 2 </div> 
      <div class = "span6" > स्तर 2 </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।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

पर छिपे हुए...

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

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

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