स्कॅफोल्डिंगच्या शीर्षस्थानी, ताजे, सुसंगत स्वरूप आणि अनुभव देण्यासाठी मूलभूत HTML घटकांची शैली आणि विस्तारित वर्गांसह वाढ केली जाते.
संपूर्ण टायपोग्राफिक ग्रिड आमच्या 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.
| घटक | वापर | ऐच्छिक |
|---|---|---|
<strong> |
महत्त्वाच्या मजकुराच्या स्निपेटवर जोर देण्यासाठी | काहीही नाही |
<em> |
तणावासह मजकूराच्या स्निपेटवर जोर देण्यासाठी | काहीही नाही |
<abbr> |
होवरवर विस्तारित आवृत्ती दर्शविण्यासाठी संक्षेप आणि परिवर्णी शब्द गुंडाळते |
.initialismअप्परकेस संक्षेपांसाठी वर्ग वापरा . |
<address> |
त्याच्या जवळच्या पूर्वज किंवा संपूर्ण कार्याच्या संपर्क माहितीसाठी | यासह सर्व ओळी समाप्त करून स्वरूपन जतन करा<br> |
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>टॅग कसा वापरला जाऊ शकतो याची येथे दोन उदाहरणे आहेत :
विशेषता असलेल्या संक्षेपांमध्ये titleहलकी ठिपके असलेली तळाशी सीमा असते आणि होव्हरवर मदत कर्सर असतो. हे वापरकर्त्यांना होव्हरवर काहीतरी दाखवले जाईल असे अतिरिक्त संकेत देते.
initialismवर्गाला थोडा लहान मजकूर आकार देऊन टायपोग्राफिक सुसंवाद वाढवण्यासाठी संक्षेपात जोडा .
स्लाईस ब्रेड नंतर HTML ही सर्वोत्तम गोष्ट आहे.
विशेषता शब्दाचे संक्षेप attr आहे .
| घटक | वापर | ऐच्छिक |
|---|---|---|
<blockquote> |
दुसर्‍या स्त्रोताकडील सामग्री उद्धृत करण्यासाठी ब्लॉक-स्तरीय घटक |
.pull-leftआणि वर्ग.pull-right |
<small> |
वापरकर्ता-मुखी उद्धरण जोडण्यासाठी पर्यायी घटक, विशेषत: कामाचे शीर्षक असलेले लेखक | <cite>शीर्षक किंवा स्त्रोताच्या नावाभोवती ठेवा |
ब्लॉककोट समाविष्ट करण्यासाठी , कोट म्हणून <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>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
सह कोडचे इनलाइन स्निपेट गुंडाळा <code>.
- उदाहरणार्थ , <code> विभाग </ code > इनलाइन म्हणून गुंडाळले जावे .
<pre>कोडच्या एकाधिक ओळींसाठी वापरा . योग्य रेंडरिंगसाठी कोडमधील कोणत्याही कोन कंसातून बाहेर पडण्याची खात्री करा.
<p>येथे नमुना मजकूर...</p>
- <पूर्व>
- <p>येथे नमुना मजकूर...</p>
- </pre>
टीप:<pre> टॅगमधील कोड शक्य तितक्या डावीकडे ठेवण्याचे सुनिश्चित करा ; ते सर्व टॅब रेंडर करेल.
तुम्ही वैकल्पिकरित्या .pre-scrollableवर्ग जोडू शकता जो 350px ची कमाल-उंची सेट करेल आणि y-अक्ष स्क्रोलबार प्रदान करेल.
समान <pre>घटक घ्या आणि वर्धित प्रस्तुतीकरणासाठी दोन पर्यायी वर्ग जोडा.
- <p> नमुना मजकूर येथे... </p>
- <पूर्व वर्ग = "प्रीटीप्रिंट
- लिनम" >
- <p>येथे नमुना मजकूर...</p>
- </pre>
google-code-prettify डाउनलोड करा आणि कसे वापरावे यासाठी रीडमी पहा.
| टॅग करा | वर्णन |
|---|---|
<table> |
सारणी स्वरूपात डेटा प्रदर्शित करण्यासाठी रॅपिंग घटक |
<thead> |
<tr>टेबल स्तंभांना लेबल करण्यासाठी टेबल शीर्षलेख पंक्ती ( ) साठी कंटेनर घटक |
<tbody> |
<tr>सारणीच्या मुख्य भागामध्ये टेबल पंक्ती ( ) साठी कंटेनर घटक |
<tr> |
एका पंक्तीवर दिसणार्‍या टेबल सेल ( <td>किंवा ) च्या संचासाठी कंटेनर घटक<th> |
<td> |
डीफॉल्ट टेबल सेल |
<th> |
स्तंभासाठी विशेष टेबल सेल (किंवा पंक्ती, व्याप्ती आणि प्लेसमेंटवर अवलंबून) लेबल्समध्ये वापरणे आवश्यक आहे <thead> |
<caption> |
टेबलमध्ये काय आहे याचे वर्णन किंवा सारांश, विशेषतः स्क्रीन वाचकांसाठी उपयुक्त |
- <टेबल>
- <thead>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </ टेबल>
| नाव | वर्ग | वर्णन |
|---|---|---|
| डीफॉल्ट | काहीही नाही | कोणत्याही शैली नाहीत, फक्त स्तंभ आणि पंक्ती |
| बेसिक | .table |
ओळींमधील फक्त क्षैतिज रेषा |
| किनारी | .table-bordered |
कोपरे गोलाकार करतो आणि बाह्य सीमा जोडतो |
| झेब्रा-पट्टे | .table-striped |
विषम पंक्तींमध्ये हलका राखाडी पार्श्वभूमी रंग जोडतो (1, 3, 5, इ.) |
| घनरूप | .table-condensed |
tdसर्व आणि thघटकांमध्ये , 8px ते 4px पर्यंत, उभ्या पॅडिंगला अर्ध्यामध्ये कापते |
वाचनीयता सुनिश्चित करण्यासाठी आणि संरचनेची देखरेख करण्यासाठी टेबल्स आपोआप फक्त काही सीमांसह शैलीबद्ध केल्या जातात. 2.0 सह, .tableवर्ग आवश्यक आहे.
- <टेबल वर्ग = "टेबल" >
- …
- </ टेबल>
| # | पहिले नाव | आडनाव | वापरकर्तानाव |
|---|---|---|---|
| १ | खूण करा | ओटो | @mdo |
| 2 | जेकब | थॉर्नटन | @फॅट |
| 3 | लॅरी | पक्षी | @ट्विटर |
झेब्रा-स्ट्रीपिंग जोडून आपल्या सारण्यांसह थोडे फॅन्सी मिळवा—फक्त .table-stripedवर्ग जोडा.
टीप: स्ट्रीप्ड टेबल्स :nth-childCSS सिलेक्टर वापरतात आणि IE7-IE8 मध्ये उपलब्ध नाहीत.
- <टेबल वर्ग = "टेबल टेबल-स्ट्रीप" >
- …
- </ टेबल>
| # | पहिले नाव | आडनाव | वापरकर्तानाव |
|---|---|---|---|
| १ | खूण करा | ओटो | @mdo |
| 2 | जेकब | थॉर्नटन | @फॅट |
| 3 | लॅरी | पक्षी | @ट्विटर |
सौंदर्याच्या उद्देशाने संपूर्ण टेबलाभोवती किनारी आणि गोलाकार कोपरे जोडा.
- <टेबल वर्ग = "टेबल टेबल-बॉर्डर" >
- …
- </ टेबल>
| # | पहिले नाव | आडनाव | वापरकर्तानाव |
|---|---|---|---|
| १ | खूण करा | ओटो | @mdo |
| खूण करा | ओटो | @getbootstrap | |
| 2 | जेकब | थॉर्नटन | @फॅट |
| 3 | लॅरी द बर्ड | @ट्विटर | |
.table-condensedटेबल सेल पॅडिंग अर्ध्यामध्ये (8px ते 4px पर्यंत) कट करण्यासाठी क्लास जोडून तुमचे टेबल्स अधिक कॉम्पॅक्ट बनवा .
- <टेबल वर्ग = "टेबल टेबल-कंडेन्स्ड" >
- …
- </ टेबल>
| # | पहिले नाव | आडनाव | वापरकर्तानाव |
|---|---|---|---|
| १ | खूण करा | ओटो | @mdo |
| 2 | जेकब | थॉर्नटन | @फॅट |
| 3 | लॅरी द बर्ड | @ट्विटर | |
कोणत्याही उपलब्ध वर्गाचा वापर करून भिन्न स्वरूप प्राप्त करण्यासाठी कोणतेही टेबल वर्ग एकत्र करण्यास मोकळ्या मनाने.
- <टेबल वर्ग = "टेबल टेबल-स्ट्रीप टेबल-बॉर्डर टेबल-कंडेन्स्ड" >
- ...
- </ टेबल>
| पूर्ण नाव | |||
|---|---|---|---|
| # | पहिले नाव | आडनाव | वापरकर्तानाव |
| १ | खूण करा | ओटो | @mdo |
| 2 | जेकब | थॉर्नटन | @फॅट |
| 3 | लॅरी द बर्ड | @ट्विटर | |
Bootstrap मधील फॉर्म्सचा सर्वात चांगला भाग म्हणजे तुमचे सर्व इनपुट आणि नियंत्रणे तुम्ही तुमच्या मार्कअपमध्ये कशी तयार केलीत तरीही ती छान दिसतात. अनावश्यक HTML आवश्यक नाही, परंतु ज्यांना त्याची आवश्यकता आहे त्यांच्यासाठी आम्ही नमुने प्रदान करतो.
अधिक क्लिष्ट मांडणी सोप्या स्टाइलिंग आणि इव्हेंट बाइंडिंगसाठी संक्षिप्त आणि स्केलेबल क्लासेससह येतात, त्यामुळे तुम्ही प्रत्येक टप्प्यावर कव्हर करता.
बूटस्ट्रॅप चार प्रकारच्या फॉर्म लेआउटसाठी समर्थनासह येतो:
विविध प्रकारच्या फॉर्म लेआउट्सना मार्कअपमध्ये काही बदल आवश्यक असतात, परंतु नियंत्रणे स्वतःच राहतात आणि सारखीच वागतात.
बूटस्ट्रॅपच्या फॉर्ममध्ये इनपुट, टेक्स्टेरिया आणि तुम्हाला अपेक्षित असलेल्या निवडीसारख्या सर्व बेस फॉर्म नियंत्रणांसाठी शैली समाविष्ट आहेत. परंतु हे अनेक सानुकूल घटकांसह देखील येते जसे की जोडलेले आणि प्रीपेंडेड इनपुट आणि चेकबॉक्सेसच्या सूचीसाठी समर्थन.
प्रत्येक प्रकारच्या फॉर्म नियंत्रणासाठी त्रुटी, चेतावणी आणि यश यासारख्या राज्यांचा समावेश केला जातो. अक्षम नियंत्रणासाठी शैली देखील समाविष्ट आहेत.
बूटस्ट्रॅप सामान्य वेब फॉर्मच्या चार शैलींसाठी साधे मार्कअप आणि शैली प्रदान करते.
| नाव | वर्ग | वर्णन |
|---|---|---|
| अनुलंब (डीफॉल्ट) | .form-vertical (आवश्यक नाही) |
स्टॅक केलेले, नियंत्रणांवर डावीकडे संरेखित लेबल |
| इनलाइन | .form-inline |
कॉम्पॅक्ट शैलीसाठी डावीकडे संरेखित लेबल आणि इनलाइन-ब्लॉक नियंत्रणे |
| शोधा | .form-search |
विशिष्ट शोध सौंदर्यासाठी अतिरिक्त-गोलाकार मजकूर इनपुट |
| क्षैतिज | .form-horizontal |
डावीकडे, उजवीकडे संरेखित लेबले नियंत्रणांप्रमाणेच त्याच ओळीवर फ्लोट करा |
v2.0 सह, आमच्याकडे फॉर्म स्टाइलसाठी हलके आणि स्मार्ट डीफॉल्ट आहेत. कोणतेही अतिरिक्त मार्कअप नाही, फक्त फॉर्म नियंत्रणे.
- <फॉर्म वर्ग = "वेल" >
- <label> लेबल नाव </label>
- <इनपुट प्रकार = "मजकूर" वर्ग = "span3" प्लेसहोल्डर = "काहीतरी टाइप करा..." >
- <span वर्ग = "help-inline" > संबद्ध मदत मजकूर! </span>
- <लेबल वर्ग = "चेकबॉक्स" >
- <इनपुट प्रकार = "चेकबॉक्स" > मला तपासा
- </label>
- <button type = "submit" class = "btn" > सबमिट करा </button>
- </form>
डीफॉल्ट वेबकिट शैली प्रतिबिंबित करणे, फक्त .form-searchअतिरिक्त गोलाकार शोध फील्डसाठी जोडा.
- <फॉर्म वर्ग = "वेल फॉर्म-सर्च" >
- <इनपुट प्रकार = "मजकूर" वर्ग = "इनपुट-माध्यम शोध-क्वेरी" >
- <button type = "submit" class = "btn" > शोधा </button>
- </form>
इनपुट सुरू करण्यासाठी ब्लॉक पातळी आहेत. .form-inlineआणि साठी .form-horizontal, आम्ही इनलाइन-ब्लॉक वापरतो.
- <फॉर्म वर्ग = "वेल फॉर्म-इनलाइन" >
- <इनपुट प्रकार = "टेक्स्ट" वर्ग = "इनपुट-स्मॉल" प्लेसहोल्डर = "ईमेल" >
- <इनपुट प्रकार = "पासवर्ड" वर्ग = "इनपुट-स्मॉल" प्लेसहोल्डर = "पासवर्ड" >
- <लेबल वर्ग = "चेकबॉक्स" >
- <इनपुट प्रकार = "चेकबॉक्स" > मला लक्षात ठेवा
- </label>
- <button type = "submit" class = "btn" > साइन इन करा </button>
- </form>
वरील उदाहरण फॉर्म लेआउट दिल्यास, प्रथम इनपुट आणि नियंत्रण गटाशी संबंधित मार्कअप येथे आहे. स्टाईलिंगसाठी .control-group, .control-label, आणि .controlsवर्ग सर्व आवश्यक आहेत.
- <फॉर्म वर्ग = "फॉर्म-क्षैतिज" >
- <fieldset>
- <legend> आख्यायिका मजकूर </legend>
- <div वर्ग = "कंट्रोल-ग्रुप" >
- <label class = "control-label" for = "input01" > मजकूर इनपुट </label>
- <div वर्ग = "नियंत्रण" >
- <इनपुट प्रकार = "मजकूर" वर्ग = "इनपुट-एक्सलार्ज" आयडी = "इनपुट 01" >
- <p class = "help-block" > सहाय्यक मदत मजकूर </p>
- </div>
- </div>
- </fieldset>
- </form>
आम्ही समर्थन करत असलेली सर्व डीफॉल्ट फॉर्म नियंत्रणे डावीकडे दर्शविली आहेत. येथे बुलेट केलेली सूची आहे:
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">
प्रत्येक आयकॉनला अतिरिक्त विनंती करण्याऐवजी, आम्ही त्यांना स्प्राईटमध्ये संकलित केले आहे—एका फाईलमध्ये प्रतिमांचा एक समूह जो प्रतिमा ठेवण्यासाठी CSS वापरतो background-position. हीच पद्धत आम्ही Twitter.com वर वापरतो आणि ती आमच्यासाठी चांगली आहे.
.icon-आमच्या इतर घटकांप्रमाणेच सर्व आयकॉन वर्ग योग्य नेमस्पेसिंग आणि स्कोपिंगसाठी प्रीफिक्स केलेले आहेत. हे इतर साधनांसह संघर्ष टाळण्यास मदत करेल.
Glyphicons ने आम्हाला आमच्या ओपन-सोर्स टूलकिटमधील Halflings सेट वापरण्याची परवानगी दिली आहे जोपर्यंत आम्ही डॉक्समध्ये लिंक आणि क्रेडिट प्रदान करतो. कृपया तुमच्या प्रकल्पांमध्ये असेच करण्याचा विचार करा.
बूटस्ट्रॅप <i>सर्व चिन्हांसाठी टॅग वापरते, परंतु त्यांच्याकडे केस वर्ग नाही-केवळ सामायिक केलेला उपसर्ग. वापरण्यासाठी, खालील कोड कुठेही ठेवा:
- <i class = "icon-search" ></i>
उलटे (पांढरे) चिन्हांसाठी शैली देखील उपलब्ध आहेत, एका अतिरिक्त वर्गासह तयार केले आहेत:
- <i class = "icon-search icon-white" ></i>
तुमच्या चिन्हांसाठी निवडण्यासाठी 120 वर्ग आहेत. फक्त <i>योग्य वर्गांसह एक टॅग जोडा आणि तुम्ही सेट आहात. तुम्ही संपूर्ण यादी sprites.less मध्ये किंवा येथे या दस्तऐवजात शोधू शकता.
सावधान! मजकुराच्या स्ट्रिंग्सच्या बाजूला वापरताना, जसे की बटणे किंवा एनएव्ही लिंक्समध्ये, <i>योग्य अंतरासाठी टॅग नंतर एक जागा सोडण्याची खात्री करा.
चिन्ह उत्तम आहेत, पण ते कुठे वापरायचे? येथे काही कल्पना आहेत:
मूलत:, तुम्ही कुठेही <i>टॅग लावू शकता, तुम्ही चिन्ह लावू शकता.
टूलबार, नेव्हिगेशन किंवा प्रीपेंडेड फॉर्म इनपुटसाठी बटणे, बटण गटांमध्ये त्यांचा वापर करा.