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

सम्पूर्ण टाइपोग्राफिक ग्रिड हाम्रो 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।

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

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 हो ।

ब्लककोट समावेश गर्न , उद्धरणको रूपमा कुनै पनि 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>

• 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।

क्रममा

कोडको इनलाइन स्निपेटहरू र्‍याप गर्नुहोस् <code>।

उदाहरणका लागि , <code> खण्ड </ code > लाई इनलाइनको रूपमा बेर्नु पर्छ ।  

आधारभूत ब्लक

<pre>कोडको धेरै लाइनहरूको लागि प्रयोग गर्नुहोस् । उचित प्रतिपादनको लागि कुनै पनि क्यारेटहरूलाई तिनीहरूको युनिकोड क्यारेक्टरहरूमा बदल्न निश्चित हुनुहोस्।

<p>नमूना पाठ यहाँ...</p>

<पूर्व>
  <p>नमूना पाठ यहाँ...</p>
</pre>

नोट:<pre> ट्याग भित्र कोडलाई सकेसम्म बायाँको नजिक राख्न निश्चित हुनुहोस् ; यसले सबै ट्याबहरू रेन्डर गर्नेछ।

Google Prettify

एउटै <pre>तत्व लिनुहोस् र परिष्कृत रेन्डरिङका लागि दुई वैकल्पिक कक्षाहरू थप्नुहोस्।

<p> यहाँ नमूना पाठ... </p>

<पूर्व वर्ग = "सुन्दर छाप 
     linenums" >
  <p>नमूना पाठ यहाँ...</p>
</pre>

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

<table>
  <thead>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

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

<table class = "टेबल" > 
  …
</table>

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

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

<तालिका वर्ग = "टेबल तालिका-धारीदार" > 
  …
</table>

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

<table class = "table table-bordered" > 
  …
</table>

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

<तालिका वर्ग = "तालिका तालिका संकुचित" > 
  …
</table>

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

<तालिका वर्ग = "तालिका तालिका-धारीदार तालिका-सीमादार तालिका-कन्डेन्ड" > 
  ...
</table>

लचिलो HTML र CSS

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

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

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

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

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

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

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

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

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

v2.0 सँग, हामीसँग फारम शैलीहरूको लागि हल्का र स्मार्ट पूर्वनिर्धारितहरू छन्। कुनै अतिरिक्त मार्कअप छैन, केवल फारम नियन्त्रणहरू।

पूर्वनिर्धारित वेबकिट शैलीहरू प्रतिबिम्बित गर्दै, .form-searchथप गोलाकार खोज क्षेत्रहरूको लागि मात्र थप्नुहोस्।

इनपुटहरू सुरु गर्न ब्लक स्तर हो। .form-inlineर को लागि .form-horizontal, हामी इनलाइन-ब्लक प्रयोग गर्छौं।

के समावेश छ

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

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

v2.0 सँग नयाँ पूर्वनिर्धारितहरू

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">इनपुट तत्व पछि मद्दत पाठ ब्लक समावेश गर्नुहोस्।

कार्यहरूको लागि बटनहरू

कन्भेन्सनको रूपमा, बटनहरू मात्र कार्यहरूका लागि प्रयोग गरिनु पर्छ जबकि हाइपरलिङ्कहरू वस्तुहरूको लागि प्रयोग गरिन्छ। उदाहरणका लागि, "डाउनलोड" बटन हुनुपर्छ जबकि "हालको गतिविधि" लिङ्क हुनुपर्छ।

एङ्कर र फारमहरूको लागि

बटन शैलीहरू लागू गरिएको कुनै पनि कुरामा लागू गर्न सकिन्छ .btn। जे होस्, सामान्यतया तपाइँ यी केवल <a>र <button>तत्वहरूमा लागू गर्न चाहानुहुन्छ।

नोट: सबै बटनहरूमा .btnकक्षा समावेश हुनुपर्छ। बटन शैलीहरू लागू गर्नुपर्छ <button>र <a>स्थिरताका लागि तत्वहरू।

बहु आकारहरू

फ्यान्सी ठूला वा सानो बटनहरू? यसमा छ!

प्राथमिक कार्य कार्य

प्राथमिक कार्य कार्य

असक्षम राज्य

अक्षम बटनहरूको लागि, .btn-disabledलिङ्कहरू र तत्वहरूको :disabledलागि प्रयोग गर्नुहोस्।<button>

प्राथमिक कार्य कार्य

प्राथमिक कार्य कार्य

क्रस ब्राउजर अनुकूलता

IE9 मा, हामी गोलाकार कुनाहरूको पक्षमा सबै बटनहरूमा ग्रेडियन्ट छोड्छौं किनभने IE9 ले पृष्ठभूमि ढाँचाहरू कुनाहरूमा क्रप गर्दैन।

सम्बन्धित, IE9 ले असक्षम गरिएका buttonतत्वहरूलाई jankifi गर्छ, पाठ ग्रे रेन्डर गर्दै खराब पाठ-छाया-दुर्भाग्यवश हामी यसलाई ठीक गर्न सक्दैनौं।

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

प्रत्येक आइकनलाई अतिरिक्त अनुरोध बनाउनुको सट्टा, हामीले तिनीहरूलाई स्प्राइटमा कम्पाइल गरेका छौं - एउटा फाइलमा छविहरूको एक गुच्छा जसले छविहरूलाई स्थितिमा राख्न CSS प्रयोग गर्दछ background-position। हामीले Twitter.com मा प्रयोग गर्ने यही विधि हो र यसले हाम्रो लागि राम्रो काम गरेको छ।

हाम्रा अन्य कम्पोनेन्टहरू जस्तै सबै आइकन वर्गहरू .icon-उचित नेमस्पेसिङ र स्कोपिङका लागि उपसर्ग लगाइएका छन्। यसले अन्य उपकरणहरूसँग द्वन्द्वबाट बच्न मद्दत गर्नेछ।

Glyphicons ले हामीलाई हाम्रो खुला स्रोत टुलकिटमा सेट गरिएको Halflings को प्रयोग गर्न अनुमति दिएको छ जबसम्म हामीले यहाँ कागजातहरूमा लिङ्क र क्रेडिट प्रदान गर्छौं। कृपया आफ्नो परियोजनाहरूमा पनि यस्तै गर्ने विचार गर्नुहोस्।

कसरी प्रयोग गर्ने

v2.0.0 को साथ, हामीले <i>हाम्रा सबै आइकनहरूको लागि ट्याग प्रयोग गर्ने छनौट गरेका छौं, तर तिनीहरूसँग कुनै केस वर्ग छैन - केवल साझा उपसर्ग। प्रयोग गर्नको लागि, निम्न कोड लगभग कहीं पनि राख्नुहोस्:

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

त्यहाँ उल्टो (सेतो) आइकनहरूको लागि शैलीहरू पनि उपलब्ध छन्, एक अतिरिक्त वर्गको साथ तयार पारिएको छ:

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

तपाईंको आइकनहरूको लागि छनौट गर्न 120 कक्षाहरू छन्। केवल <i>सही कक्षाहरूसँग ट्याग थप्नुहोस् र तपाईं सेट हुनुहुन्छ। तपाईंले sprites.less मा वा यहाँ यो कागजातमा पूरा सूची फेला पार्न सक्नुहुन्छ ।

केसहरू प्रयोग गर्नुहोस्

आइकनहरू उत्कृष्ट छन्, तर तिनीहरूलाई कहाँ प्रयोग गर्ने? यहाँ केहि विचारहरू छन्:

• तपाईंको साइडबार नेभिगेसनका लागि भिजुअलको रूपमा
• विशुद्ध रूपमा आइकन-संचालित नेभिगेसनको लागि
• बटनहरूको लागि कार्यको अर्थ बताउन मद्दत गर्न
• प्रयोगकर्ताको गन्तव्यमा सन्दर्भ साझेदारी गर्न लिङ्कहरूसँग

अनिवार्य रूपमा, जहाँ पनि तपाइँ <i>ट्याग राख्न सक्नुहुन्छ, तपाइँ प्रतिमा राख्न सक्नुहुन्छ।

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

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