J'ai déjà installé popper et jquery avec NPM.

Et importé dans App.js :

import '../node_modules/jquery/dist/jquery.min.js'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import '../node_modules/bootstrap/dist/js/bootstrap.min.js';

La partie css semble fonctionner correctement, mais je ne vois aucun jquery( bootstrap.js) en cours d'exécution. Lorsque j'utilise table, table-striped et table-hover ne fonctionnent pas. Voici le code que je testais, à partir de Traversy Media (j'ai collé dans un rendu dans App.js). J'ai essayé à la fois class et className

<div className="container">
      <table className="table table-striped table-bordered table-hover table-condensed">
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Age</th>
        </tr>
        <tr class="danger">
          <td>Jill</td>
          <td>Smith</td>
          <td>50</td>
        </tr>
        <tr>
          <td>Eve</td>
          <td>Jackson</td>
          <td>24</td>
        </tr>
        <tr class="success">
          <td>John</td>
          <td>Doe</td>
          <td>34</td>
        </tr>
        <tr>
          <td>Stephanie</td>
          <td>Landon</td>
          <td>47</td>
        </tr>
        <tr>
          <td>Mike</td>
          <td>Johnson</td>
          <td>19</td>
        </tr>
      </table>
</div>

Je vous remercie

5
FranktheTank 18 mars 2019 à 03:19

2 réponses

Meilleure réponse

Il semble qu'il vous manque une balise "tbody" dans votre table . Voici le balisage correct :

<div className="container">
  <table className="table table-striped table-bordered table-hover table-condensed">
    <tbody>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
      <tr className="danger">
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>24</td>
      </tr>
      <tr className="success">
        <td>John</td>
        <td>Doe</td>
        <td>34</td>
      </tr>
      <tr>
        <td>Stephanie</td>
        <td>Landon</td>
        <td>47</td>
      </tr>
      <tr>
        <td>Mike</td>
        <td>Johnson</td>
        <td>19</td>
      </tr>
    </tbody>
  </table>
</div>

J'espère que cela aide.

3
Khairul Anik 18 mars 2019 à 12:22

C'est le bon code.

<div className="container">
  <table className="table table-striped table-bordered table-hover table-condensed">
    <tbody>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
  <tr className="danger">
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>24</td>
  </tr>
  <tr className="success">
    <td>John</td>
    <td>Doe</td>
    <td>34</td>
  </tr>
  <tr>
    <td>Stephanie</td>
    <td>Landon</td>
    <td>47</td>
  </tr>
  <tr>
    <td>Mike</td>
    <td>Johnson</td>
    <td>19</td>
  </tr>
</tbody>
0
Abhishek Kumar 18 mars 2019 à 15:41