टायपोग्राफिक स्केल

संपूर्ण टायपोग्राफिक ग्रिड आमच्या variables.less फाइलमधील दोन Less व्हेरिएबल्सवर आधारित आहे: @baseFontSizeआणि @baseLineHeight. पहिला संपूर्ण वापरला जाणारा बेस फॉन्ट-आकार आहे आणि दुसरा बेस लाइन-उंची आहे.

आम्ही आमच्या सर्व प्रकारांचे समास, पॅडिंग आणि लाइन-हाइट तयार करण्यासाठी ते चल आणि काही गणिते वापरतो.

उदाहरण मुख्य भाग मजकूर

नुल्लम क्विस रिझस एगेट उर्ना मोलिस ऑर्नरे वेल ईयू लिओ. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur dediculus mus. नल्लम आयडी डोलोर आयडी निभ अल्ट्रीसीज वाहने आणि आयडी एलिट.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

जोर वापरणे

Fusce dapibus , टेलस ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus . Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

टीप: मोकळ्या मनाने <b>आणि <i>HTML5 मध्ये वापरा, परंतु त्यांचा वापर थोडा बदलला आहे. <b>अतिरिक्त महत्त्व न देता शब्द किंवा वाक्प्रचार हायलाइट करण्यासाठी <i>आहे तर मुख्यतः आवाज, तांत्रिक संज्ञा इ.

उदाहरण पत्ते

<address>टॅग कसा वापरला जाऊ शकतो याची येथे दोन उदाहरणे आहेत :

उदाहरण संक्षेप

संक्षेप अप्परकेस मजकूर आणि हलके ठिपके असलेल्या तळाच्या बॉर्डरसह शैलीबद्ध केले आहेत. त्यांच्याकडे होव्हरवर मदत कर्सर देखील आहे त्यामुळे वापरकर्त्यांना होव्हरवर काहीतरी दर्शविल्या जातील असे अतिरिक्त संकेत आहेत.

स्लाईस ब्रेड नंतर HTML ही सर्वोत्तम गोष्ट आहे.

विशेषता शब्दाचे संक्षेप attr आहे .

ब्लॉककोट समाविष्ट करण्यासाठी , कोट म्हणून <blockquote>कोणत्याही HTML भोवती गुंडाळा. सरळ कोटसाठी आम्ही शिफारस करतो <p>.

तुमचा स्रोत उद्धृत करण्यासाठी एक पर्यायी <small>घटक समाविष्ट करा आणि तुम्हाला —स्टाइलिंगच्या उद्देशाने त्यापूर्वी एक em डॅश मिळेल.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. पूर्णांक posuere erat a ante venenatis. </p>
  <small> कोणीतरी प्रसिद्ध </small>
</blockquote>

डीफॉल्ट ब्लॉककोट्स याप्रमाणे शैलीबद्ध केले आहेत:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. पूर्णांक posuere erat a ante venenatis.

कामाच्या शरीरात प्रसिद्ध कोणीतरी

तुमचा ब्लॉककोट उजवीकडे फ्लोट करण्यासाठी, जोडा class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. पूर्णांक posuere erat a ante venenatis.

कामाच्या शरीरात प्रसिद्ध कोणीतरी

क्रमरहित

<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• मस्सा येथे पूर्णांक मोलेस्टी लॉरेम
• प्रीटियम निस्ल अॅलिकेटमध्ये फॅसिलिसिस
• नुल्ला volutpat aliquam velit
  • फॅसेलस आयकुलिस नेक
  • पुरूस सोडलेस ultricies
  • वेस्टिबुलम लाओरेट पोर्टिटर सेम
  • Ac tristique libero volutpat येथे
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• porttitor lorem Eget

अनस्टाइल

<ul class="unstyled">

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• मस्सा येथे पूर्णांक मोलेस्टी लॉरेम
• प्रीटियम निस्ल अॅलिकेटमध्ये फॅसिलिसिस
• नुल्ला volutpat aliquam velit
  • फॅसेलस आयकुलिस नेक
  • पुरूस सोडलेस ultricies
  • वेस्टिबुलम लाओरेट पोर्टिटर सेम
  • Ac tristique libero volutpat येथे
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• porttitor lorem Eget

आज्ञा केली

<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. मस्सा येथे पूर्णांक मोलेस्टी लॉरेम
4. प्रीटियम निस्ल अॅलिकेटमध्ये फॅसिलिसिस
5. नुल्ला volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. porttitor lorem Eget

वर्णन

<dl>

वर्णन याद्या

अटी परिभाषित करण्यासाठी वर्णन सूची योग्य आहे.

Euismod

Vestibulum id ligula porta felis euismod Semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

मालेसुडा पोर्टा

Etiam porta sem malesuada magna mollis euismod.

इनलाइन

सह कोडचे इनलाइन स्निपेट गुंडाळा <code>.

उदाहरणार्थ , <code> विभाग </ code > इनलाइन म्हणून गुंडाळले जावे .  

मूलभूत ब्लॉक

<pre>कोडच्या एकाधिक ओळींसाठी वापरा . योग्य रेंडरिंगसाठी कोणतेही कॅरेट्स त्यांच्या युनिकोड वर्णांमध्ये बदलण्याची खात्री करा.

<p>येथे नमुना मजकूर...</p>

<पूर्व>
  <p>येथे नमुना मजकूर...</p>
</pre>

टीप:<pre> टॅगमधील कोड शक्य तितक्या डावीकडे ठेवण्याचे सुनिश्चित करा ; ते सर्व टॅब रेंडर करेल.

Google Prettify

समान <pre>घटक घ्या आणि वर्धित प्रस्तुतीकरणासाठी दोन पर्यायी वर्ग जोडा.

<p> नमुना मजकूर येथे... </p>

<पूर्व वर्ग = "प्रीटीप्रिंट 
     लिनम" >
  <p>येथे नमुना मजकूर...</p>
</pre>

google-code-prettify डाउनलोड करा आणि कसे वापरावे यासाठी रीडमी पहा.

<टेबल>
  <thead>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</ टेबल>

वाचनीयता सुनिश्चित करण्यासाठी आणि संरचनेची देखरेख करण्यासाठी टेबल्स आपोआप फक्त काही सीमांसह शैलीबद्ध केल्या जातात. 2.0 सह, .tableवर्ग आवश्यक आहे.

<टेबल वर्ग = "टेबल" > 
  …
</ टेबल>

झेब्रा-स्ट्रीपिंग जोडून आपल्या सारण्यांसह थोडे फॅन्सी मिळवा—फक्त .table-stripedवर्ग जोडा.

टीप: स्प्रिटेड टेबल्स :nth-childCSS सिलेक्टर वापरतात आणि IE7-IE8 मध्ये उपलब्ध नाहीत.

<टेबल वर्ग = "टेबल टेबल-स्ट्रीप" > 
  …
</ टेबल>

सौंदर्याच्या उद्देशाने संपूर्ण टेबलाभोवती किनारी आणि गोलाकार कोपरे जोडा.

<टेबल वर्ग = "टेबल टेबल-बॉर्डर" > 
  …
</ टेबल>

.table-condensedटेबल सेल पॅडिंग अर्ध्यामध्ये (8px ते 4px पर्यंत) कट करण्यासाठी क्लास जोडून तुमचे टेबल्स अधिक कॉम्पॅक्ट बनवा .

<टेबल वर्ग = "टेबल टेबल-कंडेन्स्ड" > 
  …
</ टेबल>

कोणत्याही उपलब्ध वर्गाचा वापर करून भिन्न स्वरूप प्राप्त करण्यासाठी कोणतेही टेबल वर्ग एकत्र करण्यास मोकळ्या मनाने.

<टेबल वर्ग = "टेबल टेबल-स्ट्रीप टेबल-बॉर्डर टेबल-कंडेन्स्ड" > 
  ...
</ टेबल>

लवचिक HTML आणि CSS

Bootstrap मधील फॉर्म्सचा सर्वात चांगला भाग म्हणजे तुमचे सर्व इनपुट आणि नियंत्रणे तुम्ही तुमच्या मार्कअपमध्ये कशी तयार केलीत तरीही ती छान दिसतात. अनावश्यक HTML आवश्यक नाही, परंतु ज्यांना त्याची आवश्यकता आहे त्यांच्यासाठी आम्ही नमुने प्रदान करतो.

अधिक क्लिष्ट मांडणी सोप्या स्टाइलिंग आणि इव्हेंट बाइंडिंगसाठी संक्षिप्त आणि स्केलेबल क्लासेससह येतात, त्यामुळे तुम्ही प्रत्येक टप्प्यावर कव्हर करता.

चार लेआउट समाविष्ट

बूटस्ट्रॅप चार प्रकारच्या फॉर्म लेआउटसाठी समर्थनासह येतो:

• अनुलंब (डीफॉल्ट)
• शोधा
• इनलाइन
• क्षैतिज

विविध प्रकारच्या फॉर्म लेआउट्सना मार्कअपमध्ये काही बदल आवश्यक असतात, परंतु नियंत्रणे स्वतःच राहतात आणि सारखीच वागतात.

नियंत्रण राज्ये आणि अधिक

बूटस्ट्रॅपच्या फॉर्ममध्ये इनपुट, टेक्स्टेरिया आणि तुम्हाला अपेक्षित असलेल्या निवडीसारख्या सर्व बेस फॉर्म नियंत्रणांसाठी शैली समाविष्ट आहेत. परंतु हे अनेक सानुकूल घटकांसह देखील येते जसे की जोडलेले आणि प्रीपेंडेड इनपुट आणि चेकबॉक्सेसच्या सूचीसाठी समर्थन.

प्रत्येक प्रकारच्या फॉर्म नियंत्रणासाठी त्रुटी, चेतावणी आणि यश यासारख्या राज्यांचा समावेश केला जातो. अक्षम नियंत्रणासाठी शैली देखील समाविष्ट आहेत.

v2.0 सह, आमच्याकडे फॉर्म स्टाइलसाठी हलके आणि स्मार्ट डीफॉल्ट आहेत. कोणतेही अतिरिक्त मार्कअप नाही, फक्त फॉर्म नियंत्रणे.

डीफॉल्ट वेबकिट शैली प्रतिबिंबित करणे, फक्त .form-searchअतिरिक्त गोलाकार शोध फील्डसाठी जोडा.

इनपुट सुरू करण्यासाठी ब्लॉक पातळी आहेत. .form-inlineआणि साठी .form-horizontal, आम्ही इनलाइन-ब्लॉक वापरतो.

काय समाविष्ट आहे

आम्ही समर्थन करत असलेली सर्व डीफॉल्ट फॉर्म नियंत्रणे डावीकडे दर्शविली आहेत. येथे बुलेट केलेली सूची आहे:

• मजकूर इनपुट (मजकूर, पासवर्ड, ईमेल इ.)
• चेकबॉक्स
• रेडिओ
• निवडा
• एकाधिक निवड
• फाइल इनपुट
• मजकूर

v2.0 सह नवीन डीफॉल्ट

v1.4 पर्यंत, बूटस्ट्रॅपच्या डीफॉल्ट फॉर्म शैली क्षैतिज लेआउट वापरतात. Bootstrap 2 सह, आम्ही कोणत्याही स्वरूपासाठी स्मार्ट, अधिक स्केलेबल डीफॉल्ट असण्यासाठी ते बंधन दूर केले.

ब्राउझरची स्थिती पुन्हा डिझाइन केली

बूटस्ट्रॅप ब्राउझर-समर्थित फोकस आणि स्टेटसाठी शैली वैशिष्ट्यीकृत करते disabled. आम्ही डीफॉल्ट वेबकिट काढून टाकतो outlineआणि box-shadowत्याच्या जागी :focus.

फॉर्म प्रमाणीकरण

यात त्रुटी, चेतावणी आणि यशासाठी प्रमाणीकरण शैली देखील समाविष्ट आहे. वापरण्यासाठी, आसपासच्या मध्ये त्रुटी वर्ग जोडा .control-group.

<फील्डसेट
  वर्ग = "नियंत्रण-समूह त्रुटी" >
  …
</fieldset>

प्रीपेंड आणि अ‍ॅपेंड इनपुट

इनपुट गट—जोडलेल्या किंवा प्रीपेंड केलेल्या मजकुरासह—तुमच्या इनपुटसाठी अधिक संदर्भ देण्यासाठी एक सोपा मार्ग प्रदान करतात. उत्कृष्ट उदाहरणांमध्ये Twitter वापरकर्तानावासाठी @ चिन्ह किंवा वित्तासाठी $ समाविष्ट आहे.

चेकबॉक्स आणि रेडिओ

v1.4 पर्यंत, चेकबॉक्सेस आणि रेडिओ स्टॅक करण्यासाठी बूटस्ट्रॅपला अतिरिक्त मार्कअप आवश्यक आहे. <label class="checkbox">आता, गुंडाळलेल्याची पुनरावृत्ती करणे ही एक साधी बाब आहे <input type="checkbox">.

इनलाइन चेकबॉक्सेस आणि रेडिओ देखील समर्थित आहेत. फक्त .inlineकोणत्याहीमध्ये जोडा .checkboxकिंवा .radioआणि तुम्ही पूर्ण केले.

इनलाइन फॉर्म आणि जोडा/प्रीपेंड करा

इनलाइन फॉर्ममध्ये प्रीपेंड किंवा अॅपेंड इनपुट वापरण्यासाठी, रिक्त स्थानांशिवाय आणि त्याच ओळीवर ठेवण्याची खात्री .add-onकरा input.

फॉर्म मदत मजकूर

तुमच्या फॉर्म इनपुटसाठी मदत मजकूर जोडण्यासाठी , इनपुट घटकानंतर इनलाइन मदत मजकूर <span class="help-inline">किंवा मदत मजकूर ब्लॉक समाविष्ट करा.<p class="help-block">

क्रियांसाठी बटणे

एक नियम म्हणून, बटणे फक्त क्रियांसाठी वापरली जावीत तर हायपरलिंक्स ऑब्जेक्टसाठी वापरली जावीत. उदाहरणार्थ, "डाउनलोड" हे एक बटण असले पाहिजे तर "अलीकडील क्रियाकलाप" एक दुवा असावा.

अँकर आणि फॉर्मसाठी

बटणाच्या शैली लागू केलेल्या कोणत्याही गोष्टीवर लागू केल्या जाऊ शकतात .btn. <a>तथापि, सामान्यत: आपण हे केवळ आणि <button>घटकांवर लागू करू इच्छित असाल .

टीप: सर्व बटणांमध्ये .btnवर्ग समाविष्ट करणे आवश्यक आहे. <button>सुसंगततेसाठी बटण शैली आणि <a>घटक लागू केले पाहिजेत .

अनेक आकार

फॅन्सी मोठी किंवा लहान बटणे? त्यावर आहे!

प्राथमिक कृती कृती

प्राथमिक कृती कृती

अपंग राज्य

अक्षम केलेल्या बटणांसाठी, .btn-disabledदुवे आणि :disabledघटकांसाठी वापरा <button>.

प्राथमिक कृती कृती

प्राथमिक कृती कृती

क्रॉस ब्राउझर सुसंगतता

IE9 मध्ये, आम्ही गोलाकार कोपऱ्यांच्या बाजूने सर्व बटणांवर ग्रेडियंट ड्रॉप करतो कारण IE9 पार्श्वभूमी ग्रेडियंट कोपऱ्यांवर क्रॉप करत नाही.

संबंधित, IE9 अक्षम केलेल्या buttonघटकांना जंकीफाय करते, ओंगळ मजकूर-छायेसह मजकूर राखाडी रेंडर करते—दुर्दैवाने आम्ही याचे निराकरण करू शकत नाही.

स्प्राइट म्हणून बांधले

प्रत्येक आयकॉनला अतिरिक्त विनंती करण्याऐवजी, आम्ही त्यांना स्प्राईटमध्ये संकलित केले आहे—एका फाईलमध्ये प्रतिमांचा एक समूह जो प्रतिमा ठेवण्यासाठी CSS वापरतो background-position. हीच पद्धत आम्ही Twitter.com वर वापरतो आणि ती आमच्यासाठी चांगली आहे.

.icon-आमच्या इतर घटकांप्रमाणेच सर्व आयकॉन वर्ग योग्य नेमस्पेसिंग आणि स्कोपिंगसाठी प्रीफिक्स केलेले आहेत. हे इतर साधनांसह संघर्ष टाळण्यास मदत करेल.

Glyphicons ने आम्हाला आमच्या ओपन-सोर्स टूलकिटमधील Halflings सेट वापरण्याची परवानगी दिली आहे जोपर्यंत आम्ही डॉक्समध्ये लिंक आणि क्रेडिट प्रदान करतो. कृपया तुमच्या प्रकल्पांमध्ये असेच करण्याचा विचार करा.

कसे वापरावे

v2.0.0 सह, आम्ही <i>आमच्या सर्व चिन्हांसाठी टॅग वापरण्याची निवड केली आहे, परंतु त्यांच्याकडे केस वर्ग नाही-केवळ सामायिक केलेला उपसर्ग. वापरण्यासाठी, खालील कोड कुठेही ठेवा:

<i class = "icon-search" ></i> 

उलटे (पांढरे) चिन्हांसाठी शैली देखील उपलब्ध आहेत, एका अतिरिक्त वर्गासह तयार केले आहेत:

<i class = "icon-search icon-white" ></i> 

तुमच्या चिन्हांसाठी निवडण्यासाठी 120 वर्ग आहेत. फक्त <i>योग्य वर्गांसह एक टॅग जोडा आणि तुम्ही सेट आहात. तुम्ही संपूर्ण यादी sprites.less मध्ये किंवा येथे या दस्तऐवजात शोधू शकता.

केसेस वापरा

चिन्ह उत्तम आहेत, पण ते कुठे वापरायचे? येथे काही कल्पना आहेत:

• तुमच्या साइडबार नेव्हिगेशनसाठी व्हिज्युअल म्हणून
• पूर्णपणे आयकॉन-चालित नेव्हिगेशनसाठी
• क्रियेचा अर्थ सांगण्यास मदत करण्यासाठी बटणांसाठी
• वापरकर्त्याच्या गंतव्यस्थानावर संदर्भ सामायिक करण्यासाठी लिंकसह

मूलत:, तुम्ही कुठेही <i>टॅग लावू शकता, तुम्ही चिन्ह लावू शकता.

रिफ्रेश करा तपासा हटवा

टिप्पणी सेटिंग्ज अधिक माहिती