boostrap学习(布局练习)

最新推荐文章于 2024-05-08 16:31:38 发布

原创最新推荐文章于 2024-05-08 16:31:38 发布 · 256 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

前端专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了Bootstrap的响应式栅格系统，展示了如何通过不同屏幕尺寸下的列布局实现灵活的网页设计。通过实例代码，解释了如何使用预定义类和mixin创建语义化的布局。

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

bootstrap的布局主要通过栅格系统来实现，通过栅格系统可以将页面划分成我们想要的规则。

栅格系统中一行规定了有12列，且在不同的屏幕大小下一列的大小也有所不同。
在这里插入图片描述

                <div class="about">
                    <div class="text col-md-7">
                        <p class="lead">........(文本).......</p>
                    </div>

                    <div class="tu col-md-5  hidden-xs hidden-sm">
                        <img class="img-responsive center-block" src="imgs/花.png" alt="">
                    </div>

这段代码通过设置两个div里面col-md-x的大小将字段和图片划分成了7/5开，且设置在小屏幕下将图片隐藏起来。

在这里插入图片描述

小屏幕下

同时，也可以设置不同屏幕下组件的行数不同来使网页内容符合响应式布局。

<div class="flower col-md-6 col-xs-12">
                    <div class="media">
                        <div class="media-left media-middle">
                            <a href="https://baike.baidu.com/item/%E9%83%81%E9%87%91%E9%A6%99/13506">
                                <img class="media-object img-circle " src="imgs/pic1.png" alt="郁金香">
                                <p>郁金香</p>
                            </a>
                        </div>
                        <div class="media-body">
                            <h2 class="media-heading">国家:荷兰、阿富汗</h2>
                            <p class="lead">.....(文本)....。</p>
                        </div>
                    </div>
                </div>

在这里插入图片描述

小屏幕下

另外，可通过设置col-xx-offset-xx以让组件内容向右偏移几行。

<div class="container">
            <div class="row"></div>
            <div class="bot1 col-md-6">这里是第一部分</div>
            <div class="bot2 col-md-4  col-md-offset-2">这里是第二部分</div>
        </div>

在这里插入图片描述