ट्विटर बूटस्ट्रॅप

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

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

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

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

कमी सह वापरा

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

GitHub वर काटा

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

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

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

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

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

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

<div class="row"> वर्ग = "पंक्ती" >
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 columns" > 
    ...
  </div>
</div>

१

५

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

8 ऑफसेट 4

4 ऑफसेट 4

5 ऑफसेट 3

10 ऑफसेट 6

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

साधारण 940px रुंद, कोणत्याही साइट किंवा पृष्ठासाठी केंद्रीत कंटेनर लेआउट.

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

द्रव लेआउट

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

<body>
  <div वर्ग = "कंटेनर-फ्लुइड" > 
    <div वर्ग = "साइडबार" > 
      ...
    </div>
    <div वर्ग = "सामग्री" > 
      ...
    </div>
  </div>
</body>

मथळे आणि प्रत

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

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>

विविध घटक

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

<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.

पत्ते

घटक यासाठी addressवापरला जातो—तुम्ही याचा अंदाज लावला!—पत्ते. ते कसे दिसते ते येथे आहे:

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

टीप: कोणत्याही शैली लागू न करता वास्तविक जीवनात वाचल्याप्रमाणे सामग्रीची योग्यरित्या रचना करण्यासाठी प्रत्येक ओळ addressलाइन-ब्रेक ( ) सह समाप्त होणे आवश्यक आहे.<br />

लघुरुपे

संक्षेप आणि परिवर्णी शब्दांसाठी, abbrटॅग वापरा ( HTML5acronym मध्ये बहिष्कृत आहे ). टॅगमध्ये शॉर्टहँड फॉर्म ठेवा आणि संपूर्ण नावासाठी शीर्षक सेट करा.

ब्लॉककोट्स

<blockquote> <p> <cite>

आपल्या blockquoteसभोवती paragraphआणि citeटॅग्ज गुंडाळण्याची खात्री करा. स्रोत उद्धृत करताना, citeघटक वापरा. CSS आपोआप em डॅश (—) सह नाव प्रीफेस करेल.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
डॉ ज्युलियस हिबर्ट

याद्या

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

जेरेमी बिक्सबी
रॉबर्ट Dezure
जोश वॉशिंग्टन
अँटोन कॅप्रेसी
माझे टीम मेट्स
- जॉर्ज कॅस्टान्झा
- जेरी सेनफेल्ड
- कॉस्मो क्रेमर
- इलेन बेनिस
- नवीन माणूस
जॉन जेकब
पॉल पियर्स
केविन गार्नेट

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

जेरेमी बिक्सबी
रॉबर्ट Dezure
जोश वॉशिंग्टन
अँटोन कॅप्रेसी
माझे टीम मेट्स
- जॉर्ज कॅस्टान्झा
- जेरी सेनफेल्ड
- कॉस्मो क्रेमर
- इलेन बेनिस
- नवीन माणूस
जॉन जेकब
पॉल पियर्स
केविन गार्नेट

आज्ञा केली`<ol>`

जेरेमी बिक्सबी
रॉबर्ट Dezure
जोश वॉशिंग्टन
अँटोन कॅप्रेसी
माझे टीम मेट्स
1. जॉर्ज कॅस्टान्झा
2. जेरी सेनफेल्ड
3. कॉस्मो क्रेमर
4. इलेन बेनिस
5. नवीन माणूस
जॉन जेकब
पॉल पियर्स
केविन गार्नेट

वर्णन`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.

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

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

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

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

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

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

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

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

<table class="common-table"> वर्ग = "सामान्य टेबल" >
  ...
</ टेबल>

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

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

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

<table class="common-table zebra-striped"> वर्ग = "सामान्य-टेबल झेब्रा-स्ट्रीप" >
...
</ टेबल>

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

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

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

<script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<स्क्रिप्ट प्रकार = "मजकूर/जावास्क्रिप्ट" > 
  $ ( दस्तऐवज ). तयार ( कार्य () { 
    $ ( "टेबल#sortTableExample" ). टेबल्सॉर्टर ( { सॉर्टलिस्ट : [[ 1 , 0 ]]} );   
  });
</script>
<टेबल वर्ग = "सामान्य-टेबल झेब्रा-स्ट्रीप" > 
  ...
</ टेबल>

निश्चित टॉपबार

हे काय आहे

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

सानुकूल करण्यायोग्य

आतील सर्व घटक आणि संपूर्ण टॉपबार पर्यायी आहेत. तुम्ही लोगो/नाव, एनएव्ही, शोध आणि दुय्यम एनएव्ही—किंवा त्याचे कोणतेही संयोजन समाविष्ट करणे निवडू शकता.

ड्रॉपडाउन समाविष्ट

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

टॅब आणि गोळ्या

सह साधे दुय्यम नेव्हिगेशन तयार करा ul. योग्य वर्ग जोडून टॅब किंवा गोळ्यांमध्ये अदलाबदल करा.

आमची खाते सेटिंग्ज पृष्ठे आणि सारख्या सामग्रीच्या पृष्ठांमध्ये टॉगल करण्यासाठी वापरकर्ता टाइमलाइन यासारख्या सामग्रीच्या उप-विभागांसाठी उत्तम. टॅब्ड किंवा पिल स्टाइलमध्ये उपलब्ध.

<ul class="tabs"> वर्ग = "टॅब" >
  <li class = "active" ><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="pills"> वर्ग = "गोळ्या" >
  <li class = "active" ><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>

पृष्ठांकन

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

<div class="पृष्ठांकन"> वर्ग = "पृष्ठांकन" >
  <ul>
    <li वर्ग = "पूर्वी अक्षम" ><a href = "" > ← मागील </a></li>  
    <li वर्ग = "सक्रिय" ><a href = "" > 1 </a></li>  
    < li > <a href="" > 2 </a></li> 
    < li > <a href="" > 3 </a></li> 
    < li > <a href="" > ४ </a></li> 
    < li > <a href="" > 5 </a></li> 
    <li class = "next" ><a href = "" > पुढील → </a></li>  
  </ul>
</div>

मूलभूत सूचना

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

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

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

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

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

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

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

अरे स्नॅप! तुम्हाला एक त्रुटी आली!हे आणि ते बदला आणि पुन्हा प्रयत्न करा. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras Mattis consectetur purus sit amet fermentum.

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

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

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

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

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

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

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

मॉडेल्स

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

साधन टिपा

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

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

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

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

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

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

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

<link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" मीडिया = "सर्व" />    
<script type = "text/javascript" src = "js/less-1.0.41.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 ;            
// बेसलाइन
@baseline : 20px ;

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

/* ... */कमी 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    
    - ms - फिल्टर : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    फिल्टर : e (%( "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 ); // 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   
    - ms - फिल्टर : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    फिल्टर : e (%( "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 ऑटो ;  
  . clearfix ();
}
. स्तंभ ( @columnSpan : 1 ) {  
  प्रदर्शन : इनलाइन ; 
  फ्लोट : डावीकडे ;
  रुंदी : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  समास - डावीकडे : @gridGutterWidth ; 
  &: प्रथम - मूल {
    समास - डावीकडे : 0 ; 
  }
}
. ऑफसेट ( @columnOffset : 1 ) {  
  समास - डावीकडे : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! महत्वाचे _          
}

बूटस्ट्रॅप

ट्विटर बूटस्ट्रॅप

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

कमी सह वापरा

GitHub वर काटा

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

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

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

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

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

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

द्रव लेआउट

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

मथळे आणि प्रत

h1. मथळा १

h2. मथळा 2

h3. मथळा 3

h4. मथळा 4

h5. मथळा 5

h6. मथळा 6

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

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

विविध घटक

कधी वापरायचे

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

पत्ते

लघुरुपे

ब्लॉककोट्स

याद्या

क्रमरहित<ul>

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

आज्ञा केली<ol>

वर्णनdl

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

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

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

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

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

फॉर्म

डीफॉल्ट शैली

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

बटणे

उदाहरणे बटणे

पर्यायी आकार

अपंग राज्य

दुवे

बटणे

नेव्हिगेशन

निश्चित टॉपबार

प्रकल्पाचे नाव

हे काय आहे

सानुकूल करण्यायोग्य

ड्रॉपडाउन समाविष्ट

टॅब आणि गोळ्या

पृष्ठांकन

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

मूलभूत सूचना

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

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

मॉडेल्स

मॉडेल शीर्षक

साधन टिपा

Popovers

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

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

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

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

रंग चल

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

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

फॉन्ट स्टॅक

ग्रेडियंट

ऑपरेशन्स आणि ग्रिड सिस्टम

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

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

आज्ञा केली`<ol>`

वर्णन`dl`