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

Question

के साथ तालिकाओं पर शैलियों को लागू करना क्या किसी को पता है कि ट्विटर बूटस्ट्रैप के साथ तालिकाओं पर शैलियों को लागू करना संभव है? मैं कुछ पुराने ट्यूटोरियल में कुछ टेबल उदाहरण देख सकता हूं लेकिन बूटस्ट्रैप साइट पर नहीं।

मैंने इसे सेट अप करने का प्रयास किया है लेकिन मेरे पृष्ठ की तालिकाओं में लगभग कोई स्टाइल लागू नहीं है।

<table> 
    <thead> 
     <tr> 
      <th>#</th> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th>Language</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>Some</td> 
      <td>One</td> 
      <td>English</td> 
     </tr> 
     <tr> 
      <td>2</td> 
      <td>Joe</td> 
      <td>Sixpack</td> 
      <td>English</td> 
     </tr> 
    </tbody> 
</table> 

मुझे किन कक्षाओं को लागू करने की आवश्यकता है?

Answer 1

बूटस्ट्रैप विभिन्न तालिका शैलियों प्रदान करता है। दस्तावेज और उदाहरणों के लिए Base CSS - Tables पर एक नज़र डालें।

निम्नलिखित शैली महान देख तालिकाओं देता है:

<table class="table table-striped table-bordered table-condensed"> 
    ... 
</table> 

Answer 2

तुम भी टी.आर. कक्षाएं आवेदन कर सकते हैं: जानकारी, त्रुटि, चेतावनी, या सफलता।

Answer 3

बस एक और अच्छी लग रही तालिका। मैंने "टेबल-होवर" कक्षा जोड़ा क्योंकि यह एक अच्छा होवरिंग प्रभाव देता है।

<h3>NATO Phonetic Alphabet</h3>  
    <table class="table table-striped table-bordered table-condensed table-hover"> 
    <thead> 
    <tr> 
     <th>Letter</th> 
     <th>Phonetic Letter</th> 

    </tr> 
    </thead> 
    <tr> 
    <th>A</th> 
    <th>Alpha</th> 

    </tr> 
    <tr> 
    <td>B</td> 
    <td>Bravo</td> 

    </tr> 
    <tr> 
    <td>C</td> 
    <td>Charlie</td> 

    </tr> 

</table> 

Answer 4

ट्विटर बूटस्ट्रैप तालिकाओं को स्टाइल और अच्छी तरह डिज़ाइन किया जा सकता है। आप अपनी मेज पर कुछ कक्षाएं जोड़कर अपनी मेज को स्टाइल कर सकते हैं और यह अच्छा लगेगा। आप अपने डेटा रिपोर्ट, दिखा जानकारी, आदि पर इसका इस्तेमाल हो सकता है

आप उपयोग कर सकते हैं:

basic table 
Striped rows 
Bordered table 
Hover rows 
Condensed table 
Contextual classes 
Responsive tables 

धारीदार पंक्तियों तालिका:

<table class="table table-striped" width="647"> 
    <thead> 
    <tr> 
    <th>#</th> 
    <th>Name</th> 
    <th>Address</th> 
    <th>mail</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
    <td>1</td> 
    <td>Thomas bell</td> 
    <td>Brick lane, London</td> 
    <td>thomas@yahoo.com</td> 
    </tr> 
    <tr> 
    <td height="29">2</td> 
    <td>Yan Chapel</td> 
    <td>Toronto Australia</td> 
    <td>Yan@yahoo.com</td> 
    </tr> 
    <tr> 
    <td>3</td> 
    <td>Pit Sampras</td> 
    <td>Berlin, Germany</td> 
    <td>Pit @yahoo.com</td> 
    </tr> 
    </tbody> 
    </table> 

संघनित तालिका:

को संक्षिप्त एक टेबल जिसे आपको कक्षा वर्ग = "तालिका तालिका-संघनित" जोड़ने की आवश्यकता है।

<table class="table table-condensed" width="647"> 
    <thead> 
    <tr> 
    <th>#</th> 
    <th>Sample Name</th> 
    <th>Address</th> 
    <th>Mail</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
    <td>1</td> 
    <td>Thomas bell</td> 
    <td>Brick lane, London</td> 
    <td>thomas@yahoo.com</td> 
    </tr> 
    <tr> 
    <td height="29">2</td> 
    <td>Yan Chapel</td> 
    <td>Toronto Australia</td> 
    <td>Yan@yahoo.com</td> 
    </tr> 
    <tr> 
    <td>3</td> 
    <td>Pit Sampras</td> 
    <td>Berlin, Germany</td> 
    <td>Pit @yahoo.com</td> 
    </tr> 
    <tr> 
    <td></td> 
    <td colspan="3" align="center"></td> 
    </tr> 
    </tbody> 
    </table> 

रेफरी:

<tr class="table-success"></tr> 
<tr class="table-error"></tr> 
<tr class="table-warning"></tr> 
<tr class="table-info"></tr> 
<tr class="table-danger"></tr> 

तुम भी जोड़ सकते हैं: http://twitterbootstrap.org/twitter-bootstrap-table-example-tutorial

Answer 5

बूटस्ट्रैप तालिका

<table class="table"></table> 
<table class="table table-bordered"></table> 
<table class="table table-hover"></table> 
<table class="table table-condensed"></table> 
<table class="table table-responsive"></table> 

Answer 6

आप इस प्रकार हर एक पंक्ति के लिए प्रासंगिक वर्गों जोड़ सकते हैं के लिए विभिन्न वर्गों प्रदान करता है उन्हें तालिका डेटा के ऊपर

जैसा ही है

आप कक्षाओं को तालिका-एसएम और अन्य के रूप में सेट करके अपना टेबल आकार सेट कर सकते हैं।

आप कस्टम वर्गों को जोड़ने और अपने खुद के स्टाइल जोड़ सकते हैं:

<table class="table"> 
    <thead style = "color:red;background-color:blue"> 
    <tr> 
     <th></th> 
     <th>First Name</th> 
     <th>Last Name</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Asdf</td> 
     <td>qwerty</td> 
    </tr> 
    </tbody> 
</table> 

इस तरह आपको कस्टम शैली जोड़ सकते हैं। मैंने केवल इनलाइन स्टाइल दिखाया है उदाहरण के लिए यह कैसे काम करता है, आप कक्षाएं जोड़ सकते हैं और उन्हें अपने सीएसएस में भी कॉल कर सकते हैं।