माथि

बायाँ

सही

तल

बुटस्ट्र्याप, ट्विटरबाट

बुटस्ट्र्याप ट्विटरबाट वेब एप्स र साइटहरूको विकास किकस्टार्ट गर्न डिजाइन गरिएको टुलकिट हो।
यसले टाइपोग्राफी, फारमहरू, बटनहरू, तालिकाहरू, ग्रिडहरू, नेभिगेसन, र थपका लागि आधार CSS र HTML समावेश गर्दछ।

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

CSS हटलिङ्क गर्नुहोस्

छिटो र सजिलो सुरुवातको लागि, यो स्निपेटलाई आफ्नो वेबपेजमा प्रतिलिपि गर्नुहोस्।

यसलाई कम प्रयोग गर्नुहोस्

कम प्रयोग गर्ने प्रशंसक? कुनै समस्या छैन, केवल रेपो क्लोन गर्नुहोस् र यी लाइनहरू थप्नुहोस्:

GitHub मा फोर्क

Github मा आधिकारिक बुटस्ट्र्याप रेपोको साथ डाउनलोड, फोर्क, पुल, फाइल मुद्दाहरू, र थप।

GitHub मा बुटस्ट्र्याप »

हाल v1.3.0

इतिहास

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

dev.twitter.com मा थप पढ्नुहोस् ›

ब्राउजर समर्थन

क्रोम, सफारी, इन्टरनेट एक्सप्लोरर, र फायरफक्स जस्ता प्रमुख आधुनिक ब्राउजरहरूमा बुटस्ट्र्याप परीक्षण र समर्थित छ।

क्रोम, सफारी, इन्टरनेट एक्सप्लोरर र फायरफक्समा परीक्षण र समर्थित

पछिल्लो सफारी
पछिल्लो Google Chrome
फायरफक्स ४+
इन्टरनेट एक्सप्लोरर 7+
ओपेरा 11

के समावेश छ

बुटस्ट्र्याप कम्पाइल गरिएको CSS, uncompiled, र उदाहरण टेम्प्लेटहरूको साथ पूरा हुन्छ।

१.३ Javascript प्लगइनहरूमा नयाँ
सबै मौलिक .less फाइलहरू
पूर्णतया कम्पाइल गरिएको र मिनिफाइड CSS
स्टाइल गाइड कागजात पूरा गर्नुहोस्
फरक लेआउटका साथ तीन उदाहरण पृष्ठहरू

द्रुत-सुरु उदाहरणहरू

केहि द्रुत टेम्प्लेटहरू चाहिन्छ? हामीले सँगै राखेका यी आधारभूत उदाहरणहरू हेर्नुहोस्:

पूर्वनिर्धारित ग्रिड

Bootstrap को भागको रूपमा प्रदान गरिएको पूर्वनिर्धारित ग्रिड प्रणाली 940px चौडा 16-स्तम्भ ग्रिड हो। यो लोकप्रिय 960 ग्रिड प्रणालीको स्वाद हो, तर बायाँ र दायाँ छेउमा अतिरिक्त मार्जिन/प्याडिङ बिना।

उदाहरण ग्रिड मार्कअप

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

<div वर्ग = "पङ्क्ति" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

१

२

३

१

४

१/३

२/३

४

६

८

५

११

१६

अफसेटिङ स्तम्भहरू

४

८ अफसेट ४

१/३ अफसेट २/३ सेकेन्ड

४ अफसेट ४

५ अफसेट ३

१० अफसेट ६

नेस्टिङ स्तम्भहरू

.rowयदि तपाइँ अवस्थित स्तम्भ भित्र सिर्जना गरेर तपाइँको सामग्री नेस्ट गर्नुहोस् ।

नेस्टेड स्तम्भहरूको उदाहरण

स्तम्भको स्तर १

स्तर २

<div वर्ग = "पङ्क्ति" > 
  <div class = "span12" > 
    स्तम्भको स्तर १
    <div वर्ग = "पङ्क्ति" > 
      <div class = "span6" > 
        स्तर २
      </div>
      <div class = "span6" > 
        स्तर २
      </div>
    </div>
  </div>
</div>

तपाईंको आफ्नै ग्रिड रोल गर्नुहोस्

बुटस्ट्र्यापमा निर्मित पूर्वनिर्धारित 940px ग्रिड प्रणाली अनुकूलन गर्नका लागि मुट्ठीभर चरहरू हुन्। अनुकूलनको एक बिट संग, तपाईं स्तम्भहरूको आकार, तिनीहरूको गटर, र तिनीहरू बस्ने कन्टेनर परिमार्जन गर्न सक्नुहुन्छ।

ग्रिड भित्र

ग्रिड प्रणाली परिमार्जन गर्न आवश्यक चरहरू हाल सबै मा रहन्छन् preboot.less।

चर	पूर्वनिर्धारित मान	विवरण
`@gridColumns`	१६	ग्रिड भित्र स्तम्भहरूको संख्या
`@gridColumnWidth`	40px	ग्रिड भित्रको प्रत्येक स्तम्भको चौडाइ
`@gridGutterWidth`	20px	प्रत्येक स्तम्भ बीचको ऋणात्मक खाली ठाउँ
`@siteWidth`	सबै स्तम्भहरू र गटरहरूको गणना गरिएको योगफल	हामी स्तम्भहरू र गटरहरूको संख्या गणना गर्न र मिक्सनको चौडाइ सेट गर्न केही आधारभूत मिलान प्रयोग गर्छौं `.fixed-container()`।

अब अनुकूलन गर्न

ग्रिड परिमार्जन गर्नु भनेको तीन @grid-*चर परिवर्तन गर्नु र कम फाइलहरू पुन: कम्पाइल गर्नु हो।

बुटस्ट्र्याप 24 स्तम्भहरू सम्मको ग्रिड प्रणाली ह्यान्डल गर्न सुसज्जित हुन्छ; पूर्वनिर्धारित मात्र 16 हो। यहाँ छ कि तपाइँको ग्रिड चरहरू 24-स्तम्भ ग्रिडमा अनुकूलित देखिनेछन्।

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;

एक पटक पुन: कम्पाइल भएपछि, तपाइँ सेट हुनुहुनेछ!

निश्चित लेआउट

पूर्वनिर्धारित र सरल 940px-चौडा, एकल द्वारा प्रदान गरिएको कुनै पनि वेबसाइट वा पृष्ठको लागि केन्द्रित लेआउट <div.container>।

<body>
  <div वर्ग = "कन्टेनर" > 
    ...
  </div>
</body>

तरल लेआउट

न्यूनतम र अधिकतम चौडाइ र बायाँ-हात साइडबारको साथ वैकल्पिक, लचिलो तरल पृष्ठ संरचना। अनुप्रयोगहरू र कागजातहरूको लागि उत्कृष्ट।

<body>
  <div वर्ग = "कन्टेनर-तरल पदार्थ" > 
    <div वर्ग = "साइडबार" > 
      ...
    </div>
    <div वर्ग = "सामग्री" > 
      ...
    </div>
  </div>
</body>

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

तपाइँको वेबपृष्ठहरु को संरचना को लागी एक मानक टाइपोग्राफिक पदानुक्रम।

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

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

h1। शीर्षक १

h2। शीर्षक २

h3। शीर्षक ३

h4। हेडिङ ४

h5। हेडिङ ५

h6। हेडिङ ६

उदाहरण अनुच्छेद

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।

उदाहरण शीर्षकमा उप-शीर्षक छ...

विविध। तत्वहरू

जोड, ठेगाना, र संक्षिप्त रूपहरू प्रयोग गर्दै

<strong> <em> <address> <abbr>

कहिले प्रयोग गर्ने

एम्पेसिस ट्यागहरू ( <strong>र <em>) यसको वरपरको प्रतिलिपिको सापेक्ष शब्द वा वाक्यांशको थप महत्त्व वा जोड संकेत गर्न प्रयोग गर्नुपर्छ। <strong>महत्त्व र तनाव जोडको <em>लागि प्रयोग गर्नुहोस् ।

एक अनुच्छेद मा जोड

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> HTML5 मा प्रयोग गर्न र ट्यागहरू गर्न अझै पनि ठीक छ <i>र तिनीहरूलाई क्रमशः बोल्ड र इटालिक स्टाइल गर्न आवश्यक छैन (यद्यपि यदि त्यहाँ अधिक अर्थपूर्ण तत्व छ भने, यसलाई प्रयोग गर्नुहोस्)। <b>शब्दहरू वा वाक्यांशहरूलाई थप महत्त्व नदिई हाइलाइट गर्नको लागि <i>हो, जबकि प्रायः आवाज, प्राविधिक शब्दहरू, आदिका लागि हो।

ठेगानाहरू

<address>तत्व यसको निकटतम पुर्खा, वा काम को सम्पूर्ण शरीर को लागी सम्पर्क जानकारी को लागी प्रयोग गरिन्छ । यसलाई कसरी प्रयोग गर्न सकिन्छ भनेर यहाँ दुई उदाहरणहरू छन्:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

पूरा नाम
[email protected]

नोट: सामग्रीको ठीकसँग संरचना गर्नका लागि प्रत्येक रेखा <address>रेखा-ब्रेक ( <br />) वा ब्लक-लेभल ट्याग (जस्तै, ) मा बेरिएको हुनुपर्छ ।<p>

संक्षिप्त रूपहरू

संक्षिप्त र संक्षिप्त शब्दहरूको लागि, <abbr>ट्याग प्रयोग गर्नुहोस् ( HTML5<acronym> मा हटाइएको छ )। ट्याग भित्र शर्टह्यान्ड फारम राख्नुहोस् र पूरा नामको लागि शीर्षक सेट गर्नुहोस्।

ब्लककोटहरू

<blockquote> <p> <small>

कसरी उद्धरण गर्ने

ब्लककोट समावेश गर्न, <blockquote>वरिपरि लपेट्नुहोस् <p>र <small>ट्याग गर्नुहोस्। तपाइँको स्रोत उद्धृत गर्न तत्व प्रयोग गर्नुहोस् <small>र तपाइँ —यसको अघि एक em ड्यास प्राप्त गर्नुहुनेछ।

Lorem ipsum dolor sit amet, consectetur adipiscing elit। Integer posuere erat a ante venenatis dapibus posuere velit aliquet।
डा. जुलियस हिबर्ट

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit। Integer posuere erat a ante venenatis dapibus posuere velit aliquet। </p>
  <small> डा. जुलियस हिबर्ट </small>
</blockquote>

सूचीहरू

क्रमरहित`<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.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>`

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
मासामा पूर्णांक मोलेस्टी लोरेम
प्रिटियम निस्ल एलिकेटमा फेसिलिसिस
नुल्ला volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
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> <pre>

दुई सरल ट्यागहरूको साथ शैलीमा आफ्नो कोड पिम्प गर्नुहोस्। जाभास्क्रिप्ट मार्फत अझ उत्कृष्टताको लागि, गुगलको कोड सुन्दर पुस्तकालयमा ड्रप गर्नुहोस् र तपाईं सेट हुनुहुन्छ।

कोड प्रस्तुत गर्दै

कोड, ब्लकहरू वा केवल स्निपेटहरू इनलाइनहरू, दायाँ ट्यागमा बेरिएर शैलीसँग प्रदर्शन गर्न सकिन्छ। धेरै रेखाहरू फैलिएको कोडको ब्लकहरूको लागि, <pre>तत्व प्रयोग गर्नुहोस्। इनलाइन कोडको लागि, <code>तत्व प्रयोग गर्नुहोस्।

तत्व नतिजा

<code> >html<यस प्रकारको पाठको लाइनमा, तपाईंको र्‍याप गरिएको कोड यो तत्व जस्तो देखिन्छ ।

तत्व	नतिजा
`<code>`	`>html<`यस प्रकारको पाठको लाइनमा, तपाईंको र्‍याप गरिएको कोड यो तत्व जस्तो देखिन्छ ।
`<pre>`	<div> <h1>शीर्षक</h1> <p>यहाँ केही...</p> </div> नोट:`pre` ट्याग भित्र कोडलाई सकेसम्म बायाँको नजिक राख्न निश्चित हुनुहोस् ; यसले सबै ट्याबहरू रेन्डर गर्नेछ।
`<pre class="prettyprint">`	google-code-prettify लाइब्रेरी प्रयोग गरेर, तपाईं कोडका ब्लकहरू अलिक फरक भिजुअल शैली र स्वचालित सिन्ट्याक्स हाइलाइटिङ प्राप्त गर्नुहुन्छ। <div> <h1> हेडिङ </h1> <p> यहाँ केहि... </p> </div> google-code-prettify डाउनलोड गर्नुहोस् र कसरी प्रयोग गर्ने भनेर रीडमी हेर्नुहोस्।

<pre>

<div>
  <h1>शीर्षक</h1>
  <p>यहाँ केही...</p>
</div>

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

<pre class="prettyprint">

google-code-prettify लाइब्रेरी प्रयोग गरेर, तपाईं कोडका ब्लकहरू अलिक फरक भिजुअल शैली र स्वचालित सिन्ट्याक्स हाइलाइटिङ प्राप्त गर्नुहुन्छ।

<div> <h1> हेडिङ </h1> <p> यहाँ केहि... </p> </div>

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

इनलाइन लेबलहरू

<span class="label">

तपाईंको शरीर पाठमा कुनै पनि वाक्यांशलाई ध्यान दिनुहोस् वा झण्डा दिनुहोस्।

केहि पनि लेबल गर्नुहोस्

कहिल्यै ती फैंसी नयाँ मध्ये एक चाहिन्छ ! वा कोड लेख्दा महत्त्वपूर्ण झण्डाहरू? खैर, अब तपाईंसँग छ। यहाँ पूर्वनिर्धारित रूपमा के समावेश छ:

लेबल	नतिजा
`<span class="label">Default</span>`	पूर्वनिर्धारित
`<span class="label success">New</span>`	नयाँ
`<span class="label warning">Warning</span>`	चेतावनी
`<span class="label important">Important</span>`	महत्त्वपूर्ण
`<span class="label notice">Notice</span>`	सूचना

मिडिया ग्रिड

कम एचटीएमएल फुटप्रिन्ट र न्यूनतम शैलीहरू भएका पृष्ठहरूमा फरक आकारका थम्बनेलहरू प्रदर्शन गर्नुहोस्।

उदाहरण थम्बनेलहरू

थम्बनेलहरू .media-gridजुनसुकै साइजको हुन सक्छन्, तर तिनीहरूले सिधै निर्मित बुटस्ट्र्याप ग्रिड प्रणालीमा म्याप गर्दा राम्रो काम गर्छन्। .span290, 210, र 330 जस्ता छवि चौडाइहरू , .span4, र .span6स्तम्भ आकारहरू बराबर गर्न प्याडिङको केही पिक्सेलसँग जोडिन्छन्।

ठूलो

मध्यम

सानो

तिनीहरूलाई कोडिङ गर्दै

मिडिया ग्रिडहरू प्रयोग गर्न सजिलो र मार्कअप पक्षमा बरु सरल छन्। तिनीहरूको आयामहरू विशुद्ध रूपमा समावेश छविहरूको आकारमा आधारित छन्।

<ul class = "media-grid" > 
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

भवन तालिकाहरू

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

तालिकाहरू उत्कृष्ट छन् - धेरै चीजहरूको लागि। उत्कृष्ट तालिकाहरू, तथापि, उपयोगी, स्केलेबल, र पढ्न योग्य (कोड स्तरमा) हुन अलिकति मार्कअप प्रेम चाहिन्छ। यहाँ मद्दत गर्न केही सुझावहरू छन्।

सधैं आफ्नो स्तम्भ हेडरहरू यसरी बेर्नुहोस् <thead>कि पदानुक्रम <thead>> <tr>> हो <th>।

स्तम्भ हेडरहरू जस्तै, तपाईंको तालिकाको मुख्य सामग्रीहरू एकमा बेरिएको हुनुपर्छ <tbody>ताकि तपाईंको पदानुक्रम <tbody>> <tr>> हो <td>।

उदाहरण: पूर्वनिर्धारित तालिका शैलीहरू

सबै तालिकाहरू पढ्न योग्यता सुनिश्चित गर्न र संरचना कायम राख्नको लागि केवल आवश्यक किनाराहरूसँग स्वचालित रूपमा स्टाइल गरिनेछ। अतिरिक्त वर्ग वा विशेषताहरू थप्न आवश्यक छैन।

#	पहिलो नाम	थर	भाषा
१	केही	एक	अंग्रेजी
२	जो	छ प्याक	अंग्रेजी
३	स्टु	दाँत	कोड

<table>
  ...
</table>

उदाहरण: जेब्रा-धारीदार

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

#	पहिलो नाम	थर	भाषा
१	केही	एक	अंग्रेजी
२	जो	छ प्याक	अंग्रेजी
३	स्टु	दाँत	कोड

नोट: Zebra-striping एक प्रगतिशील वृद्धि हो जुन पुराना ब्राउजरहरू जस्तै IE8 र तलका लागि उपलब्ध छैन।

<टेबल वर्ग = "जेब्रा-धारीदार" > 
...
</table>

उदाहरण: Zebra-striped w/ TableSorter.js

अघिल्लो उदाहरण लिँदै, हामी jQuery र Tablesorter प्लगइन मार्फत क्रमबद्ध कार्यक्षमता प्रदान गरेर हाम्रो तालिकाहरूको उपयोगिता सुधार गर्छौं । क्रम परिवर्तन गर्न कुनै पनि स्तम्भको हेडरमा क्लिक गर्नुहोस्।

#	पहिलो नाम	थर	भाषा
२	जो	छ प्याक	अंग्रेजी
३	स्टु	दाँत	कोड
१	तपाईको	एक	अंग्रेजी

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( प्रकार्य () { 
    $ ( "तालिका # क्रम तालिका उदाहरण" )। टेबलसर्टर ({ क्रमबद्ध सूची : [[ 1 , 0 ]] });  
  });
</script>
<टेबल वर्ग = "जेब्रा-धारीदार" > 
  ...
</table>

फिक्स्ड शीर्षपट्टी

यो के हो

हाम्रो टपबार एक निश्चित पट्टी हो जसले वेबसाइटको लोगो वा नाम, प्राथमिक नेभिगेसन, र खोज फारम राख्छ।

अनुकूलन योग्य

भित्रका सबै तत्वहरू, र सम्पूर्ण टपबार पनि वैकल्पिक छन्। तपाईं लोगो/नाम, एनएभ, खोज, र माध्यमिक एनएभ वा त्यसको कुनै पनि संयोजन समावेश गर्न छनौट गर्न सक्नुहुन्छ।

ड्रपडाउनहरू समावेश छन्

मुख्य नेभिगेसनको भागको रूपमा, हामीले तपाईंको नेभिगेसनमा ड्रपडाउनहरू थप्ने क्षमता समावेश गरेका छौं। यो कसरी भयो भनेर हेर्नको लागि माथिको (दायाँ पङ्क्तिबद्ध) माध्यमिक एनएभि जाँच गर्नुहोस्। ड्रपडाउन liट्यागहरू .activeहालको पृष्ठ चयन देखाउनको लागि पनि समर्थन गर्दछ।

नोट: कुनै पनि पृष्ठमा टपबार प्रयोग गर्दा, padding-top: 40px;तपाईंको body.

ट्याबहरू र गोलीहरू

एक को साथ सरल माध्यमिक नेभिगेसन सिर्जना गर्नुहोस् <ul>। उपयुक्त वर्ग थपेर ट्याब वा चक्कीहरू बीच स्वैप गर्नुहोस्।

हाम्रो खाता सेटिङ पृष्ठहरू र जस्तै सामग्रीको पृष्ठहरू बीच टगल गर्नका लागि प्रयोगकर्ता टाइमलाइनहरू जस्ता सामग्रीको उप-खण्डहरूको लागि उत्कृष्ट। ट्याब वा गोली शैलीहरूमा उपलब्ध छ।

<ul class = "ट्याबहरू" > 
  <li वर्ग = "सक्रिय" ><a href = "#" > घर </a></li>  
  <li><a href = "#" > प्रोफाइल </a></li> 
  <li><a href = "#" > सन्देशहरू </a></li> 
  <li><a href = "#" > सेटिङहरू </a></li> 
  < li><a href="#" > सम्पर्क </a> < / li> 
</ul>

<ul class = "गोलीहरू" > 
  <li वर्ग = "सक्रिय" ><a href = "#" > घर </a></li>  
  <li><a href = "#" > प्रोफाइल </a></li> 
  <li><a href = "#" > सन्देशहरू </a></li> 
  <li><a href = "#" > सेटिङहरू </a></li> 
  < li><a href="#" > सम्पर्क </a> < / li> 
</ul>

ब्रेडक्रम्ब्स

ब्रेडक्रम्ब नेभिगेसन प्रयोगकर्ताहरूलाई तिनीहरू एप वा साइट भित्र कहाँ छन् भनेर देखाउने तरिकाको रूपमा प्रयोग गरिन्छ, तर प्राथमिक नेभिगेसनका लागि होइन।

<ul class = "ब्रेडक्रम्ब" > 
  <li><a href = "#" > घर </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > मध्य पृष्ठ </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > अर्को </a> <span class = "divider" > / </span></li>   
  <li class = "active" > तपाईं यहाँ हुनुहुन्छ </li> 
</ul>

पृष्ठांकन

Rdio द्वारा प्रेरित अल्ट्रा सरल र न्यूनतम शैलीको पृष्ठांकन। ठूलो ब्लक हराउन गाह्रो छ, सजिलै मापनयोग्य छ, र ठूलो क्लिक क्षेत्रहरू प्रदान गर्दछ।

<div वर्ग = "पृष्ठांकन" > 
  <ul>
    <li वर्ग = "पूर्व असक्षम" ><a href = "#" > ← अघिल्लो </a></li>  
    <li वर्ग = "सक्रिय" ><a href = "#" > १ </a></li>  
    <li><a href = "#" > २ </a></li> 
    <li><a href = "#" > ३ </a></li> 
    <li><a href = "#" > ४ </a></li> 
    <li><a href = "#" > ५ </a></li> 
    <li class = "next" ><a href = "#" > अर्को → </a></li>  
  </ul>
</div>

आधारभूत अलर्टहरू

.alert-message

असफलता, सम्भावित असफलता, वा कार्यको सफलता हाइलाइट गर्नका लागि एक-लाइन सन्देशहरू। फारमहरूको लागि विशेष रूपमा उपयोगी।

जाभास्क्रिप्ट प्राप्त गर्नुहोस् »

पवित्र guacamole! उत्तम यो आफैलाई जाँच गर्नुहोस्, तपाईं धेरै राम्रो देखिरहनुभएको छैन।

ओह स्न्याप! यो र त्यो परिवर्तन गर्नुहोस् र फेरि प्रयास गर्नुहोस्।

राम्रो काम! तपाईंले यो चेतावनी सन्देश सफलतापूर्वक पढ्नुभयो।

हेड अप! यो एक सतर्कता हो जसलाई तपाइँको ध्यान चाहिन्छ, तर यो अहिले सम्म ठूलो प्राथमिकता होइन।

उदाहरण कोड

<div वर्ग = "सतर्क सन्देश चेतावनी" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> पवित्र guacamole! </strong> सर्वश्रेष्ठ यो आफैलाई जाँच गर्नुहोस्, तपाईं धेरै राम्रो देखिरहनुभएको छैन। </p>
</div>

सन्देशहरू रोक्नुहोस्

.alert-message.block-message

केही स्पष्टीकरण चाहिने सन्देशहरूको लागि, हामीसँग अनुच्छेद शैली अलर्टहरू छन्। यी लामो त्रुटि सन्देशहरू बबल गर्न, पेन्डिङ कार्यको प्रयोगकर्तालाई चेतावनी दिन, वा पृष्ठमा थप जोडको लागि जानकारी प्रस्तुत गर्नका लागि उपयुक्त छन्।

जाभास्क्रिप्ट प्राप्त गर्नुहोस् »

पवित्र guacamole! यो एक चेतावनी हो! उत्तम यो आफैलाई जाँच गर्नुहोस्, तपाईं धेरै राम्रो देखिरहनुभएको छैन। Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

यो कारबाही गर्नुहोस् वा यो गर्नुहोस्

ओह स्न्याप! तपाईंले त्रुटि पाउनुभयो! यो र त्यो परिवर्तन गर्नुहोस् र फेरि प्रयास गर्नुहोस्।

Duis mollis est non commodo luctus
Nisi erat porttitor ligula
Eget lacinia odio sem nec elit

यो कारबाही गर्नुहोस् वा यो गर्नुहोस्

राम्रो काम! तपाईंले यो चेतावनी सन्देश सफलतापूर्वक पढ्नुभयो। Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum।

यो कारबाही गर्नुहोस् वा यो गर्नुहोस्

उदाहरण कोड

<div वर्ग = "अलर्ट-सन्देश ब्लक-सन्देश चेतावनी" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> पवित्र guacamole! यो एक चेतावनी हो! </strong> सर्वश्रेष्ठ यो आफैलाई जाँच गर्नुहोस्, तपाईं धेरै राम्रो देखिरहनुभएको छैन। Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div वर्ग = "अलर्ट-कार्यहरू" > 
    <a class = "btn small" href = "#" > यो कारबाही गर्नुहोस् </a> <a class = "btn small" href = "#" > वा यो गर्नुहोस् </a>     
  </div>
</div>

मोडलहरू

मोडलहरू—संवाद वा लाइटबक्सहरू—पृष्ठभूमिको सन्दर्भ कायम राख्नु महत्त्वपूर्ण हुने परिस्थितिहरूमा प्रासंगिक कार्यहरूका लागि उत्कृष्ट हुन्छन्।

जाभास्क्रिप्ट प्राप्त गर्नुहोस् »

टूलटिप्स

भ्रमित प्रयोगकर्तालाई सहयोग गर्न र सही दिशामा देखाउनको लागि Twipsies धेरै उपयोगी छन्।

जाभास्क्रिप्ट प्राप्त गर्नुहोस् »

Lorem ipsum Dolar sit amet illo त्रुटि ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas। Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architectto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae fuget quaevoltum voluptum quagetum

Popovers

लेआउटलाई असर नगरी पृष्ठमा सबटेक्स्टुअल जानकारी प्रदान गर्न popovers प्रयोग गर्नुहोस्।

जाभास्क्रिप्ट प्राप्त गर्नुहोस् »

सुरु गर्दै

Bootstrap पुस्तकालय संग जाभास्क्रिप्ट एकीकृत सुपर सजिलो छ। तल हामी आधारभूत कुराहरूमा जान्छौं र तपाईंलाई सुरु गर्नका लागि केही उत्कृष्ट प्लगइनहरू प्रदान गर्छौं!

जाभास्क्रिप्ट कागजातहरू हेर्नुहोस् »

के समावेश छ

jQuery र Ender सँग काम गर्ने नयाँ अनुकूलन प्लगइनहरूसँग बुटस्ट्र्यापका केही प्राथमिक कम्पोनेन्टहरूलाई जीवन्त बनाउनुहोस् । हामी तपाईंलाई विस्तार गर्न र तपाईंको विशिष्ट विकास आवश्यकताहरू फिट गर्न परिमार्जन गर्न प्रोत्साहन गर्छौं।

फाइल	विवरण
bootstrap-modal.js	हाम्रो मोडल प्लगइन परम्परागत मोडल js प्लगइनमा सुपर स्लिम टेक हो! हामीले twitter मा चाहिने खाली प्रकार्यता मात्र समावेश गर्न विशेष ख्याल राख्यौं।
bootstrap-alerts.js	अलर्ट प्लगइन अलर्टहरूमा नजिकको कार्यक्षमता थप्नको लागि एक सुपर सानो वर्ग हो।
bootstrap-dropdown.js	यो प्लगइन बुटस्ट्र्याप टपबार वा ट्याब गरिएको नेभिगेसनहरूमा ड्रपडाउन अन्तरक्रिया थप्नको लागि हो।
bootstrap-scrollspy.js	ScrollSpy प्लगइन बुटस्ट्र्याप टपबारमा स्क्रोल स्थितिको आधारमा स्वत: अद्यावधिक गर्ने एनएभ थप्नको लागि हो।
bootstrap-tabs.js	यो प्लगइनले स्थानीय सामग्री मार्फत साइकल चलाउन द्रुत, गतिशील ट्याब र गोली कार्यक्षमता थप्छ।
bootstrap-twipsy.js	जेसन फ्रेम द्वारा लिखित उत्कृष्ट jQuery.tipsy प्लगइनमा आधारित; twipsy एक अद्यावधिक संस्करण हो, जुन छविहरूमा भर पर्दैन, एनिमेसनको लागि css3 प्रयोग गर्दछ, र स्थानीय शीर्षक भण्डारणको लागि डेटा-विशेषताहरू प्रयोग गर्दछ!
bootstrap-popover.js	पपओभर प्लगइनले तपाइँको एप्लिकेसनमा पपओभर थप्नको लागि सरल इन्टरफेस प्रदान गर्दछ। यसले boostrap-twipsy.js प्लगइन विस्तार गर्दछ, त्यसैले तपाइँको परियोजनामा popovers समावेश गर्दा त्यो फाइल पनि समात्न निश्चित हुनुहोस्!

जाभास्क्रिप्ट आवश्यक छ?

होइन! बुटस्ट्र्याप पहिलो र मुख्य रूपमा CSS लाइब्रेरी हुन डिजाइन गरिएको हो। यो जाभास्क्रिप्टले समावेश शैलीहरूको शीर्षमा आधारभूत अन्तरक्रियात्मक तह प्रदान गर्दछ।

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

थप जानकारीको लागि र केही प्रत्यक्ष डेमोहरू हेर्नको लागि, कृपया हाम्रो प्लगइन कागजात पृष्ठलाई सन्दर्भ गर्नुहोस् ।

बुटस्ट्र्याप प्रीबुटसँग बनाइएको थियो , मिक्सिन र भेरिएबलहरूको खुला स्रोत प्याक Less , छिटो र सजिलो वेब विकासको लागि CSS प्रिप्रोसेसरसँग संयोजनमा प्रयोग गर्न सकिन्छ ।

हामीले बुटस्ट्र्यापमा प्रीबुट कसरी प्रयोग गर्‍यौं भनेर जाँच गर्नुहोस् र तपाईंले आफ्नो अर्को प्रोजेक्टमा कम चलाउन रोज्नु पर्छ भने तपाईंले यसलाई कसरी प्रयोग गर्न सक्नुहुन्छ।

यसलाई कसरी प्रयोग गर्ने

तपाईंको ब्राउजरमा जाभास्क्रिप्ट मार्फत बुटस्ट्र्यापको कम चरहरू, मिक्सिनहरू, र CSS मा नेस्टिङको पूर्ण प्रयोग गर्न यो विकल्प प्रयोग गर्नुहोस्।

<link rel = "stylesheet/less" href = "less/bootstrap.less" मिडिया = "सबै" />    
<script src = "js/less-1.1.3.min.js" ></script>

.js समाधान महसुस गर्नुहुन्न? लेस म्याक एप चलाएर हेर्नुहोस् वा कम्पाइल गर्न Node.js प्रयोग गर्नुहोस् जब तपाइँ आफ्नो कोड प्रयोग गर्नुहुन्छ।

के समावेश छ

यहाँ बुटस्ट्र्याप को भाग को रूप मा ट्विटर बुटस्ट्र्याप मा के शामिल छ को केहि हाइलाइटहरु छन्। डाउनलोड गर्न र थप जान्नको लागि बुटस्ट्र्याप वेबसाइट वा गिथब प्रोजेक्ट पृष्ठमा जानुहोस्।

चरहरू

कम मा चरहरू तपाईंको CSS टाउको दुखाइ मुक्त राख्न र अद्यावधिक गर्नका लागि उपयुक्त छन्। जब तपाइँ रङ मान वा बारम्बार प्रयोग हुने मान परिवर्तन गर्न चाहानुहुन्छ, यसलाई एक स्थानमा अपडेट गर्नुहोस् र तपाइँ सेट हुनुहुन्छ।

// लिङ्कहरू
@linkColor : #8b59c2;         
@linkColorHover :     गाढा ( @linkColor , 10 ); 
 
// ग्रे
@कालो : #000;             
@grayDark :           हल्का ( @black , 25 %); 
@ग्रे :               हल्का ( @कालो , 50 %); 
@grayLight :          हल्का ( @black , 70 %); 
@grayLighter :        हल्का ( @black , 90 %); 
@सेतो : #ffff ;             
 
// एक्सेन्ट रङहरू
@blue : #08b5fb;              
@हरियो : #46a546 ;             
@रातो : #9d261d ;               
@yellow : #ffc40d;            
@सुन्तला : #f89406 ;            
@गुलाबी : #c3325f ;              
@बैजनी : #7a43b6 ;            
 
// बेसलाइन ग्रिड
@basefont : 13px ;          
@baseline : 18px ;

टिप्पणी गर्दै

/* ... */कमले CSS को सामान्य वाक्य रचनाको अतिरिक्त टिप्पणी गर्ने अर्को शैली पनि प्रदान गर्दछ ।

// यो एक टिप्पणी हो
/* यो पनि कमेन्ट हो*/

वाजुलाई मिसाउँछ

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

फन्ट स्ट्याकहरू

#फन्ट {
  । लघुलेख ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    फन्ट साइज : @size ; _ 
    फन्ट - वजन : @weight ; 
    रेखा - उचाइ : @lineHeight ; 
  }
  । sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    फन्ट - परिवार : "हेल्भेटिका न्यु" , हेल्भेटिका , एरियल , सेन्स - सेरिफ ;   
    फन्ट साइज : @size ; _ 
    फन्ट - वजन : @weight ; 
    रेखा - उचाइ : @lineHeight ; 
  }
  ...
}

ग्रेडियन्टहरू

# ग्रेडियन्ट {
  ...
  । ठाडो ( @startColor : #555, @endColor: #333) { 
    पृष्ठभूमि - रंग : @endColor ; 
    पृष्ठभूमि - दोहोर्याउनुहोस् : दोहोर्याउनुहोस् - x ;
    पृष्ठभूमि - छवि : - khtml - ढाँचा ( रैखिक , बायाँ माथि , बायाँ तल , ( @startColor ) देखि ( @endColor ) सम्म ; // कन्क्वेरर   
    पृष्ठभूमि - छवि : - moz - रेखीय - ग्रेडियन्ट ( @startColor , @endColor ); // FF ३.६+   
    पृष्ठभूमि - छवि : - एमएस - रेखीय - ढाँचा ( @startColor , @endColor ); // IE10   
    पृष्ठभूमि - छवि : - वेबकिट - ढाँचा ( रैखिक , बायाँ माथि , बायाँ तल , रंग - रोक्नुहोस् ( 0 %, @startColor ), रंग - रोक्नुहोस् ( 100 %, @endColor )); // सफारी ४+, क्रोम २+    
    पृष्ठभूमि - छवि : - वेबकिट - रैखिक - ढाँचा ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    पृष्ठभूमि - छवि : - ओ - रेखीय - ढाँचा ( @startColor , @endColor ); // ओपेरा 11.10   
    पृष्ठभूमि - छवि : रेखीय - ढाँचा ( @startColor , @endColor ); // मानक  
  }
  ...
}

सञ्चालनहरू

फेन्सी प्राप्त गर्नुहोस् र तलको जस्तै लचिलो र शक्तिशाली मिश्रणहरू उत्पन्न गर्न केही गणित प्रदर्शन गर्नुहोस्।

// ग्रिडिट्युड
@gridColumns : १६ ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// केही स्तम्भहरू बनाउनुहोस्
। स्तम्भहरू ( @columnSpan : 1 ) {  
  चौडाइ : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}

कम कम्पाइल गर्दै

/lib/ मा फाइलहरू परिमार्जन गरेपछि .less, तपाईंले bootstrap-*xx.css र bootstrap-*xx.min.css फाइलहरू पुन: उत्पन्न गर्नका लागि तिनीहरूलाई पुन: कम्पाइल गर्न आवश्यक छ। यदि तपाइँ GitHub मा पुल अनुरोध पेश गर्दै हुनुहुन्छ भने, तपाइँ सधैं पुन: कम्पाइल गर्नुपर्छ।

कम्पाइल गर्ने तरिकाहरू

विधि	चरणहरू
मेकफाइलको साथ नोड	निम्न आदेश चलाएर npm सँग कम कमाण्ड लाइन कम्पाइलर स्थापना गर्नुहोस्: $ npm lessc स्थापना गर्नुहोस् एकचोटि स्थापना भएपछि `make`तपाईको बुटस्ट्र्याप डाइरेक्टरीको रूटबाट चलाउनुहोस् र तपाई सबै सेट हुनुहुन्छ। थप रूपमा, यदि तपाइँसँग वाचर स्थापना भएको छ भने, तपाइँले बुटस्ट्र्याप लिबमा फाइल सम्पादन गर्दा प्रत्येक चोटि बुटस्ट्र्याप स्वचालित रूपमा पुन: निर्माण गर्न चलाउन `make watch`सक्नुहुन्छ (यो आवश्यक छैन, केवल एक सुविधा विधि)।
जाभास्क्रिप्ट	नवीनतम Less.js डाउनलोड गर्नुहोस् र यसमा जाने बाटो (र बुटस्ट्र्याप) समावेश गर्नुहोस् `head`। <link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script> .less फाइलहरू पुन: कम्पाइल गर्न, तिनीहरूलाई बचत गर्नुहोस् र आफ्नो पृष्ठ पुन: लोड गर्नुहोस्। Less.js ले तिनीहरूलाई कम्पाइल गर्छ र तिनीहरूलाई स्थानीय भण्डारणमा भण्डार गर्छ।
कमाण्ड लाइन	यदि तपाइँसँग पहिले नै कम कमाण्ड लाइन उपकरण स्थापित छ भने, केवल निम्न आदेश चलाउनुहोस्: $lessc ./lib/bootstrap.less > bootstrap.css `--compress`यदि तपाइँ केहि बाइटहरू बचत गर्न प्रयास गर्दै हुनुहुन्छ भने त्यो आदेशमा समावेश गर्न निश्चित हुनुहोस् !
कम म्याक एप	अनौपचारिक म्याक एपले कम फाइलहरूको डाइरेक्टरीहरू हेर्छ र हेरिएको कम फाइलको प्रत्येक बचत पछि स्थानीय फाइलहरूमा कोड कम्पाइल गर्छ। यदि तपाइँ चाहनुहुन्छ भने, तपाइँ एपमा प्राथमिकताहरू टगल गर्न सक्नुहुन्छ स्वचालित मिनिफाइङ र कुन डाइरेक्टरीमा कम्पाइल गरिएका फाइलहरू समाप्त हुन्छन्।

CSS हटलिङ्क गर्नुहोस्

यसलाई कम प्रयोग गर्नुहोस्

GitHub मा फोर्क

बुटस्ट्र्याप संक्षिप्त इतिहास, ब्राउजर समर्थन, र थप बारे

इतिहास

ब्राउजर समर्थन

के समावेश छ

द्रुत-सुरु उदाहरणहरू

ग्रिड प्रणाली मानक 940px रक वा आफ्नो रोल

पूर्वनिर्धारित ग्रिड

उदाहरण ग्रिड मार्कअप

अफसेटिङ स्तम्भहरू

नेस्टिङ स्तम्भहरू

नेस्टेड स्तम्भहरूको उदाहरण

तपाईंको आफ्नै ग्रिड रोल गर्नुहोस्

ग्रिड भित्र

अब अनुकूलन गर्न

लेआउट आधारभूत टेम्प्लेटहरू वेबपृष्ठहरू सिर्जना गर्न

निश्चित लेआउट

तरल लेआउट

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

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

h1। शीर्षक १

h2। शीर्षक २

h3। शीर्षक ३

h4। हेडिङ ४

h5। हेडिङ ५

h6। हेडिङ ६

उदाहरण अनुच्छेद

उदाहरण शीर्षकमा उप-शीर्षक छ...

विविध। तत्वहरू

कहिले प्रयोग गर्ने

एक अनुच्छेद मा जोड

ठेगानाहरू

संक्षिप्त रूपहरू

ब्लककोटहरू

कसरी उद्धरण गर्ने

सूचीहरू

क्रमरहित<ul>

अनस्टाइल<ul.unstyled>

आदेश<ol>

विवरणdl

कोड

कोड प्रस्तुत गर्दै

इनलाइन लेबलहरू

केहि पनि लेबल गर्नुहोस्

मिडिया छविहरू र भिडियोहरू प्रदर्शन गर्दै

मिडिया ग्रिड

उदाहरण थम्बनेलहरू

ठूलो

मध्यम

सानो

तिनीहरूलाई कोडिङ गर्दै

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

भवन तालिकाहरू

उदाहरण: पूर्वनिर्धारित तालिका शैलीहरू

उदाहरण: जेब्रा-धारीदार

उदाहरण: Zebra-striped w/ TableSorter.js

फारमहरू

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

स्ट्याक्ड फारमहरू

फारम क्षेत्र आकारहरू

बटनहरू

उदाहरण बटनहरू

वैकल्पिक आकारहरू

असक्षम राज्य

लिङ्कहरू

बटनहरू

नेभिगेसन

फिक्स्ड शीर्षपट्टी

परियोजनाको नाम

यो के हो

अनुकूलन योग्य

ड्रपडाउनहरू समावेश छन्

ट्याबहरू र गोलीहरू

ब्रेडक्रम्ब्स

पृष्ठांकन

सफलता, चेतावनी, र त्रुटि सन्देश वा अलर्टहरूको लागि अलर्ट र त्रुटि शैलीहरू

आधारभूत अलर्टहरू

उदाहरण कोड

क्रमरहित`<ul>`

अनस्टाइल`<ul.unstyled>`

आदेश`<ol>`

विवरण`dl`