पाळणीचेर, मुळावे HTML घटक ताजें, सुसंगत दिसप आनी भाव दिवपाक विस्तार करपाक येवपी वर्गां सयत शैली आनी वाडयल्ले आसात.
पुराय मुद्रण जाळी आमच्या variables.less फायलीन दोन Less चडांत चड आदारीत आसा: @baseFontSize
आनी @baseLineHeight
. पयलो पुराय वापरिल्लो बेस फॉन्ट-आकार आनी दुसरो बेस लायन-उंचाय.
आमी त्या व्हेरिएबल्स, आनी कांय गणित, आमच्या सगळ्या प्रकाराचे आनी हेर मार्जिन, पॅडिंग, आनी लायन-हायट्स तयार करपाक वापरतात.
नुल्लम क्विस रिसुस एगेट उर्ना मोलिस ऑर्नारे वेल इउ लियो. कम सोसायस नाटोक पेनाटिबस एट मॅग्निस डिस पार्ट्युरिएंट मोंटेस, नासेतुर रिडिकुलस मस. नुल्लम आयडी डोलोर आयडी निभ उल्ट्रिसीस वेहिकुला उत आयडी एलिट.
विवामस सॅजिटिस लेकस वेल ऑग लाओरीट रुट्रम फॉसिबस डोलोर ऑक्टर. डुइस मोलिस, एस्ट नॉन कोमोडो लक्टस, निसी एराट पोर्टिटोर लिगुला, एगेट लॅसिनिया ओडियो सेम नेक एलिट. डोनेक सेड ओडियो दुई.
घटक | वापर | पर्यायी |
---|---|---|
<strong> |
म्हत्वाचें आशिल्ल्या मजकूराच्या एका स्निपेटाचेर भर दिवपा खातीर | कांयच ना |
<em> |
ताण आशिल्ल्या मजकूराच्या एका स्निपेटाचेर भर दिवपा खातीर | कांयच ना |
<abbr> |
विस्तारीत आवृत्ती होवराचेर दाखोवपाक संक्षेप आनी संक्षिप्त नांवां गुठलायता | title विस्तारीत मजकूराखातीर पर्यायी समाविष्ट करात |
<address> |
ताच्या लागींच्या पूर्वजा खातीर वा पुराय कामाच्या कुडी खातीर संपर्काची म्हायती खातीर | सगळ्यो ओळी सोंपोवन स्वरूपण सांबाळचें<br> |
Fusce dapibus , tellus ac cursus commodo , टॉर्टोर मौरिस कॉन्डिमेंटम निभ , उत फर्मेन्टम मासा जुस्टो बस अमेट रिसुस. मेसेनास फॉसिबस मॉलिस इंटरडम. नुल्ला व्हिटॅ एलिट लिबेरो, एक फारेत्रा ऑग.
टिप: वापरपाक मेकळीक दिवची <b>
आनी <i>
HTML5 त, पूण तांचे वापर मात्सो बदलला. <b>
अतिरिक्त म्हत्व दिवंक नासतना उतरां वा वाक्यां उजवाडावपाखातीर आसता जाल्यार <i>
चड करून आवाज, तंत्रीक संज्ञा आदी खातीर आसता.
<address>
टॅग कसो वापरूं येता हाचीं दोन उदाहरणां हांगा दिल्यांत :
संक्षेपांत व्हड मजकूर आनी हळदुव्या बिंदू आशिल्ली सकयली शिमेची शैली केल्ली आसता. तशेंच तांकां होवराचेर मदत कर्सर आसता देखून वापरप्यांक होवराचेर कितें तरी दाखयतले असो अतिरिक्त संकेत आसता.
कातरून काडिल्ली भाकरी उपरांत एचटीएमएल ही सगळ्यांत बरी गजाल.
गुणधर्म ह्या शब्दाचें संक्षिप्त रूप म्हळ्यार attr .
घटक | वापर | पर्यायी |
---|---|---|
<blockquote> |
दुसऱ्या स्त्रोता कडल्यान सामुग्री उद्धृत करपाखातीर ब्लॉक-पातळेचो घटक |
.pull-left आनी वर्ग.pull-right |
<small> |
वापरप्याक तोंड दिवपी उल्लेख जोडपाखातीर पर्यायी घटक, सादारणपणान कामाचे शीर्षक आशिल्लो लेखक | <cite> स्त्रोताच्या शीर्षका वा नांवा भोंवतणी दवरात |
ब्लॉककोट समाविष्ट करपाक, <blockquote>
खंयच्याय HTML भोंवतणी कोट म्हणून गुठलावचें. सरळ उतारे खातीर आमी एक शिफारस करतात <p>
.
तुमचो स्रोत उल्लेख करपाक पर्यायी घटक समाविष्ट करात आनी स्टायलिंग उद्देशां खातीर <small>
तुमकां ताचे आदीं एम डॅश मेळटलो .—
- <ब्लॉककोट> हें नांव
- <p> लोरेम इप्सम डोलोर बस आमेट, कॉन्सेक्टेतुर एडिपिसिंग एलिट. पूर्णांक पोसुएरे एराट एक अँटी व्हेनेनाटीस. </p> हें नांव
- <ल्हान> कोण तरी फामाद </small>
- </blockquote> हें नांव
मुलभूत ब्लॉककोट अशे तरेन शैली केल्यात:
लोरेम इप्सम डोलोर बस आमेत, कॉन्सेक्टेटर एडिपिसिंग एलिट. पूर्णांक पोसुएरे एराट एक अँटी व्हेनेनाटीस.
Body of work हातूंत कोण तरी फामाद
तुमचो ब्लॉककोट उजवे वटेन फ्लोट करपाक, जोडात class="pull-right"
:
लोरेम इप्सम डोलोर बस आमेत, कॉन्सेक्टेटर एडिपिसिंग एलिट. पूर्णांक पोसुएरे एराट एक अँटी व्हेनेनाटीस.
Body of work हातूंत कोण तरी फामाद
<ul>
<ul class="unstyled">
<ol>
<dl>
कोडाचे इनलायन स्निपेट 1 च्या आदारान गुठलावचे <code>
.
- देखीक , <code> विभाग </ code > इनलायन म्हणून गुठलावपाक जाय .
<pre>
कोडाच्या जायत्या ओळींखातीर वापरात . योग्य रेंडरींग करपाखातीर कोडांतल्या खंयच्याय कोन कंसांतल्यान सुटपाची खात्री करात.
<p>हांगा नमुनो मजकूर...</p>
- <पूर्व> हें नांव
- <p>हांगा नमुनो मजकूर...</p>
- </pre> हें नांव
टिप:<pre>
टॅगां भितर कोड शक्य तितलो डावी वटेन दवरपाची खात्री करात ; तो सगळे टॅब रेंडर करतलो.
तुमी पर्यायीपणान .pre-scrollable
वर्ग जोडूंक शकतात जो 350px ची चडांत चड-उंचाय सेट करतलो आनी y-अक्ष स्क्रोलबार दितलो.
तोच <pre>
घटक घेयात आनी वाडयल्ल्या रेंडरींगा खातीर दोन पर्यायी वर्ग जोडात.
- <p> हांगा नमुनो मजकूर... </p>
- <pre class = "सुंदर छाप."
- लिनम" > हें नांव
- <p>हांगा नमुनो मजकूर...</p>
- </pre> हें नांव
google-code-prettify डावनलोड करात आनी कशें वापरचें हाचे खातीर readme पळयात.
टॅग | वर्णन |
---|---|
<table> |
कोश्टकीय स्वरूपांत डेटा दाखोवपाखातीर रॅपिंग घटक |
<thead> |
कोश्टक शीर्षक ओळींखातीर कंटेनर घटक ( <tr> ) कोश्टक स्तंभांक लेबल करपाक |
<tbody> |
<tr> कोश्टकाच्या आंगांतल्या कोश्टक ओळींखातीर ( ) कंटेनर घटक |
<tr> |
एकाच ओळीचेर दिसपी कोश्टक कक्षांच्या संचाखातीर ( <td> वा ) कंटेनर घटक<th> |
<td> |
मुलभूत कोश्टक कक्ष |
<th> |
स्तंभ (वा ओळी, व्याप्ती आनी प्लेसमेंटाचेर आदारून) लेबलांखातीर खाशेलो कोश्टक कक्ष वापरपाक जाय a <thead> |
<caption> |
कोश्टकांत कितें आसा हाचें वर्णन वा सारांश, खास करून स्क्रीन वाचप्यां खातीर उपेगी |
- <कोश्टक> हें नांव
- <शीर्ष> हें नांव
- <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 |
उबी पॅडींग अर्दांत कापता, 8px ते 4px मेरेन, सगळ्या td आनी th घटकां भितर |
वाचपाची तांक सुनिश्चीत करपाक आनी रचणूक सांबाळपाक कोश्टकांक आपोआप फकत कांय शिमो आशिल्ली शैली केल्ली आसता. 2.0 आसल्यार .table
वर्ग जाय पडटा.
- <कोष्टक वर्ग = "कोष्टक" >
- ...
- </कोश्टक>
# 1 . | पयलें नांव | निमाणें नांव | भास |
---|---|---|---|
१ | मार्क हें नांव | ओटो हांणी केला | सीएसएस हें नांव |
२ | जाकोब | थॉर्नटन हांणी केला | जावास्क्रिप्ट |
३ | स्टु | डेंट हें नांव | एचटीएमएल |
झेब्रा-स्ट्राइपिंग जोडून तुमच्या कोश्टकां कडेन मात्शी फॅन्सी मेळोवची-फक्त .table-striped
वर्ग जोडचो.
टिप: पट्टेदार कोश्टकां :nth-child
CSS निवडक वापरतात आनी IE7-IE8 त उपलब्ध ना.
- <table class = "कोश्टक कोश्टक-पट्टीदार" >
- ...
- </कोश्टक>
# 1 . | पयलें नांव | निमाणें नांव | भास |
---|---|---|---|
१ | मार्क हें नांव | ओटो हांणी केला | सीएसएस हें नांव |
२ | जाकोब | थॉर्नटन हांणी केला | जावास्क्रिप्ट |
३ | स्टु | डेंट हें नांव | एचटीएमएल |
सौंदर्यशास्त्रीय उद्देशान पुराय मेजा भोंवतणी शिमो आनी वाटकुळे कोनशे घालचे.
- <table class = "कोश्टक कोश्टक-सीमा आशिल्लें" >
- ...
- </कोश्टक>
# 1 . | पयलें नांव | निमाणें नांव | भास |
---|---|---|---|
१ | मार्क ओटो हांणी केला | सीएसएस हें नांव | |
२ | जाकोब | थॉर्नटन हांणी केला | जावास्क्रिप्ट |
३ | स्टु | डेंट हें नांव | |
३ | ब्रोसेफ हांणी केला | स्टालिन हांणी केला | एचटीएमएल |
.table-condensed
कोश्टक कक्ष पॅडींग अर्दांत (8px ते 4px मेरेन) कापपाक वर्ग जोडून तुमचीं कोश्टकां चड संकुचीत करात .
- <table class = "कोश्टक कोश्टक-घनीभूत" >
- ...
- </कोश्टक>
# 1 . | पयलें नांव | निमाणें नांव | भास |
---|---|---|---|
१ | मार्क हें नांव | ओटो हांणी केला | सीएसएस हें नांव |
२ | जाकोब | थॉर्नटन हांणी केला | जावास्क्रिप्ट |
३ | स्टु | डेंट हें नांव | एचटीएमएल |
उपलब्ध आशिल्ल्या खंयच्याय वर्गाचो वापर करून वेगवेगळे लुक मेळोवपा खातीर खंयच्याय कोश्टक वर्गांक एकठांय करपाक मेकळीक दिवची.
- <table class = "कोश्टक कोश्टक-पट्टीदार कोश्टक-सीमा आशिल्लें कोश्टक-घनीभूत" >
- ...
- </कोश्टक>
# 1 . | पयलें नांव | निमाणें नांव | भास |
---|---|---|---|
१ | मार्क हें नांव | ओटो हांणी केला | सीएसएस हें नांव |
२ | जाकोब | थॉर्नटन हांणी केला | जावास्क्रिप्ट |
३ | स्टु | डेंट हें नांव | एचटीएमएल |
४ | ब्रोसेफ हांणी केला | स्टालिन हांणी केला | एचटीएमएल |
बूटस्ट्रॅपांतल्या फॉर्मां विशीं सगळ्यांत बरो भाग म्हणल्यार तुमचे सगळे इनपुट आनी नियंत्रण तुमी तुमच्या मार्कअपांत कशेय तयार केले तरी बरे दिसतात. कसलेंच फायद्याचें HTML ची गरज ना, पूण जाय आशिल्ल्यांक आमी नमुने दितात.
सोप्या स्टायलिंग आनी इव्हेंट बाइंडिंग खातीर चड गुंतागुंतीच्यो मांडावळी संक्षिप्त आनी मापनीय वर्गां वांगडा येतात, देखून तुमकां दर एका पांवड्यार कव्हर केल्ले आसात.
बूटस्ट्रॅप चार प्रकारच्या फॉर्म मांडावळीं खातीर आदार दिता:
वेगवेगळ्या प्रकारच्या फॉर्म मांडावळींनी मार्कअप करपाक कांय बदल करचे पडटात, पूण नियंत्रणां स्वता तशींच उरतात आनी वागतात.
Bootstrap च्या फॉर्मांनी सगळ्या बेस फॉर्म नियंत्रणां खातीर शैली आसपावीत केल्या जशे की इनपुट, textarea, आनी तुमी अपेक्षा करतात ती निवड. पूण तशेंच संलग्न आनी पूर्वनिर्धारीत इनपुट आनी चेकबॉक्सांच्या यादीं खातीर आदार अशे जायते सानुकूल घटक येतात.
दरेक प्रकारच्या फॉर्म नियंत्रणा खातीर चुक, शिटकावणी, आनी यश सारकिल्ल्यो अवस्था आस्पावल्यांत. तशेंच अक्षम नियंत्रणांखातीर शैलींचो आस्पाव केला.
बूटस्ट्रॅप सामान्य वेब फॉर्मांच्या चार शैलींखातीर सादें मार्कअप आनी शैली पुरवण करता.
नांव | वर्ग | वर्णन |
---|---|---|
उबें (मुळावें) . | .form-vertical (गरज ना) . |
नियंत्रणांचेर रचून दवरिल्लीं, डावी-संरेखित केल्लीं लेबलां |
इनलायन | .form-inline |
संकुचीत शैलीखातीर डावें-संरेखित लेबल आनी इनलायन-ब्लॉक नियंत्रणां |
सोद | .form-search |
एक खाशेल्या सोद सौंदर्यशास्त्राखातीर अतिरिक्त-गोल मजकूर इनपुट |
आडवें | .form-horizontal |
नियंत्रणां प्रमाणेंच ओळीचेर डावें, उजवें-संरेखित लेबलां तरंगचीं |
v2.0 कडेन, आमचे कडेन फॉर्म शैलीं खातीर हळुवार आनी हुशार डिफॉल्ट आसात. अतिरिक्त मार्कअप ना, फकत फॉर्म नियंत्रणां.
- <फॉर्म वर्ग = "बरें" >
- <label> लेबलाचें नांव </label>
- <input type = "text" class = "span3" placeholder = "कितें तरी टाइप करात..." >
- <span class = "help-inline" > संबंदीत मदत मजकूर! </span> हें नांव
- <लेबल वर्ग = "चेकबॉक्स" >
- <input type = "checkbox" > म्हाका तपासात
- </label> हें नांव
- <बटण प्रकार = "सबमिट" class = "btn" > सबमिट करचें </button>
- </form> हें नांव
मुलभूत WebKit शैलींचें प्रतिबिंबीत करपी, फकत .form-search
अतिरिक्त गोल सोद क्षेत्रां खातीर जोडात.
- <form class = "बरें फॉर्म-सोद" >
- <इनपुट प्रकार = "मजकूर" वर्ग = "इनपुट-माध्यम सोद-क्वेरी" >
- <बटण प्रकार = "सबमिट" वर्ग = "btn" > सोद </बटण>
- </form> हें नांव
इनपुट सुरू करपाक ब्लॉक पातळेचे आसात. .form-inline
आनी खातीर .form-horizontal
, आमी inline-block वापरतात.
- <form class = "बरें फॉर्म-इनलायन" >
- <इनपुट प्रकार = "मजकूर" वर्ग = "इनपुट-ल्हान" प्लेसहोल्डर = "ईमेल" >
- <इनपुट प्रकार = "पासवर्ड" वर्ग = "इनपुट-ल्हान" प्लेसहोल्डर = "पासवर्ड" >
- <बटण प्रकार = "सबमिट" वर्ग = "btn" > जा </बटण>
- </form> हें नांव
वयली उदाहरण फॉर्म मांडावळ दिल्या, हांगा पयल्या इनपुट आनी नियंत्रण गटा कडेन संबंदीत मार्कअप आसा. स्टायलिंग खातीर .control-group
, .control-label
, आनी .controls
वर्ग सगळे जाय पडटात.
- <form class = "रूप-आडवें" >
- <फील्डसेट> हें नांव
- <legend> आख्यायिका मजकूर </legend>
- <div वर्ग = "नियंत्रण-समूह" >
- <label class = "control-label" for = "input01" > मजकूर इनपुट </label>
- <div वर्ग = "नियंत्रण" >
- <इनपुट प्रकार = "मजकूर" वर्ग = "इनपुट- xlarge" id = "इनपुट01" >
- <p class = "help-block" > आदार मजकूर </p>
- </div> हें नांव
- </div> हें नांव
- </फील्डसेट> हें नांव
- </form> हें नांव
आमी तेंको दितात ते सगळे मुलभूत फॉर्म नियंत्रण डावी वटेन दाखयल्यात. हांगा बुलेट केल्ली वळेरी आसा:
v1.4 मेरेन, Bootstrap च्या मुलभूत फॉर्म शैलींनी आडवी मांडावळ वापरली. Bootstrap 2 वरवीं, खंयच्याय फॉर्मा खातीर चड हुशार, चड मापनीय मुलभूत आसपाक आमी ती मर्यादा काडून उडयली.
बूटस्ट्रॅप ब्राउझर-समर्थीत केंद्रीत आनी disabled
राज्यां खातीर शैली वैशिश्ट्य करता. आमी मुलभूत वेबकिट काडून उडयतात आनी ताचे सुवातेर outline
a लागू करतात .box-shadow
:focus
तशेंच चुको, शिटकावणी, आनी यश हांचे खातीर प्रमाणीकरण शैलींचो आस्पाव आसा. वापरपाक, भोंवतणच्या कडेन त्रुटी वर्ग जोडात .control-group
.
- <फील्डसेट हें नांव
- class = "नियंत्रण-समूह त्रुटी" >
- ...
- </फील्डसेट> हें नांव
इनपुट गट-संलग्न वा पूर्वप्रलंबित मजकूर आशिल्ले-तुमच्या इनपुटां खातीर चड संदर्भ दिवपाक सोपो मार्ग पुरवण करतात. व्हड उदाहरणां म्हळ्यार ट्विटर वापरप्यांच्या नांवां खातीर @ चिन्न वा अर्थीक स्थिती खातीर $.
v1.4 मेरेन, बूटस्ट्रॅपाक चेकबॉक्स आनी रेडिओ भोंवतणी अतिरिक्त मार्कअपाची गरज आशिल्ली तांकां स्टॅक करपाक. आतां, ती एक सादी गजाल परतून सांगपाची की <label class="checkbox">
ती गुठलायता <input type="checkbox">
.
इनलायन चेकबॉक्स आनी रेडिओकय तेंको आसा. .inline
फकत खंयच्याय .checkbox
वा कडेन जोडचें .radio
आनी तुमी पुराय जाल्यात.
इनलायन फॉर्मांत प्रीपेंड वा एपेंड इनपुट वापरपाक, .add-on
आनी input
त्याच ओळीचेर, रिक्त स्थान नासतना दवरपाची खात्री करात.
तुमच्या फॉर्म इनपुटांखातीर मदत मजकूर जोडपाक , इनपुट घटका उपरांत इनलायन मदत मजकूर <span class="help-inline">
वा वांगडा मदत मजकूर ब्लॉक समाविष्ट करचो.<p class="help-block">
:after
. डॉक्सांत, आमी चिन्नाचो आकार हायलाइट करपाक होवराचेर हळदुवो पार्श्वभूंय रंग दाखयतात.
दरेक चिन्न एक अतिरिक्त विनंती करचे परस, आमी तांकां स्प्राइटांत संकलित केल्यात-एका फायलीन प्रतिमांचो एक गट जो CSS वापरता प्रतिमा कडेन स्थापन करपाक background-position
. हीच पद्दत आमी ट्विटर डॉट कॉमचेर वापरतात आनी ती आमकां बरी काम केल्या.
सगळ्या चिन्न वर्गांक .icon-
योग्य नांव अंतर आनी व्याप्ती खातीर उपसर्ग केला, आमच्या हेर घटकां प्रमाण. हाका लागून हेर साधनां कडेन संघर्श टाळपाक मदत जातली.
जो मेरेन आमी हांगा डॉक्सांत दुवो आनी श्रेय दितात तो मेरेन Glyphicons हांणी आमकां आमच्या मुक्त-स्त्रोत साधनपुस्तिकांत सेट केल्ल्या Halflings वापरपाक परवानगी दिल्या. उपकार करून तुमच्या प्रकल्पांतय तशें करपाचो विचार करात.
v2.0.1 कडेन, आमी आमच्या सगळ्या चिन्नां खातीर टॅग वापरपाचो पर्याय घेतला <i>
, पूण तांकां केस वर्ग ना-फकत शेअर केल्लो उपसर्ग. वापरपाक, सकयल दिल्लो कोड फकत खंयच्याय सुवातेर दवरात:
- <i class = "चिन्न-सोद" </i>
तशेंच उलट्या (धव्या) चिन्नांखातीर शैली उपलब्ध आसात, एक अतिरिक्त वर्ग घेवन तयार केल्यात:
- <i class = "चिन्न-सोद चिन्ह-धवें" ></i>
तुमच्या चिन्नां खातीर वेंचपाक 120 वर्ग आसात. फकत योग्य वर्गां सयत टॅग जोडात <i>
आनी तुमी सेट जाल्यात. तुमकां पुराय वळेरी sprites.less हातूंत वा हांगाच ह्या दस्तावेजांत मेळूं येता.
चिन्नां म्हान आसतात, पूण तांचो वापर खंय जातलो? हांगा थोडीं कल्पना दिल्यांत: १.
मुळाव्यान खंयच्याय सुवातेर <i>
टॅग घालूंक मेळटा थंय चिन्न घालूंक मेळटा.
बटणां, साधनपट्टी खातीर बटण गट, नेव्हिगेशन, वा पूर्वप्रलंबित फॉर्म इनपुटांत तांचो वापर करचो.