首页用bootstrap写一个栅格系统

用bootstrap写一个栅格系统

时间: 2023-09-01 14:13:29 浏览: 182

bootstrap栅格系统

5星 · 资源好评率100%

栅格系统更好地帮助你学习前端

好的，下面是一个基本的栅格系统示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bootstrap Grid System</title>  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4">1</div> <div class="col-md-4">2</div> <div class="col-md-4">3</div> </div> <div class="row"> <div class="col-md-6">4</div> <div class="col-md-6">5</div> </div> <div class="row"> <div class="col-md-12">6</div> </div> </div>  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html> ``` 这里使用了 Bootstrap 的栅格系统，把页面分为了 3 行和 5 列。其中，`.container` 是整个页面的容器，`.row` 是每一行的容器，`.col-md-*` 是每一列的容器，其中的 `md` 表示在中等屏幕上展示，`*` 表示占据屏幕的比例，一共有 12 格。在上面的示例中，第一行有 3 列，每一列占据了屏幕的 4 格；第二行有 2 列，每一列占据了屏幕的 6 格；第三行有 1 列，占据了整个屏幕的 12 格。这样就实现了一个基本的栅格系统。

阅读全文