目次 |
---|
・Bootstrapのアラート ・Bootstrapのアラートに罫線を入れる ・Bootstrapのアラートを横にスクロールできるようにする |
<div class="container"> <table class="table"> <tr> <th>ヘッダ1</th> <th>ヘッダ2</th> </tr> <tr> <td>1行1列</td> <td>1行2列</td> </tr> <tr> <td>2行1列</td> <td>2行2列</td> </tr> </table> </div>
<div class="container"> <table class="table table-bordered"> <tr> <th>ヘッダ1</th> <th>ヘッダ2</th> </tr> <tr> <td>1行1列</td> <td>1行2列</td> </tr> <tr> <td>2行1列</td> <td>2行2列</td> </tr> </table> </div>
<div class="container"> <table class="table table-striped"> <tr> <th>ヘッダ1</th> <th>ヘッダ2</th> </tr> <tr> <td>1行1列</td> <td>1行2列</td> </tr> <tr> <td>2行1列</td> <td>2行2列</td> </tr> <tr> <td>3行1列</td> <td>3行2列</td> </tr> <tr> <td>4行1列</td> <td>4行2列</td> </tr> </table> </div>
<div class="container"> <table class="table table-striped"> <tr class="danger"> <th>ヘッダ1</th> <th>ヘッダ2</th> </tr> <tr class="success"> <td>1行1列</td> <td>1行2列</td> </tr> <tr class="warning"> <td>2行1列</td> <td>2行2列</td> </tr> <trclass="active"> <td>3行1列</td> <td>3行2列</td> </tr> <tr> <td>4行1列</td> <td>4行2列</td> </tr> </table> </div>
<div class="table-responsive"> <table class="table table-striped"> <tr> <th>ヘッダ1</th> <th>ヘッダ2</th> <th>ヘッダ3</th> <th>ヘッダ4</th> <th>ヘッダ5</th> <th>ヘッダ6</th> <th>ヘッダ7</th> <th>ヘッダ8</th> <th>ヘッダ9</th> <th>ヘッダ10</th> <th>ヘッダ11</th> <th>ヘッダ12</th> <th>ヘッダ13</th> <th>ヘッダ14</th> <th>ヘッダ15</th> <th>ヘッダ16</th> </tr> <tr> <td>1行1列</td> <td>1行2列</td> <td>1行3列</td> <td>1行4列</td> <td>1行5列</td> <td>1行6列</td> <td>1行7列</td> <td>1行8列</td> <td>1行9列</td> <td>1行10列</td> <td>1行11列</td> <td>1行12列</td> <td>1行13列</td> <td>1行14列</td> <td>1行15列</td> <td>1行16列</td> </tr> <tr> <td>1行1列</td> <td>1行2列</td> <td>1行3列</td> <td>1行4列</td> <td>1行5列</td> <td>1行6列</td> <td>1行7列</td> <td>1行8列</td> <td>1行9列</td> <td>1行10列</td> <td>1行11列</td> <td>1行12列</td> <td>1行13列</td> <td>1行14列</td> <td>1行15列</td> <td>1行16列</td> </tr> </table> </div>