मुद्रण स्केल

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

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

उदाहरण देह पाठ

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

Vivamus sagittis lacus vel augue laoreet रटरुम फौसिबस डोलोर नीलामी. Duis mollis, est गैर commodo luctus, nisi erat porttitor ligula, eget lacinia odio सेम nec अभिजात वर्ग. डोनेक सेद ओडियो दुई।

बोधस्य प्रयोगः

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

नोटः-<b> HTML5 इत्यस्मिन् च उपयोगाय निःशङ्कं भवन्तु <i>, परन्तु तेषां उपयोगः किञ्चित् परिवर्तितः अस्ति । <b>अतिरिक्त महत्त्वं न दत्त्वा शब्दान् वा वाक्यानि वा प्रकाशयितुं अभिप्रेतम् अस्ति यदा <i>तु अधिकतया स्वरस्य, तकनीकीपदानां इत्यादीनां कृते भवति।

उदाहरण सम्बोधन

<address>अत्र टैग् कथं उपयोक्तुं शक्यते इति उदाहरणद्वयम् अस्ति ।

उदाहरण संक्षिप्त नाम

संक्षिप्तरूपाः बृहत्पाठेन लघुबिन्दुयुक्तेन अधः सीमायाः च शैलीकृताः सन्ति । तेषु hover इत्यत्र help cursor अपि अस्ति अतः उपयोक्तृभ्यः अतिरिक्तं संकेतं भवति hover इत्यत्र किमपि दर्शितं भविष्यति ।

HTML इत्येतत् sliced ​​bread इत्यस्मात् परं सर्वोत्तमम् अस्ति।

विशेषणशब्दस्य एकः संक्षिप्तः नाम attr अस्ति .

ब्लॉककोट् समावेशयितुं, उद्धरणरूपेण <blockquote>किमपि HTML परितः वेष्टयन्तु । सीधा उद्धरणार्थं वयं एकं <p>.

स्वस्य स्रोतः उद्धृतुं वैकल्पिकं <small>तत्त्वं समावेशयन्तु तथा च भवन्तः —स्टाइलिंग् प्रयोजनार्थं तस्मात् पूर्वं em dash प्राप्नुवन्ति ।

<blockquote> इति
  <p> लोरेम इप्सम डोलोर बैठा अमेत, consectetur adipiscing elit. पूर्णांक posuere erat a ante venenatis. </p> इति
  <लघु> कश्चित् प्रसिद्धः </small>
</blockquote> इति

पूर्वनिर्धारितं blockquotes इत्येतत् एवम् शैलीकृतम् अस्ति :

लोरेम इप्सम डोलोर बैठा amet, consectetur adipiscing अभिजात वर्ग. पूर्णांक posuere erat a ante venenatis.

Body of work इत्यस्मिन् कश्चन प्रसिद्धः

स्वस्य blockquote दक्षिणतः प्लवितुं, योजयन्तु class="pull-right":

लोरेम इप्सम डोलोर बैठा amet, consectetur adipiscing अभिजात वर्ग. पूर्णांक posuere erat a ante venenatis.

Body of work इत्यस्मिन् कश्चन प्रसिद्धः

अक्रमितम्

<ul>

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

अशैली

<ul class="unstyled">

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

आदेशित

<ol>

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

वर्णनम्‌

<dl>

वर्णन सूची

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

यूइस्मोदः

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

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

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

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

इनलाइन

कोडस्य इनलाइन स्निपेट्स् इत्यनेन सह लपेटयन्तु <code>।

यथा , <code> विभागः < / code > inline इति वेष्टितव्यः |  

मूलखण्डः

<pre>कोडस्य बहुपङ्क्तयः कृते उपयुज्यताम् । सम्यक् प्रतिपादनार्थं कस्यापि कैरेट् इत्यस्य यूनिकोडवर्णेषु अवश्यं परिवर्तयन्तु ।

<p>अत्र नमूना पाठः...</p>

<पूर्व> इति
  <p>अत्र नमूना पाठः...</p>
</pre> इति

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

गूगल प्रीटिफाई

समानं <pre>तत्वं गृहीत्वा वर्धितप्रतिपादनार्थं वैकल्पिकवर्गद्वयं योजयन्तु ।

<p> अत्र पाठस्य नमूना... </p>

<pre class = "सुन्दरमुद्रणम्।" 
     रेखाङ्काः" >
  <p>अत्र नमूना पाठः...</p>
</pre> इति

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

<सारणी>
  <शिरः> इति
    <त्र> इति
      <थ> ... </th> इति
      <थ> ... </th> इति
    </tr> इति
  </thead> इति
  <त्काय> इति
    <त्र> इति
      <td> ... </td> इति
      <td> ... </td> इति
    </tr> इति
  </tbody> इति
</table> इति

पठनीयतां सुनिश्चित्य संरचनां निर्वाहयितुं सारणीः स्वयमेव केवलं कतिपयैः सीमाभिः सह शैलीकृताः भवन्ति । २.० इत्यनेन सह .tableवर्गः आवश्यकः ।

<सारणी वर्ग = "सारणी" > 
  ...
</table> इति

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

नोट्: स्प्रिट्-सारणीः :nth-childCSS चयनकस्य उपयोगं कुर्वन्ति तथा च IE7-IE8 मध्ये उपलब्धं नास्ति ।

<table class = "सारणी तालिका-धारी" > 
  ...
</table> इति

सौन्दर्यार्थं सम्पूर्णे मेजस्य परितः सीमाः, गोलकोणानि च योजयन्तु।

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

.table-condensedtable cell padding इत्यस्य अर्धभागे (8px तः 4px पर्यन्तं) कटयितुं वर्गं योजयित्वा स्वसारणीः अधिकं संकुचितं कुर्वन्तु ।

<table class = "सारणी सारणी-सघन" > 
  ...
</table> इति

उपलब्धवर्गेषु कस्यापि उपयोगेन भिन्नरूपं प्राप्तुं सारणीवर्गेषु कस्यापि संयोजनं कर्तुं निःशङ्कं भवन्तु।

<table class = "सारणी सारणी-पट्टिकायुक्ता सारणी-सीमायुक्ता सारणी-घनीभूता" > 
  ...
</table> इति

लचीला HTML तथा CSS

Bootstrap मध्ये forms विषये सर्वोत्तमः भागः अस्ति यत् भवतः सर्वे इनपुट् नियन्त्रणानि च महान् दृश्यन्ते यद्यपि भवान् स्वस्य मार्कअप मध्ये तान् कथं निर्माति। अनावश्यकं HTML आवश्यकं नास्ति, परन्तु येषां आवश्यकता वर्तते तेषां कृते वयं प्रतिमानं प्रदामः ।

अधिकजटिलविन्यासाः संक्षिप्तशैलीकरणाय तथा घटनाबन्धनार्थं संक्षिप्तैः स्केलयोग्यवर्गैः सह आगच्छन्ति, अतः भवन्तः प्रत्येकं पदे आच्छादिताः भवन्ति ।

चत्वारः विन्यासाः समाविष्टाः

बूटस्ट्रैप् चतुर्णां प्रकारस्य प्रपत्रविन्यासानां समर्थनेन सह आगच्छति:

• ऊर्ध्वाधर (पूर्वनिर्धारित) .
• अन्वेषण
• इनलाइन
• क्षैतिज

विभिन्नप्रकारस्य रूपविन्यासस्य मार्कअपार्थं किञ्चित् परिवर्तनस्य आवश्यकता भवति, परन्तु नियन्त्रणानि एव समानानि एव तिष्ठन्ति, व्यवहारं च कुर्वन्ति ।

नियन्त्रण अवस्थाः इत्यादीनि च

Bootstrap इत्यस्य प्रपत्रेषु सर्वेषां आधाररूपनियन्त्रणानां कृते शैल्याः सन्ति यथा input, textarea, चयनं च यत् भवान् अपेक्षते । परन्तु इदं appended तथा prepended inputs इत्यादीनां custom components इत्यस्य संख्यायाः सह अपि आगच्छति तथा च checkboxes इत्यस्य सूचीनां समर्थनम् अस्ति ।

प्रत्येकं प्रकारस्य रूपनियन्त्रणस्य कृते त्रुटिः, चेतावनी, सफलता च इत्यादीनि अवस्थानि समाविष्टानि सन्ति । अक्षमनियन्त्रणानां कृते शैल्याः अपि समाविष्टाः सन्ति ।

v2.0 इत्यनेन सह अस्माकं form styles कृते लघुतरं स्मार्टतरं च पूर्वनिर्धारितं भवति । अतिरिक्तं मार्कअपं नास्ति, केवलं नियन्त्रणानि प्रपत्राणि।

पूर्वनिर्धारित WebKit शैल्याः प्रतिबिम्बयन्, केवलं .form-searchअतिरिक्तगोल अन्वेषणक्षेत्राणां कृते योजयन्तु ।

इनपुट् आरभ्यतुं ब्लॉक लेवल भवन्ति। .form-inlineand कृते .form-horizontalवयं inline-block इत्यस्य उपयोगं कुर्मः ।

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

वामे दर्शिताः सर्वे पूर्वनिर्धारितरूपनियन्त्रणानि वयं समर्थयामः । अत्र बुलेटयुक्ता सूची अस्ति :

• पाठनिवेशाः (पाठः, गुप्तशब्दः, ईमेल इत्यादयः)
• चेकबॉक्स
• रेडियो
• विचि
• बहु चयनम्
• सञ्चिका इनपुट्
• पाठक्षेत्रम्

v2.0 इत्यनेन सह नूतनानि पूर्वनिर्धारितानि

v1.4 पर्यन्तं Bootstrap इत्यस्य पूर्वनिर्धारितरूपशैल्याः क्षैतिजविन्यासस्य उपयोगः कृतः । Bootstrap 2 इत्यनेन वयं तत् बाध्यतां निष्कासितवन्तः यत् कस्यापि रूपस्य कृते स्मार्टतरं, अधिकं स्केल-करणीयं पूर्वनिर्धारितं भवति ।

पुनर्निर्मितं ब्राउजर् राज्यम्

disabledबूटस्ट्रैप् ब्राउजर्-समर्थित-केन्द्रित- राज्यानां कृते शैल्याः विशेषतां ददाति । वयं पूर्वनिर्धारितं Webkit निष्कासयामः तथा च in it's place for कृते outlineएकं प्रयोजयामः ।box-shadow:focus

प्रपत्र सत्यापन

अस्मिन् दोषाणां, चेतावनीनां, सफलतायाः च प्रमाणीकरणशैल्याः अपि समाविष्टाः सन्ति । उपयोगाय, परितः मध्ये त्रुटिवर्गं योजयन्तु .control-group।

<क्षेत्रसमूहः
  class = "नियन्त्रण-समूह त्रुटि" >
  ...
</fieldset> इति

इनपुट् प्रीपेण्ड् एवं संलग्न करें

इनपुट् समूहाः—संलग्नेन वा पूर्वेण वा पाठेन सह—भवतः निवेशानां कृते अधिकं सन्दर्भं दातुं सुलभं मार्गं प्रदान्ति । महान् उदाहरणानि सन्ति ट्विटर-उपयोक्तृनामानां कृते @ चिह्नं अथवा वित्तस्य कृते $ इति ।

चेकबॉक्स एवं रेडियो

v1.4 पर्यन्तं, Bootstrap इत्यस्य चेकबॉक्स् रेडियो च परितः अतिरिक्तं मार्कअप् आवश्यकम् आसीत् तान् स्तम्भयितुं । अधुना, इदं सरलं विषयं पुनरावृत्तिः <label class="checkbox">यत् wraps the <input type="checkbox">.

इन्लाइन् चेकबॉक्स् रेडियो च समर्थिताः सन्ति । .inlineकेवलं कस्मिंश्चित् .checkboxवा योजयन्तु .radioतथा च भवन्तः कृतवन्तः।

Inline forms तथा append/prepend

.add-oninline रूपे prepend अथवा append इनपुट् इत्यस्य उपयोगाय, and inputइत्येतत् एकस्मिन् एव रेखायां, रिक्तस्थानं विना, अवश्यं स्थापयन्तु ।

सहायता पाठ को रूप दें

स्वस्य प्रपत्रनिवेशानां कृते सहायतापाठं योजयितुं, निवेशतत्त्वस्य अनन्तरं सह inline help text with <span class="help-inline">अथवा help text block with इति समावेशयन्तु ।<p class="help-block">

क्रियाणां कृते बटन्स्

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

लंगराणां रूपाणां च कृते

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

नोटः-.btn सर्वेषु बटन्-मध्ये वर्गः अवश्यमेव समाविष्टः भवति । बटनशैल्याः प्रयोक्तव्याः <button>तथा च <a>स्थिरतायै तत्त्वानि ।

बहु आकाराः

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

प्राथमिक क्रिया नामपत्र

प्राथमिक क्रिया नामपत्र

अक्षम अवस्था

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

प्राथमिक क्रिया नामपत्र

प्राथमिक क्रिया नामपत्र

क्रॉस ब्राउज़र संगतता

IE9 इत्यस्मिन् वयं गोलकोणानां पक्षे सर्वेषु बटनेषु ढालं पातयामः यतः IE9 कोणेषु पृष्ठभूमिप्रवणतां न सस्यति ।

सम्बन्धित, IE9 अक्षमतत्त्वान् janifies करोति button, पाठं एकेन दुर्गन्धयुक्तेन पाठ-छाया सह धूसरं प्रतिपादयति-दुर्भाग्येन वयं एतत् समाधातुं न शक्नुमः।

स्प्राइट् इत्यस्य रूपेण निर्मितम्

प्रत्येकं चिह्नं अतिरिक्तं अनुरोधं कर्तुं स्थाने, वयं तान् एकस्मिन् sprite मध्ये संकलितवन्तः-एकस्मिन् सञ्चिकायां चित्राणां समूहः यः CSS इत्यस्य उपयोगेन चित्राणि background-positionस्थापयति एषा एव पद्धतिः वयं Twitter.com इत्यत्र उपयुञ्ज्महे तथा च अस्माकं कृते साधु कार्यं कृतवती।

सर्वे चिह्नवर्गाः .icon-सम्यक् नामान्तरणस्य व्याप्तिकरणस्य च कृते सह उपसर्गः भवति, अस्माकं अन्येषां घटकानां इव । एतेन अन्यैः साधनैः सह विग्रहं परिहरितुं साहाय्यं भविष्यति ।

Glyphicons इत्यनेन अस्माकं open-source toolkit इत्यस्मिन् Halflings सेट् इत्यस्य उपयोगः अनुमोदितः यत् वयं अत्र docs इत्यत्र लिङ्क् क्रेडिट् च प्रदामः। कृपया स्वप्रकल्पेषु अपि तथैव कर्तुं विचारयन्तु।

कथं प्रयोगः

v2.0.0 इत्यनेन सह वयं <i>अस्माकं सर्वेषां चिह्नानां कृते टैग् इत्यस्य उपयोगं कर्तुं विकल्पितवन्तः, परन्तु तेषु केस क्लास् नास्ति-केवलं साझा उपसर्गः । उपयोगाय निम्नलिखितसङ्केतं प्रायः कुत्रापि स्थापयन्तु ।

<i class = "चिह्न-अन्वेषण" </i> 

उल्टा (श्वेत) चिह्नानां कृते अपि शैल्याः उपलभ्यन्ते, एकेन अतिरिक्तवर्गेण सह सज्जाः कृताः:

<i class = "चिह्न-अन्वेषण चिह्न-श्वेत" ></i> 

भवतः चिह्नानां कृते १२० वर्गाः चयनार्थं सन्ति । केवलं समीचीनवर्गैः सह एकं टैग् योजयन्तु <i>ततः भवन्तः सेट् भवन्ति । पूर्णसूचीं sprites.less इत्यत्र अथवा अत्रैव अस्मिन् दस्तावेजे द्रष्टुं शक्नुवन्ति ।

प्रयोग केस

चिह्नानि महान् सन्ति, परन्तु तान् कुत्र उपयुज्यते स्म ? अत्र कतिचन विचाराः सन्ति- १.

• भवतः पार्श्वपट्टिकायाः ​​नेविगेशनस्य कृते दृश्यरूपेण
• विशुद्धरूपेण चिह्न-सञ्चालितस्य नेविगेशनस्य कृते
• क्रियायाः अर्थं बोधयितुं सहायकं भवितुं बटन् कृते
• उपयोक्तुः गन्तव्यस्थाने सन्दर्भं साझां कर्तुं लिङ्कैः सह

मूलतः, यत्र कुत्रापि भवन्तः <i>टैग् स्थापयितुं शक्नुवन्ति, तत्र भवन्तः चिह्नं स्थापयितुं शक्नुवन्ति ।

ताज़ा करें चेकआउट करें लुप्

टिप्पणी सेटिंग्स् अधिक जानकारी