Source

तालिकाहरू

बुटस्ट्र्यापको साथ (जाभास्क्रिप्ट प्लगइनहरूमा तिनीहरूको प्रचलित प्रयोग दिएर) तालिकाहरूको अप्ट-इन स्टाइलको लागि कागजात र उदाहरणहरू।

उदाहरणहरू

क्यालेन्डरहरू र मिति पिकरहरू जस्ता तेस्रो-पक्ष विजेटहरूमा तालिकाहरूको व्यापक प्रयोगको कारणले, हामीले हाम्रा तालिकाहरूलाई अप्ट-इन गर्न डिजाइन गरेका छौं । केवल आधार वर्गलाई .tableकुनै पनि मा थप्नुहोस् <table>, त्यसपछि अनुकूलन शैलीहरू वा हाम्रा विभिन्न समावेश परिमार्जनक वर्गहरूसँग विस्तार गर्नुहोस्।

सबैभन्दा आधारभूत तालिका मार्कअप प्रयोग गर्दै, यहाँ .tableबुटस्ट्र्यापमा कसरी आधारित तालिकाहरू देखिन्छन्। सबै तालिका शैलीहरू बुटस्ट्र्याप 4 मा इनहेरिट गरिएका छन् , जसको अर्थ कुनै पनि नेस्टेड तालिकाहरू अभिभावक जस्तै शैलीमा हुनेछन्।

# पहिले अन्तिम ह्यान्डल
१ मार्क ओटो @mdo
२ याकूब थोरन्टन @मोटो
३ ल्यारी चरा @twitter 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

तपाईं रङहरू पनि उल्टो गर्न सक्नुहुन्छ — अँध्यारो पृष्ठभूमिमा हल्का पाठको साथ — .table-dark.

# पहिले अन्तिम ह्यान्डल
१ मार्क ओटो @mdo
२ याकूब थोरन्टन @मोटो
३ ल्यारी चरा @twitter 
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

तालिका हेड विकल्पहरू

तालिका र गाढा तालिकाहरू जस्तै, परिमार्जक वर्गहरू प्रयोग गर्नुहोस् .thead-lightवा s .thead-darkलाई <thead>हल्का वा गाढा खैरो देखाउनको लागि।

# पहिले अन्तिम ह्यान्डल
१ मार्क ओटो @mdo
२ याकूब थोरन्टन @मोटो
३ ल्यारी चरा @twitter
# पहिले अन्तिम ह्यान्डल
१ मार्क ओटो @mdo
२ याकूब थोरन्टन @मोटो
३ ल्यारी चरा @twitter 
<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

धारीदार पङ्क्तिहरू

.table-stripedभित्र कुनै पनि तालिका पङ्क्तिमा जेब्रा-स्ट्रिपिङ थप्न प्रयोग गर्नुहोस् <tbody>।

# पहिले अन्तिम ह्यान्डल
१ मार्क ओटो @mdo
२ याकूब थोरन्टन @मोटो
३ ल्यारी चरा @twitter 
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# पहिले अन्तिम ह्यान्डल
१ मार्क ओटो @mdo
२ याकूब थोरन्टन @मोटो
३ ल्यारी चरा @twitter 
<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

बोर्डर गरिएको तालिका

.table-borderedतालिका र कक्षहरूको सबै छेउमा किनाराहरूको लागि थप्नुहोस् ।

# पहिले अन्तिम ह्यान्डल
१ मार्क ओटो @mdo
२ याकूब थोरन्टन @मोटो
३ ल्यारी द बर्ड @twitter 
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# पहिले अन्तिम ह्यान्डल
१ मार्क ओटो @mdo
२ याकूब थोरन्टन @मोटो
३ ल्यारी द बर्ड @twitter 
<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

घुमाउन मिल्ने पङ्क्तिहरू

.table-hoverएक भित्र तालिका पङ्क्तिहरूमा होभर स्थिति सक्षम गर्न थप्नुहोस् <tbody>।

# पहिले अन्तिम ह्यान्डल
१ मार्क ओटो @mdo
२ याकूब थोरन्टन @मोटो
३ ल्यारी द बर्ड @twitter 
<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# पहिले अन्तिम ह्यान्डल
१ मार्क ओटो @mdo
२ याकूब थोरन्टन @मोटो
३ ल्यारी द बर्ड @twitter 
<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

सानो टेबल

.table-smसेल प्याडिङलाई आधामा काटेर तालिकाहरू थप कम्प्याक्ट बनाउन थप्नुहोस् ।

# पहिले अन्तिम ह्यान्डल
१ मार्क ओटो @mdo
२ याकूब थोरन्टन @मोटो
३ ल्यारी द बर्ड @twitter 
<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# पहिले अन्तिम ह्यान्डल
१ मार्क ओटो @mdo
२ याकूब थोरन्टन @मोटो
३ ल्यारी द बर्ड @twitter 
<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

प्रासंगिक कक्षाहरू

तालिका पङ्क्तिहरू वा व्यक्तिगत कक्षहरू रङ गर्न सन्दर्भ वर्गहरू प्रयोग गर्नुहोस्।

कक्षा हेडिङ हेडिङ
सक्रिय सेल सेल
पूर्वनिर्धारित सेल सेल
प्राथमिक सेल सेल
माध्यमिक सेल सेल
सफलता सेल सेल
खतरा सेल सेल
चेतावनी सेल सेल
जानकारी सेल सेल
उज्यालो सेल सेल
अँध्यारो सेल सेल 
<!-- On rows -->
<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>

  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

नियमित तालिका पृष्ठभूमि भेरियन्टहरू अँध्यारो तालिकासँग उपलब्ध छैनन्, तथापि, तपाईंले समान शैलीहरू प्राप्त गर्न पाठ वा पृष्ठभूमि उपयोगिताहरू प्रयोग गर्न सक्नुहुन्छ।

# हेडिङ हेडिङ
१ सेल सेल
२ सेल सेल
३ सेल सेल
४ सेल सेल
५ सेल सेल
६ सेल सेल
७ सेल सेल
८ सेल सेल
९ सेल सेल 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>
सहयोगी टेक्नोलोजीहरूको अर्थ बुझाउँदै

अर्थ थप्न रङको प्रयोगले मात्र दृश्य सङ्केत प्रदान गर्दछ, जुन सहायक प्रविधिहरूका प्रयोगकर्ताहरूलाई जानकारी दिइने छैन - जस्तै स्क्रिन रिडरहरू। सुनिश्चित गर्नुहोस् कि रङद्वारा संकेत गरिएको जानकारी या त सामग्रीबाट नै स्पष्ट छ (जस��तै देखिने पाठ), वा वैकल्पिक माध्यमहरू मार्फत समावेश गरिएको छ, जस्तै .sr-onlyकक्षासँग लुकेको अतिरिक्त पाठ।

क्रमशः 576px, 768px, 992px, र 1120px सम्मको प्रत्येक ब्रेकपोइन्टमा तालिकालाई तेर्सो रूपमा स्क्रोल गरेर .tableकुनै पनिसँग लपेटेर प्रतिक्रियाशील तालिकाहरू सिर्जना गर्नुहोस् ।.table-responsive{-sm|-md|-lg|-xl}max-width

नोट गर्नुहोस् कि ब्राउजरहरूले हाल दायरा सन्दर्भ प्रश्नहरूलाई समर्थन गर्दैन , हामी यी तुलनाहरूका लागि उच्च परिशुद्धताका साथ मानहरू प्रयोग गरेर भिन्नात्मक चौडाइहरू (जुन उच्च-डीपीआई उपकरणहरूमा निश्चित परिस्थितिहरूमा हुन सक्छ) संग उपसर्गहरू min-रmax- भ्यूपोर्टहरूको सीमितताहरू वरिपरि काम गर्छौं। ।

क्याप्शनहरू

एउटा <caption>कार्य तालिकाको लागि हेडिङ जस्तै। यसले स्क्रिन रिडर भएका प्रयोगकर्ताहरूलाई एउटा तालिका फेला पार्न र यो के हो भनेर बुझ्न र उनीहरूले यसलाई पढ्न चाहनुहुन्छ कि भनेर निर्णय गर्न मद्दत गर्छ।

प्रयोगकर्ताहरूको सूची
# पहिले अन्तिम ह्यान्डल
१ मार्क ओटो @mdo
२ याकूब थोरन्टन @मोटो
३ ल्यारी चरा @twitter 
<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

उत्तरदायी तालिकाहरू

उत्तरदायी तालिकाहरूले तालिकाहरूलाई तेर्सो रूपमा सजिलैसँग स्क्रोल गर्न अनुमति दिन्छ। कुनै पनि तालिकालाई सबै भ्यूपोर्टहरूमा र्‍याप गरेर प्रतिक्रियाशील .tableबनाउनुहोस् .table-responsive। वा, अधिकतम ब्रेकपोइन्ट छान्नुहोस् जसको प्रयोग गरेर उत्तरदायी तालिका हुन सक्छ .table-responsive{-sm|-md|-lg|-xl}।

ठाडो क्लिपिङ/ट्रङ्केसन

उत्तरदायी तालिकाहरूले तालिकाको overflow-y: hiddenतल्लो वा माथिल्लो किनारहरूभन्दा बाहिर जाने कुनै पनि सामग्रीलाई क्लिप गर्ने प्रयोग गर्दछ। विशेष गरी, यसले ड्रपडाउन मेनु र अन्य तेस्रो-पक्ष विजेटहरू क्लिप गर्न सक्छ।

सधैं उत्तरदायी

प्रत्येक ब्रेकपोइन्टमा, .table-responsiveतेर्सो रूपमा स्क्रोल गर्ने तालिकाहरूको लागि प्रयोग गर्नुहोस्।

# हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ
१ सेल सेल सेल सेल सेल सेल सेल सेल सेल
२ सेल सेल सेल सेल सेल सेल सेल सेल सेल
३ सेल सेल सेल सेल सेल सेल सेल सेल सेल 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

ब्रेकपोइन्ट विशिष्ट

.table-responsive{-sm|-md|-lg|-xl}एक विशेष ब्रेकपोइन्ट सम्म उत्तरदायी तालिकाहरू सिर्जना गर्न आवश्यक रूपमा प्रयोग गर्नुहोस् । त्यो ब्रेकपोइन्ट र माथिबाट, तालिकाले सामान्य रूपमा व्यवहार गर्नेछ र तेर्सो रूपमा स्क्रोल गर्दैन।

# हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ
१ सेल सेल सेल सेल सेल
२ सेल सेल सेल सेल सेल
३ सेल सेल सेल सेल सेल
# हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ
१ सेल सेल सेल सेल सेल
२ सेल सेल सेल सेल सेल
३ सेल सेल सेल सेल सेल
# हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ
१ सेल सेल सेल सेल सेल
२ सेल सेल सेल सेल सेल
३ सेल सेल सेल सेल सेल
# हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ
१ सेल सेल सेल सेल सेल
२ सेल सेल सेल सेल सेल
३ सेल सेल सेल सेल सेल 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>