Common components of Bootstrap

This time I will bring you the common components of Bootstrap. What are the precautions for using common components of Bootstrap? The following is a practical case, let’s take a look.

Navigation bar

 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>

View Code

Sidebar

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

Table bar

  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>

I believe you have mastered it after reading the case in this article The method, please pay attention to Bootstrap tutorial for more exciting information!

Recommended reading:

How to operate the unordered list attribute in JS

The difference between button and input in the form

What are the steps for jest to test react native components

The above is the detailed content of Common components of Bootstrap. For more information, please follow other related articles on the PHP Chinese website!