Bootstrap的常用组件-js教程-PHP中文网

首页

web前端

js教程

Bootstrap的常用组件

PHPz

Mar 19, 2018 am 09:59 AM

bootstrap常用组件

这次给大家带来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>

View Code

侧边栏

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

相信看了本文案例你已经掌握了方法，更多精彩请关注Bootstrap教程！

推荐阅读：

怎么操作JS里的无序列表属性

在表单中button与input的区别

jest测试react native组件的步奏是什么

以上是Bootstrap的常用组件的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript是用C编写的吗？检查证据Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C语言编写的。1）C语言提供了高效性能和底层控制，适合JavaScript引擎的开发。2）以V8引擎为例，其核心用C 编写，结合了C的效率和面向对象特性。3）JavaScript引擎的工作原理包括解析、编译和执行，C语言在这些过程中发挥关键作用。

JavaScript的角色：使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心，因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容，2)通过DOMAPI操作网页，3)支持复杂的交互效果如动画和拖放，4)优化性能和最佳实践提高用户体验。

C和JavaScript：连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1）C 代码编译成WebAssembly模块，引入到JavaScript环境中，增强计算能力。2）在游戏开发中，C 处理物理引擎和图形渲染，JavaScript负责游戏逻辑和用户界面。

从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。