BootStrap

最新推荐文章于 2024-07-25 14:15:14 发布

瘋人苑

最新推荐文章于 2024-07-25 14:15:14 发布

阅读量40

点赞数

文章标签： bootstrap css

本文链接：https://blog.csdn.net/ykx_angle/article/details/129864383

版权

1.了解BootStrap

1.1 UI框架

UI框架概念：

将常见效果进行统一封装后形成的一套代码

作用：

基于框架开发，效率高，稳定性高

1.2 BootStrap简介

BootStrap 是由Twitter 公司开发维护的前端UI框架，它提供了大量编写好的CSS样式，允许开发者结合一定HTML结构及JavaScript，快速编写功能完善的网页及常见交互效果。
中文官网：https://www.bootcss.com/

1.3 BootStrap栅格系统

栅格系统（grid sysrems)，也叫“网格系统”，它就是通过一些列的行（row）与列（column）的组合拆关键页面布局。内容可以直接放入BootStrap栅格系统里面。
栅格化是指将整个网页的宽度分成若干等分。
BootStrap3默认将网页分成12等份。

类

.container是BootStrap中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。
.container-fluid也是BootStrap中专门提供的类名，所有应用该类名的盒子，宽度均为100%。
分别使用.row和.col类名定义栅格布局的行和列。

注意：

1.container类自带间距15px
2. row类自带间距-15px

1.4 列偏移

列偏移通过 col-lg-offset
让盒子往右侧走，左边有几份
例如：

<style>
        .one div {
            height: 150px;
            background-color: purple;
        }

        .one div:last-child {
            background-color: pink;
        }

        .two div {
            height: 150px;
            background-color: skyblue;
        }

        .three div {
            height: 150px;
            background-color: orange;
        }
</style>
<body>
    <div class="container">
        <div class="row one">
            <div class="col-lg-4">左侧</div>
            <!-- 列偏移 -->
            <div class="col-lg-4 col-lg-offset-4">右侧</div>
        </div>
        <div class="row two">
            <div class="col-lg-8 col-lg-offset-2"></div>
        </div>
        <div class="row three">
            <div class="col-lg-3 col-lg-offset-3"></div>
            <div class="col-lg-3 col-lg-offset-3"></div>
        </div>
    </div>
</body>

结果：
在这里插入图片描述

瘋人苑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
BootStrap

BootStrap 是由Twitter 公司开发维护的前端UI框架，它提供了大量编写好的CSS样式，允许开发者结合一定HTML结构及JavaScript，快速编写功能完善的网页及常见交互效果。中文官网：https://www.bootcss.com/
复制链接

扫一扫