Gemeinsame Komponenten von Bootstrap

Dieses Mal werde ich Ihnen die allgemeinen Komponenten von Bootstrap vorstellen. Was sind die Vorsichtsmaßnahmen für die Verwendung gemeinsamer Komponenten von Bootstrap? Hier sind praktische Fälle.

Navigationsleiste

 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>

Code anzeigen

Seitenleiste

<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>

Tabellenleiste

  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>

Ob Sie es glauben oder nicht Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Inhalte finden Sie im Bootstrap-Tutorial!

Empfohlene Lektüre:

So bedienen Sie das ungeordnete Listenattribut in JS

Der Unterschied zwischen Schaltfläche und Eingabe im Formular

Was sind die Schritte für Jest, um native Komponenten zu testen?

Das obige ist der detaillierte Inhalt vonGemeinsame Komponenten von Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!