बुटस्ट्र्याप

आधार CSS

मचानको शीर्षमा, आधारभूत HTML तत्वहरूलाई नयाँ, सुसंगत लुक र अनुभव प्रदान गर्न एक्स्टेन्सिबल कक्षाहरूसँग स्टाइल गरिएको र परिष्कृत गरिन्छ।

टाइपोग्राफी शीर्षकहरू, अनुच्छेदहरू, सूचीहरू, र अन्य इनलाइन प्रकार तत्वहरू

शीर्षक र शरीर प्रतिलिपि

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

सम्पूर्ण टाइपोग्राफिक ग्रिड हाम्रो variables.less फाइलमा दुई कम चरहरूमा आधारित छ: @baseFontSizeर @baseLineHeight। पहिलो आधार फन्ट-साइज भर प्रयोग गरिन्छ र दोस्रो आधार रेखा-उचाइ हो।

हामी ती चरहरू, र केही गणितहरू प्रयोग गर्छौं, हाम्रा सबै प्रकारका मार्जिन, प्याडिङहरू, र रेखा-उचाइहरू सिर्जना गर्न।

शरीर पाठको उदाहरण

Nullam quis risus eget urna mollis ornare vel eu leo। Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. नुल्लम आईडी डोलर आईडी निभ अल्ट्रासिस वाहन।

नेतृत्व शरीर प्रतिलिपि

एउटा अनुच्छेद थपेर बाहिर खडा बनाउनुहोस् .lead।

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor। Duis mollis, est noncommodo luctus।

h1। शीर्षक १

h2। शीर्षक २

h3। शीर्षक ३

h4। हेडिङ ४

h5। हेडिङ ५
h6। हेडिङ ६

जोड, ठेगाना, र संक्षिप्त नाम

तत्व प्रयोग ऐच्छिक
<strong> महत्त्वपूर्णसँग पाठको स्निपेटलाई जोड दिनको लागि कुनै पनि छैन
<em> तनावको साथ पाठको स्निपेटलाई जोड दिनको लागि कुनै पनि छैन
<abbr> होभरमा विस्तारित संस्करण देखाउन संक्षिप्त रूपहरू र एक्रोनिमहरू लपेट्छ

titleविस्तारित पाठको लागि वैकल्पिक विशेषता समावेश गर्नुहोस्

.initialismठूला अक्षरहरूको लागि वर्ग प्रयोग गर्नुहोस् ।
<address> यसको निकटतम पुर्खा वा काम को सम्पूर्ण शरीर को लागी सम्पर्क जानकारी को लागी सबै रेखाहरू अन्त्य गरेर ढाँचा सुरक्षित गर्नुहोस्<br>

जोड प्रयोग गर्दै

Fusce dapibus , Tellus 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>स्रोतको शीर्षक वा नामको वरिपरि राख्नुहोस्

ब्लककोट समावेश गर्न , उद्धरणको रूपमा कुनै पनि HTML<blockquote> वरिपरि लपेट्नुहोस्। सीधा उद्धरणहरूको लागि हामी सिफारिस गर्छौं ।<p>

तपाइँको स्रोत उद्धृत गर्न एक वैकल्पिक <small>तत्व समावेश गर्नुहोस् र तपाइँ &mdash;स्टाइलिंग उद्देश्यका लागि पहिले एक em ड्यास प्राप्त गर्नुहुनेछ।

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit। इन्टेजर पोस्युरे एरेट ए एन्टे वेनेनाटिस। </p>
  3.   <small> कोही प्रसिद्ध </small>
  4. </blockquote>

उदाहरण blockquotes

पूर्वनिर्धारित ब्लककोटहरू यसरी शैलीबद्ध छन्:

Lorem ipsum dolor sit amet, consectetur adipiscing elit। इन्टेजर पोस्युरे एरेट ए एन्टे वेनेनाटिस।

कामको शरीरमा प्रसिद्ध कोही

तपाईंको ब्लककोट दायाँ तिर फ्लोट गर्न, थप्नुहोस् class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit। इन्टेजर पोस्युरे एरेट ए एन्टे वेनेनाटिस।

कामको शरीरमा प्रसिद्ध कोही

सूचीहरू

क्रमरहित

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • मासामा पूर्णांक मोलेस्टी लोरेम
  • प्रिटियम निस्ल एलिकेटमा फेसिलिसिस
  • नुल्ला volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat मा
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

अनस्टाइल

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • मासामा पूर्णांक मोलेस्टी लोरेम
  • प्रिटियम निस्ल एलिकेटमा फेसिलिसिस
  • नुल्ला volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat मा
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

आदेश

<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. Eget porttitor lorem

विवरण

<dl>

विवरण सूचीहरू
वर्णन सूची सर्तहरू परिभाषित गर्नका लागि उपयुक्त छ।
Euismod
Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit।
Donec id elit non mi porta gravida at eget metus।
Malesuada Porta
Etiam porta sem malesuada magna mollis euismod।

तेर्सो वर्णन

<dl class="dl-horizontal">

विवरण सूचीहरू
वर्णन सूची सर्तहरू परिभाषित गर्नका लागि उपयुक्त छ।
Euismod
Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit।
Donec id elit non mi porta gravida at eget metus।
Malesuada Porta
Etiam porta sem malesuada magna mollis euismod।
Felis euismod sempre eget lacinia
Fusce dapibus, telus 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.      linenums" >
  3.   <p>नमूना पाठ यहाँ...</p>
  4. </pre>

google-code-prettify डाउनलोड गर्नुहोस् र कसरी प्रयोग गर्ने भनेर रीडमी हेर्नुहोस्।

तालिकाहरू , तपाईंले अनुमान लगाउनुभयो, तालिका डेटा

तालिका मार्कअप

ट्याग विवरण
<table> ट्याबुलर ढाँचामा डेटा प्रदर्शन गर्नको लागि र्‍यापिङ तत्व
<thead> <tr>तालिका हेडर पङ्क्तिहरू ( ) को लागि तालिका स्तम्भहरू लेबल गर्न कन्टेनर तत्व
<tbody> तालिकाको मुख्य भागमा तालिका पङ्क्तिहरू ( <tr>) को लागि कन्टेनर तत्व
<tr> एकल पङ्क्तिमा देखिने तालिका कक्षहरू ( <td>वा ) को सेटको लागि कन्टेनर तत्व<th>
<td> पूर्वनिर्धारित तालिका कक्ष
<th> स्तम्भका लागि विशेष तालिका कक्ष (वा पङ्क्ति, स्कोप र प्लेसमेन्टमा निर्भर गर्दै) लेबलहरू
भित्र प्रयोग गरिनु पर्छ।<thead>
<caption> तालिकामा भएका कुराहरूको विवरण वा सारांश, विशेष गरी स्क्रिन रिडरहरूका लागि उपयोगी 
  1. <table>
  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 पङ्क्तिहरू बीच मात्र तेर्सो रेखाहरू
सीमाना .table-bordered कुनाहरू राउन्ड गर्छ र बाहिरी सिमाना थप्छ
जेब्रा-पट्टी .table-striped बेजोड पङ्क्तिहरूमा हल्का खैरो पृष्ठभूमि रङ थप्छ (१, ३, ५, आदि)
गाढा .table-condensed ठाडो प्याडिङलाई आधामा काट्छ, 8px देखि 4px सम्म, सबै tdर thतत्वहरूमा

उदाहरण तालिकाहरू

1. पूर्वनिर्धारित तालिका शैलीहरू

पठनीयता सुनिश्चित गर्न र संरचना कायम राख्नका लागि तालिकाहरू स्वचालित रूपमा केही सीमानाहरूसँग स्टाइल गरिएका छन्। 2.0 को साथ, .tableकक्षा आवश्यक छ।

  1. <table class = "टेबल" > 
  2.   …
  3. </table>
# पहिलो नाम थर प्रयोगकर्ता नाम
१ मार्क ओटो @mdo
२ याकूब थोरन्टन @मोटो
३ ल्यारी चरा @twitter

2. धारीदार तालिका

जेब्रा-स्ट्रिपिङ थपेर आफ्नो टेबुलहरूसँग थोरै फेन्सी प्राप्त गर्नुहोस्—केवल .table-stripedकक्षा थप्नुहोस्।

नोट: स्ट्रिप गरिएको तालिकाहरूले :nth-childCSS चयनकर्ता प्रयोग गर्दछ र IE7-IE8 मा उपलब्ध छैन।

  1. <तालिका वर्ग = "तालिका तालिका-धारीदार" > 
  2.   …
  3. </table>
# पहिलो नाम थर प्रयोगकर्ता नाम
१ मार्क ओटो @mdo
२ याकूब थोरन्टन @मोटो
३ ल्यारी चरा @twitter

3. बोर्डर गरिएको तालिका

सम्पूर्ण तालिकाको वरिपरि किनाराहरू र सौन्दर्य उद्देश्यका लागि गोलाकार कुनाहरू थप्नुहोस्।

  1. <table class = "टेबल टेबल बोर्डर्ड" > 
  2.   …
  3. </table>
# पहिलो नाम थर प्रयोगकर्ता नाम
१ मार्क ओटो @mdo
मार्क ओटो @getbootstrap
२ याकूब थोरन्टन @मोटो
३ ल्यारी द बर्ड @twitter

4. गाढा तालिका

.table-condensedटेबल सेल प्याडिङलाई आधामा (८px देखि 4px सम्म) काट्नको लागि कक्षा थपेर आफ्ना तालिकाहरूलाई थप कम्प्याक्ट बनाउनुहोस् ।

  1. <तालिका वर्ग = "तालिका तालिका संकुचित" > 
  2.   …
  3. </table>
# पहिलो नाम थर प्रयोगकर्ता नाम
१ मार्क ओटो @mdo
२ याकूब थोरन्टन @मोटो
३ ल्यारी द बर्ड @twitter

5. ती सबै जोड्नुहोस्!

उपलब्ध कक्षाहरू मध्ये कुनै पनि प्रयोग गरेर फरक लुक प्राप्त गर्न कुनै पनि तालिका कक्षाहरू संयोजन गर्न स्वतन्त्र महसुस गर्नुहोस्।

  1. <तालिका वर्ग = "तालिका तालिका-धारी तालिका-सीमादार तालिका-कन्डेन्ड" > 
  2.   ...
  3. </table>
पुरा नाम
# पहिलो नाम थर प्रयोगकर्ता नाम
१ मार्क ओटो @mdo
२ याकूब थोरन्टन @मोटो
३ ल्यारी द बर्ड @twitter

फारमहरू

लचिलो HTML र CSS

बुटस्ट्र्यापमा फारमहरूको बारेमा सबैभन्दा राम्रो पक्ष यो हो कि तपाइँ तपाइँको मार्कअपमा तपाइँ कसरी निर्माण गर्नुहुन्छ तपाइँका सबै इनपुट र नियन्त्रणहरू राम्रो देखिन्छन्। कुनै अनावश्यक HTML आवश्यक पर्दैन, तर हामी यसलाई आवश्यक पर्नेहरूका लागि ढाँचाहरू प्रदान गर्दछौं।

थप जटिल लेआउटहरू सजिलो स्टाइल र घटना बन्धनका लागि संक्षिप्त र मापनयोग्य कक्षाहरूसँग आउँछन्, त्यसैले तपाईं प्रत्येक चरणमा कभर हुनुहुन्छ।

चार लेआउटहरू समावेश छन्

बुटस्ट्र्याप चार प्रकारका फारम लेआउटहरूको लागि समर्थनको साथ आउँछ:

  • ठाडो (पूर्वनिर्धारित)
  • खोज्नुहोस्
  • क्रममा
  • तेर्सो

विभिन्न प्रकारका फारम लेआउटहरूलाई मार्कअपमा केही परिवर्तनहरू चाहिन्छ, तर नियन्त्रणहरू आफैं रहन्छ र व्यवहार उस्तै हुन्छ।

नियन्त्रण राज्यहरू र थप

बुटस्ट्र्यापका फारमहरूमा सबै आधार फारम नियन्त्रणहरू जस्तै इनपुट, टेक्स्टेरिया, र तपाईंले अपेक्षा गर्नुभएका चयनहरू समावेश गर्दछ। तर यो पनि धेरै अनुकूलन कम्पोनेन्टहरू जस्तै संलग्न र प्रिपेडेड इनपुटहरू र चेकबक्सहरूको सूचीहरूको लागि समर्थनको साथ आउँदछ।

राज्यहरू जस्तै त्रुटि, चेतावनी, र सफलता प्रत्येक प्रकारको फारम नियन्त्रणको लागि समावेश गरिएको छ। असक्षम नियन्त्रणहरूका लागि शैलीहरू पनि समावेश छन्।

चार प्रकारका रूपहरू

बुटस्ट्र्यापले साधारण वेब फारमहरूको चार शैलीहरूको लागि सरल मार्कअप र शैलीहरू प्रदान गर्दछ।

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

केवल फारम नियन्त्रणहरू प्रयोग गरेर उदाहरण फारमहरू , कुनै अतिरिक्त मार्कअप छैन

आधारभूत रूप

अतिरिक्त मार्कअप बिना स्मार्ट र हल्का डिफल्टहरू।

उदाहरण ब्लक-स्तर मद्दत पाठ यहाँ।

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

खोज फारम

.form-searchफारम र .search-queryमा थप्नुहोस् input।

  1. <फार्म वर्ग = "राम्रो फारम-खोज" > 
  2.   <इनपुट प्रकार = "पाठ" वर्ग = "इनपुट-मध्यम खोज-क्वेरी" >  
  3.   <बटन प्रकार = "सबमिट" वर्ग = "btn" > खोज्नुहोस् </ बटन>  
  4. </form>

इनलाइन फारम

.form-inlineफाराम नियन्त्रणहरूको ठाडो पङ्क्तिबद्धता र स्पेसिङलाई राम्रो बनाउन थप्नुहोस् ।

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

तेर्सो रूपहरू

हामीले समर्थन गर्ने सबै पूर्वनिर्धारित फारम नियन्त्रणहरू दायाँमा देखाइन्छ। यहाँ बुलेट गरिएको सूची छ:

  • पाठ इनपुटहरू (पाठ, पासवर्ड, इमेल, आदि)
  • चेकबक्स
  • रेडियो
  • चयन गर्नुहोस्
  • बहु चयन
  • फाइल इनपुट
  • textarea

फ्रीफर्म पाठको अतिरिक्त, कुनै पनि HTML5 पाठ-आधारित इनपुट त्यस्तै देखिन्छ।

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

माथिको उदाहरण फारम लेआउट दिएर, यहाँ पहिलो इनपुट र नियन्त्रण समूहसँग सम्बन्धित मार्कअप छ। स्टाइलका लागि .control-group, .control-labelर .controlsकक्षाहरू सबै आवश्यक छन्।

  1. <फार्म वर्ग = "फारम-क्षैतिज" > 
  2.   <fieldset>
  3.     <legend> Legend text </legend>
  4.     <div class = "control-group" > 
  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>
यहाँ केहि मूल्य
केही गडबड भएको हुन सक्छ
कृपया त्रुटि सच्याउनुहोस्
वाह!
वाह!

फारम नियन्त्रणहरू विस्तार गर्दै

प्रिपेन्ड गर्नुहोस् र इनपुटहरू संलग्न गर्नुहोस्

इनपुट समूहहरू - संलग्न वा पूर्व-पेन्डेड पाठको साथ - तपाईंको इनपुटहरूको लागि थप सन्दर्भ दिनको लागि सजिलो तरिका प्रदान गर्नुहोस्। उत्कृष्ट उदाहरणहरूमा ट्विटर प्रयोगकर्ता नामहरूको लागि @ चिन्ह वा वित्तको लागि $ समावेश छ।

चेकबक्स र रेडियो

v1.4 सम्म, Bootstrap लाई तिनीहरूलाई स्ट्याक गर्न चेकबक्सहरू र रेडियोहरू वरिपरि अतिरिक्त मार्कअप चाहिन्छ। अब, यो दोहोर्याउने एक साधारण कुरा हो <label class="checkbox">जसले लपेट्छ <input type="checkbox">।

इनलाइन चेकबक्सहरू र रेडियोहरू पनि समर्थित छन्। .inlineकेवल कुनैमा थप्नुहोस् .checkboxवा .radioर तपाईंले गर्नुभयो।

इनलाइन फारमहरू र जोड्नुहोस्/प्रीपेन्ड गर्नुहोस्

.add-onइनलाइन फारममा आगतहरू प्रिपेन्ड वा संलग्न गर्न प्रयोग गर्न, खाली ठाउँहरू बिना नै र inputएउटै लाइनमा राख्न निश्चित हुनुहोस् ।

फारम मद्दत पाठ

तपाईंको फारम इनपुटहरूको लागि मद्दत पाठ थप्नको लागि, इनलाइन मद्दत पाठ समावेश गर्नुहोस् वा इनपुट तत्व पछि <span class="help-inline">मद्दत पाठ ब्लक समावेश गर्नुहोस्।<p class="help-block">

.span*इनपुट साइजका लागि ग्रिड प्रणालीबाट उही कक्षाहरू प्रयोग गर्नुहोस् ।

तपाईंले ग्रिडमा नक्सा नगर्ने, उत्तरदायी CSS शैलीहरूमा अनुकूलन गर्ने, वा विभिन्न प्रकारका नियन्त्रणहरू (जस्तै, inputबनाम select) को लागि खातामा स्थिर कक्षाहरू पनि प्रयोग गर्न सक्नुहुन्छ।

@

यहाँ केही मद्दत पाठ छ

.००
यहाँ थप मद्दत पाठ छ
$ .००

नोट: लेबलहरूले धेरै ठूला क्लिक क्षेत्रहरू र थप प्रयोगयोग्य फारमका लागि सबै विकल्पहरूलाई घेर्दछ।

बटनहरू

टांक class="" विवरण
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तत्वहरूलाई jankiify गर्छ, हामीले ठीक गर्न नसक्ने खराब पाठ-छायासँग पाठ ग्रे रेन्डर गर्दै।

बहु आकारहरू

फ्यान्सी ठूला वा सानो बटनहरू? थप्नुहोस् .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
  • आइकन-थ-सूची
  • आइकन-ठीक छ
  • आइकन-हटाउनुहोस्
  • आइकन-जुम-इन
  • आइकन-जुम-आउट
  • आइकन बन्द
  • icon-signal
  • icon-cog
  • प्रतिमा रद्दीटोकरी
  • icon-घर
  • आइकन-फाइल
  • आइकन-समय
  • आइकन सडक
  • icon-download-alt
  • आइकन-डाउनलोड
  • आइकन-अपलोड
  • आइकन-इनबक्स
  • आइकन-प्ले-सर्कल
  • आइकन दोहोर्याउनुहोस्
  • आइकन-रिफ्रेस
  • icon-list-alt
  • आइकन-लक
  • आइकन-झण्डा
  • आइकन-हेडफोनहरू
  • आइकन-भोल्युम-अफ
  • आइकन-भोल्युम-डाउन
  • आइकन-भोल्युम-अप
  • icon-qrcode
  • आइकन-बारकोड
  • आइकन-ट्याग
  • आइकन-ट्यागहरू
  • आइकन-पुस्तक
  • आइकन-बुकमार्क
  • आइकन-प्रिन्ट
  • आइकन क्यामेरा
  • आइकन-फन्ट
  • आइकन-बोल्ड
  • आइकन-इटालिक
  • आइकन-टेक्स्ट-उचाइ
  • icon-text-width
  • आइकन-पङ्क्तिबद्ध-बायाँ
  • आइकन-पङ्क्तिबद्ध-केन्द्र
  • आइकन-पङ्क्तिबद्ध-दायाँ
  • icon-align-justify
  • आइकन-सूची
  • आइकन-इन्डेन्ट-बायाँ
  • आइकन-इन्डेन्ट-दायाँ
  • आइकन-फेसटाइम-भिडियो
  • प्रतिमा-चित्र
  • आइकन-पेन्सिल
  • आइकन-नक्सा-मार्कर
  • icon-समायोजित गर्नुहोस्
  • icon-tint
  • आइकन-सम्पादन
  • icon-share
  • आइकन-जाँच
  • आइकन चाल
  • आइकन-चरण-पछाडि
  • icon-fast-backward
  • icon-backward
  • आइकन प्ले
  • आइकन-पज
  • आइकन-स्टप
  • आइकन-फर्वार्ड
  • icon-fast-forward
  • आइकन-चरण-अगाडि
  • icon-Eject
  • आइकन-शेभरन-बायाँ
  • आइकन-शेभरन-दायाँ
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-चिन्ह
  • आइकन-प्रश्न-चिह्न
  • icon-info-sign
  • आइकन-स्क्रिनसट
  • icon-remove-circle
  • आइकन-ओके-सर्कल
  • आइकन-प्रतिबन्ध-सर्कल
  • आइकन-तीर-बायाँ
  • आइकन-तीर-दायाँ
  • आइकन-तीर-माथि
  • आइकन-तीर-डाउन
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • आइकन प्लस
  • आइकन-माइनस
  • icon-asterisk
  • आइकन-विस्मयादिबोधक चिन्ह
  • आइकन-उपहार
  • आइकन-पात
  • आइकन-आगो
  • आइकन-आँखा खुला
  • आइकन-आँखा बन्द
  • आइकन-चेतावनी-चिह्न
  • आइकन-प्लेन
  • आइकन-क्यालेन्डर
  • आइकन-यादृच्छिक
  • आइकन-टिप्पणी
  • आइकन-चुम्बक
  • icon-chevron-up
  • आइकन-शेभरन-डाउन
  • icon-retweet
  • आइकन-शपिंग-कार्ट
  • icon-folder-close
  • आइकन-फोल्डर-खोल्नुहोस्
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • आइकन-बुलहर्न
  • icon-bell
  • आइकन-प्रमाणपत्र
  • आइकन-थम्ब्स-अप
  • आइकन-थम्ब्स-डाउन
  • आइकन-हात-दायाँ
  • आइकन-हात-बायाँ
  • आइकन-ह्यान्ड-अप
  • आइकन-ह्यान्ड-डाउन
  • आइकन-वृत्त-तीर-दायाँ
  • आइकन-वृत्त-तीर-बायाँ
  • आइकन-वृत्त-तीर-माथि
  • आइकन-सर्कल-एरो-डाउन
  • icon-globe
  • आइकन-रिंच
  • आइकन-कार्यहरू
  • आइकन-फिल्टर
  • आइकन ब्रीफकेस
  • आइकन-फुलस्क्रिन

स्प्राइटको रूपमा निर्मित

प्रत्येक आइकनलाई अतिरिक्त अनुरोध बनाउनुको सट्टा, हामीले तिनीहरूलाई स्प्राइटमा कम्पाइल गरेका छौं - एउटा फाइलमा छविहरूको एउटा गुच्छा जसले छविहरूलाई स्थितिमा राख्न 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>ट्याग राख्न सक्नुहुन्छ, तपाइँ प्रतिमा राख्न सक्नुहुन्छ।

उदाहरणहरू

तिनीहरूलाई बटनहरूमा प्रयोग गर्नुहोस्, उपकरणपट्टी, नेभिगेसन, वा प्रीपेन्डेड फारम इनपुटहरूको लागि बटन समूहहरू।

प्रयोगकर्ता

रिफ्रेस गर्नुहोस् चेकआउट मेटाउन

टिप्पणी गर्नुहोस् सेटिङहरू थप जानकारी