Heim > Web-Frontend > js-Tutorial > Gemeinsame Komponenten von Bootstrap

Gemeinsame Komponenten von Bootstrap

PHPz
Freigeben: 2018-10-13 15:25:46
Original
1708 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage