इतिहास

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

ट्विटर इत्यत्र अनेकेषां अभियंतानां साहाय्येन प्रतिक्रियायाश्च सह, बूटस्ट्रैप् न केवलं मूलभूतशैल्याः, अपितु अधिकानि सुरुचिपूर्णानि स्थायिनि च अग्र-अन्त-डिजाइन-प्रतिमानाः समाविष्टुं महत्त्वपूर्णतया वर्धितः अस्ति

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

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

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

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

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

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

• सर्वाणि मूल .less सञ्चिकाः
• पूर्णतया संकलितं लघुकृतं च CSS
• styleguide दस्तावेजीकरणं सम्पूर्णं कुर्वन्तु
• उदाहरण पृष्ठ टेम्पलेट (अधिक शीघ्र आने वाला)

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

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

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

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

<दिव वर्ग="पङ्क्ति">
  <div class="span6 स्तम्भाः">
    ...
  </div> इति
  <div class="span10 स्तम्भाः">
    ...
  </div> इति
</div> इति

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

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

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

द्रव विन्यास

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

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

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

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

सम्पूर्णं मुद्रणजालम् अस्माकं preboot.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

नोट्: एकस्मिन् मस्ट् इत्यस्मिन् प्रत्येकं पङ्क्तिः <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.

डॉ. जूलियस हिबर्ट्

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

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

अशैली<ul.unstyled>

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

आदेशित<ol>

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

वर्णनम्‌dl

वर्णन सूची

पदपरिभाषायै वर्णनसूची परिपूर्णा भवति ।

यूइस्मोदः

वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस euismod semper eget lacinia odio सेम nec अभिजात वर्ग.

Donec id elit नॉन मि पोर्टा ग्रेविडा एट एगेट मेटस.

मलेसुअदा पोर्टा

Etiam porta सेम malesuada मैग्ना मोलिस euismod.

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

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

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

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

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

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

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

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

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

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

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

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

नोट्: 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> इति

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

सर्वेभ्यः रूपेभ्यः पठनीयेन स्केल-योग्यतया च प्रस्तुतुं पूर्वनिर्धारितशैल्याः दत्ताः सन्ति । पाठनिवेशानां, चयनसूचीनां, पाठक्षेत्राणां, रेडियो बटन्स् तथा चेकबॉक्स्, बटन् च कृते शैल्याः प्रदत्ताः सन्ति ।

उदाहरण रूप आख्यायिका

X-बृहत् इनपुट

विचि

१ २ ३ ४ ५

विचि

१ २ ३ ४ ५

असंपादनीय इनपुट

केचन मूल्यम् अत्र

अक्षम इनपुट

X-बृहत् इनपुट

सहायतापाठस्य लघुः स्निपेट्

उदाहरण रूप आख्यायिका

पूर्वनिर्धारित पाठ

@ .

पूर्वनिर्धारित चेकबॉक्स

संलग्न चेकबॉक्स

सञ्चिका इनपुट्

उदाहरण रूप आख्यायिका

विकल्पों की सूची

• विकल्पः एकः एषः सः च—अवश्यं समावेशयन्तु यत् एतत् किमर्थं महान् अस्ति
• विकल्पद्वयं अपि परीक्ष्य प्रपत्रपरिणामेषु समाविष्टं कर्तुं शक्यते
• विकल्पः तृतीयः अपि शक्यते—आम्, भवान् अनुमानितवान्—इदमपि परीक्ष्य प्रपत्रपरिणामेषु समाविष्टः भवितुं शक्नोति
• विकल्पः चतुर्थः अक्षमत्वात् परीक्षितुं न शक्यते ।

नोट्: लेबल् बहु बृहत्तरस्य क्लिक् क्षेत्राणां कृते सर्वान् विकल्पान् परितः भवति तथा च अधिकप्रयोज्यरूपस्य ।

तिथि सीमा

इत्यस्मै सर्वे समयाः प्रशान्तमानकसमयः (GMT -08:00) इति दर्शिताः सन्ति ।

पाठक्षेत्रम्

आवश्यकतानुसारं उपरि क्षेत्रस्य वर्णनार्थं सहायतापाठस्य अवरोधः।

विकल्पों की सूची

• विकल्पः एकः एषः सः च—अवश्यं समावेशयन्तु यत् एतत् किमर्थं महान् अस्ति
• विकल्पः द्वितीयः can अन्यत् किमपि अस्ति तथा च तस्य चयनेन विकल्पाः 1 अचयनं भविष्यति

  निरसयतु

स्तम्भित रूप

स्वस्य प्रपत्रस्य HTML मध्ये योजयन्तु .form-stackedततः तेषां वामभागे न अपितु तेषां क्षेत्राणां उपरि लेबल् भवन्ति । यदि भवतः रूपाणि लघु भवन्ति अथवा भवतः समीपे गुरुतररूपाणां कृते निवेशस्तम्भद्वयं भवति तर्हि एतत् महत् कार्यं करोति ।

उदाहरण रूप आख्यायिका

X-बृहत् इनपुट

विचि

१ २ ३ ४ ५

उदाहरण रूप आख्यायिका

X-बृहत् इनपुट

सहायतापाठस्य लघुः स्निपेट्

विकल्पों की सूची

• विकल्पः एकः एषः सः च—अवश्यं समावेशयन्तु यत् एतत् किमर्थं महान् अस्ति
• विकल्पद्वयं अपि परीक्ष्य प्रपत्रपरिणामेषु समाविष्टं कर्तुं शक्यते

नोट्: लेबल् बहु बृहत्तरस्य क्लिक् क्षेत्राणां कृते सर्वान् विकल्पान् परितः भवति तथा च अधिकप्रयोज्यरूपस्य ।

परिवर्तनं रक्षतु  निरसयतु

बटन्स्

रूढिरूपेण बटन्-इत्यस्य उपयोगः क्रियाणां कृते भवति यदा तु लिङ्क्-इत्यस्य उपयोगः वस्तुनां कृते भवति । यथा, "Download" इति बटनं भवितुम् अर्हति तथा च "recent activity" इति लिङ्क् भवितुम् अर्हति ।

सर्वे बटन्स् पूर्वनिर्धारितरूपेण हल्के धूसरशैल्याः भवन्ति, परन्तु भिन्नवर्णशैल्याः कृते कार्यात्मकवर्गाणां संख्या प्रयोक्तुं शक्यते । एतेषु वर्गेषु नीलवर्गः, लघुनीलवर्गः .primary, हरितवर्गः .info, रक्तवर्गः .successच .dangerसन्ति । प्लस्, स्वकीयानि शैल्यानि रोलिंग् करणं सुलभं peasy अस्ति।

उदाहरण बटन

बटनशैल्याः प्रयुक्तेन सह किमपि प्रयोक्तुं .btnशक्यन्ते । सामान्यतया भवान् एतानि केवलं <a>, <button>, चयनं च <input>तत्त्वेषु प्रयोक्तुं इच्छति । अत्र कथं दृश्यते :

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

आडम्बरपूर्णानि बृहत्तराणि वा लघुतराणि वा बटनानि? तत्र अस्ति !

अक्षम अवस्था

ये बटन्स् सक्रियाः न सन्ति अथवा एकेन वा अन्येन कारणेन एप्-द्वारा अक्षमम् अस्ति, तेषां कृते अक्षम-स्थितिं उपयुज्यताम् । तत् .disabledलिङ्कानां :disabledकृते <button>तत्त्वानां कृते च।

लिङ्कानि

बटन्स्

किम् इति

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

अनुकूलनीयम्

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

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

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

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

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

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

• गृहम्‌
• रूपरेखा
• सन्देशाः
• सेटिंग्स्
• संपर्कः
• ड्रॉपडाउन
  • गौण कड़ी
  • अत्र किञ्चिदन्यत्
  • अन्यत् लिङ्क्

<ul class="टैब्स्"> इति
  <li class="active"><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="active"><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> इति

पृष्ठकरणम्

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

<दिव वर्ग="पृष्ठांकन">
  <उल> इति
    <li class="पूर्व अक्षम"><a href="#">← पूर्व</a></li> इति
    <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> इति
    <li class="next"><a href="#">अनन्तरं →</a></li> इति
  </ul> इति
</div> इति

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

div.alert-message

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

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

div.alert-message.block-message

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

मोडल्स्

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

उपकरण युक्तियाँ

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

पोपोवर्स इति

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

Bootstrap Preboot इत्यनेन सह निर्मितम् आसीत् , यत् 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: अंधेरा (@ लिंकरंग, 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 इत्यस्य नमूना अस्ति ।

फॉन्ट स्टैक

# फॉन्ट { .
  .shorthand (@ वजन: सामान्य, @ आकार: 14px, @ lineHeight: 20px) {
    फॉन्ट-आकार: @ आकार;
    फॉन्ट-भार: @ वजन;
    रेखा-ऊँचाई: @ lineHeight;
  } .
  .sans-serif (@ वजन: सामान्य, @ आकार: 14px, @ lineHeight: 20px) {
    फॉन्ट-परिवार: "Helvetica Neue", Helvetica, एरियल, sans-serif;
    फॉन्ट-आकार: @ आकार;
    फॉन्ट-भार: @ वजन;
    रेखा-ऊँचाई: @ lineHeight;
  } .
  .serif (@ वजन: सामान्य, @ आकार: 14px, @ lineHeight: 20px) {
    font-family: "जॉर्जिया", टाइम्स न्यू रोमन, टाइम्स, sans-serif;
    फॉन्ट-आकार: @ आकार;
    फॉन्ट-भार: @ वजन;
    रेखा-ऊँचाई: @ lineHeight;
  } .
  .monospace (@ वजन: सामान्य, @ आकार: 12px, @ lineHeight: 20px) {
    font-family: "मोनाको", कूरियर नवीन, एकस्थान;
    फॉन्ट-आकार: @ आकार;
    फॉन्ट-भार: @ वजन;
    रेखा-ऊँचाई: @ lineHeight;
  } .
} .

ढालः

# ढाल { .
  .क्षैतिज (@ startColor: # 555, @ endColor: # 333) {
    पृष्ठभूमि-रंग: @ endColor;
    पृष्ठभूमि-पुनरावृत्ति: पुनरावृत्ति-x;
    पृष्ठभूमि-छवि: -khtml-ढाल (रेखीय, बाएं शीर्ष, दाएं शीर्ष, से (@ startColor), to (@endColor)); // कोंक्वेरो
    पृष्ठभूमि-छवि: -moz-रेखीय-ढाल (बाएं, @ startColor, @ endColor); // FF 3.6+ इति
    पृष्ठभूमि-छवि: -ms-रेखीय-ढाल (बाएं, @ startColor, @ endColor); // आईई१०
    पृष्ठभूमि-छवि: -webkit-ढाल (रेखीय, बाएं शीर्ष, दाएं शीर्ष, रंग-बंद (0%, @ startColor), रंग-बंद (100%, @ endColor)); // सफारी 4+, क्रोम 2+
    पृष्ठभूमि-छवि: -वेबकिट-रेखीय-ढाल (बाएं, @ startColor, @ endColor); // सफारी 5.1+, क्रोम 10+
    पृष्ठभूमि-छवि: -ओ-रेखीय-ढाल (बाएं, @ startColor, @ endColor); // ओपेरा 11.10
    पृष्ठभूमि-छवि: रैखिक-ढाल (बाएं, @ startColor, @ endColor); // ले मानक
  } .
  .ऊर्ध्वाधर (@ startColor: # 555, @ endColor: # 333) {
    पृष्ठभूमि-रंग: @ endColor;
    पृष्ठभूमि-पुनरावृत्ति: पुनरावृत्ति-x;
    पृष्ठभूमि-छवि: -khtml-ढाल (रेखीय, बाएं ऊपर, बाएं नीचे, from (@ startColor), to (@endColor)); // कोंक्वेरो
    पृष्ठभूमि-छवि: -moz-रेखीय-ढाल (@ startColor, @ endColor); // FF 3.6+ इति
    पृष्ठभूमि-छवि: -ms-रेखीय-ढाल (@ startColor, @ endColor); // आईई१०
    पृष्ठभूमि-छवि: -webkit-ढाल (रेखीय, बाएं ऊपर, बाएं नीचे, रंग-बंद (0%, @ startColor), रंग-बंद (100%, @ endColor)); // सफारी 4+, क्रोम 2+
    पृष्ठभूमि-छवि: -वेबकिट-रेखीय-ढाल (@ startColor, @ endColor); // सफारी 5.1+, क्रोम 10+
    पृष्ठभूमि-छवि: -ओ-रेखीय-ढाल (@ startColor, @ endColor); // ओपेरा 11.10
    पृष्ठभूमि-छवि: रैखिक-ढाल (@ startColor, @ endColor); // मानकम्
  } .
  .दिशात्मक (@ startColor: # 555, @ endColor: # 333, @ deg: 45deg) {
    ...
  } .
  .ऊर्ध्वाधर-तीन-रंग (@ startColor: # 00b3ee, @ midColor: # 7a43b6, @ colorStop: 50%, @ endColor: # c3325f) {
    ...
  } .
} .

संचालन एवं ग्रिड प्रणाली

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

// ग्रिडिट्यूड
@ gridस्तम्भाः 16;
@ ग्रिडस्तम्भ चौड़ाई: 40px;
@ ग्रिडगटरचौड़ाई: 20px;
@ siteWidth: (@ gridColumns * @ gridColumnWidth) + (@ gridGutterWidth * (@ ग्रिडस्तंभ - 1));

// ग्रिड प्रणाली
.पात्रम् { .
  width: @ साइटविड्थ;
  margin: 0 स्वतः;
  .क्लियरफिक्स ();
} .
.स्तम्भ(@columnSpan: 1) { .
  चौड़ाई: (@ gridColumnWidth * @ कॉलमस्पैन) + (@ gridGutterWidth * (@ कॉलमस्पैन - 1));
} .
.ऑफसेट (@ स्तम्भऑफसेट: 1) {
  मार्जिन-बाएं: (@ gridColumnWidth * @ columnOffset) + (@ gridGutterWidth * (@ कॉलमऑफसेट - 1)) + @ अतिरिक्त स्थान;
} .