जलद सुरू करपाचीं उदाहरणां

कांय बेगीन साचे जाय? आमी एकठांय केल्लीं हीं मुळावीं उदाहरणां पळयात:

मुलभूत जाळी

बूटस्ट्रॅपाचो भाग म्हूण पुरवण केल्ली मुलभूत ग्रिड प्रणाली 940px रुंद 16-स्तंभ ग्रिड आसा. तो लोकप्रिय 960 ग्रिड प्रणालीची एक रूच, पूण डाव्या आनी उजव्या बाजूक अतिरिक्त मार्जिन/पॅडींग नासतना.

उदाहरण जाळी मार्कअप

हांगा दाखयल्ले प्रमाणें, दोन "स्तंभ" आशिल्ली मुळावी मांडावळ तयार करूंक शकता, दरेक स्तंभ आमी आमच्या ग्रिड प्रणालीचो भाग म्हूण व्याख्या केल्ल्या 16 मुळाव्या स्तंभांच्या संख्येंत पातळटात. चड बदलां खातीर सकयल दिल्ल्यो उदाहरणां पळयात.

<div वर्ग = "ओळ" > 
  <div वर्ग = "span6" > 
    ...
  </div> हें नांव
  <div वर्ग = "span10" > 
    ...
  </div> हें नांव
</div> हें नांव

घोंस घालपाचे स्तंभ

.rowअस्तित्वांत आशिल्ल्या स्तंभा भितर एक तयार करून तुमकां जाय जाल्यार तुमची सामुग्री नेस्ट करात .

नेस्टेड स्तंभांचें उदाहरण

<div वर्ग = "ओळ" > 
  <div वर्ग = "span12" > 
    स्तंभाची पातळी 1
    <div वर्ग = "ओळ" > 
      <div वर्ग = "span6" > 
        पातळी 2
      </div> हें नांव
      <div वर्ग = "span6" > 
        पातळी 2
      </div> हें नांव
    </div> हें नांव
  </div> हें नांव
</div> हें नांव

स्वताची जाळी गुठलावची

बूटस्ट्रॅपांत तयार केल्ले मुलभूत 940px ग्रिड प्रणाली पसंतीचे करपाखातीर मुठीभर चड-उणें आसात. थोडें सानुकूलीकरण करून, तुमी स्तंभांचो आकार, तांचे गटर, आनी ते रावतात त्या कंटेनरांत बदल करूंक शकतात.

जाळी भितर

ग्रिड प्रणालींत बदल करपाक जाय आशिल्ले चड-उणे सद्या सगळे variables.less.

आतां सानुकूल करपाक

ग्रिडांत बदल करप म्हणल्यार तीन चड-उणें बदलप @grid-*आनी कमी फायली परतून संकलित करप.

बूटस्ट्रॅप 24 स्तंभां मेरेन आशिल्ली ग्रिड प्रणाली हाताळपाक सज्ज येता; मुलभूत फकत 16. हांगा तुमचे ग्रिड चड-उणें 24-स्तंभ ग्रिडाक अनुकूल केल्ले कशे दिसतले तें पळयात.

@gridस्तंभ : 24 ;       
@gridस्तंभरुंदी : 20px ;   
@gridगटररुंदी : 20px ;   

एकदां परतून संकलित केल्या उपरांत, तुमी सेट जातले!

स्थिर मांडावळ

मुलभूत आनी सादी 940px-रुंद, केंद्रीत मांडावळ फकत जवळजवळ खंयच्याय संकेतथळा खातीर वा पान एकेच पुरवण केल्या <div.container>.

<शरीर> हें नांव
  <div वर्ग = "कंटेनर" > 
    ...
  </div> हें नांव
</body> हें नांव

द्रव मांडावळ

किमान- आनी चडांत चड-रुंदी आनी डाव्या हाताची बाजू आशिल्ली एक पर्यायी, लवचीक द्रव पान रचणूक. ऍप्लिकेशनां आनी डॉक्स खातीर ग्रेट.

<शरीर> हें नांव
  <div class = "कंटेनर-द्रव" > 
    <div वर्ग = "साइडबार" > 
      ...
    </div> हें नांव
    <div वर्ग = "सामग्री" > 
      ...
    </div> हें नांव
  </div> हें नांव
</body> हें नांव

शीर्षकां & प्रत

तुमच्या वॅबपानांची रचना करपाखातीर एक मानक मुद्रण क्रमवारी.

पुराय मुद्रण जाळी आमच्या variables.less फायलीन दोन Less चडांत चड आदारीत आसा: @basefontआनी @baseline. पयलो पुराय वापरिल्लो बेस फॉन्ट-आकार आनी दुसरो बेस लायन-उंचाय.

आमी त्या व्हेरिएबल्स, आनी कांय गणित, आमच्या सगळ्या प्रकाराचे आनी हेर मार्जिन, पॅडिंग, आनी लायन-हायट्स तयार करपाक वापरतात.

h1. शीर्षक 1

h2. शीर्षक 2

h3 हें नांव. शीर्षक 3

h4 हें नांव. शीर्षक 4

h5. शीर्षक 5

h6 हें नांव. शीर्षक 6

उदाहरण परिच्छेद

नुल्लम क्विस रिसुस एगेट उर्ना मोलिस ऑर्नारे वेल इउ लियो. कम सोसायस नाटोक पेनाटिबस एट मॅग्निस डिस पार्ट्युरिएंट मोंटेस, नासेतुर रिडिकुलस मस. नुल्लम आयडी डोलोर आयडी निभ उल्ट्रिसीस वेहिकुला उत आयडी एलिट.

उदाहरण शीर्षक उपशीर्षक आसा...

विविध प्रकार. घटकांचो आस्पाव जाता

भर, पत्ते, & संक्षेप वापरप

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

केन्ना वापरप

भर दिवपी टॅग ( <strong>आनी <em>) वापरपाक जाय, शब्द वा वाक्यांश ताचे भोंवतणच्या प्रतीच्या सापेक्ष अतिरिक्त म्हत्व वा भर दाखोवपाक. <strong>म्हत्वाखातीर आनी ताण भर <em>दिवपाखातीर वापरात .

एका परिच्छेदांत भर दिवप

Fusce dapibus , tellus ac cursus commodo , टॉर्टोर मौरिस कॉन्डिमेंटम निभ , उत फर्मेन्टम मासा जुस्टो बस अमेट रिसुस. मेसेनास फॉसिबस मॉलिस इंटरडम. नुल्ला व्हिटॅ एलिट लिबेरो, एक फारेत्रा ऑग.

टिप: HTML5 त वापरप <b>आनी <i>टॅग करप अजूनय बरोबर आसा आनी तांकां अनुक्रमान बोल्ड आनी इटालिक स्टायल करपाची गरज ना (जरी चड अर्थपूर्ण घटक आसल्यार, तो वापरात). <b>अतिरिक्त म्हत्व दिवंक नासतना उतरां वा वाक्यां उजवाडावपाखातीर आसता, जाल्यार <i>चड करून आवाज, तंत्रीक संज्ञा आदी खातीर आसता.

संबोधन करता

ह्या <address>घटकाचो उपेग ताच्या लागींच्या पूर्वजा खातीर, वा पुराय कामाच्या आंगा खातीर संपर्क म्हायती खातीर करतात. ताचो वापर कसो करूं येता हाचीं दोन उदाहरणां हांगा दिल्यांत:

टिप: एकांतली दरेक ओळ <address>ओळी-विराम ( ) च्या आदारान सोंपपाक जाय वा आशयाची योग्य रचणूक करपाखातीर <br />ब्लॉक-पातळेच्या टॅगांत गुठलावंक जाय (देखीक, ).<p>

संक्षेप

संक्षेप आनी संक्षिप्त नांवांखातीर, <abbr>टॅग वापरात ( HTML5<acronym> त नाका आसा ). टॅगा भितर आशुलिपी फॉर्म घालचो आनी पुराय नांवाखातीर शीर्षक सेट करचो.

ब्लॉककोट्स हांचो आस्पाव जाता

<blockquote> <p> <small>

उद्धृत कशें करचें

ब्लॉककोट समाविष्ट करपाक, वॅप <blockquote>अराउंड <p>आनी <small>टॅग करात. तुमचो स्रोत उल्लेख करपाक घटक वापरात आनी ताचे आदीं <small>तुमकां एम डॅश मेळटलो .—

लोरेम इप्सम डोलोर बस आमेत, कॉन्सेक्टेटर एडिपिसिंग एलिट. पूर्णांक पोसुएरे एराट एक अँटी व्हेनेनेटिस डापिबस पोसुएरे व्हेलिट अॅलिकेट.

ज्युलियस हिबर्ट हांणी डॉ

<ब्लॉककोट> हें नांव
  <p> लोरेम इप्सम डोलोर बस आमेट, कॉन्सेक्टेतुर एडिपिसिंग एलिट. पूर्णांक पोसुएरे एराट एक अँटी व्हेनेनेटिस डापिबस पोसुएरे व्हेलिट एलिकेट. </p> हें नांव
  <ल्हान> डॉ ज्युलियस हिबर्ट </small>
</blockquote> हें नांव

अनऑर्डर केल्लें<ul>

• लोरेम इप्सम डोलोर बस आमेत
• Consectetur adipiscing एलिट हें नांव
• मासा हांगा पूर्णांक मोलेस्टी लोरेम
• प्रीटियम निस्ल अॅलिकेटांत फॅसिलिसिस
• नुल्ला वोलुत्पात आलिक्वाम वेलिट
  • फासेलस इअकुलिस नेक हें नांव
  • पुरुस सोडलेस अल्ट्रिसीस
  • वेस्टिबुलम लाओरीत पोर्टिटोर सेम
  • एसी ट्रिस्टीक लिबेरो वोलुत्पात अॅट
• फॉसिबस पोर्टा लेकस फ्रिंगिला वेल
• एनियन बस अमेत एरात नुंक
• एगेट पोर्टिटोर लोरेम

अनस्टायल केल्लें<ul.unstyled>

• लोरेम इप्सम डोलोर बस आमेत
• Consectetur adipiscing एलिट हें नांव
• मासा हांगा पूर्णांक मोलेस्टी लोरेम
• प्रीटियम निस्ल अॅलिकेटांत फॅसिलिसिस
• नुल्ला वोलुत्पात आलिक्वाम वेलिट
  • फासेलस इअकुलिस नेक हें नांव
  • पुरुस सोडलेस अल्ट्रिसीस
  • वेस्टिबुलम लाओरीत पोर्टिटोर सेम
  • एसी ट्रिस्टीक लिबेरो वोलुत्पात अॅट
• फॉसिबस पोर्टा लेकस फ्रिंगिला वेल
• एनियन बस अमेत एरात नुंक
• एगेट पोर्टिटोर लोरेम

आदेश दिलो<ol>

1. लोरेम इप्सम डोलोर बस आमेत
2. Consectetur adipiscing एलिट हें नांव
3. मासा हांगा पूर्णांक मोलेस्टी लोरेम
4. प्रीटियम निस्ल अॅलिकेटांत फॅसिलिसिस
5. नुल्ला वोलुत्पात आलिक्वाम वेलिट
6. फॉसिबस पोर्टा लेकस फ्रिंगिला वेल
7. एनियन बस अमेत एरात नुंक
8. एगेट पोर्टिटोर लोरेम

वर्णनdl

वर्णन यादी

संज्ञा व्याख्या करपाखातीर वर्णन वळेरी परिपूर्ण आसा.

युइस्मोड हांणी केला

वेस्टिबुलम आयडी लिगुला पोर्टा फेलिस युइसमोड सेम्पर एगेट लॅसिनिया ओडियो सेम नेसी एलिट.

डोनेक आयडी एलिट नॉन मी पोर्टा ग्रेविडा अॅट एगेट मेटस.

मालेसुआदा पोर्टा

एटियाम पोर्टा सेम मालेसुआडा मॅग्ना मोलिस युइसमोड.

संहिता

<code> <pre>

दोन साद्या टॅगां वरवीं तुमचो कोड शैलींत पिंप करात. जावास्क्रिप्ट वरवीं आनीकय चड अद्भुतताये खातीर, Google चो कोड prettify लायब्ररी सोडचो आनी तुमी सेट जाल्यात.

संहिता सादर करप

कोड, ब्लॉक वा फकत स्निपेट इनलायन, फकत योग्य टॅगांत गुठलायल्यार शैलीन दाखोवंक मेळटा. एका परस चड ओळीं पातळिल्ल्या कोडाच्या ब्लॉकांखातीर, <pre>घटक वापरात. इनलायन कोडाखातीर, <code>घटक वापरात.

<दिव> हें नांव
  <h1>शीर्षक</h1> हें नांव
  <p>हांगाच कितें तरी...</p>
</div> हें नांव

<div> <h1> शीर्षक </h1> <p> हांगाच कितें तरी... </p> </div>
  
  

इनलायन लेबलां

<span class="label">

तुमच्या कुडीच्या मजकूरांतल्या खंयच्याय वाक्यां कडेन लक्ष ओडचें वा ध्वज दिवचें.

खंयच्याय गजालीचेर लेबल लावचें

केन्नाच त्या फॅन्सी नव्या मदल्या एकाची गरज आशिल्ली ! वा कोड बरयतना म्हत्वाचे ध्वज? बरें, आतां तुमचे कडेन तीं आसात. पूर्वनिर्धारीतपणान कितें समाविष्ट केलां तें पळयात:

मिडिया ग्रिड

उण्या HTML फुटप्रिंट आनी उण्यांत उणी शैली आशिल्ल्या पानांचेर वेगवेगळ्या आकाराचीं लघुप्रतिमां दाखोवचीं.

उदाहरण लघुप्रतिमा

हातूंतले लघुप्रतिमा .media-gridखंयच्याय आकाराचे आसूं येतात, पूण बिल्ट-इन बूटस्ट्रॅप ग्रिड प्रणालींत थेट मॅप केल्यार ते सगळ्यांत बरे काम करतात. 90, 210, आनी 330 सारकिल्ल्यो प्रतिमा रुंदाय कांय पिक्सेल पॅडींग वांगडा जोडून .span2, .span4, आनी .span6स्तंभ आकारांक बरोबर करतात.

व्हड

मध्यम

ल्हान

तांकां कोडिंग करप

मिडिया ग्रिड वापरपाक सोपी आनी मार्कअप बाजूचेर मातशी सोपी आसतात. तांचे परिमाण शुध्दपणान आस्पाव केल्ल्या प्रतिमांच्या आकाराचेर आदारून आसतात.

<ul वर्ग = "माध्यम-जाळी" > 
  <ली> हें नांव
    <a href = "#" > हें नांव 
      <img वर्ग = "लघुप्रतिमा" src = "https://placehold.it/330x230" alt = "" >   
    </a> हें नांव
  </li> हें नांव
  <ली> हें नांव
    <a href = "#" > हें नांव 
      <img वर्ग = "लघुप्रतिमा" 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>.

देखीक: मुलभूत कोश्टक शैली

वाचपाक योग्यताय सुनिश्चीत करपाक आनी रचणूक सांबाळपाक सगळ्या कोश्टकांक फकत गरजेच्यो शिमो आपोआप शैली दितले. अतिरिक्त वर्ग वा गुणधर्म जोडपाची गरज ना.

<कोश्टक> हें नांव
  ...
</कोश्टक>

उदाहरण : घनीभूत कोश्टक

घट्ट जाग्यार चड डेटा जाय आशिल्ल्या कोश्टकां खातीर, पॅडींग अर्दांत कापपी घनीभूत रूच वापरात. तशेंच मुलभूत कोश्टक शैलीं प्रमाणें, शिमो आनी झेब्रा-पट्ट्यांवांगडाय ताचो वापर करूं येता.

देखीक: शिमेचेर आशिल्लें कोश्टक

तुमचीं मेजां फकत मात्शीं चिकणमाती दिसपाक करात, तांचे कोनशे वाटकुळे करून आनी सगळ्या वटांनी शिमो घालून.

<कोश्टक वर्ग = "सीमा-कोश्टक" > 
  ...
</कोश्टक>

देखीक: झेब्रा-पट्टीदार

झेब्रा-स्ट्राइपिंग जोडून तुमच्या कोश्टकां कडेन मात्शी फॅन्सी मेळोवची-फक्त .zebra-stripedवर्ग जोडचो.

टिप: Zebra-striping हें एक प्रगतीशील सुदारणा आसा ���ी IE8 आनी सकयल सारकिल्या पोरन्या ब्राउझरां खातीर उपलब्ध ना.

<कोष्टक वर्ग = "झेब्रा-पट्टीदार" > 
  ...
</कोश्टक>

देखीक: झेब्रा-पट्टीदार w / TableSorter.js

आदलें उदाहरण घेवन, आमी jQuery आनी Tablesorter प्लगइन वरवीं क्रमवारी कार्यक्षमताय पुरवण करून आमच्या कोश्टकांची उपयुक्तताय सुदारतात . क्रमवारी बदलपाखातीर खंयच्याय स्तंभाच्या शीर्षकाचेर क्लिक करात.

<script src = "js/jquery/jquery.tablesorter.min.js" ></स्क्रिप्ट> 
<लिपी > हें नांव 
  $ ( फंक्शन () { 1 . 
    $ ( "कोश्टक # क्रमवारी कोश्टक उदाहरण" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script> हें नांव
<कोष्टक वर्ग = "झेब्रा-पट्टीदार" > 
  ...
</कोश्टक>

मुलभूत शैली

सगळ्या फॉर्मांक वाचपाक येवपी आनी मापनीय पद्दतीन सादर करपाक मुलभूत शैली दिल्या. मजकूर इनपुट, निवड यादी, मजकूरक्षेत्रां, रेडिओ बटणां आनी चेकबॉक्स, आनी बटणां खातीर शैली दिल्या.

रचून दवरिल्लीं फॉर्मां

तुमच्या फॉर्माच्या एचटीएमएलांत जोडात .form-stackedआनी तुमकां तांच्या शेतांचेर लेबलां तांच्या उजव्या वटेन न्हय तर तांच्या शेतां वयल्यान आसतलीं. तुमचे फॉर्म ल्हान आसल्यार वा तुमचे कडेन जड फॉर्मां खातीर इनपुटांचे दोन स्तंभ आसल्यार हें बरेंच काम करता.

शेताचे आकार तयार करात

तुमच्या मार्कअपांत फकत कांय वर्ग जोडून खंयचोय फॉर्म input, select, वा रुंदाय पसंतीचे करात.textarea

v1.3.0 प्रमाणें, आमी फॉर्म घटकांखातीर ग्रिड-आधारीत आकारमान वर्ग जोडल्यात. उपकार करून सद्याच्या .mini, .small, आदी वर्गांचेर हे वापरात.

बटणां घालतात

एक रूढिवाद म्हूण, बटणां कृतींखातीर वापरतात जाल्यार दुवे वस्तूंखातीर वापरतात. देखीक, "डावनलोड" हें बटण आसूं येता आनी "हालीची क्रिया" दुवो आसूं येता.

सगळे बटण पूर्वनिर्धारीतपणान उजवाड राशीचे शैलीचेर, पूण वेगवेगळ्या रंग शैलींखातीर जायते कार्यात्मक वर्ग लागू करूं येतात. ह्या वर्गांत निळो .primaryवर्ग, हळदुवो .infoवर्ग, पाचवो .successवर्ग, तांबडो .dangerवर्ग हांचो आस्पाव जाता.

उदाहरण बटण

बटण शैली लागू केल्ल्यान खंयच्याय गजालीक लागू करूं येतात .btn. सादारणपणान तुमकां हीं फकत <a>, <button>, आनी निवड <input>घटकांक लागू करपाची इत्सा जातली. कशें दिसता तें पळयात:

पर्यायी आकार दिवप

फॅन्सी व्हडले वा ल्हान बटण? ताचेर आसचें!

अक्षम स्थिती

सक्रिय नाशिल्ल्या बटणां खातीर वा ऍप्लिकेशनान एका वा दुसऱ्या कारणाक लागून अक्षम केल्ल्या बटणां खातीर, अक्षम स्थिती वापरात. तें .disabledदुव्यां खातीर आनी घटकां :disabledखातीर .<button>

दुवे आसात

बटणां घालतात

काय तें

आमची टॉपबार ही एक स्थिर बार आसा जी वेबसायटीचो लोगो वा नांव, प्राथमीक नेव्हिगेशन, आनी सोद फॉर्म दवरता.

अनुकूल करपाक येता

भितरले सगळे घटक, आनी पुराय टॉपबार तशेंच, पर्यायी आसात. तुमी लोगो/नांव, नाव, सोद, आनी दुय्यम नाव-वा ताचें खंयचेंय संयोजन समाविष्ट करपाक निवडूंक शकतात.

ड्रॉपडावन हांचो आस्पाव आसा

मुखेल नेव्हिगेशनचो एक भाग म्हूण, तुमच्या नेव्हांत ड्रॉपडावन जोडपाची तुमकां क्षमता आमी समाविष्ट केल्या. तें कशें जाता तें पळोवपा खातीर वयर दिल्लें दुय्यम nav (उजवें संरेखित) पळयात. ड्रॉपडावन टॅग सद्याची पान निवड दाखोवपाकय liतेंको दितात..active

टॅब आनी गोळ्या

एक 1 च्या आदारान सादें दुय्यम नेव्हिगेशन तयार करचें <ul>. योग्य वर्ग जोडून टॅब वा गोळ्यां मदीं स्वॅप करात.

आमचीं खातें मांडावळी पानां सारकिल्या सामुग्रीच्या उप-विभागां खातीर आनी सारके सामुग्रीच्या पानांचेर टॉगल करपा खातीर वापरपी वेळरेखां खातीर ग्रेट. टॅब वा गोळ्या शैलींत उपलब्ध आसा.

मुळावे टॅब उदाहरण

टॅब नेमान नेव्हिगेशन म्हणून (त्याच टॅबांत भायली पानां लोड करप) वा सामुग्रीच्या फलकांक स्वॅप करपाक टॅब करपाक येवपी सामुग्री क्षेत्र म्हणून वापरूं येता. आमचे कडेन एक टॅब प्लगइन आसा जो उपरांतच्या एकठांय करपाक वापरूं येता.

• घर
• प्रोफायल
• संदेश
• मांडावळी
• संपर्क
• ड्रॉपडावन करप
  • दुय्यम दुवो
  • हांगा आनीक कितें तरी
  • आनीक एक दुवो

<ul वर्ग = "टॅब" > 
  <li class = "सक्रीय" ><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 वर्ग = "गोळ्या" > 
  <li class = "सक्रीय" ><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> हें नांव

ब्रेडक्रंब हें नांव

वापरप्यांक ऍप्लिकेशन वा सायटी भितर खंय आसात तें दाखोवपाचो एक मार्ग म्हणून ब्रेडक्रंब नेव्हिगेशन वापरतात, पूण प्राथमीक नेव्हिगेशनाक न्हय.

• घर

• घर / 1 .
• मदलें पान

• घर / 1 .
• मदलें पान / .
• आनीक एक

• घर / 1 .
• मदलें पान / .
• आनीक एक / .
• तूं हांगा आसा

<ul class = "ब्रेडक्रंब" > 
  <li><a href = "#" > मुखेल </a> <span वर्ग = "विभाजक" > / </span></li>   
  <li><a href = "#" > मदलें पान </a> <span class = "विभाजक" > / </span></li>   
  <li><a href = "#" > आनीक एक </a> <span class = "divider" > / </span></li>   
  <li class = "active" > तुमी हांगा आसात </li> 
</ul> हें नांव

पृष्ठांकन करप

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

<div वर्ग = "पृष्ठांकन" > 
  <उल> हें नांव
    <li class = "आदीं अक्षम" ><a href = "#" > ← आदलें </a></li>  
    <li वर्ग = "सक्रीय" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > २ </a></li> हें नांव 
    <li><a href = "#" > ३ </a></li> हें नांव 
    <li><a href = "#" > ४ </a></li> हें नांव 
    <li><a href = "#" > ५ </a></li> हें नांव 
    <li class = "फुडें" ><a href = "#" > फुडें → </a></li> हें नांव  
  </ul> हें नांव
</div> हें नांव

मुळाव्यो सावधानताय

.alert-message

कृतीचें अपयश, संभाव्य अपयश वा यश उजवाडावपाखातीर एक ओळीचे संदेश. खास करून रूपांखातीर उपेगी पडटा.

जावास्क्रिप्ट मेळोवची »

उदाहरण कोड

<div class = "सावधान-संदेश शिटकावणी" > 
  <a class = "बंद करप" href = "#" > × </a>  
  <p><strong> पवित्र ग्वाकामोल! </strong> बेस्ट चेक यो सेल्फ, तूं चड बरो दिसना. </p> हें नांव
</div> हें नांव

संदेश आडावप

.alert-message.block-message

थोडें स्पश्टीकरणाची गरज आशिल्ल्या संदेशां खातीर, आमचे कडेन परिच्छेद शैलीचे अलर्ट आसात. लांब चुकीचे संदेश बुडबुडें मारपाक, वापरप्याक प्रलंबीत कृतीची शिटकावणी दिवपाक, वा फकत पानाचेर चड भर दिवपा खातीर म्हायती सादर करपाक हे परिपूर्ण आसात.

जावास्क्रिप्ट मेळोवची »

उदाहरण कोड

<div class = "चेतावणी-संदेश ब्लॉक-संदेश शिटकावणी" > 
  <a class = "बंद करप" href = "#" > × </a>  
  <p><strong> पवित्र ग्वाकामोल! ही एक शिटकावणी! </strong> बेस्ट चेक यो सेल्फ, तूं चड बरो दिसना. नुल्ला व्हिटॅ एलिट लिबेरो, एक फारेत्रा ऑग. प्रॅसेंट कोमोडो कर्सस मॅग्ना, वेल स्केलेरिस्क निस्ल कॉन्सेक्टेतुर इ. </p> हें नांव
  <div class = "सावधान-कृती" > 
    <a class = "btn small" href = "#" > ही कृती करात </a> <a class = "btn small" href = "#" > वा हें करात </a>     
  </div> हें नांव
</div> हें नांव

मोडल हांचो आस्पाव जाता

मोडल-संवाद वा लायटबॉक्स-जंय पार्श्वभूंय संदर्भ सांबाळप म्हत्वाचें आसता अशा परिस्थितींत संदर्भ कृतीं खातीर बरे आसात.

जावास्क्रिप्ट मेळोवची »

साधनाच्यो टिपा

गोंदळिल्ल्या वापरप्याक मदत करपाक आनी तांकां योग्य दिशेन दाखोवपाक ट्विप्सी सुपर उपेगी आसात.

जावास्क्रिप्ट मेळोवची »

पोपोव्हर्स हें नांव

मांडावळीचेर परिणाम करिनासतना पानाक उपमजकूर म्हायती दिवपाक पॉपओव्हर वापरात.

जावास्क्रिप्ट मेळोवची »

सुरवात करप

बूटस्ट्रॅप लायब्ररी वांगडा जावास्क्रिप्ट एकठांय करप सुपर सोंपें आसा. सकयल आमी मुळाव्या गजालींचेर वतात आनी तुमकां सुरवात करपाक कांय अद्भुत प्लगइन दितात!

जावास्क्रिप्ट डॉक्स पळयात »

कितें आस्पावलां

jQuery आनी Ender कडेन काम करपी नव्या सानुकूल प्लगइनांनी Bootstrap च्या कांय मुखेल घटकांक जिवीत हाडचें . तुमच्या खाशेल्या विकास गरजे प्रमाणें तांचे विस्तार आनी बदल करपाक आमी तुमकां प्रोत्साहन दितात.

जावास्क्रिप्ट गरजेची आसा?

ना! बूटस्ट्रॅप पयली आनी सगळ्यांत म्हत्वाचें म्हणल्यार CSS लायब्ररी जावपाक तयार केला. ही जावास्क्रिप्ट समाविष्ट केल्ल्या शैलींचेर मुळावो परस्पर संवादात्मक थर पुरवण करता.

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

चड म्हायती खातीर आनी कांय लायव्ह डेमो पळोवपाक, उपकार करून आमचें प्लगइन दस्तावेजीकरण पान पळयात .