ブートストラップの共通コンポーネント

今回は、Bootstrap の共通コンポーネントについて説明します。Bootstrap の共通コンポーネントを使用する際の注意点は何ですか? 以下は実際のケースです。

ナビゲーションバー

 1 <nav class="navbar navbar-inverse navbar-fixed-top"> 2       <p class="container-fluid"> 3         <p class="navbar-header"> 4           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 5             <span class="sr-only">Toggle navigation</span> 6             <span class="icon-bar"></span> 7             <span class="icon-bar"></span> 8             <span class="icon-bar"></span> 9           </button>10           <a class="navbar-brand" href="https://v3.bootcss.com/examples/dashboard/#">Project name</a>11         </p>12         <p id="navbar" class="navbar-collapse collapse">13           <ul class="nav navbar-nav navbar-right">14             <li><a href="https://v3.bootcss.com/examples/dashboard/#">Dashboard</a></li>15             <li><a href="https://v3.bootcss.com/examples/dashboard/#">Settings</a></li>16             <li><a href="https://v3.bootcss.com/examples/dashboard/#">Profile</a></li>17             <li><a href="https://v3.bootcss.com/examples/dashboard/#">Help</a></li>18           </ul>19           <form class="navbar-form navbar-right">20             <input type="text" class="form-control" placeholder="Search...">21           </form>22         </p>23       </p>24     </nav>

コードを表示

サイドバー

<p class="container-fluid">
      <p class="row">
        <p class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li class="active"><a href="https://v3.bootcss.com/examples/dashboard/#">Overview <span class="sr-only">(current)</span></a></li>
            <li><a href="">Reports</a></li>
            <li><a href="">Analytics</a></li>
            <li><a href="">Export</a></li>
          </ul>
          <ul class="nav nav-sidebar">
            <li><a href="">Nav item</a></li>
            <li><a href="">Nav item again</a></li>
            <li><a href="">One more nav</a></li>
            <li><a href="">Another nav item</a></li>
            <li><a href="">More navigation</a></li>
          </ul>
          <ul class="nav nav-sidebar">
            <li><a href="">Nav item again</a></li>
            <li><a href="">One more nav</a></li>
            <li><a href="https://www.baidu.com">Another nav item</a></li>
          </ul>
        </p>

テーブルバー

  1 <p class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">  2           <h2 class="sub-header">Section title</h2>  3           <p class="table-responsive">  4             <table class="table table-striped table-hover table-bordered">  5               <thead>  6                 <tr>  7                   <th>#</th>  8                   <th>Header</th>  9                   <th>Header</th> 10                   <th>Header</th> 11                   <th>Header</th> 12                 </tr> 13               </thead> 14               <tbody> 15                 <tr> 16                   <td>1,001</td> 17                   <td>Lorem</td> 18                   <td>ipsum</td> 19                   <td>dolor</td> 20                   <td>sit</td> 21                 </tr> 22                 <tr> 23                   <td>1,002</td> 24                   <td>amet</td> 25                   <td>consectetur</td> 26                   <td>adipiscing</td> 27                   <td>elit</td> 28                 </tr> 29                 <tr> 30                   <td>1,003</td> 31                   <td>Integer</td> 32                   <td>nec</td> 33                   <td>odio</td> 34                   <td>Praesent</td> 35                 </tr> 36                 <tr> 37                   <td>1,003</td> 38                   <td>libero</td> 39                   <td>Sed</td> 40                   <td>cursus</td> 41                   <td>ante</td> 42                 </tr> 43                 <tr> 44                   <td>1,004</td> 45                   <td>dapibus</td> 46                   <td>diam</td> 47                   <td>Sed</td> 48                   <td>nisi</td> 49                 </tr> 50                 <tr> 51                   <td>1,005</td> 52                   <td>Nulla</td> 53                   <td>quis</td> 54                   <td>sem</td> 55                   <td>at</td> 56                 </tr> 57                 <tr> 58                   <td>1,006</td> 59                   <td>nibh</td> 60                   <td>elementum</td> 61                   <td>imperdiet</td> 62                   <td>Duis</td> 63                 </tr> 64                 <tr> 65                   <td>1,007</td> 66                   <td>sagittis</td> 67                   <td>ipsum</td> 68                   <td>Praesent</td> 69                   <td>mauris</td> 70                 </tr> 71                 <tr> 72                   <td>1,008</td> 73                   <td>Fusce</td> 74                   <td>nec</td> 75                   <td>tellus</td> 76                   <td>sed</td> 77                 </tr> 78                 <tr> 79                   <td>1,009</td> 80                   <td>augue</td> 81                   <td>semper</td> 82                   <td>porta</td> 83                   <td>Mauris</td> 84                 </tr> 85                 <tr> 86                   <td>1,010</td> 87                   <td>massa</td> 88                   <td>Vestibulum</td> 89                   <td>lacinia</td> 90                   <td>arcu</td> 91                 </tr> 92                 <tr> 93                   <td>1,011</td> 94                   <td>eget</td> 95                   <td>nulla</td> 96                   <td>Class</td> 97                   <td>aptent</td> 98                 </tr> 99                 <tr>100                   <td>1,012</td>101                   <td>taciti</td>102                   <td>sociosqu</td>103                   <td>ad</td>104                   <td>litora</td>105                 </tr>106                 <tr>107                   <td>1,013</td>108                   <td>torquent</td>109                   <td>per</td>110                   <td>conubia</td>111                   <td>nostra</td>112                 </tr>113                 <tr>114                   <td>1,014</td>115                   <td>per</td>116                   <td>inceptos</td>117                   <td>himenaeos</td>118                   <td>Curabitur</td>119                 </tr>120                 <tr>121                   <td>1,015</td>122                   <td>sodales</td>123                   <td>ligula</td>124                   <td>in</td>125                   <td>libero</td>126                 </tr>127               </tbody>128             </table>129           </p>

この記事の事例を読んだ後は、この方法を習得したと思います。さらにエキサイティングなブートストラップチュートリアルに注目してください。

推奨読書:

JS で順序なしリスト属性を操作する方法

ボタンとフォームの入力の違い

jest がネイティブコンポーネントに反応することをテストするための手順は何ですか

以上がブートストラップの共通コンポーネントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。