बूटस्ट्रॅप

बेस CSS

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

टायपोग्राफी मथळे, परिच्छेद, सूची आणि इतर इनलाइन प्रकार घटक

मथळे आणि मुख्य भाग प्रत

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

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

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

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

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

लीड बॉडी कॉपी

परिच्छेद जोडून वेगळे बनवा .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. ड्यूस मोलिस, हे नॉन कमोडो लक्टस आहे.

h1. मथळा १

h2. मथळा 2

h3. मथळा 3

h4. मथळा 4

h5. मथळा 5
h6. मथळा 6

जोर, पत्ता आणि संक्षेप

घटक वापर ऐच्छिक
<strong> महत्त्वाच्या मजकुराच्या स्निपेटवर जोर देण्यासाठी काहीही नाही
<em> तणावासह मजकूराच्या स्निपेटवर जोर देण्यासाठी काहीही नाही
<abbr> होवरवर विस्तारित आवृत्ती दर्शविण्यासाठी संक्षेप आणि परिवर्णी शब्द गुंडाळते

titleविस्तारित मजकूरासाठी पर्यायी विशेषता समाविष्ट करा

.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>टॅग कसा वापरला जाऊ शकतो याची येथे दोन उदाहरणे आहेत :

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
पूर्ण नाव
[email protected]

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

विशेषता असलेल्या संक्षेपांमध्ये titleहलकी ठिपके असलेली तळाशी सीमा असते आणि होव्हरवर मदत कर्सर असतो. हे वापरकर्त्यांना होव्हरवर काहीतरी दाखवले जाईल असे अतिरिक्त संकेत देते.

initialismवर्गाला थोडा लहान मजकूर आकार देऊन टायपोग्राफिक सुसंवाद वाढवण्यासाठी संक्षेपात जोडा .

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

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

ब्लॉककोट्स

घटक वापर ऐच्छिक
<blockquote> दुसर्‍या स्त्रोताकडील सामग्री उद्धृत करण्यासाठी ब्लॉक-स्तरीय घटक

citeस्रोत URL साठी विशेषता जोडा

फ्लोटेड पर्यायांसाठी वापरा .pull-leftआणि वर्ग.pull-right
<small> वापरकर्ता-मुखी उद्धरण जोडण्यासाठी पर्यायी घटक, विशेषत: कामाचे शीर्षक असलेले लेखक <cite>शीर्षक किंवा स्त्रोताच्या नावाभोवती ठेवा

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

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

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. पूर्णांक posuere erat a ante venenatis. </p>
  3.   <small> कोणीतरी प्रसिद्ध </small>
  4. </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.

क्षैतिज वर्णन

<dl class="dl-horizontal">

वर्णन याद्या
अटी परिभाषित करण्यासाठी वर्णन सूची योग्य आहे.
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.
Felis euismod semper eget lacinia
Fusce dapibus, टेलस ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

सावधान! क्षैतिज वर्णन सूची डाव्या स्तंभ निराकरणात बसण्यासाठी खूप लांब असलेल्या अटी कापून टाकतील text-overflow. अरुंद व्ह्यूपोर्टमध्ये, ते डीफॉल्ट स्टॅक केलेल्या लेआउटमध्ये बदलतील.

कोड इनलाइन आणि ब्लॉक कोड स्निपेट्स

इनलाइन

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

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

मूलभूत ब्लॉक

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

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

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

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

तुम्ही वैकल्पिकरित्या .pre-scrollableवर्ग जोडू शकता जो 350px ची कमाल-उंची सेट करेल आणि y-अक्ष स्क्रोलबार प्रदान करेल.

Google Prettify

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

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

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

टेबल्ससाठी , तुम्ही अंदाज लावला, सारणीबद्ध डेटा

टेबल मार्कअप

टॅग करा वर्णन
<table> सारणी स्वरूपात डेटा प्रदर्शित करण्यासाठी रॅपिंग घटक
<thead> <tr>टेबल स्तंभांना लेबल करण्यासाठी टेबल शीर्षलेख पंक्ती ( ) साठी कंटेनर घटक
<tbody> <tr>सारणीच्या मुख्य भागामध्ये टेबल पंक्ती ( ) साठी कंटेनर घटक
<tr> एका पंक्तीवर दिसणार्‍या टेबल सेल ( <td>किंवा ) च्या संचासाठी कंटेनर घटक<th>
<td> डीफॉल्ट टेबल सेल
<th> स्तंभासाठी विशेष टेबल सेल (किंवा पंक्ती, व्याप्ती आणि प्लेसमेंटवर अवलंबून) लेबले
वापरणे आवश्यक आहे<thead>
<caption> टेबलमध्ये काय आहे याचे वर्णन किंवा सारांश, विशेषतः स्क्रीन वाचकांसाठी उपयुक्त 
  1. <टेबल>
  2.   <thead>
  3.     <tr>
  4.       <th> … </th>
  5.       <th> … </th>
  6.     </tr>
  7.   </thead>
  8.   <tbody>
  9.     <tr>
  10.       <td> … </td>
  11.       <td> … </td>
  12.     </tr>
  13.   </tbody>
  14. </ टेबल>

टेबल पर्याय

नाव वर्ग वर्णन
डीफॉल्ट काहीही नाही कोणत्याही शैली नाहीत, फक्त स्तंभ आणि पंक्ती
बेसिक .table ओळींमधील फक्त क्षैतिज रेषा
किनारी .table-bordered कोपरे गोलाकार करतो आणि बाह्य सीमा जोडतो
झेब्रा-पट्टे .table-striped विषम पंक्तींमध्ये हलका राखाडी पार्श्वभूमी रंग जोडतो (1, 3, 5, इ.)
घनरूप .table-condensed tdसर्व आणि thघटकांमध्ये , 8px ते 4px पर्यंत, उभ्या पॅडिंगला अर्ध्यामध्ये कापते

उदाहरणे सारण्या

1. डिफॉल्ट सारणी शैली

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

  1. <टेबल वर्ग = "टेबल" > 
  2.   …
  3. </ टेबल>
# पहिले नाव आडनाव वापरकर्तानाव
१ खूण करा ओटो @mdo
2 जेकब थॉर्नटन @फॅट
3 लॅरी पक्षी @ट्विटर

2. स्ट्रीप टेबल

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

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

  1. <टेबल वर्ग = "टेबल टेबल-स्ट्रीप" > 
  2.   …
  3. </ टेबल>
# पहिले नाव आडनाव वापरकर्तानाव
१ खूण करा ओटो @mdo
2 जेकब थॉर्नटन @फॅट
3 लॅरी पक्षी @ट्विटर

3. किनारी टेबल

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

  1. <टेबल वर्ग = "टेबल टेबल-बॉर्डर" > 
  2.   …
  3. </ टेबल>
# पहिले नाव आडनाव वापरकर्तानाव
१ खूण करा ओटो @mdo
खूण करा ओटो @getbootstrap
2 जेकब थॉर्नटन @फॅट
3 लॅरी द बर्ड @ट्विटर

4. घनरूप सारणी

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

  1. <टेबल वर्ग = "टेबल टेबल-कंडेन्स्ड" > 
  2.   …
  3. </ टेबल>
# पहिले नाव आडनाव वापरकर्तानाव
१ खूण करा ओटो @mdo
2 जेकब थॉर्नटन @फॅट
3 लॅरी द बर्ड @ट्विटर

5. ते सर्व एकत्र करा!

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

  1. <टेबल वर्ग = "टेबल टेबल-स्ट्रीप टेबल-बॉर्डर टेबल-कंडेन्स्ड" > 
  2.   ...
  3. </ टेबल>
पूर्ण नाव
# पहिले नाव आडनाव वापरकर्तानाव
१ खूण करा ओटो @mdo
2 जेकब थॉर्नटन @फॅट
3 लॅरी द बर्ड @ट्विटर

फॉर्म

लवचिक HTML आणि CSS

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

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

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

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

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

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

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

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

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

चार प्रकारचे रूप

बूटस्ट्रॅप सामान्य वेब फॉर्मच्या चार शैलींसाठी साधे मार्कअप आणि शैली प्रदान करते.

नाव वर्ग वर्णन
अनुलंब (डीफॉल्ट) .form-vertical (आवश्यक नाही) स्टॅक केलेले, नियंत्रणांवर डावीकडे संरेखित लेबल
इनलाइन .form-inline कॉम्पॅक्ट शैलीसाठी डावीकडे संरेखित लेबल आणि इनलाइन-ब्लॉक नियंत्रणे
शोधा .form-search विशिष्ट शोध सौंदर्यासाठी अतिरिक्त-गोलाकार मजकूर इनपुट
क्षैतिज .form-horizontal डावीकडे, उजवीकडे संरेखित लेबले नियंत्रणांप्रमाणेच त्याच ओळीवर फ्लोट करा

फक्त फॉर्म नियंत्रणे वापरून उदाहरण फॉर्म , कोणतेही अतिरिक्त मार्कअप नाही

मूळ फॉर्म

अतिरिक्त मार्कअपशिवाय स्मार्ट आणि लाइटवेट डीफॉल्ट.

उदाहरण ब्लॉक-स्तरीय मदत मजकूर येथे.

  1. <फॉर्म वर्ग = "वेल" > 
  2.   <label> लेबल नाव </label>
  3.   <इनपुट प्रकार = "मजकूर" वर्ग = "span3" प्लेसहोल्डर = "काहीतरी टाइप करा..." >   
  4.   <span वर्ग = "help-block" > येथे उदाहरण ब्लॉक-स्तरीय मदत मजकूर. </span> 
  5.   <लेबल वर्ग = "चेकबॉक्स" > 
  6.     <इनपुट प्रकार = "चेकबॉक्स" > मला तपासा 
  7.   </label>
  8.   <button type = "submit" class = "btn" > सबमिट करा </button>  
  9. </form>

शोध फॉर्म

.form-searchफॉर्ममध्ये आणि .search-queryमध्ये जोडा input.

  1. <फॉर्म वर्ग = "वेल फॉर्म-सर्च" > 
  2.   <इनपुट प्रकार = "मजकूर" वर्ग = "इनपुट-माध्यम शोध-क्वेरी" >  
  3.   <button type = "submit" class = "btn" > शोधा </button>  
  4. </form>

इनलाइन फॉर्म

.form-inlineफॉर्म कंट्रोल्सचे अनुलंब संरेखन आणि अंतर सुरेख करण्यासाठी जोडा .

  1. <फॉर्म वर्ग = "वेल फॉर्म-इनलाइन" > 
  2.   <इनपुट प्रकार = "टेक्स्ट" वर्ग = "इनपुट-स्मॉल" प्लेसहोल्डर = "ईमेल" >   
  3.   <इनपुट प्रकार = "पासवर्ड" वर्ग = "इनपुट-स्मॉल" प्लेसहोल्डर = "पासवर्ड" >   
  4.   <लेबल वर्ग = "चेकबॉक्स" > 
  5.     <इनपुट प्रकार = "चेकबॉक्स" > मला लक्षात ठेवा 
  6.   </label>
  7.   <button type = "submit" class = "btn" > साइन इन करा </button>  
  8. </form>

क्षैतिज फॉर्म

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

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

फ्रीफॉर्म टेक्स्ट व्यतिरिक्त, कोणतेही HTML5 टेक्स्ट-आधारित इनपुट असे दिसते.

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

वरील उदाहरण फॉर्म लेआउट दिल्यास, प्रथम इनपुट आणि नियंत्रण गटाशी संबंधित मार्कअप येथे आहे. स्टाइलसाठी .control-group, .control-label, आणि .controlsवर्ग सर्व आवश्यक आहेत.

  1. <फॉर्म वर्ग = "फॉर्म-क्षैतिज" > 
  2.   <fieldset>
  3.     <legend> आख्यायिका मजकूर </legend>
  4.     <div वर्ग = "कंट्रोल-ग्रुप" > 
  5.       <label class = "control-label" for = "input01" > मजकूर इनपुट </label>  
  6.       <div वर्ग = "नियंत्रण" > 
  7.         <इनपुट प्रकार = "मजकूर" वर्ग = "इनपुट-एक्सलार्ज" आयडी = "इनपुट 01" >   
  8.         <p class = "help-block" > सहाय्यक मदत मजकूर </p> 
  9.       </div>
  10.     </div>
  11.   </fieldset>
  12. </form>

फॉर्म नियंत्रण राज्ये

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

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

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

  1. <फील्डसेट
  2.   वर्ग = "नियंत्रण-समूह त्रुटी" >
  3.   …
  4. </fieldset>
येथे काही मूल्य
काहीतरी चूक झाली असेल
कृपया चूक दुरुस्त करा
वाह!
वाह!

फॉर्म नियंत्रणे वाढवणे

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

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

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

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

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

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

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

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

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

.span*इनपुट आकारांसाठी ग्रिड सिस्टममधील समान वर्ग वापरा .

तुम्ही स्टॅटिक क्लासेस देखील वापरू शकता जे ग्रिडवर मॅप करत नाहीत, प्रतिसाद देणार्‍या CSS शैलीशी जुळवून घेतात किंवा वेगवेगळ्या प्रकारच्या नियंत्रणांसाठी खाते (उदा., inputवि. select).

@

येथे काही मदत मजकूर आहे

.00
येथे अधिक मदत मजकूर आहे
$ .00

टीप: अधिक मोठ्या क्लिक क्षेत्रासाठी आणि अधिक वापरण्यायोग्य फॉर्मसाठी लेबले सर्व पर्यायांना घेरतात.

बटणे

बटण वर्ग="" वर्णन
btn ग्रेडियंटसह मानक राखाडी बटण
btn btn-primary अतिरिक्त व्हिज्युअल वजन प्रदान करते आणि बटणांच्या संचामध्ये प्राथमिक क्रिया ओळखते
btn btn-info डीफॉल्ट शैलींसाठी पर्याय म्हणून वापरले जाते
btn btn-success यशस्वी किंवा सकारात्मक कृती दर्शवते
btn btn-warning या कृतीसह सावधगिरी बाळगली पाहिजे हे सूचित करते
btn btn-danger धोकादायक किंवा संभाव्य नकारात्मक क्रिया दर्शवते
btn btn-inverse पर्यायी गडद राखाडी बटण, अर्थपूर्ण क्रिया किंवा वापराशी जोडलेले नाही

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

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

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

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

IE9 गोलाकार कोपऱ्यांवर पार्श्वभूमी ग्रेडियंट क्रॉप करत नाही, म्हणून आम्ही ते काढून टाकतो. संबंधित, IE9 अक्षम केलेल्या buttonघटकांना जंकीफाय करते, मजकूर राखाडी रेंडरिंग ओंगळ मजकूर-सावलीसह करते ज्याचे आम्ही निराकरण करू शकत नाही.

अनेक आकार

फॅन्सी मोठी किंवा लहान बटणे? .btn-large, .btn-small, किंवा .btn-miniदोन अतिरिक्त आकारांसाठी जोडा .


अपंग राज्य

अक्षम केलेल्या बटणांसाठी, .disabledदुव्यांमध्ये वर्ग आणि घटकांसाठी disabledविशेषता जोडा.<button>

प्राथमिक दुवा दुवा

सावधान! आम्ही .disabledयेथे उपयोगिता वर्ग म्हणून वापरतो, सामान्य .activeवर्गाप्रमाणेच, त्यामुळे उपसर्ग आवश्यक नाही.

एक वर्ग, अनेक टॅग

, किंवा घटकावर .btnवर्ग वापरा .<a><button><input>

दुवा 
  1. <a class="btn" href=""> लिंक </a> _ _ _ _ _  
  2. <बटण वर्ग = "btn" प्रकार = "सबमिट" >  
  3.   बटण
  4. </ बटन>
  5. <इनपुट वर्ग = "btn" प्रकार = "बटण"  
  6.          मूल्य = "इनपुट" >
  7. <इनपुट वर्ग = "btn" प्रकार = "सबमिट करा"  
  8.          मूल्य = "सबमिट करा" >

सर्वोत्तम सराव म्हणून, क्रॉस-ब्राउझर रेंडरिंग जुळत असल्याची खात्री करण्यासाठी तुमच्या संदर्भासाठी घटक जुळवण्याचा प्रयत्न करा. तुमच्याकडे एखादे असल्यास , तुमच्या बटणासाठी inputएक वापरा .<input type="submit">

Glyphicons द्वारे कृपापूर्वक प्रदान केलेले चिन्ह

  • आयकॉन-ग्लास
  • आयकॉन-संगीत
  • चिन्ह-शोध
  • आयकॉन-लिफाफा
  • आयकॉन-हृदय
  • आयकॉन-स्टार
  • चिन्ह-तारा-रिक्त
  • चिन्ह-वापरकर्ता
  • आयकॉन-चित्रपट
  • आयकॉन-थ-मोठा
  • icon-th
  • icon-th-list
  • चिन्ह-ठीक आहे
  • चिन्ह काढा
  • आयकॉन-झूम-इन
  • आयकॉन-झूम-आउट
  • चिन्ह बंद
  • चिन्ह-सिग्नल
  • icon-cog
  • आयकॉन-कचरा
  • आयकॉन-होम
  • icon-file
  • आयकॉन-वेळ
  • आयकॉन-रोड
  • icon-download-alt
  • आयकॉन-डाउनलोड
  • चिन्ह-अपलोड
  • आयकॉन-इनबॉक्स
  • आयकॉन-प्ले-सर्कल
  • चिन्ह-पुनरावृत्ती
  • आयकॉन-रिफ्रेश
  • icon-list-alt
  • आयकॉन-लॉक
  • चिन्ह-ध्वज
  • आयकॉन-हेडफोन
  • आयकॉन-व्हॉल्यूम-ऑफ
  • आयकॉन-व्हॉल्यूम-डाउन
  • आयकॉन-व्हॉल्यूम-अप
  • icon-qrcode
  • आयकॉन-बारकोड
  • आयकॉन-टॅग
  • आयकॉन-टॅग
  • आयकॉन-बुक
  • चिन्ह-बुकमार्क
  • आयकॉन-प्रिंट
  • आयकॉन-कॅमेरा
  • आयकॉन-फॉन्ट
  • चिन्ह-ठळक
  • आयकॉन-इटालिक
  • चिन्ह-मजकूर-उंची
  • चिन्ह-मजकूर-रुंदी
  • चिन्ह-संरेखित-डावीकडे
  • आयकॉन-संरेखित-केंद्र
  • चिन्ह-संरेखित-उजवे
  • icon-align-justify
  • चिन्ह-सूची
  • आयकॉन-इंडेंट-डावीकडे
  • चिन्ह-इंडेंट-उजवे
  • आयकॉन-फेसटाइम-व्हिडिओ
  • आयकॉन-चित्र
  • आयकॉन-पेन्सिल
  • चिन्ह-नकाशा-मार्कर
  • चिन्ह समायोजित करा
  • आयकॉन-टिंट
  • चिन्ह-संपादन
  • icon-share
  • चिन्ह-तपासणी
  • icon-move
  • चिन्ह-चरण-मागे
  • आयकॉन-फास्ट-बॅकवर्ड
  • चिन्ह-मागे
  • आयकॉन-प्ले
  • चिन्ह-विराम द्या
  • आयकॉन-स्टॉप
  • चिन्ह-फॉरवर्ड
  • आयकॉन-फास्ट-फॉरवर्ड
  • आयकॉन-स्टेप-फॉरवर्ड
  • आयकॉन-बाहेर काढा
  • आयकॉन-शेवरॉन-डावीकडे
  • चिन्ह-शेवरॉन-उजवे
  • आयकॉन-प्लस-चिन्ह
  • चिन्ह-वजा-चिन्ह
  • icon-remove-sign
  • चिन्ह-ठीक-चिन्ह
  • चिन्ह-प्रश्न-चिन्ह
  • चिन्ह-माहिती-चिन्ह
  • आयकॉन-स्क्रीनशॉट
  • icon-remove-sircle
  • चिन्ह-ओके-वर्तुळ
  • चिन्ह-बंदी-वर्तुळ
  • चिन्ह-बाण-डावीकडे
  • चिन्ह-बाण-उजवीकडे
  • चिन्ह-बाण-अप
  • चिन्ह-बाण-खाली
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • आयकॉन-प्लस
  • चिन्ह-वजा
  • चिन्ह-तारका
  • चिन्ह-उद्गारवाचक-चिन्ह
  • आयकॉन-भेट
  • चिन्ह-पान
  • आयकॉन-फायर
  • आयकॉन-डोळा उघडा
  • आयकॉन-डोळा-बंद
  • चिन्ह-चेतावणी-चिन्ह
  • आयकॉन-प्लेन
  • आयकॉन-कॅलेंडर
  • चिन्ह-यादृच्छिक
  • चिन्ह-टिप्पणी
  • आयकॉन-चुंबक
  • आयकॉन-शेवरॉन-अप
  • आयकॉन-शेवरॉन-डाउन
  • चिन्ह-रिट्विट
  • आयकॉन-शॉपिंग-कार्ट
  • आयकॉन-फोल्डर-बंद करा
  • आयकॉन-फोल्डर उघडा
  • icon-resize-vertical
  • चिन्ह-आकार-क्षैतिज
  • icon-hdd
  • आयकॉन-बुलहॉर्न
  • आयकॉन-घंटा
  • चिन्ह-प्रमाणपत्र
  • आयकॉन-थंब्स-अप
  • आयकॉन-थंब्स-डाउन
  • चिन्ह-हात-उजवे
  • चिन्ह-हात-डावीकडे
  • आयकॉन-हँड-अप
  • आयकॉन-हँड-डाउन
  • चिन्ह-वर्तुळ-बाण-उजवे
  • चिन्ह-वर्तुळ-बाण-डावीकडे
  • चिन्ह-वर्तुळ-बाण-अप
  • चिन्ह-वर्तुळ-बाण-खाली
  • आयकॉन-ग्लोब
  • आयकॉन-रिंच
  • चिन्ह-कार्ये
  • आयकॉन-फिल्टर
  • आयकॉन-ब्रीफकेस
  • आयकॉन-फुलस्क्रीन

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

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

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

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

कसे वापरावे

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

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

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

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

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

सावधान! मजकुराच्या स्ट्रिंग्सच्या बाजूला वापरताना, जसे की बटणे किंवा एनएव्ही लिंक्समध्ये, <i>योग्य अंतरासाठी टॅग नंतर एक जागा सोडण्याची खात्री करा.

केसेस वापरा

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

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

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

उदाहरणे

टूलबार, नेव्हिगेशन किंवा प्रीपेंडेड फॉर्म इनपुटसाठी बटणे, बटण गटांमध्ये त्यांचा वापर करा.

वापरकर्ता

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

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