Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
बूटस्ट्रॅप हे Twitter वरील टूलकिट आहे जे वेब अॅप्स आणि साइट्सच्या विकासासाठी किकस्टार्ट करण्यासाठी डिझाइन केलेले आहे.
यात टायपोग्राफी, फॉर्म, बटणे, टेबल्स, ग्रिड, नेव्हिगेशन आणि अधिकसाठी बेस CSS आणि HTML समाविष्ट आहे.
नर्ड अलर्ट: बूटस्ट्रॅप लेससह तयार केला आहे आणि आधुनिक ब्राउझर लक्षात घेऊन गेटच्या बाहेर काम करण्यासाठी डिझाइन केले आहे.
जलद आणि सर्वात सोपी सुरुवात करण्यासाठी, फक्त हे स्निपेट तुमच्या वेबपेजमध्ये कॉपी करा.
कमी वापरण्याचे चाहते? काही हरकत नाही, फक्त रेपो क्लोन करा आणि या ओळी जोडा:
Github वर अधिकृत बूटस्ट्रॅप रेपोसह डाउनलोड करा, काटा काढा, खेचा, फाइल समस्या आणि बरेच काही.
Twitter च्या आधीच्या दिवसांमध्ये, अभियंते फ्रंट-एंड आवश्यकता पूर्ण करण्यासाठी त्यांना परिचित असलेल्या जवळजवळ कोणतीही लायब्ररी वापरत असत. Twitter च्या पहिल्या Hackweek दरम्यान सादर केलेल्या आव्हानांना उत्तर म्हणून बूटस्ट्रॅपची सुरुवात झाली आणि विकासाला वेग आला.
Twitter वरील अनेक अभियंत्यांच्या मदतीने आणि अभिप्रायाने, बूटस्ट्रॅपने केवळ मूलभूत शैलीच नव्हे तर अधिक मोहक आणि टिकाऊ फ्रंट-एंड डिझाइन पॅटर्नचा समावेश करण्यासाठी लक्षणीय वाढ केली आहे.
dev.twitter.com वर अधिक वाचा ›
क्रोम, सफारी, इंटरनेट एक्सप्लोरर आणि फायरफॉक्स सारख्या प्रमुख आधुनिक ब्राउझरमध्ये बूटस्ट्रॅपची चाचणी केली जाते आणि समर्थित आहे.
बूटस्ट्रॅप संकलित CSS, uncompiled, आणि उदाहरण टेम्पलेट्ससह पूर्ण येतो.
बूटस्ट्रॅपचा भाग म्हणून प्रदान केलेली डीफॉल्ट ग्रिड प्रणाली 940px रुंद 16-स्तंभ ग्रिड आहे. ही लोकप्रिय 960 ग्रिड प्रणालीची चव आहे, परंतु डाव्या आणि उजव्या बाजूला अतिरिक्त मार्जिन/पॅडिंगशिवाय.
येथे दर्शविल्याप्रमाणे, एक मूलभूत मांडणी दोन "स्तंभांसह" तयार केली जाऊ शकते, प्रत्येक 16 मूलभूत स्तंभांची संख्या व्यापून आम्ही आमच्या ग्रिड प्रणालीचा भाग म्हणून परिभाषित केले आहे. अधिक भिन्नतेसाठी खालील उदाहरणे पहा.
- <div वर्ग = "पंक्ती" >
- <div class = "span6 columns" >
- ...
- </div>
- <div class = "span10 columns" >
- ...
- </div>
- </div>
डीफॉल्ट आणि साधे 940px-विस्तृत, एका द्वारे प्रदान केलेल्या कोणत्याही वेबसाइट किंवा पृष्ठासाठी केंद्रीत मांडणी <div.container>
.
- <body>
- <div वर्ग = "कंटेनर" >
- ...
- </div>
- </body>
किमान- आणि कमाल-रुंदी आणि डावीकडील साइडबारसह पर्यायी, लवचिक द्रव पृष्ठ रचना. अॅप्स आणि डॉक्ससाठी उत्तम.
- <body>
- <div वर्ग = "कंटेनर-फ्लुइड" >
- <div वर्ग = "साइडबार" >
- ...
- </div>
- <div वर्ग = "सामग्री" >
- ...
- </div>
- </div>
- </body>
तुमच्या वेबपृष्ठांची रचना करण्यासाठी एक मानक टायपोग्राफिक पदानुक्रम.
संपूर्ण टायपोग्राफिक ग्रिड आमच्या preboot.less फाइलमधील दोन Less व्हेरिएबल्सवर आधारित आहे: @basefont
आणि @baseline
. पहिला संपूर्ण वापरला जाणारा बेस फॉन्ट-आकार आहे आणि दुसरा बेस लाइन-उंची आहे.
आम्ही आमच्या सर्व प्रकारांचे समास, पॅडिंग आणि लाइन-हाइट तयार करण्यासाठी ते चल आणि काही गणिते वापरतो.
नुल्लम क्विस रिझस एगेट उर्ना मोलिस ऑर्नरे वेल ईयू लिओ. 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>
पूर्वजांच्या किंवा संपूर्ण कार्याच्या संपर्क माहितीसाठी केला जातो. ते कसे दिसते ते येथे आहे:
टीप: सामग्रीची योग्य रचना करण्यासाठी मधील प्रत्येक ओळ <address>
लाइन-ब्रेक ( <br />
) सह समाप्त होणे आवश्यक आहे किंवा ब्लॉक-लेव्हल टॅग (उदा. ) मध्ये गुंडाळले जाणे आवश्यक आहे .<p>
संक्षेप आणि परिवर्णी शब्दांसाठी, <abbr>
टॅग वापरा ( HTML5<acronym>
मध्ये बहिष्कृत आहे ). टॅगमध्ये शॉर्टहँड फॉर्म ठेवा आणि संपूर्ण नावासाठी शीर्षक सेट करा.
<blockquote>
<p>
<small>
ब्लॉककोट समाविष्ट करण्यासाठी, <blockquote>
भोवती गुंडाळा <p>
आणि <small>
टॅग करा. तुमचा स्रोत उद्धृत करण्यासाठी घटक वापरा <small>
आणि तुम्हाला —
त्यापूर्वी एक em डॅश मिळेल.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. पूर्णांक posuere erat a ante venenatis dapibus posuere velit aliquet.
डॉ ज्युलियस हिबर्ट
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
अनेक गोष्टींसाठी टेबल उत्तम आहेत. तथापि, उत्कृष्ट सारण्यांना उपयुक्त, स्केलेबल आणि वाचनीय (कोड स्तरावर) होण्यासाठी थोडे मार्कअप प्रेम आवश्यक आहे. मदत करण्यासाठी येथे काही टिपा आहेत.
तुमचे स्तंभ शीर्षलेख नेहमी <thead>
अशा प्रकारे गुंडाळा की पदानुक्रम <thead>
> <tr>
> असेल <th>
.
स्तंभ शीर्षलेखांप्रमाणेच, तुमच्या सारणीच्या मुख्य भागाची सामग्री एका मध्ये गुंडाळलेली असावी <tbody>
जेणेकरून तुमची पदानुक्रम <tbody>
> <tr>
> असेल <td>
.
वाचनीयता सुनिश्चित करण्यासाठी आणि संरचनेची देखभाल करण्यासाठी सर्व सारण्या आपोआप केवळ आव��्यक किनार्यांसह शैलीबद्ध केल्या जातील. अतिरिक्त वर्ग किंवा विशेषता जोडण्याची आवश्यकता नाही.
# | पहिले नाव | आडनाव | इंग्रजी |
---|---|---|---|
१ | काही | एक | इंग्रजी |
2 | जो | सहा पॅक | इंग्रजी |
3 | स्टु | डेंट | कोड |
- <टेबल>
- ...
- </ टेबल>
झेब्रा-स्ट्रीपिंग जोडून आपल्या सारण्यांसह थोडे फॅन्सी मिळवा—फक्त .zebra-striped
वर्ग जोडा.
# | पहिले नाव | आडनाव | इंग्रजी |
---|---|---|---|
१ | काही | एक | इंग्रजी |
2 | जो | सहा पॅक | इंग्रजी |
3 | स्टु | डेंट | कोड |
टीप: झेब्रा-स्ट्रीपिंग ही एक प्रगतीशील सुधारणा आहे जी IE8 आणि त्याखालील जुन्या ब्राउझरसाठी उपलब्ध नाही.
- <टेबल वर्ग = "झेब्रा-स्ट्रीप" >
- ...
- </ टेबल>
मागील उदाहरण घेऊन, आम्ही jQuery आणि Tablesorter प्लगइन द्वारे क्रमवारी कार्यक्षमता प्रदान करून आमच्या टेबलची उपयुक्तता सुधारतो. क्रमवारी बदलण्यासाठी कोणत्याही स्तंभाच्या शीर्षलेखावर क्लिक करा.
# | पहिले नाव | आडनाव | इंग्रजी |
---|---|---|---|
१ | आपले | एक | इंग्रजी |
2 | जो | सहा पॅक | इंग्रजी |
3 | स्टु | डेंट | कोड |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( कार्य () {
- $ ( "टेबल#sortTableExample" ). टेबल्सॉर्टर ({ सॉर्टलिस्ट : [[ 1 , 0 ]] });
- });
- </script>
- <टेबल वर्ग = "झेब्रा-स्ट्रीप" >
- ...
- </ टेबल>
सर्व फॉर्म वाचनीय आणि स्केलेबल मार्गाने सादर करण्यासाठी डीफॉल्ट शैली दिल्या आहेत. मजकूर इनपुट, निवडक सूची, मजकूर क्षेत्र, रेडिओ बटणे आणि चेकबॉक्सेस आणि बटणांसाठी शैली प्रदान केल्या आहेत.
तुमच्या फॉर्मच्या HTML मध्ये जोडा .form-stacked
आणि तुम्हाला त्यांच्या फील्डच्या डावीकडे ऐवजी शीर्षस्थानी लेबले असतील. जर तुमचे फॉर्म लहान असतील किंवा तुमच्याकडे जड फॉर्मसाठी इनपुटचे दोन कॉलम असतील तर हे उत्तम काम करते.
एक नियम म्हणून, बटणे क्रियांसाठी वापरली जातात तर लिंक्स ऑब्जेक्टसाठी वापरली जातात. उदाहरणार्थ, "डाउनलोड" एक बटण असू शकते आणि "अलीकडील क्रियाकलाप" एक दुवा असू शकतो.
सर्व बटणे हलक्या राखाडी शैलीवर डीफॉल्ट असतात, परंतु विविध रंग शैलींसाठी अनेक कार्यात्मक वर्ग लागू केले जाऊ शकतात. या वर्गांमध्ये निळा .primary
वर्ग, हलका-निळा .info
वर्ग, हिरवा .success
वर्ग आणि लाल .danger
वर्ग समाविष्ट आहे. शिवाय, आपल्या स्वत: च्या शैली रोलिंग सोपे peasy आहे.
बटणाच्या शैली लागू केलेल्या कोणत्याही गोष्टीवर लागू केल्या जाऊ शकतात .btn
. सामान्यत: तुम्हाला हे फक्त <a>
, <button>
, आणि निवडक <input>
घटकांवर लागू करायचे आहे. ते कसे दिसते ते येथे आहे:
फॅन्सी मोठी किंवा लहान बटणे? त्यावर आहे!
सक्रिय नसलेल्या किंवा एका कारणाने अॅपद्वारे अक्षम केलेल्या बटणांसाठी, अक्षम स्थिती वापरा. ते .disabled
दुव्यांसाठी आणि :disabled
घटकांसाठी आहे <button>
.
div.alert-message
अपयश, संभाव्य अपयश किंवा कृतीचे यश हायलाइट करण्यासाठी एक-लाइन संदेश. फॉर्मसाठी विशेषतः उपयुक्त.
div.alert-message.block-message
थोड्या स्पष्टीकरणाची आवश्यकता असलेल्या संदेशांसाठी, आमच्याकडे परिच्छेद शैली सूचना आहेत. हे दीर्घ त्रुटी संदेश बबल करण्यासाठी, प्रलंबित क्रियेबद्दल वापरकर्त्याला चेतावणी देण्यासाठी किंवा पृष्ठावर अधिक जोर देण्यासाठी माहिती सादर करण्यासाठी योग्य आहेत.
मोडल्स—संवाद किंवा लाइटबॉक्स—हे अशा परिस्थितीत संदर्भात्मक क्रियांसाठी उत्तम आहेत जेथे पार्श्वभूमीचा संदर्भ राखला जाणे महत्त्वाचे आहे.
एक उत्तम शरीर…
गोंधळलेल्या वापरकर्त्याला मदत करण्यासाठी आणि त्यांना योग्य दिशेने निर्देशित करण्यासाठी ट्विप्सी खूप उपयुक्त आहेत.
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
लेआउट प्रभावित न करता पृष्ठास सबटेक्स्टुअल माहिती प्रदान करण्यासाठी पॉपओव्हर्स वापरा.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
बूटस्ट्रॅप प्रीबूटसह तयार केला गेला होता , जो वेगवान आणि सुलभ वेब डेव्हलपमेंटसाठी एक CSS प्रीप्रोसेसर, Less च्या संयोगाने वापरला जाणारा मिक्सिन्स आणि व्हेरिएबल्सचा ओपन-सोर्स पॅक आहे .
आम्ही बूटस्ट्रॅपमध्ये प्रीबूट कसे वापरले आणि तुम्ही तुमच्या पुढील प्रोजेक्टवर कमी चालवणे निवडल्यास तुम्ही त्याचा वापर कसा करू शकता ते पहा.
तुमच्या ब्राउझरमध्ये जावास्क्रिप्टद्वारे बूटस्ट्रॅपच्या लेस व्हेरिएबल्स, मिक्सिन्स आणि सीएसएसमध्ये नेस्टिंगचा पूर्ण वापर करण्यासाठी हा पर्याय वापरा.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" मीडिया = "सर्व" />
- <script src = "js/less-1.1.3.min.js" ></script>
.js समाधान वाटत नाही? Less Mac अॅप वापरून पहा किंवा जेव्हा तुम्ही तुमचा कोड उपयोजित करता तेव्हा संकलित करण्यासाठी Node.js वापरा .
बूटस्ट्रॅपचा भाग म्हणून Twitter बूटस्ट्रॅपमध्ये काय समाविष्ट केले आहे याचे काही ठळक मुद्दे येथे आहेत. डाउनलोड करण्यासाठी आणि अधिक जाणून घेण्यासाठी बूटस्ट्रॅप वेबसाइट किंवा गिथब प्रकल्प पृष्ठावर जा.
तुमची CSS डोकेदुखी मुक्त ठेवण्यासाठी आणि अपडेट करण्यासाठी कमी व्हेरिएबल्स योग्य आहेत. जेव्हा तुम्हाला रंग मूल्य किंवा वारंवार वापरले जाणारे मूल्य बदलायचे असेल, तेव्हा ते एका ठिकाणी अद्यतनित करा आणि तुम्ही सेट आहात.
- // दुवे
- @linkColor : #8b59c2;
- @linkColorHover : गडद करा ( @linkColor , 10 );
- // ग्रे
- @ब्लॅक : #000;
- @grayDark : हलका ( @black , 25 %);
- @ग्रे : हलका ( @काळा , 50 %);
- @ग्रे लाईट : हलका ( @ब्लॅक , 70 %);
- @ग्रे लाइटर : हलका ( @ब्लॅक , 90 %);
- @व्हाइट : #ffff ;
- // उच्चारण रंग
- @blue : #08b5fb;
- @हिरवा : #46a546 ;
- @लाल : #9d261d ;
- @पिवळा : #ffc40d ;
- @संत्रा : #f89406 ;
- @गुलाबी : #c3325f ;
- @जांभळा : #7a43b6 ;
- // बेसलाइन ग्रिड
- @basefont : 13px ;
- @बेसलाइन : 18px ;
/* ... */
कमी CSS च्या सामान्य वाक्यरचना व्यतिरिक्त टिप्पणी करण्याची दुसरी शैली देखील प्रदान करते .
- // ही एक टिप्पणी आहे
- /* ही देखील एक टिप्पणी आहे */
मिक्सिन्स हे मुळात CSS साठी अंतर्भूत किंवा आंशिक असतात, ज्यामुळे तुम्हाला कोडचा ब्लॉक एकामध्ये एकत्र करता येतो. ते box-shadow
, क्रॉस-ब्राउझर ग्रेडियंट्स, फॉन्ट स्टॅक आणि अधिक सारख्या विक्रेत्याच्या प्रीफिक्स केलेल्या गुणधर्मांसाठी उत्तम आहेत. खाली बूटस्ट्रॅपसह समाविष्ट केलेल्या मिक्सिन्सचा नमुना आहे.
- #फॉन्ट {
- . लघुलेख ( @weight : सामान्य , @size : 14px , @lineHeight : 20px ) {
- फॉन्ट आकार : @size ; _
- फॉन्ट - वजन : @weight ;
- रेषा - उंची : @lineHeight ;
- }
- . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- फॉन्ट - फॅमिली : "हेल्वेटिका न्यू" , हेल्वेटिका , एरियल , सॅन्स - सेरिफ ;
- फॉन्ट आकार : @size ; _
- फॉन्ट - वजन : @weight ;
- रेषा - उंची : @lineHeight ;
- }
- . सेरिफ ( @वजन : सामान्य , @ आकार : 14px , @ lineHeight : 20px ) {
- फॉन्ट - फॅमिली : "जॉर्जिया" , टाईम्स न्यू रोमन , टाईम्स , सॅन्स - सेरिफ ;
- फॉन्ट आकार : @size ; _
- फॉन्ट - वजन : @weight ;
- रेषा - उंची : @lineHeight ;
- }
- . मोनोस्पेस ( @weight : सामान्य , @ आकार : 12px , @lineHeight : 20px ) {
- फॉन्ट - फॅमिली : "मोनाको" , कुरियर न्यू , मोनोस्पेस ;
- फॉन्ट आकार : @size ; _
- फॉन्ट - वजन : @weight ;
- रेषा - उंची : @lineHeight ;
- }
- }
- #प्रवण {
- . क्षैतिज ( @startColor : #555, @endColor: #333) {
- पार्श्वभूमी - रंग : @endColor ;
- पार्श्वभूमी - पुनरावृत्ती : पुनरावृत्ती - x ;
- पार्श्वभूमी - प्रतिमा : - khtml - ग्रेडियंट ( रेखीय , डावे शीर्ष , उजवे शीर्ष , ( @startColor ) पासून ( @endColor ) पर्यंत ); // कॉन्करर
- पार्श्वभूमी - प्रतिमा : - moz - रेखीय - ग्रेडियंट ( डावीकडे , @startColor , @endColor ); // FF 3.6+
- पार्श्वभूमी - प्रतिमा : - ms - रेखीय - ग्रेडियंट ( डावीकडे , @startColor , @endColor ); // IE10
- पार्श्वभूमी - प्रतिमा : - वेबकिट - ग्रेडियंट ( रेखीय , डावे शीर्ष , उजवे शीर्ष , रंग - थांबा ( 0 %, @startColor ), रंग - थांबा ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- पार्श्वभूमी - प्रतिमा : - वेबकिट - रेखीय - ग्रेडियंट ( डावीकडे , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- पार्श्वभूमी - प्रतिमा : - ओ - रेखीय - ग्रेडियंट ( डावीकडे , @startColor , @endColor ); // ऑपेरा 11.10
- पार्श्वभूमी - प्रतिमा : रेखीय - ग्रेडियंट ( डावीकडे , @startColor , @endColor ); // ले मानक
- }
- . अनुलंब ( @startColor : #555, @endColor: #333) {
- पार्श्वभूमी - रंग : @endColor ;
- पार्श्वभूमी - पुनरावृत्ती : पुनरावृत्ती - x ;
- पार्श्वभूमी - प्रतिमा : - khtml - ग्रेडियंट ( रेखीय , डावीकडे वर , डावीकडे तळाशी , ( @startColor ), पासून ( @endColor ) पर्यंत ); // कॉन्करर
- पार्श्वभूमी - प्रतिमा : - moz - रेखीय - ग्रेडियंट ( @startColor , @endColor ); // FF 3.6+
- पार्श्वभूमी - प्रतिमा : - एमएस - रेखीय - ग्रेडियंट ( @startColor , @endColor ); // IE10
- पार्श्वभूमी - प्रतिमा : - वेबकिट - ग्रेडियंट ( रेखीय , डावे शीर्ष , डावे तळ , रंग - थांबा ( 0 %, @startColor ), रंग - थांबा ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- पार्श्वभूमी - प्रतिमा : - वेबकिट - रेखीय - ग्रेडियंट ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- पार्श्वभूमी - प्रतिमा : - ओ - रेखीय - ग्रेडियंट ( @startColor , @endColor ); // ऑपेरा 11.10
- पार्श्वभूमी - प्रतिमा : रेखीय - ग्रेडियंट ( @startColor , @endColor ); // मानक
- }
- . दिशात्मक ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . अनुलंब - तीन - रंग ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- ...
- }
- }
फॅन्सी मिळवा आणि खालीलप्रमाणे लवचिक आणि शक्तिशाली मिश्रण तयार करण्यासाठी काही गणित करा.
- // ग्रिडट्यूड
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // ग्रिड सिस्टम
- . कंटेनर {
- रुंदी : @siteWidth ;
- मार्जिन : 0 ऑटो ;
- . clearfix ();
- }
- . स्तंभ ( @columnSpan : 1 ) {
- रुंदी : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
- . ऑफसेट ( @columnOffset : 1 ) {
- समास - डावीकडे : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }