मचान

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

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

<!DOCTYPE html> इति
<html lang="en"> इति
  ...
</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 class="span4">...</div> इति
  <div class="span8">...</div> इति
</div> इति

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

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

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

४

३ आफ्सेट् २

३ आफ्सेट् १

३ आफ्सेट् २

६ आफ्सेट् ३

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

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

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

स्तर 1 स्तम्भ

स्तर 2

<दिव वर्ग="पङ्क्ति">
  <दिव वर्ग="span9">
    स्तर 1 स्तम्भ
    <दिव वर्ग="पङ्क्ति">
      <div class="span6">स्तर २</div> इति
      <div class="span3">स्तर २</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 class="span4 offset2">...</div> इति
</div> इति

द्रव नीड

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

द्रव 12

द्रव 6.

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

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

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

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

द्रव विन्यास

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

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

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

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

<meta name="viewport" content="चौड़ाई=यन्त्र-विस्तार, प्रारम्भिक-परिमाण=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) { ... }

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

/* लैंडस्केप फोन को पोर्ट्रेट टैबलेट */
@ मीडिया (अधिकतम-चौड़ाई: 767px) { ... }

/* लैंडस्केप फोन एवं नीचे */
@ मीडिया (अधिकतम-चौड़ाई: 480px) { ... }

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

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

श्रेणी	फोन 767px तथा नीचे	गोलियाँ 979px तः 768px पर्यन्तम्	डेस्कटॉप्स् पूर्वनिर्धारितम्
`.visible-phone`	दृश्यम्	अदृष्ट	अदृष्ट
`.visible-tablet`	अदृष्ट	दृश्यम्	अदृष्ट
`.visible-desktop`	अदृष्ट	अदृष्ट	दृश्यम्
`.hidden-phone`	अदृष्ट	दृश्यम्	दृश्यम्
`.hidden-tablet`	दृश्यम्	अदृष्ट	दृश्यम्
`.hidden-desktop`	दृश्यम्	दृश्यम्	अदृष्ट

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

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

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

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

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

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

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

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

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

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

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