当前位置： 移动技术网 > IT编程>网页制作>CSS > Bootstrap常用组件

Bootstrap常用组件

2018年03月16日  | 移动技术网IT编程  | 我要评论

导航栏：

 1 <nav class="navbar navbar-inverse navbar-fixed-top">
 2       <div class="container-fluid">
 3         <div 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         </div>
12         <div 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         </div>
23       </div>
24     </nav>
View Code

 

侧边栏：

<div class="container-fluid">
      <div class="row">
        <div 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>
        </div>

表格栏：

  1 <div 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           <div 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           </div>
View Code

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网