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教程！
推荐阅读：
以上是Bootstrap的常用组件的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
bootstrap搜索栏怎么获取
Apr 07, 2025 pm 03:33 PM
如何使用 Bootstrap 获取搜索栏的值：确定搜索栏的 ID 或名称。使用 JavaScript 获取 DOM 元素。获取元素的值。执行所需的操作。
vue中怎么用bootstrap
Apr 07, 2025 pm 11:33 PM
在 Vue.js 中使用 Bootstrap 分为五个步骤：安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选：自定义样式。可选：使用插件。
bootstrap垂直居中怎么弄
Apr 07, 2025 pm 03:21 PM
使用 Bootstrap 实现垂直居中：flexbox 法：使用 d-flex、justify-content-center 和 align-items-center 类，将元素置于 flexbox 容器内。align-items-center 类法：对于不支持 flexbox 的浏览器，使用 align-items-center 类，前提是父元素具有已定义的高度。
bootstrap怎么写分割线
Apr 07, 2025 pm 03:12 PM
创建 Bootstrap 分割线有两种方法：使用 标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。
bootstrap怎么插入图片
Apr 07, 2025 pm 03:30 PM
在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。
bootstrap按钮怎么用
Apr 07, 2025 pm 03:09 PM
如何使用 Bootstrap 按钮？引入 Bootstrap CSS创建按钮元素并添加 Bootstrap 按钮类添加按钮文本
bootstrap怎么设置框架
Apr 07, 2025 pm 03:27 PM
要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。
bootstrap怎么调整大小
Apr 07, 2025 pm 03:18 PM
要调整 Bootstrap 中元素大小，可以使用尺寸类，具体包括：调整宽度：.col-、.w-、.mw-调整高度：.h-、.min-h-、.max-h-
