वर
बाकी
बरोबर
खाली
बूटस्ट्रॅप

बूटस्ट्रॅप, Twitter वरून

बूटस्ट्रॅप हे Twitter वरील टूलकिट आहे जे वेब अॅप्स आणि साइट्सच्या विकासासाठी किकस्टार्ट करण्यासाठी डिझाइन केलेले आहे.
यात टायपोग्राफी, फॉर्म, बटणे, टेबल्स, ग्रिड, नेव्हिगेशन आणि अधिकसाठी बेस CSS आणि HTML समाविष्ट आहे.

नर्ड अलर्ट: बूटस्ट्रॅप लेससह तयार केला आहे आणि आधुनिक ब्राउझर लक्षात घेऊन गेटच्या बाहेर काम करण्यासाठी डिझाइन केले आहे.

CSS ला हॉटलिंक करा

जलद आणि सर्वात सोपी सुरुवात करण्यासाठी, फक्त हे स्निपेट तुमच्या वेबपेजमध्ये कॉपी करा.

कमी सह वापरा

कमी वापरण्याचे चाहते? काही हरकत नाही, फक्त रेपो क्लोन करा आणि या ओळी जोडा:

GitHub वर काटा

Github वर अधिकृत बूटस्ट्रॅप रेपोसह डाउनलोड करा, काटा काढा, खेचा, फाइल समस्या आणि बरेच काही.

GitHub वर बूटस्ट्रॅप »

सध्या v1.3.0

बूटस्ट्रॅप संक्षिप्त इतिहास, ब्राउझर समर्थन आणि बरेच काही बद्दल

इतिहास

Twitter वरील अभियंत्यांनी ऐतिहासिकदृष्ट्या जवळजवळ कोणत्याही लायब्ररीचा वापर केला आहे ज्याशी ते परिचित होते फ्रंट-एंड आवश्यकता पूर्ण करण्यासाठी. सादर केलेल्या आव्हानांना उत्तर म्हणून बूटस्ट्रॅपची सुरुवात झाली. अनेक अद्भुत लोकांच्या मदतीने, बूटस्ट्रॅप लक्षणीयरीत्या वाढला आहे.

dev.twitter.com वर अधिक वाचा ›

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

क्रोम, सफारी, इंटरनेट एक्सप्लोरर आणि फायरफॉक्स सारख्या प्रमुख आधुनिक ब्राउझरमध्ये बूटस्ट्रॅपची चाचणी केली जाते आणि समर्थित आहे.

Chrome, Safari, Internet Explorer आणि Firefox मध्ये चाचणी आणि समर्थित
  • नवीनतम सफारी
  • नवीनतम Google Chrome
  • फायरफॉक्स 4+
  • इंटरनेट एक्सप्लोरर 7+
  • ऑपेरा 11

काय समाविष्ट आहे

बूटस्ट्रॅप संकलित CSS, uncompiled, आणि उदाहरण टेम्पलेट्ससह पूर्ण येतो.

  • Javascript प्लगइन
  • सर्व मूळ .less फाइल्स
  • पूर्णपणे संकलित आणि लहान CSS
  • पूर्ण शैली मार्गदर्शक दस्तऐवजीकरण
  • भिन्न लेआउटसह तीन उदाहरण पृष्ठे

द्रुत-प्रारंभ उदाहरणे

काही द्रुत टेम्पलेट्सची आवश्यकता आहे? आम्ही एकत्रित केलेली ही मूलभूत उदाहरणे पहा:

  • नायक युनिटसह साधे तीन-स्तंभ लेआउट
  • स्थिर साइडबारसह फ्लुइड लेआउट
  • अॅप्ससाठी साधे हँगिंग कंटेनर

ग्रिड सिस्टम मानक 940px रॉक करा किंवा स्वतःचे रोल करा

डीफॉल्ट ग्रिड

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

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

येथे दर्शविल्याप्रमाणे, एक मूलभूत मांडणी दोन "स्तंभांसह" तयार केली जाऊ शकते, प्रत्येक 16 मूलभूत स्तंभांची संख्या व्यापून आम्ही आमच्या ग्रिड प्रणालीचा भाग म्हणून परिभाषित केले आहे. अधिक भिन्नतेसाठी खालील उदाहरणे पहा.

  1. <div वर्ग = "पंक्ती" > 
  2.   <div वर्ग = "span6" > 
  3.     ...
  4.   </div>
  5.   <div class = "span10" > 
  6.     ...
  7.   </div>
  8. </div>
१
१
१
१
१
१
१
१
१
१
१
१
१
१
१
१
2
2
2
2
2
2
2
2
3
3
3
3
3
१
4
4
4
4
1/3
1/3
1/3
1/3
2/3
4
6
6
8
8
५
11
16

ऑफसेटिंग स्तंभ

4
8 ऑफसेट 4
1/3 ऑफसेट 2/3s
4 ऑफसेट 4
4 ऑफसेट 4
5 ऑफसेट 3
5 ऑफसेट 3
10 ऑफसेट 6

नेस्टिंग स्तंभ

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

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

स्तंभाचा स्तर 1
स्तर 2
स्तर 2 
  1. <div वर्ग = "पंक्ती" > 
  2.   <div वर्ग = "span12" > 
  3.     स्तंभाचा स्तर 1
  4.     <div वर्ग = "पंक्ती" > 
  5.       <div वर्ग = "span6" > 
  6.         स्तर 2
  7.       </div>
  8.       <div वर्ग = "span6" > 
  9.         स्तर 2
  10.       </div>
  11.     </div>
  12.   </div>
  13. </div>

तुमचा स्वतःचा ग्रिड रोल करा

डीफॉल्ट 940px ग्रिड सिस्टीम सानुकूलित करण्यासाठी बूटस्ट्रॅपमध्ये अंतर्भूत व्हेरिएबल्स आहेत. थोड्या सानुकूलनेसह, तुम्ही स्तंभांचा आकार, त्यांचे गटर आणि ते ज्या कंटेनरमध्ये राहतात त्यामध्ये बदल करू शकता.

ग्रिडच्या आत

ग्रिड सिस्टीममध्ये सुधारणा करण्यासाठी आवश्यक असलेले चल सध्या सर्व मध्ये राहतात variables.less.

चल डीफॉल्ट मूल्य वर्णन
@gridColumns 16 ग्रिडमधील स्तंभांची संख्या
@gridColumnWidth 40px ग्रिडमधील प्रत्येक स्तंभाची रुंदी
@gridGutterWidth 20px प्रत्येक स्तंभामधील ऋण जागा
@siteWidth सर्व स्तंभ आणि गटरांची गणना केलेली बेरीज आम्ही स्तंभ आणि गटरची संख्या मोजण्यासाठी काही मूलभूत जुळणी वापरतो आणि .fixed-container()मिक्सिनची रुंदी सेट करतो.

आता सानुकूलित करण्यासाठी

ग्रिड बदलणे म्हणजे तीन @grid-*व्हेरिएबल्स बदलणे आणि कमी फाइल्स पुन्हा कंपाइल करणे.

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

  1. @gridColumns : 24 ;       
  2. @gridColumnWidth : 20px ;   
  3. @gridGutterWidth : 20px ;

एकदा पुन्हा संकलित केल्यानंतर, आपण सेट केले जाईल!

वेबपृष्ठे तयार करण्यासाठी लेआउट मूलभूत टेम्पलेट्स

निश्चित मांडणी

डीफॉल्ट आणि साधे 940px-विस्तृत, एका द्वारे प्रदान केलेल्या कोणत्याही वेबसाइट किंवा पृष्ठासाठी केंद्रीत मांडणी <div.container>.

  1. <body>
  2.   <div वर्ग = "कंटेनर" > 
  3.     ...
  4.   </div>
  5. </body>

द्रव लेआउट

किमान- आणि कमाल-रुंदी आणि डावीकडील साइडबारसह पर्यायी, लवचिक द्रव पृष्ठ रचना. अॅप्स आणि डॉक्ससाठी उत्तम.

  1. <body>
  2.   <div वर्ग = "कंटेनर-फ्लुइड" > 
  3.     <div वर्ग = "साइडबार" > 
  4.       ...
  5.     </div>
  6.     <div वर्ग = "सामग्री" > 
  7.       ...
  8.     </div>
  9.   </div>
  10. </body>

टायपोग्राफी मथळे, परिच्छेद, सूची आणि इतर इनलाइन प्रकार घटक

मथळे आणि कॉपी

तुमच्या वेबपृष्ठांची रचना करण्यासाठी एक मानक टायपोग्राफिक पदानुक्रम.

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

आम्ही आमच्या सर्व प्रकारांचे समास, पॅडिंग आणि लाइन-हाइट तयार करण्यासाठी ते चल आणि काही गणिते वापरतो.

h1. मथळा १

h2. मथळा 2

h3. मथळा 3

h4. मथळा 4

h5. मथळा 5
h6. मथळा 6

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

नुल्लम क्विस रिझस एगेट उर्ना मोलिस ऑर्नरे वेल ईयू लिओ. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur dediculus mus. नल्लम आयडी डोलोर आयडी निभ अल्ट्रीसीज वाहने आणि आयडी एलिट.

उदाहरण शीर्षकामध्ये उप-शीर्षक आहे…

विविध घटक

भर, पत्ते आणि संक्षेप वापरणे

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

कधी वापरायचे

एम्फॅसिस टॅग्ज ( <strong>आणि <em>) शब्द किंवा वाक्प्रचार त्याच्या सभोवतालच्या प्रतीशी संबंधित अतिरिक्त महत्त्व किंवा जोर दर्शविण्यासाठ��� वापरला जावा. <strong>महत्त्व आणि ताण भर <em>देण्यासाठी वापरा .

परिच्छेद मध्ये जोर

Fusce dapibus , टेलस 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>आणि तुम्हाला &mdash;त्यापूर्वी एक em डॅश मिळेल.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. पूर्णांक posuere erat a ante venenatis dapibus posuere velit aliquet.

डॉ ज्युलियस हिबर्ट 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. पूर्णांक posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  3.   <small> डॉ. ज्युलियस हिबर्ट </small>
  4. </blockquote>

याद्या

क्रमरहित<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • मस्सा येथे पूर्णांक मोलेस्टी लॉरेम
  • प्रीटियम निस्ल अॅलिकेटमध्ये फॅसिलिसिस
  • नुल्ला volutpat aliquam velit
    • फॅसेलस आयकुलिस नेक
    • पुरूस सोडलेस ultricies
    • वेस्टिबुलम लाओरेट पोर्टिटर सेम
    • Ac tristique libero volutpat येथे
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • porttitor lorem Eget

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

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • मस्सा येथे पूर्णांक मोलेस्टी लॉरेम
  • प्रीटियम निस्ल अॅलिकेटमध्ये फॅसिलिसिस
  • नुल्ला volutpat aliquam velit
    • फॅसेलस आयकुलिस नेक
    • पुरूस सोडलेस ultricies
    • वेस्टिबुलम लाओरेट पोर्टिटर सेम
    • Ac tristique libero volutpat येथे
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • porttitor lorem Eget

आज्ञा केली<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. porttitor lorem Eget

वर्णनdl

वर्णन याद्या
अटी परिभाषित करण्यासाठी वर्णन सूची योग्य आहे.
Euismod
Vestibulum id ligula porta felis euismod Semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
मालेसुडा पोर्टा
Etiam porta sem malesuada magna mollis euismod.

कोड

<code> <pre>

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

कोड सादर करत आहे

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

घटक परिणाम
<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 डाउनलोड करा आणि कसे वापरावे यासाठी रीडमी पहा.

इनलाइन लेबले

<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> लक्ष द्या

मीडिया प्रतिमा आणि व्हिडिओ प्रदर्शित करत आहे

मीडिया ग्रिड

कमी HTML फूटप्रिंट आणि किमान शैली असलेल्या पृष्ठांवर वेगवेगळ्या आकारांची लघुप्रतिमा प्रदर्शित करा.

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

मधील लघुप्रतिमा .media-gridकोणत्याही आकाराची असू शकतात, परंतु अंगभूत बूटस्ट्रॅप ग्रिड सिस्टीमवर थेट मॅप केल्यावर ते उत्कृष्ट कार्य करतात. .span290, 210, आणि 330 सारख्या प्रतिमा रुंदी काही पिक्सेल पॅडिंगसह , .span4, आणि .span6स्तंभ आकारांच्या बरोबरीने एकत्र करतात .

मोठा

मध्यम

लहान

त्यांचे कोडिंग

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

  1. <ul class = "मीडिया-ग्रिड" > 
  2.   <li>
  3.     <a href = "#" > 
  4.       <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
  5.     </a>
  6.   </li>
  7.   <li>
  8.     <a href = "#" > 
  9.       <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
  10.     </a>
  11.   </li>
  12. </ul>

टेबल्ससाठी , तुम्ही अंदाज लावला, सारणीबद्ध डेटा

बिल्डिंग टेबल

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

अनेक गोष्टींसाठी टेबल उत्तम आहेत. तथापि, उत्कृष्ट सारण्यांना उपयुक्त, स्केलेबल आणि वाचनीय (कोड स्तरावर) होण्यासाठी थोडे मार्कअप प्रेम आवश्यक आहे. मदत करण्यासाठी येथे काही टिपा आहेत.

तुमचे स्तंभ शीर्षलेख नेहमी <thead>अशा प्रकारे गुंडाळा की पदानुक्रम <thead>> <tr>> असेल <th>.

स्तंभ शीर्षलेखांप्रमाणेच, तुमच्या सारणीच्या मुख्य भागाची सामग्री एका मध्ये गुंडाळलेली असावी <tbody>जेणेकरून तुमची पदानुक्रम <tbody>> <tr>> असेल <td>.

उदाहरण: डीफॉल्ट सारणी शैली

वाचनीयता सुनिश्चित करण्यासाठी आणि संरचनेची देखभाल करण्यासाठी सर्व सारण्या आपोआप केवळ आवश्यक किनार्यांसह शैलीबद्ध केल्या जातील. अतिरिक्त वर्ग किंवा विशेषता जोडण्याची आवश्यकता नाही.

# पहिले नाव आडनाव इंग्रजी
१ काही एक इंग्रजी
2 जो सहा पॅक इंग्रजी
3 स्टु डेंट कोड 
  1. <टेबल>
  2.   ...
  3. </ टेबल>

उदाहरण: घनरूप सारणी

ज्या टेबल्ससाठी अधिक डेटा आवश्यक आहे अशा टेबलसाठी, कंडेन्स्ड फ्लेवर वापरा जे पॅडिंग अर्ध्यामध्ये कापते. हे डिफॉल्ट टेबल शैलींप्रमाणेच सीमा आणि झेब्रा-पट्टे यांच्या संयोगाने देखील वापरले जाऊ शकते.

# पहिले नाव आडनाव इंग्रजी
१ काही एक इंग्रजी
2 जो सहा पॅक इंग्रजी
3 स्टु डेंट कोड

उदाहरण: बॉर्डर टेबल

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

# पहिले नाव आडनाव इंग्रजी
१ काही एक इंग्रजी
2 जो सहा पॅक इंग्रजी
3 स्टु डेंट कोड 
  1. <टेबल वर्ग = "बॉर्डर-टेबल" > 
  2.   ...
  3. </ टेबल>

उदाहरण: झेब्रा-पट्टेदार

झेब्रा-स्ट्रीपिंग जोडून आपल्या सारण्यांसह थोडे फॅन्सी मिळवा—फक्त .zebra-stripedवर्ग जोडा.

# पहिले नाव आडनाव इंग्रजी
१ काही एक इंग्रजी
2 जो सहा पॅक इंग्रजी
3 स्टु डेंट कोड
स्पॅन 4 स्तंभ
स्पॅन 2 स्तंभ स्पॅन 2 स्तंभ

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

  1. <टेबल वर्ग = "झेब्रा-स्ट्रीप" > 
  2.   ...
  3. </ टेबल>

उदाहरण: झेब्रा-स्ट्रीप w/ TableSorter.js

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

# पहिले नाव आडनाव इंग्रजी
2 जो सहा पॅक इंग्रजी
3 स्टु डेंट कोड
१ आपले एक इंग्रजी 
  1. <script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
  2. <script > 
  3.   $ ( कार्य () { 
  4.     $ ( "टेबल#sortTableExample" ). टेबल्सॉर्टर ({ सॉर्टलिस्ट : [[ 1 , 0 ]] });  
  5.   });
  6. </script>
  7. <टेबल वर्ग = "झेब्रा-स्ट्रीप" > 
  8.   ...
  9. </ टेबल>

फॉर्म

डीफॉल्ट शैली

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

उदाहरण फॉर्म आख्यायिका
येथे काही मूल्य
मदत मजकुराचा छोटा झलक
यश!
रुह रोह!
उदाहरण फॉर्म आख्यायिका
@
येथे काही मदत मजकूर आहे
उदाहरण फॉर्म आख्यायिका
टीप: मोठ्या क्लिक क्षेत्रासाठी आणि अधिक वापरण्यायोग्य फॉर्मसाठी लेबले सर्व पर्यायांना घेरतात.
करण्यासाठी सर्व वेळा पॅसिफिक मानक वेळ (GMT -08:00) म्हणून दर्शविल्या जातात.
गरज असल्यास वरील फील्डचे वर्णन करण्यासाठी मदत मजकूराचा ब्लॉक.
 

स्टॅक केलेले फॉर्म

तुमच्या फॉर्मच्या HTML मध्ये जोडा .form-stackedआणि तुम्हाला त्यांच्या फील्डच्या डावीकडे ऐवजी शीर्षस्थानी लेबले असतील. जर तुमचे फॉर्म लहान असतील किंवा तुमच्याकडे जड फॉर्मसाठी इनपुटचे दोन कॉलम असतील तर हे उत्तम काम करते.

उदाहरण फॉर्म आख्यायिका
उदाहरण फॉर्म आख्यायिका
मदत मजकुराचा छोटा झलक
टीप: मोठ्या क्लिक क्षेत्रासाठी आणि अधिक वापरण्यायोग्य फॉर्मसाठी लेबले सर्व पर्यायांना घेरतात.
 

फॉर्म फील्ड आकार

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

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

बटणे

एक नियम म्हणून, बटणे क्रियांसाठी वापरली जातात तर लिंक्स ऑब्जेक्टसाठी वापरली जातात. उदाहरणार्थ, "डाउनलोड" एक बटण असू शकते आणि "अलीकडील क्रियाकलाप" एक दुवा असू शकतो.

सर्व बटणे हलक्या राखाडी शैलीवर डीफॉल्ट असतात, परंतु विविध रंग शैलींसाठी अनेक कार्यात्मक वर्ग लागू केले जाऊ शकतात. या वर्गांमध्ये निळा .primaryवर्ग, हलका-निळा .infoवर्ग, हिरवा .successवर्ग आणि लाल .dangerवर्ग समाविष्ट आहे.

उदाहरणे बटणे

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

       

पर्यायी आकार

फॅन्सी मोठी किंवा लहान बटणे? त्यावर आहे!

प्राथमिक कृती कृती
प्राथमिक कृती कृती

अपंग राज्य

सक्रिय नसलेल्या किंवा एका कारणाने अॅपद्वारे अक्षम केलेल्या बटणांसाठी, अक्षम स्थिती वापरा. ते .disabledदुव्यांसाठी आणि :disabledघटकांसाठी आहे <button>.

दुवे

प्राथमिक कृती कृती

बटणे

 

यश, चेतावणी, त्रुटी आणि माहिती संदेशांसाठी सूचना आणि त्रुटी शैली

मूलभूत सूचना

.alert-message

अपयश, संभाव्य अपयश किंवा कृतीचे यश हायलाइट करण्यासाठी एक-लाइन संदेश. फॉर्मसाठी विशेषतः उपयुक्त.

जावास्क्रिप्ट मिळवा »

×

पवित्र guacamole! स्वत:ची उत्तम तपासणी करा, तुम्ही फार चांगले दिसत नाही आहात .

×

अरे स्नॅप! हे आणि ते बदला आणि पुन्हा प्रयत्न करा .

×

शाब्बास! तुम्ही हा इशारा संदेश यशस्वीरीत्या वाचला .

×

सावधान! ही एक सूचना आहे ज्याकडे तुमचे लक्ष देणे आवश्यक आहे, परंतु हे अद्याप फार मोठे प्राधान्य नाही.

उदाहरण कोड

  1. <div वर्ग = "अलर्ट-मेसेज चेतावणी" > 
  2.   <a वर्ग = "बंद करा" href = "#" > × </a>  
  3.   <p><strong> पवित्र ग्वाकमोल! </strong> स्वतःची उत्तम तपासणी करा, तुम्ही फार चांगले दिसत नाही. </p>
  4. </div>

संदेश ब्लॉक करा

.alert-message.block-message

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

जावास्क्रिप्ट मिळवा »

×

पवित्र guacamole! ही एक चेतावणी आहे! स्वत:ची उत्तम तपासणी करा, तुम्ही फार चांगले दिसत नाही. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

ही कारवाई करा किंवा हे करा
×

अरे स्नॅप! तुम्हाला एक त्रुटी आली! हे आणि ते बदला आणि पुन्हा प्रयत्न करा .

  • ड्यूस मॉलिस हे नॉन कमोडो लक्टस आहे
  • Nisi erat porttitor ligula
  • Eget lacinia odio sem nec elit
ही कारवाई करा किंवा हे करा
×

शाब्बास! तुम्ही हा इशारा संदेश यशस्वीरीत्या वाचला. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur dediculus mus. Maecenas faucibus mollis interdum.

ही कारवाई करा किंवा हे करा
×

सावधान! ही एक सूचना आहे ज्याकडे तुमचे लक्ष देणे आवश्यक आहे, परंतु हे अद्याप फार मोठे प्राधान्य नाही.

ही कारवाई करा किंवा हे करा

उदाहरण कोड

  1. <div वर्ग = "अलर्ट-मेसेज ब्लॉक-मेसेज चेतावणी" > 
  2.   <a वर्ग = "बंद करा" href = "#" > × </a>  
  3.   <p><strong> पवित्र ग्वाकमोल! ही एक चेतावणी आहे! </strong> स्वतःची उत्तम तपासणी करा, तुम्ही फार चांगले दिसत नाही. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  4.   <div वर्ग = "अलर्ट-क्रिया" > 
  5.     <a class = "btn small" href = "#" > ही कृती करा </a> <a class = "btn small" href = "#" > किंवा हे करा </a>     
  6.   </div>
  7. </div>

मॉडेल्स, टूलटिप्स आणि पॉपओव्हर्समध्ये सामग्री प्रदर्शित करण्यासाठी पॉपओव्हर्स घटक

मॉडेल्स

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

जावास्क्रिप्ट मिळवा »

×

मॉडेल शीर्षक

एक उत्तम शरीर…

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

टूलटिप्स

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

जावास्क्रिप्ट मिळवा »

Lorem ipsum Dolar sit amet illo error 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 fugit quae voluptum voluptum voluptum aquantium

Popovers

लेआउट प्रभावित न करता पृष्ठास सबटेक्स्टुअल माहिती प्रदान करण्यासाठी पॉपओव्हर्स वापरा.

जावास्क्रिप्ट मिळवा »

पॉपओव्हर शीर्षक

Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

बूटस्ट्रॅपसह जावास्क्रिप्ट वापरणे तुम्हाला प्रारंभ करण्यासाठी प्लगइनची अनुक्रमणिका

सुरू करणे

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

जावास्क्रिप्ट डॉक्स पहा »

काय समाविष्ट आहे

jQuery आणि Ender सह कार्य करणार्‍या नवीन सानुकूल प्लगइनसह बूटस्ट्रॅपचे काही प्राथमिक घटक जिवंत करा . तुमच्या विशिष्ट विकास गरजा पूर्ण करण्यासाठी आम्ही तुम्हाला त्यांचा विस्तार आणि सुधारणा करण्यास प्रोत्साहित करतो.

फाईल वर्णन
bootstrap-modal.js आमचे मॉडेल प्लगइन हे पारंपारिक मॉडेल जेएस प्लगइनवर अतिशय स्लिम टेक आहे! आम्‍हाला twitter वर आवश्‍यक असणार्‍या फंक्शनॅलिटीचा समावेश करण्‍याची विशेष काळजी घेतली.
bootstrap-alerts.js अलर्ट प्लगइन अलर्टमध्ये जवळची कार्यक्षमता जोडण्यासाठी एक अतिशय लहान वर्ग आहे.
bootstrap-dropdown.js हे प्लगइन बूटस्ट्रॅप टॉपबार किंवा टॅब केलेल्या नेव्हिगेशनमध्ये ड्रॉपडाउन संवाद जोडण्यासाठी आहे.
bootstrap-scrollspy.js ScrollSpy प्लगइन बूटस्ट्रॅप टॉपबारवर स्क्रोल स्थितीवर आधारित स्वयं अपडेटिंग एनएव्ही जोडण्यासाठी आहे.
bootstrap-buttons.js ScrollSpy प्लगइन बूटस्ट्रॅप टॉपबारवर स्क्रोल स्थितीवर आधारित स्वयं अपडेटिंग एनएव्ही जोडण्यासाठी आहे.
bootstrap-tabs.js हे प्लगइन स्थानिक सामग्रीद्वारे सायकलिंगसाठी द्रुत, डायनॅमिक टॅब आणि गोळी कार्यक्षमता जोडते.
bootstrap-twipsy.js जेसन फ्रेमने लिहिलेल्या उत्कृष्ट jQuery.tipsy प्लगइनवर आधारित; twipsy ही एक अद्ययावत आवृत्ती आहे, जी प्रतिमांवर अवलंबून नाही, अॅनिमेशनसाठी css3 आणि स्थानिक शीर्षक संचयनासाठी डेटा-विशेषता वापरते!
bootstrap-popover.js पॉपओव्हर प्लगइन तुमच्या ऍप्लिकेशनमध्ये पॉपओव्हर जोडण्यासाठी एक सोपा इंटरफेस प्रदान करते. हे boostrap-twipsy.js प्लगइन वाढवते, त्यामुळे तुमच्या प्रोजेक्टमध्ये पॉपओव्हर्स समाविष्ट करताना ती फाईल देखील हस्तगत करण्याचे सुनिश्चित करा!

जावास्क्रिप्ट आवश्यक आहे का?

नाही! बूटस्ट्रॅप सीएसएस लायब्ररी म्हणून प्रथम आणि सर्वात महत्त्वाचे डिझाइन केले आहे. ही जावास्क्रिप्ट समाविष्ट केलेल्या शैलींच्या शीर्षस्थानी मूलभूत परस्परसंवादी स्तर प्रदान करते.

तथापि, ज्यांना जावास्क्रिप्टची गरज आहे त्यांच्यासाठी, आम्ही तुम्हाला जावास्क्रिप्टसह बूटस्ट्रॅप कसे समाकलित करायचे हे समजण्यात मदत करण्यासाठी आणि तुम्हाला मूलभूत कार्यक्षमतेसाठी त्वरित, हलका पर्याय देण्यासाठी वरील प्लगइन प्रदान केले आहेत.

अधिक माहितीसाठी आणि काही थेट डेमो पाहण्यासाठी, कृपया आमच्या प्लगइन दस्तऐवजीकरण पृष्ठाचा संदर्भ घ्या .

कमी सुपरचार्जसह बूटस्ट्रॅप वापरणे व्हेरिएबल्स, मिक्सिन आणि फंक्शन्ससह तुमचे CSS

बूटस्ट्रॅप प्रीबूट वरून तयार करण्यात आला होता , जो वेगवान आणि सुलभ वेब डेव्हलपमेंटसाठी एक CSS प्रीप्रोसेसर, Less च्या संयोगाने वापरला जाणारा मिक्सिन्स आणि व्हेरिएबल्सचा एक ओपन-सोर्स पॅक आहे .

आम्ही बूटस्ट्रॅपमध्ये प्रीबूट कसे वापरले आणि तुम्ही तुमच्या पुढील प्रोजेक्टवर कमी चालवणे निवडल्यास तुम्ही त्याचा वापर कसा करू शकता ते पहा.

हे कसे वापरावे

तुमच्या ब्राउझरमध्ये जावास्क्रिप्टद्वारे बूटस्ट्रॅपच्या लेस व्हेरिएबल्स, मिक्सिन्स आणि सीएसएसमध्ये नेस्टिंगचा पूर्ण वापर करण्यासाठी हा पर्याय वापरा.

  1. <link rel = "stylesheet/less" href = "less/bootstrap.less" मीडिया = "सर्व" />    
  2. <script src = "js/less-1.1.3.min.js" ></script>

.js समाधान वाटत नाही? Less Mac अॅप वापरून पहा किंवा जेव्हा तुम्ही तुमचा कोड उपयोजित करता तेव्हा संकलित करण्यासाठी Node.js वापरा .

काय समाविष्ट आहे

बूटस्ट्रॅपचा भाग म्हणून Twitter बूटस्ट्रॅपमध्ये काय समाविष्ट केले आहे याचे काही ठळक मुद्दे येथे आहेत. डाउनलोड करण्यासाठी आणि अधिक जाणून घेण्यासाठी बूटस्ट्रॅप वेबसाइट किंवा गिथब प्रकल्प पृष्ठावर जा.

चल

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

  1. // दुवे
  2. @linkColor : #8b59c2;         
  3. @linkColorHover :     गडद करा ( @linkColor , 10 ); 
  4.  
  5. // ग्रे
  6. @ब्लॅक : #000;             
  7. @grayDark :           हलका ( @black , 25 %); 
  8. @ग्रे :               हलका ( @काळा , 50 %); 
  9. @ग्रे लाईट :          हलका ( @ब्लॅक , 70 %); 
  10. @ग्रे लाइटर :        हलका ( @ब्लॅक , 90 %); 
  11. @व्हाइट : #ffff ;             
  12.  
  13. // उच्चारण रंग
  14. @blue : #08b5fb;              
  15. @हिरवा : #46a546 ;             
  16. @लाल : #9d261d ;               
  17. @पिवळा : #ffc40d ;            
  18. @संत्रा : #f89406 ;            
  19. @गुलाबी : #c3325f ;              
  20. @जांभळा : #7a43b6 ;            
  21.  
  22. // बेसलाइन ग्रिड
  23. @basefont : 13px ;          
  24. @बेसलाइन : 18px ;

टिप्पणी करत आहे

/* ... */कमी CSS च्या सामान्य वाक्यरचना व्यतिरिक्त टिप्पणी करण्याची दुसरी शैली देखील प्रदान करते .

  1. // ही एक टिप्पणी आहे
  2. /* ही देखील एक टिप्पणी आहे */

वाळुला मिसळते

मिक्सिन्स हे मुळात CSS साठी अंतर्भूत किंवा आंशिक असतात, ज्यामुळे तुम्हाला कोडचा ब्लॉक एकामध्ये एकत्र करता येतो. ते box-shadow, क्रॉस-ब्राउझर ग्रेडियंट्स, फॉन्ट स्टॅक आणि अधिक सारख्या विक्रेत्याच्या प्रीफिक्स केलेल्या गुणधर्मांसाठी उत्तम आहेत. खाली बूटस्ट्रॅपसह समाविष्ट केलेल्या मिक्सिन्सचा नमुना आहे.

फॉन्ट स्टॅक

  1. #फॉन्ट {
  2.   . लघुलेख ( @weight : सामान्य , @size : 14px , @lineHeight : 20px ) {     
  3.     फॉन्ट आकार : @size ; _ 
  4.     फॉन्ट - वजन : @weight ; 
  5.     रेषा - उंची : @lineHeight ; 
  6.   }
  7.   . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
  8.     फॉन्ट - फॅमिली : "हेल्वेटिका न्यू" , हेल्वेटिका , एरियल , सॅन्स - सेरिफ ;   
  9.     फॉन्ट आकार : @size ; _ 
  10.     फॉन्ट - वजन : @weight ; 
  11.     रेषा - उंची : @lineHeight ; 
  12.   }
  13.   ...
  14. }

ग्रेडियंट

  1. #प्रवण {
  2.   ...
  3.   . अनुलंब ( @startColor : #555, @endColor: #333) { 
  4.     पार्श्वभूमी - रंग : @endColor ; 
  5.     पार्श्वभूमी - पुनरावृत्ती : पुनरावृत्ती - x ;
  6.     पार्श्वभूमी - प्रतिमा : - khtml - ग्रेडियंट ( रेखीय , डावीकडे वर , डावीकडे तळाशी , ( @startColor ), पासून ( @endColor ) पर्यंत ); // कॉन्करर   
  7.     पार्श्वभूमी - प्रतिमा : - moz - रेखीय - ग्रेडियंट ( @startColor , @endColor ); // FF 3.6+   
  8.     पार्श्वभूमी - प्रतिमा : - एमएस - रेखीय - ग्रेडियंट ( @startColor , @endColor ); // IE10   
  9.     पार्श्वभूमी - प्रतिमा : - वेबकिट - ग्रेडियंट ( रेखीय , डावे शीर्ष , डावे तळ , रंग - थांबा ( 0 %, @startColor ), रंग - थांबा ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
  10.     पार्श्वभूमी - प्रतिमा : - वेबकिट - रेखीय - ग्रेडियंट ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
  11.     पार्श्वभूमी - प्रतिमा : - ओ - रेखीय - ग्रेडियंट ( @startColor , @endColor ); // ऑपेरा 11.10   
  12.     पार्श्वभूमी - प्रतिमा : रेखीय - ग्रेडियंट ( @startColor , @endColor ); // मानक  
  13.   }
  14.   ...
  15. }

ऑपरेशन्स

फॅन्सी मिळवा आणि खालीलप्रमाणे लवचिक आणि शक्तिशाली मिश्रण तयार करण्यासाठी काही गणित करा.

  1. // ग्रिडट्यूड
  2. @gridColumns : 16 ;       
  3. @gridColumnWidth : 40px ;   
  4. @gridGutterWidth : 20px ;   
  5. @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
  6.  
  7. // काही स्तंभ बनवा
  8. . स्तंभ ( @columnSpan : 1 ) {  
  9.   रुंदी : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  10. }

संकलित करणे कमी

/lib/ मधील फाईल्स सुधारित केल्यानंतर .less, तुम्हाला bootstrap-*xx.css आणि bootstrap-*xx.min.css फाइल्स पुन्हा निर्माण करण्यासाठी त्या पुन्हा संकलित कराव्या लागतील. तुम्ही GitHub वर पुल विनंती सबमिट करत असल्यास, तुम्ही नेहमी पुन्हा कंपाइल करणे आवश्यक आहे.

संकलित करण्याचे मार्ग

पद्धत पायऱ्या
मेकफाइलसह नोड

खालील आदेश चालवून npm सह कमी कमांड लाइन कंपाइलर स्थापित करा:

$ npm lessc स्थापित करा

एकदा इंस्‍टॉल makeकेल्‍यावर तुमच्‍या बूटस्ट्रॅप डिरेक्‍ट्रीच्‍या रूटमधून रन करा आणि तुम्‍ही तयार आहात.

याव्यतिरिक्त, जर तुमच्याकडे वॉचर स्थापित असेल, तर तुम्ही make watchबूटस्ट्रॅप लिबमध्ये फाइल संपादित करता तेव्हा प्रत्येक वेळी बूटस्ट्रॅप स्वयंचलितपणे पुन्हा तयार होईल (हे आवश्यक नाही, फक्त एक सोयीची पद्धत).
जावास्क्रिप्ट

नवीनतम Less.js डाउनलोड करा आणि त्यात त्याचा मार्ग (आणि बूटस्ट्रॅप) समाविष्ट करा head.

  1. <link rel = "stylesheet/less" href = "/path/to/bootstrap.less" >  
  2. <script src = "/path/to/less.js" ></script>

.less फाइल्स पुन्हा संकलित करण्यासाठी, फक्त त्या जतन करा आणि तुमचे पृष्ठ रीलोड करा. Less.js त्यांना संकलित करते आणि स्थानिक स्टोरेजमध्ये संग्रहित करते.
कमांड लाइन

जर तुमच्याकडे आधीपासून कमी कमांड लाइन टूल इंस्टॉल केले असेल, तर फक्त खालील कमांड चालवा:

$lessc ./lib/bootstrap.less > bootstrap.css

--compressतुम्ही काही बाइट्स सेव्ह करण्याचा प्रयत्न करत असल्यास त्या कमांडमध्ये नक्की समाविष्ट करा!
कमी मॅक अॅप

अनधिकृत Mac अॅप .less फाइल्सच्या डिरेक्टरी पाहतो आणि पाहिल्या गेलेल्या .less फाइलच्या प्रत्येक सेव्हनंतर स्थानिक फाइल्समध्ये कोड संकलित करतो.

तुम्‍हाला आवडत असल्‍यास, तुम्‍ही अ‍ॅपमध्‍ये स्‍वयंचलित लघुकरणासाठी प्राधान्ये टॉगल करू शकता आणि संकलित फायली कोणत्या निर्देशिकेत संपतात.