Laravel——bootstrap布局

最新推荐文章于 2025-07-03 11:36:03 发布

傲娇虎

最新推荐文章于 2025-07-03 11:36:03 发布

阅读量793

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Laravel

本文链接：https://blog.youkuaiyun.com/Qjy_985211/article/details/90766676

Laravel 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了如何在Laravel项目中应用Bootstrap的栅格系统进行页面布局。Bootstrap的栅格布局基于12列，方便灵活地创建响应式设计。通过div元素，开发者能够实现复杂的页面结构和适应不同屏幕尺寸的设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bootstrap 的栅格布局，栅格系统利用了12列的布局，这意味着一个页面可以被分割成12个相同的列。下面这张从bootstrap官方文档中拿到的图片给出了一个很好的展示。

div来进行布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <script type="text/javascript" src="{{ \Illuminate\Support\Facades\URL::asset('/') }}js/jquery.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="{{\Illuminate\Support\Facades\URL::asset('/shop/js/jquery.min.js')}}"></script>
    <script src="{{\Illuminate\Support\Facades\URL::asset('/shop/js/bootstrap.min.js')}}"></script>
</head>

<div id="content" class="row-fluid">
    <div class="col-md-9">
        <h2>Main Content Section</h2>
    </div>
    <div class="col-md-3">
        <h2>Sidebar</h2>
    </div>
</div>

</html>