इतियाम पोर्टा सेम मलेसुदा मैग्ना मोलिस यूइसमॉड। मेकेनास फॉसीबस मोलिस इंटरडम। मोरबी लियो रिसस, पोर्टा एसी कॉन्सेक्टेटूर एसी, वेस्टिबुलम और एरोस।
बूटस्ट्रैप ट्विटर का एक टूलकिट है जिसे वेबएप्स और साइटों के विकास को किकस्टार्ट करने के लिए डिज़ाइन किया गया है।
इसमें टाइपोग्राफी, फॉर्म, बटन, टेबल, ग्रिड, नेविगेशन आदि के लिए बेस सीएसएस और एचटीएमएल शामिल हैं।
बेवकूफ चेतावनी: बूटस्ट्रैप कम के साथ बनाया गया है और इसे केवल आधुनिक ब्राउज़रों को ध्यान में रखकर गेट से बाहर काम करने के लिए डिज़ाइन किया गया था।
सबसे तेज़ और आसान शुरुआत के लिए, बस इस स्निपेट को अपने वेबपेज में कॉपी करें।
कम उपयोग करने का प्रशंसक? कोई बात नहीं, बस रेपो को क्लोन करें और इन पंक्तियों को जोड़ें:
जीथब पर आधिकारिक बूटस्ट्रैप रेपो के साथ डाउनलोड, फोर्क, पुल, फाइल इश्यू और बहुत कुछ।
बूटस्ट्रैप के हिस्से के रूप में प्रदान किया गया डिफ़ॉल्ट ग्रिड सिस्टम एक 940px चौड़ा 16-कॉलम ग्रिड है। यह लोकप्रिय 960 ग्रिड सिस्टम का स्वाद है, लेकिन बाईं और दाईं ओर अतिरिक्त मार्जिन/पैडिंग के बिना।
जैसा कि यहां दिखाया गया है, एक बुनियादी लेआउट दो "कॉलम" के साथ बनाया जा सकता है, जिनमें से प्रत्येक में हमारे ग्रिड सिस्टम के हिस्से के रूप में परिभाषित 16 मूलभूत स्तंभों की संख्या होती है। अधिक विविधताओं के लिए नीचे दिए गए उदाहरण देखें।
- <div class="row"> वर्ग = "पंक्ति" >
- <div class = "span6 कॉलम" >
- ...
- </div>
- <div class = "span10 column" >
- ...
- </div>
- </div>
लगभग किसी भी साइट या पेज के लिए एक मूल 940px चौड़ा, केंद्रित कंटेनर लेआउट।
- <शरीर>
- <div क्लास = "कंटेनर" >
- ...
- </div>
- </body>
न्यूनतम और अधिकतम-चौड़ाई और बाएं हाथ के साइडबार के साथ एक लचीली द्रव या तरल पृष्ठ संरचना। ऐप्स के लिए बढ़िया।
- <शरीर>
- <div class = "कंटेनर-तरल पदार्थ" >
- <div क्लास = "साइडबार" >
- ...
- </div>
- <div वर्ग = "सामग्री" >
- ...
- </div>
- </div>
- </body>
आपके वेबपृष्ठों की संरचना के लिए एक मानक टाइपोग्राफ़िक पदानुक्रम।
नुलम क्विस रिसस एगेट उरना मोलिस ऑर्नारे वेल यू लियो। कम समाज नैटोक पेनटिबस एट मैग्नीस डिस पार्ट्युरिएंट मोंटेस, नैसेटुर रिडिकुलस मस। Nullam id dolor id nibh ultricies vehicula ut id elit.
<strong>
आप और . के साथ उपशीर्षक भी जोड़ सकते हैं<em>
जोर, पते और संक्षिप्ताक्षरों का उपयोग करना
<strong>
<em>
<address>
<abbr>
किसी शब्द या वाक्यांश और उसके आस-पास की प्रतिलिपि के बीच दृश्य भेद जोड़ने के लिए जोर टैग ( <strong>
और ) का उपयोग किया जाना चाहिए। सादे पुराने ध्यान के लिए और चालाक ध्यान और शीर्षक के लिए <em>
उपयोग करें ।<strong>
<em>
फ्यूस डेपिबस, टेलस एसी कर्सस कमोडो , टॉरटोर मौरिस कंडिमेंटम निभ, यूट फेरमेंटम मासा जस्ट एमेट रिसस । मेकेनास फॉसीबस मोलिस इंटरडम। नुल्ला विटे एलीट लिबरो, ए फेरेट्रा ऑग।
तत्व के address
लिए प्रयोग किया जाता है—आपने अनुमान लगाया!—पते। यहां बताया गया है कि यह कैसा दिखता है:
नोट: सामग्री को ठीक से संरचित करने के लिए प्रत्येक पंक्ति को address
एक लाइन-ब्रेक ( <br />
) के साथ समाप्त होना चाहिए क्योंकि इसे वास्तविक जीवन में बिना किसी शैली के लागू किए पढ़ा जाता है।
संक्षिप्ताक्षरों और परिवर्णी शब्दों के लिए, abbr
टैग का उपयोग करें ( HTML5acronym
में बहिष्कृत है )। शॉर्टहैंड फॉर्म को टैग के अंदर रखें और पूरे नाम के लिए एक टाइटल सेट करें।
<blockquote>
<p>
<cite>
blockquote
अपने चारों ओर paragraph
और cite
टैग लपेटना सुनिश्चित करें । स्रोत का हवाला देते समय, cite
तत्व का उपयोग करें। CSS स्वचालित रूप से एक नाम को em डैश (—) के साथ प्रस्तुत करेगा।
लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटूर एडिपिसिसिंग एलीट, सेड डू ईयूसमॉड टेम्पर इनसिडिडंट यूट लेबर एट डोलोरे मैग्ना एलिका ...
डॉ. जूलियस हिबर्टी
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
टेबल्स बहुत अच्छी हैं - बहुत सी चीजों के लिए। हालांकि, महान तालिकाओं को उपयोगी, मापनीय, और पठनीय (कोड स्तर पर) होने के लिए कुछ मार्कअप प्यार की आवश्यकता होती है। मदद करने के लिए यहां कुछ युक्तियां दी गई हैं।
अपने कॉलम हेडर को हमेशा thead
इस तरह से लपेटें कि पदानुक्रम thead
> tr
> हो th
।
कॉलम हेडर के समान, आपकी सभी तालिका की बॉडी सामग्री को एक में लपेटा जाना चाहिए tbody
ताकि आपका पदानुक्रम tbody
> tr
> हो td
।
पठनीयता सुनिश्चित करने और संरचना को बनाए रखने के लिए सभी तालिकाओं को केवल आवश्यक सीमाओं के साथ स्वचालित रूप से स्टाइल किया जाएगा। अतिरिक्त कक्षाओं या विशेषताओं को जोड़ने की आवश्यकता नहीं है।
# | पहला नाम | उपनाम | भाषा |
---|---|---|---|
1 | कुछ | एक | अंग्रेज़ी |
2 | जो | छह पैक | अंग्रेज़ी |
3 | स्टू | काटने का निशान | कोड |
- <टेबल क्लास = "कॉमन-टेबल"> वर्ग = "सामान्य तालिका" >
- ...
- </तालिका>
ज़ेबरा-स्ट्रिपिंग जोड़कर अपनी टेबल के साथ थोड़ा फैंसी प्राप्त करें-बस .zebra-striped
कक्षा जोड़ें।
# | पहला नाम | उपनाम | भाषा |
---|---|---|---|
1 | कुछ | एक | अंग्रेज़ी |
2 | जो | छह पैक | अंग्रेज़ी |
3 | स्टू | काटने का निशान | कोड |
- <टेबल क्लास = "कॉमन-टेबल ज़ेबरा-स्ट्राइप्ड"> वर्ग = "सामान्य-टेबल ज़ेबरा-धारीदार" >
- ...
- </तालिका>
पिछले उदाहरण को लेते हुए, हम jQuery और Tablesorter प्लगइन के माध्यम से सॉर्टिंग कार्यक्षमता प्रदान करके अपनी तालिकाओं की उपयोगिता में सुधार करते हैं। क्रम बदलने के लिए किसी भी स्तंभ के शीर्षलेख पर क्लिक करें.
# | पहला नाम | उपनाम | भाषा |
---|---|---|---|
1 | तुम्हारी | एक | अंग्रेज़ी |
2 | जो | छह पैक | अंग्रेज़ी |
3 | स्टू | काटने का निशान | कोड |
- <script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> टाइप = "टेक्स्ट/जावास्क्रिप्ट" src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <स्क्रिप्ट प्रकार = "पाठ/जावास्क्रिप्ट" >
- $ ( दस्तावेज़ )। तैयार ( फ़ंक्शन () {
- $ ( "टेबल # सॉर्टटेबल उदाहरण" )। टेबललेटर ( { सॉर्टलिस्ट : [[ 1 , 0 ]]} );
- });
- </स्क्रिप्ट>
- <टेबल क्लास = "कॉमन-टेबल ज़ेबरा-स्ट्राइप्ड" >
- ...
- </तालिका>
सभी रूपों को पठनीय और मापनीय तरीके से प्रस्तुत करने के लिए डिफ़ॉल्ट शैलियाँ दी गई हैं। टेक्स्ट इनपुट, चुनिंदा सूचियां, टेक्स्ट क्षेत्र, रेडियो बटन और चेकबॉक्स, और बटन के लिए शैलियाँ प्रदान की जाती हैं।
अपने फ़ॉर्म के HTML में जोड़ें .form-stacked
और आपके पास उनके बाईं ओर के बजाय उनके फ़ील्ड के ऊपर लेबल होंगे। यह बहुत अच्छा काम करता है यदि आपके फॉर्म छोटे हैं या आपके पास भारी रूपों के लिए इनपुट के दो कॉलम हैं।
एक सम्मेलन के रूप में, बटन का उपयोग क्रियाओं के लिए किया जाता है जबकि लिंक का उपयोग वस्तुओं के लिए किया जाता है। उदाहरण के लिए, "डाउनलोड" एक बटन हो सकता है और "हाल की गतिविधि" एक लिंक हो सकता है।
सभी बटन डिफ़ॉल्ट रूप से हल्के भूरे रंग के होते हैं, लेकिन एक नीला .primary
वर्ग उपलब्ध होता है। इसके अलावा, अपनी खुद की शैलियों को रोल करना आसान आसान है।
बटन शैलियों को लागू के साथ किसी भी चीज़ पर लागू किया जा सकता है .btn
। आम तौर पर आप इन्हें केवल a
, button
, और चुनिंदा input
तत्वों पर लागू करना चाहेंगे। यहां बताया गया है कि यह कैसा दिखता है:
फैंसी बड़े या छोटे बटन? कोशिश करो!
उन बटनों के लिए जो सक्रिय नहीं हैं या किसी कारण या किसी अन्य कारण से ऐप द्वारा अक्षम हैं, अक्षम स्थिति का उपयोग करें। वह .disabled
लिंक के लिए और :disabled
तत्वों के लिए button
है।
विफलता, संभावित विफलता, या किसी कार्रवाई की सफलता को उजागर करने के लिए एक-पंक्ति संदेश। रूपों के लिए विशेष रूप से उपयोगी है।
उन संदेशों के लिए जिनके लिए कुछ स्पष्टीकरण की आवश्यकता होती है, हमारे पास अनुच्छेद शैली अलर्ट हैं। ये लंबे समय तक त्रुटि संदेशों को बुदबुदाते हुए, किसी लंबित कार्रवाई के लिए उपयोगकर्ता को चेतावनी देने, या पृष्ठ पर अधिक जोर देने के लिए जानकारी प्रस्तुत करने के लिए एकदम सही हैं।
मोडल—संवाद या लाइटबॉक्स—ऐसी स्थितियों में प्रासंगिक कार्रवाइयों के लिए बढ़िया हैं जहां यह महत्वपूर्ण है कि पृष्ठभूमि संदर्भ को बनाए रखा जाए।
एक अच्छा शरीर...
भ्रमित उपयोगकर्ता की सहायता करने और उन्हें सही दिशा में इंगित करने के लिए Twipsies सुपर उपयोगी हैं।
लोरेम इप्सम डोलर सिट एमेट इलो एरर इप्सम वेरिटैटिस और इस्टे पर्सपिसियाटिस इस्ट वॉलुप्टस नेटस इलो क्वैसी ओडिट ऑट नेटस कॉन्सेक्वेंटूर कॉन्सेक्वंटूर, ऑट नेटस इलो वोलुप्टेटम ओडिट पर्सपिसिअटिस लॉडेंटियम रेम डोलोरेमक्यू टोटम वोलुप्टस। और इसे और अधिक स्पष्ट रूप से समझाते हैं, और अधिक स्पष्ट रूप से समझाते हैं, जो कि एक्यूसेंटियम टोटम टोटम आर्किटेक्टो एक्सप्लिसाबो सिट क्वासी फ्यूगिट फुगिट, टोटम डोलोरेमक्यू और सन्ट सेड डिक्टेट क्वाय एक्क्यूसेंटियम के लिए आवश्यक है ।
लेआउट को प्रभावित किए बिना किसी पृष्ठ पर सबटेक्स्टुअल जानकारी प्रदान करने के लिए पॉपओवर का उपयोग करें।
इतियाम पोर्टा सेम मलेसुदा मैग्ना मोलिस यूइसमॉड। मेकेनास फॉसीबस मोलिस इंटरडम। मोरबी लियो रिसस, पोर्टा एसी कॉन्सेक्टेटूर एसी, वेस्टिबुलम और एरोस।
बूटस्ट्रैप को प्रीबूट के साथ बनाया गया था , जो मिक्सिन और वेरिएबल्स का एक ओपन-सोर्स पैक है, जिसका उपयोग कम के साथ संयोजन में किया जाना है , जो तेज और आसान वेब विकास के लिए एक सीएसएस प्रीप्रोसेसर है।
देखें कि हमने बूटस्ट्रैप में प्रीबूट का उपयोग कैसे किया और आप इसका उपयोग कैसे कर सकते हैं यदि आप अपने अगले प्रोजेक्ट पर कम चलाना चुनते हैं।
अपने ब्राउज़र में जावास्क्रिप्ट के माध्यम से CSS में बूटस्ट्रैप के कम चर, मिक्सिन और नेस्टिंग का पूरा उपयोग करने के लिए इस विकल्प का उपयोग करें।
- <लिंक रिले = "स्टाइलशीट/कम" प्रकार = "टेक्स्ट/सीएसएस" href = "कम/बूटस्ट्रैप.लेस" मीडिया = "सभी" />
- <स्क्रिप्ट प्रकार = "टेक्स्ट/जावास्क्रिप्ट" src = "js/less-1.0.41.min.js" ></script>
.js समाधान महसूस नहीं कर रहा है? जब आप अपना कोड परिनियोजित करते हैं तो कम मैक ऐप आज़माएं या संकलन करने के लिए Node.js का उपयोग करें।
बूटस्ट्रैप के हिस्से के रूप में ट्विटर बूटस्ट्रैप में क्या शामिल है, इसके कुछ मुख्य अंश यहां दिए गए हैं। डाउनलोड करने और अधिक जानने के लिए बूटस्ट्रैप वेबसाइट या जीथब प्रोजेक्ट पेज पर जाएं।
कम में वेरिएबल आपके सीएसएस सिरदर्द मुक्त को बनाए रखने और अपडेट करने के लिए एकदम सही हैं। जब आप रंग मान या अक्सर उपयोग किए जाने वाले मान को बदलना चाहते हैं, तो इसे एक स्थान पर अपडेट करें और आप सेट हो गए हैं।
- // लिंक
- @linkColor : #8b59c2;
- @linkColorHover : गहरा करें ( @linkColor , 10 );
- // ग्रे
- @ब्लैक : #000;
- @ ग्रेडार्क : हल्का करें ( @ब्लैक , 25 %);
- @ ग्रे : हल्का करें ( @ब्लैक , 50 %);
- @ ग्रेलाइट : हल्का करें ( @ब्लैक , 70 %);
- @grayLighter : हल्का करें ( @ब्लैक , 90 %);
- @ सफेद : #fff ;
- // एक्सेंट रंग
- @नीला : #08b5fb ;
- @हरा : #46a546 ;
- @ लाल : #9d261d ;
- @पीला : #ffc40d ;
- @नारंगी : #f89406 ;
- @गुलाबी : #c3325f ;
- @ पर्पल : #7a43b6 ;
- // बेसलाइन
- @बेसलाइन : 20px ;
/* ... */
कम सीएसएस के सामान्य सिंटैक्स के अलावा टिप्पणी करने की एक और शैली भी प्रदान करता है ।
- // यह एक टिप्पणी है
- /* यह भी एक टिप्पणी है */
मिक्सिन मूल रूप से सीएसएस के लिए शामिल या आंशिक होते हैं, जिससे आप कोड के एक ब्लॉक को एक में जोड़ सकते हैं। वे वेंडर प्रीफ़िक्स्ड प्रॉपर्टीज़ जैसे box-shadow
, क्रॉस-ब्राउज़र ग्रेडिएंट्स, फॉन्ट स्टैक्स, और बहुत कुछ के लिए बहुत अच्छे हैं। बूटस्ट्रैप के साथ शामिल किए गए मिश्रणों का एक नमूना नीचे दिया गया है।
- #फ़ॉन्ट {
- . शॉर्टहैंड ( @ वजन : सामान्य , @ आकार : 14px , @lineHeight : 20px ) {
- फ़ॉन्ट - आकार : @ आकार ;
- फ़ॉन्ट - वजन : @ वजन ;
- रेखा - ऊँचाई : @lineHeight ;
- }
- . सेन्स - सेरिफ़ ( @ वजन : सामान्य , @ आकार : 14px , @lineHeight : 20px ) {
- फ़ॉन्ट - परिवार : "हेल्वेटिका न्यू" , हेल्वेटिका , एरियल , सेन्स - सेरिफ़ ;
- फ़ॉन्ट - आकार : @ आकार ;
- फ़ॉन्ट - वजन : @ वजन ;
- रेखा - ऊँचाई : @lineHeight ;
- }
- . सेरिफ़ ( @ वजन : सामान्य , @ आकार : 14px , @lineHeight : 20px ) {
- फ़ॉन्ट - परिवार : "जॉर्जिया " , टाइम्स न्यू रोमन , टाइम्स , बिना सेरिफ़ ;
- फ़ॉन्ट - आकार : @ आकार ;
- फ़ॉन्ट - वजन : @ वजन ;
- रेखा - ऊँचाई : @lineHeight ;
- }
- . मोनोस्पेस ( @ वजन : सामान्य , @ आकार : 12px , @lineHeight : 20px ) {
- फ़ॉन्ट - परिवार : "मोनाको" , कूरियर न्यू , मोनोस्पेस ;
- फ़ॉन्ट - आकार : @ आकार ;
- फ़ॉन्ट - वजन : @ वजन ;
- रेखा - ऊँचाई : @lineHeight ;
- }
- }
- #ढाल {
- . क्षैतिज ( @startColor : #555, @endColor: #333) {
- पृष्ठभूमि - रंग : @endColor ;
- पृष्ठभूमि - दोहराना : दोहराना - x ;
- बैकग्राउंड - इमेज : - khtml - ग्रेडिएंट ( रैखिक , लेफ्ट टॉप , राइट टॉप , से ( @startColor ), से ( @endColor )); // कॉन्करर
- पृष्ठभूमि - छवि : - moz - रैखिक - ढाल ( बाएं , @startColor , @endColor ); // एफएफ 3.6+
- पृष्ठभूमि - छवि : - एमएस - रैखिक - ढाल ( बाएं , @startColor , @endColor ); // IE10
- बैकग्राउंड - इमेज : - वेबकिट - ग्रेडिएंट ( रैखिक , लेफ्ट टॉप , राइट टॉप , कलर - स्टॉप ( 0 %, @startColor ), कलर - स्टॉप ( 100 %, @endColor )); // सफारी 4+, क्रोम 2+
- पृष्ठभूमि - छवि : - वेबकिट - रैखिक - ढाल ( बाएं , @startColor , @endColor ); // सफारी 5.1+, क्रोम 10+
- पृष्ठभूमि - छवि : - ओ - रैखिक - ढाल ( बाएं , @startColor , @endColor ); // ओपेरा 11.10
- - एमएस - फ़िल्टर : % ( "progid: DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+
- फ़िल्टर : ई (% ( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 और IE7
- पृष्ठभूमि - छवि : रैखिक - ढाल ( बाएं , @startColor , @endColor ); // ले मानक
- }
- . लंबवत ( @startColor : #555, @endColor: #333) {
- पृष्ठभूमि - रंग : @endColor ;
- पृष्ठभूमि - दोहराना : दोहराना - x ;
- बैकग्राउंड - इमेज : - khtml - ग्रेडिएंट ( रैखिक , लेफ्ट टॉप , लेफ्ट बॉटम , से ( @startColor ), से ( @endColor )); // कॉन्करर
- पृष्ठभूमि - छवि : - moz - रैखिक - ढाल ( @startColor , @endColor ); // एफएफ 3.6+
- पृष्ठभूमि - छवि : - एमएस - रैखिक - ढाल ( @startColor , @endColor ); // IE10
- बैकग्राउंड - इमेज : - वेबकिट - ग्रेडिएंट ( रैखिक , लेफ्ट टॉप , लेफ्ट बॉटम , कलर - स्टॉप ( 0 %, @startColor ), कलर - स्टॉप ( 100 %, @endColor )); // सफारी 4+, क्रोम 2+
- पृष्ठभूमि - छवि : - वेबकिट - रैखिक - ढाल ( @startColor , @endColor ); // सफारी 5.1+, क्रोम 10+
- पृष्ठभूमि - छवि : - ओ - रैखिक - ढाल ( @startColor , @endColor ); // ओपेरा 11.10
- - एमएस - फ़िल्टर : % ( "progid: DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+
- फ़िल्टर : ई (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 और IE7
- पृष्ठभूमि - छवि : रैखिक - ढाल ( @startColor , @endColor ); // मानक
- }
- . दिशात्मक ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . लंबवत - तीन - रंग ( @ startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
- ...
- }
- }
फैंसी प्राप्त करें और नीचे दिए गए जैसे लचीले और शक्तिशाली मिश्रण उत्पन्न करने के लिए कुछ गणित करें।
- // ग्रिडिट्यूड
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- // ग्रिड प्रणाली
- . कंटेनर {
- चौड़ाई : @siteWidth ;
- मार्जिन : 0 ऑटो ;
- . क्लियरफिक्स ();
- }
- . कॉलम ( @columnSpan : 1 ) {
- प्रदर्शन : इनलाइन ;
- फ्लोट : बाएं ;
- चौड़ाई : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- मार्जिन - लेफ्ट : @gridGutterWidth ;
- &: पहला - बच्चा {
- मार्जिन - बाएं : 0 ;
- }
- }
- . ऑफ़सेट ( @columnOffset : 1 ) {
- मार्जिन - लेफ्ट : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! महत्वपूर्ण ;
- }