मचानको शीर्षमा, आधारभूत 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. Nullam id dolor id nibh ultricies vehicula ut id elit।
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> |
होभरमा विस्तारित संस्करण देखाउन संक्षिप्त रूपहरू र एक्रोनिमहरू लपेट्छ | title विस्तारित पाठको लागि वैकल्पिक समावेश गर्नुहोस् |
<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>
ट्याग कसरी प्रयोग गर्न सकिन्छ भनेर यहाँ दुई उदाहरणहरू छन् :
संक्षिप्त अक्षरहरू ठूला अक्षरको पाठ र हल्का बिन्दु भएको तल्लो किनाराको साथ स्टाइल गरिएका छन्। तिनीहरूसँग होभरमा मद्दत कर्सर पनि छ त्यसैले प्रयोगकर्ताहरूसँग होभरमा केही देखाइने थप संकेत छ।
काटिएको रोटी पछि HTML सबैभन्दा राम्रो कुरा हो।
विशेषता शब्दको संक्षिप्त नाम attr हो ।
तत्व | प्रयोग | ऐच्छिक |
---|---|---|
<blockquote> |
अर्को स्रोतबाट सामग्री उद्धृत गर्नको लागि ब्लक-स्तर तत्व |
.pull-left र .pull-right कक्षाहरू |
<small> |
प्रयोगकर्ता-फेसिङ उद्धरण थप्नको लागि वैकल्पिक तत्व, सामान्यतया कामको शीर्षक भएको लेखक | <cite> स्रोतको शीर्षक वा नामको वरिपरि राख्नुहोस् |
ब्लककोट समावेश गर्न , उद्धरणको रूपमा कुनै पनि HTML<blockquote>
वरिपरि लपेट्नुहोस्। सीधा उद्धरणहरूको लागि हामी सिफारिस गर्छौं ।<p>
तपाइँको स्रोत उद्धृत गर्न एक वैकल्पिक <small>
तत्व समावेश गर्नुहोस् र तपाइँ —
स्टाइलिंग उद्देश्यको लागि पहिले एक em ड्यास प्राप्त गर्नुहुनेछ।
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit। इन्टेजर पोस्युरे एरेट ए एन्ट वेनेनाटिस। </p>
- <small> कोही प्रसिद्ध </small>
- </blockquote>
पूर्वनिर्धारित ब्लककोटहरू यसरी शैलीबद्ध छन्:
Lorem ipsum dolor sit amet, consectetur adipiscing elit। इन्टेजर पोस्युरे एरेट ए एन्ट वेनेनाटिस।
कामको शरीरमा प्रसिद्ध कोही
तपाईंको ब्लककोट दायाँ तिर फ्लोट गर्न, थप्नुहोस् class="pull-right"
:
Lorem ipsum dolor sit amet, consectetur adipiscing elit। इन्टेजर पोस्युरे एरेट ए एन्ट वेनेनाटिस।
कामको शरीरमा प्रसिद्ध कोही
<ul>
<ul class="unstyled">
<ol>
<dl>
कोडको इनलाइन स्निपेटहरू र्याप गर्नुहोस् <code>
।
- उदाहरणका लागि , <code> खण्ड </ code > लाई इनलाइनको रूपमा बेर्नु पर्छ ।
<pre>
कोडको धेरै लाइनहरूको लागि प्रयोग गर्नुहोस् । उचित प्रतिपादनको लागि कोडमा कुनै पनि कोण कोष्ठकहरू छोड्न निश्चित हुनुहोस्।
<p>नमूना पाठ यहाँ...</p>
- <पूर्व>
- <p>नमूना पाठ यहाँ...</p>
- </pre>
नोट:<pre>
ट्याग भित्र कोडलाई सकेसम्म बायाँको नजिक राख्न निश्चित हुनुहोस् ; यसले सबै ट्याबहरू रेन्डर गर्नेछ।
तपाईंले वैकल्पिक .pre-scrollable
रूपमा 350px को अधिकतम-उचाइ सेट गर्ने र y-अक्ष स्क्रोलबार प्रदान गर्ने कक्षा थप्न सक्नुहुन्छ।
एउटै <pre>
तत्व लिनुहोस् र परिष्कृत रेन्डरिङका लागि दुई वैकल्पिक कक्षाहरू थप्नुहोस्।
- <p> यहाँ नमूना पाठ... </p>
- <पूर्व वर्ग = "सुन्दर छाप
- linenums" >
- <p>नमूना पाठ यहाँ...</p>
- </pre>
google-code-prettify डाउनलोड गर्नुहोस् र कसरी प्रयोग गर्ने भनेर रीडमी हेर्नुहोस्।
ट्याग | विवरण |
---|---|
<table> |
ट्याबुलर ढाँचामा डेटा प्रदर्शन गर्नको लागि र्यापिङ तत्व |
<thead> |
<tr> तालिका हेडर पङ्क्तिहरू ( ) को लागि तालिका स्तम्भहरू लेबल गर्न कन्टेनर तत्व |
<tbody> |
तालिकाको मुख्य भागमा तालिका पङ्क्तिहरू ( <tr> ) को लागि कन्टेनर तत्व |
<tr> |
एकल पङ्क्तिमा देखिने तालिका कक्षहरू ( <td> वा ) को सेटको लागि कन्टेनर तत्व<th> |
<td> |
पूर्वनिर्धारित तालिका कक्ष |
<th> |
स्तम्भका लागि विशेष तालिका कक्ष (वा पङ्क्ति, स्कोप र प्लेसमेन्टमा निर्भर गर्दै) लेबलहरू भित्र प्रयोग गरिनु पर्छ। <thead> |
<caption> |
तालिकामा भएका कुराहरूको विवरण वा सारांश, विशेष गरी स्क्रिन रिडरहरूका लागि उपयोगी |
- <table>
- <thead>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
नाम | कक्षा | विवरण |
---|---|---|
पूर्वनिर्धारित | कुनै पनि छैन | कुनै शैलीहरू छैनन्, केवल स्तम्भहरू र पङ्क्तिहरू |
आधारभूत | .table |
पङ्क्तिहरू बीच मात्र तेर्सो रेखाहरू |
सीमाना | .table-bordered |
कुनाहरू राउन्ड गर्छ र बाहिरी सिमाना थप्छ |
जेब्रा-पट्टी | .table-striped |
बेजोड पङ्क्तिहरूमा हल्का खैरो पृष्ठभूमि रङ थप्छ (१, ३, ५, आदि) |
गाढा | .table-condensed |
ठाडो प्याडिङलाई आधामा काट्छ, 8px देखि 4px सम्म, सबै td र th तत्वहरूमा |
पठनीयता सुनिश्चित गर्न र संरचना कायम राख्नका लागि तालिकाहरू स्वचालित रूपमा केही सीमानाहरूसँग स्टाइल गरिएका छन्। 2.0 को साथ, .table
कक्षा आवश्यक छ।
- <table class = "टेबल" >
- …
- </table>
# | पहिलो नाम | थर | भाषा |
---|---|---|---|
१ | मार्क | ओटो | CSS |
२ | याकूब | थोरन्टन | जाभास्क्रिप्ट |
३ | स्टु | दाँत | HTML |
जेब्रा-स्ट्रिपिङ थपेर आफ्नो टेबुलहरूसँग थोरै फेन्सी प्राप्त गर्नुहोस्—केवल .table-striped
कक्षा थप्नुहोस्।
नोट: स्ट्रिप गरिएको तालिकाहरूले :nth-child
CSS चयनकर्ता प्रयोग गर्दछ र IE7-IE8 मा उपलब्ध छैन।
- <तालिका वर्ग = "टेबल तालिका-धारीदार" >
- …
- </table>
# | पहिलो नाम | थर | भाषा |
---|---|---|---|
१ | मार्क | ओटो | CSS |
२ | याकूब | थोरन्टन | जाभास्क्रिप्ट |
३ | स्टु | दाँत | HTML |
सम्पूर्ण तालिकाको वरिपरि किनाराहरू र सौन्दर्य उद्देश्यका लागि गोलाकार कुनाहरू थप्नुहोस्।
- <table class = "table table-bordered" >
- …
- </table>
# | पहिलो नाम | थर | भाषा |
---|---|---|---|
१ | मार्क ओटो | CSS | |
२ | याकूब | थोरन्टन | जाभास्क्रिप्ट |
३ | स्टु | दाँत | |
३ | ब्रोसेफ | स्टालिन | HTML |
.table-condensed
टेबल सेल प्याडिङलाई आधामा (८px देखि 4px सम्म) काट्नको लागि कक्षा थपेर आफ्ना तालिकाहरूलाई थप कम्प्याक्ट बनाउनुहोस् ।
- <तालिका वर्ग = "तालिका तालिका संकुचित" >
- …
- </table>
# | पहिलो नाम | थर | भाषा |
---|---|---|---|
१ | मार्क | ओटो | CSS |
२ | याकूब | थोरन्टन | जाभास्क्रिप्ट |
३ | स्टु | दाँत | HTML |
उपलब्ध कक्षाहरू मध्ये कुनै पनि प्रयोग गरेर फरक लुक प्राप्त गर्न कुनै पनि तालिका कक्षाहरू संयोजन गर्न स्वतन्त्र महसुस गर्नुहोस्।
- <तालिका वर्ग = "तालिका तालिका-धारीदार तालिका-सीमादार तालिका-कन्डेन्ड" >
- ...
- </table>
# | पहिलो नाम | थर | भाषा |
---|---|---|---|
१ | मार्क | ओटो | CSS |
२ | याकूब | थोरन्टन | जाभास्क्रिप्ट |
३ | स्टु | दाँत | HTML |
४ | ब्रोसेफ | स्टालिन | HTML |
बुटस्ट्र्यापमा फारमहरूको बारेमा सबैभन्दा राम्रो पक्ष यो हो कि तपाइँ तपाइँको मार्कअपमा तपाइँ कसरी निर्माण गर्नुहुन्छ तपाइँका सबै इनपुट र नियन्त्रणहरू राम्रो देखिन्छन्। कुनै अनावश्यक HTML आवश्यक पर्दैन, तर हामी यसलाई आवश्यक पर्नेहरूका लागि ढाँचाहरू प्रदान गर्दछौं।
थप जटिल लेआउटहरू सजिलो स्टाइल र घटना बन्धनका लागि संक्षिप्त र मापनयोग्य कक्षाहरूसँग आउँछन्, त्यसैले तपाईं प्रत्येक चरणमा कभर हुनुहुन्छ।
बुटस्ट्र्याप चार प्रकारका फारम लेआउटहरूको लागि समर्थनको साथ आउँछ:
विभिन्न प्रकारका फारम लेआउटहरूलाई मार्कअपमा केही परिवर्तनहरू चाहिन्छ, तर नियन्त्रणहरू आफैं रहन्छ र व्यवहार उस्तै हुन्छ।
बुटस्ट्र्यापका फारमहरूमा सबै आधार फारम नियन्त्रणहरू जस्तै इनपुट, टेक्स्टेरिया, र तपाईंले अपेक्षा गर्नुभएका चयनहरू समावेश गर्दछ। तर यो पनि धेरै अनुकूलन कम्पोनेन्टहरू जस्तै संलग्न र प्रिपेडेड इनपुटहरू र चेकबक्सहरूको सूचीहरूको लागि समर्थनको साथ आउँदछ।
राज्यहरू जस्तै त्रुटि, चेतावनी, र सफलता प्रत्येक प्रकारको फारम नियन्त्रणको लागि समावेश गरिएको छ। असक्षम नियन्त्रणहरूका लागि शैलीहरू पनि समावेश छन्।
बुटस्ट्र्यापले साधारण वेब फारमहरूको चार शैलीहरूको लागि सरल मार्कअप र शैलीहरू प्रदान गर्दछ।
नाम | कक्षा | विवरण |
---|---|---|
ठाडो (पूर्वनिर्धारित) | .form-vertical (आवश्यक छैन) |
स्ट्याक गरिएको, नियन्त्रणहरूमा बायाँ-पङ्क्तिबद्ध लेबलहरू |
क्रममा | .form-inline |
कम्प्याक्ट शैलीको लागि बायाँ-पङ्क्तिबद्ध लेबल र इनलाइन-ब्लक नियन्त्रणहरू |
खोज्नुहोस् | .form-search |
एक विशिष्ट खोज सौन्दर्यको लागि अतिरिक्त-गोलाकार पाठ इनपुट |
तेर्सो | .form-horizontal |
बायाँ, दायाँ-पङ्क्तिबद्ध लेबलहरू नियन्त्रणहरू जस्तै समान रेखामा फ्लोट गर्नुहोस् |
v2.0 सँग, हामीसँग फारम शैलीहरूको लागि हल्का र स्मार्ट पूर्वनिर्धारितहरू छन्। कुनै अतिरिक्त मार्कअप छैन, केवल फारम नियन्त्रणहरू।
- <फार्म वर्ग = "राम्रो" >
- <label> लेबल नाम </label>
- <इनपुट प्रकार = "पाठ" वर्ग = "span3" प्लेसहोल्डर = "केहि टाइप गर्नुहोस् ..." >
- <span class = "help-inline" > सम्बद्ध मद्दत पाठ! </span>
- <लेबल वर्ग = "चेकबक्स" >
- <इनपुट प्रकार = "चेकबक्स" > मलाई जाँच गर्नुहोस्
- </label>
- <बटन प्रकार = "सबमिट" वर्ग = "btn" > बुझाउनुहोस् </ बटन>
- </form>
पूर्वनिर्धारित वेबकिट शैलीहरू प्रतिबिम्बित गर्दै, .form-search
थप गोलाकार खोज क्षेत्रहरूको लागि मात्र थप्नुहोस्।
- <फार्म वर्ग = "राम्रो फारम-खोज" >
- <इनपुट प्रकार = "पाठ" वर्ग = "इनपुट-मध्यम खोज-क्वेरी" >
- <बटन प्रकार = "सबमिट" वर्ग = "btn" > खोज्नुहोस् </ बटन>
- </form>
इनपुटहरू सुरु गर्न ब्लक स्तर हो। .form-inline
र को लागि .form-horizontal
, हामी इनलाइन-ब्लक प्रयोग गर्छौं।
- <फार्म वर्ग = "राम्रो फारम-इनलाइन" >
- <इनपुट प्रकार = "टेक्स्ट" वर्ग = "इनपुट-सानो" प्लेसहोल्डर = "इमेल" >
- <इनपुट प्रकार = "पासवर्ड" वर्ग = "इनपुट-सानो" प्लेसहोल्डर = "पासवर्ड" >
- <बटन प्रकार = "सबमिट" वर्ग = "btn" > जानुहोस् </ बटन>
- </form>
माथिको उदाहरण फारम लेआउट दिएर, यहाँ पहिलो इनपुट र नियन्त्रण समूहसँग सम्बन्धित मार्कअप छ। स्टाइलका लागि .control-group
, .control-label
र .controls
कक्षाहरू सबै आवश्यक छन्।
- <फार्म वर्ग = "फारम-क्षैतिज" >
- <fieldset>
- <legend> Legend text </legend>
- <div class = "control-group" >
- <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>
इनपुट समूहहरू - संलग्न वा पूर्व-पेन्डेड पाठको साथ - तपाईंको इनपुटहरूको लागि थप सन्दर्भ दिन सजिलो तरिका प्रदान गर्नुहोस्। उत्कृष्ट उदाहरणहरूमा ट्विटर प्रयोगकर्ता नामहरूको लागि @ चिन्ह वा वित्तको लागि $ समावेश छ।
v1.4 सम्म, Bootstrap लाई तिनीहरूलाई स्ट्याक गर्न चेकबक्स र रेडियो वरिपरि अतिरिक्त मार्कअप आवश्यक छ। अब, यो दोहोर्याउने एक साधारण कुरा हो <label class="checkbox">
जसले लपेट्छ <input type="checkbox">
।
इनलाइन चेकबक्सहरू र रेडियोहरू पनि समर्थित छन्। .inline
केवल कुनैमा थप्नुहोस् .checkbox
वा .radio
र तपाईंले गर्नुभयो।
.add-on
इनलाइन फारममा आगतहरू प्रिपेन्ड वा संलग्न गर्न प्रयोग गर्न, खाली ठाउँहरू बिना नै र input
एउटै लाइनमा राख्न निश्चित हुनुहोस् ।
तपाईंको फारम इनपुटहरूको लागि मद्दत पाठ थप्नको लागि, इनलाइन मद्दत पाठ समावेश गर्नुहोस् वा इनपुट तत्व पछि <span class="help-inline">
मद्दत पाठ ब्लक समावेश गर्नुहोस्।<p class="help-block">
:after
। कागजातहरूमा, हामी आइकनको साइज हाइलाइट गर्न होभरमा हल्का रातो पृष्ठभूमि रङ देखाउँछौं।
प्रत्येक आइकनलाई अतिरिक्त अनुरोध बनाउनुको सट्टा, हामीले तिनीहरूलाई स्प्राइटमा कम्पाइल गरेका छौं - एउटा फाइलमा छविहरूको एक गुच्छा जसले छविहरूलाई स्थितिमा राख्न CSS प्रयोग गर्दछ background-position
। हामीले Twitter.com मा प्रयोग गर्ने यही विधि हो र यसले हाम्रो लागि राम्रो काम गरेको छ।
हाम्रा अन्य कम्पोनेन्टहरू जस्तै सबै आइकन वर्गहरू .icon-
उचित नेमस्पेसिङ र स्कोपिङका लागि उपसर्ग लगाइएका छन्। यसले अन्य उपकरणहरूसँग द्वन्द्वबाट बच्न मद्दत गर्नेछ।
Glyphicons ले हामीलाई हाम्रो खुला स्रोत टुलकिटमा सेट गरिएको Halflings को प्रयोग गर्न अनुमति दिएको छ जबसम्म हामीले यहाँ कागजातहरूमा लिङ्क र क्रेडिट प्रदान गर्छौं। कृपया आफ्नो परियोजनाहरूमा पनि यस्तै गर्ने विचार गर्नुहोस्।
v2.0.1 को साथ, हामीले <i>
हाम्रा सबै आइकनहरूको लागि ट्याग प्रयोग गर्न रोजेका छौं, तर तिनीहरूसँग कुनै केस वर्ग छैन - केवल साझा उपसर्ग। प्रयोग गर्नको लागि, निम्न कोड लगभग कहीं पनि राख्नुहोस्:
- <i class = "icon-search" ></i>
त्यहाँ उल्टो (सेतो) आइकनहरूको लागि शैलीहरू पनि उपलब्ध छन्, एक अतिरिक्त वर्गको साथ तयार पारिएको छ:
- <i class = "icon-search icon-white" ></i>
तपाईंको आइकनहरूको लागि छनौट गर्न 120 कक्षाहरू छन्। केवल <i>
सही कक्षाहरूसँग ट्याग थप्नुहोस् र तपाईं सेट हुनुहुन्छ। तपाईंले sprites.less मा वा यहाँ यो कागजातमा पूरा सूची फेला पार्न सक्नुहुन्छ ।
आइकनहरू उत्कृष्ट छन्, तर तिनीहरूलाई कहाँ प्रयोग गर्ने? यहाँ केहि विचारहरू छन्:
अनिवार्य रूपमा, जहाँ पनि तपाइँ <i>
ट्याग राख्न सक्नुहुन्छ, तपाइँ प्रतिमा राख्न सक्नुहुन्छ।
तिनीहरूलाई बटनहरूमा प्रयोग गर्नुहोस्, उपकरणपट्टी, नेभिगेसन, वा प्रीपेन्डेड फारम इनपुटहरूको लागि बटन समूहहरू।