bootstrap栅格网页布局开发

最新推荐文章于 2023-02-26 17:12:08 发布
最新推荐文章于 2023-02-26 17:12:08 发布
阅读量354 收藏
点赞数
分类专栏： bootstrap 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  
  //安装检测手机真实尺寸的语句
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>栅格网页布局开发</title>

    <!--安装bootstrap-->
    <!--css-->
    <link rel="stylesheet" href="bs/css/bootstrap.css">
    <!--bootstrap.js-->
    <script src="bs/js/bootstrap.js"></script>
    <!--jquery.js-->
    <script src="bs/js/jquery.js"></script>
    <!--生成占位图-->
    <script src="bs/js/holder.js"></script>

    <style>
        .row{
            margin-bottom: 15px;
        }
    </style>
</head>
<body>

<!--测试bootstrap.css是否安装生效 . 此类使元素居中-->
<div class="container">
    <h1>Bootstrap前端框架</h1>
    <!--表示一行-->

    <!-- NO1 : 栅格排列-->
    <div class="row">
        <!--一行总共有12个小格,每个小格子中间有15px内边距,,col-md-3表示每张图片占3个小格子-->
        <div class="col-md-3">
            <img src="方图.jpg" width="100%" >
        </div>
        <div class="col-md-3">
            <img src="方图.jpg" width="100%">
        </div>
        <div class="col-md-3">
            <img src="方图.jpg" width="100%">
        </div>
        <div class="col-md-3">
            <img src="方图.jpg" width="100%">
        </div>
    </div>
    <!-- NO2 : 列偏移-->
    <div class="row">
        <!--一行总共有12个小格,每个小格子中间有15px内边距,,col-md-3表示每张图片占3个小格子-->
        <div class="col-md-4">
            <img src="方图.jpg" width="100%" >
        </div>

        <!--如果想在中间空几格再显示,就可以使用列偏移 col-md-offset- *    其中*代表12中的几列-->

        <div class="col-md-4 col-md-offset-4" >
            <img src="方图.jpg" width="100%">
        </div>
    </div>
    <!-- NO3 : 浮动-->
    <div class="row">
        <div class="col-md-3 pull-right">
            <img src="方图.jpg" width="100%" >
        </div>
    </div>

    <!-- NO4 : 嵌套栅格 : 把栅格分好的格子又分成12个小格子继续分隔,每个格子左右还是15px-->
    <div class="row">
        <div class="col-md-4">  <!--只占到左边四格-->
            <!--左-->
            <div class="col-md-4">
                <div class="col-md-12">
                    <img src="方图.jpg" width="100%" >
                </div>
            </div>
            <!--中-->
            <div class="col-md-4">
                <img src="方图.jpg" width="100%" >
            </div>
            <!--右-->
            <div class="col-md-4">
                <img src="方图.jpg" width="100%" >
            </div>
        </div>
    </div>
</div>
</body>
</html>
Byte_Dance
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap 栅格系统
酱油一哥的专栏
02-16 1769
bootstrap栅格系统 官方文档：bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的minxin用于生成更具语义的布局。 个人理解：bootstrap栅格系统通过提供预定义的类来对html元素进行组装展示，开发者只需要按照bootstrap定义的规则，使用相应
bootstrap的栅格系统
weixin_30279315的博客
02-07 92
Bootstrap的理解 1.Bootstrap的栅格系统 　　　Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 　　 　1.1栅格系统的简介 　　　栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。 2.建立栅格系统的步骤 　　2.1创建栅格系统的容...
Bootstrap 栅格系统
Cabu_husky的博客
05-03 369
栅格系统 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。 row(行)必须包含在.container(固定宽度)或 .container-fluid (100% 宽度)中 column(列)必须放在.row内 css div{ ...
Bootstrap-栅格系统
lin_dark的博客
12-03 561
Bootstrap-栅格系统 1.栅格系统简介 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局，你的内容就可以放入这些创建好的格子中。 2.栅格系统组成 由div嵌套组成，给div设置不不同类样式名来对网页进行布局。对应类样式名和描...
Bootstrap布局之栅格系统详解
09-02
Bootstrap栅格系统是网页设计和开发中的一个强大工具，它是一种用于创建响应式布局的方法，旨在简化跨设备的网页设计工作。Bootstrap栅格系统基于12列的网格布局，允许开发者灵活地分配页面内容的空间，根据不同的...
Bootstrap布局之栅格系统学习笔记
08-30
Bootstrap布局之栅格系统学习笔记 Bootstrap 是一个流行的前端框架，它提供了一个响应式的栅格系统，用于快速创建响应式的网页...通过学习 Bootstrap 的栅格系统，我们可以快速创建响应式的网页布局，提高开发效率。
Bootstrap栅格系统的使用和理解2
08-31
Bootstrap栅格系统是一种流行的网页布局工具，用于创建响应式的网页设计。这个系统基于12列的网格模型，允许开发者在不同设备和屏幕尺寸上灵活地安排内容。在Bootstrap框架中，栅格系统的设计目的是使页面内容能够...
Bootstrap栅格系统的使用详解
10-19
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。这篇文章主要介绍了Bootstrap的核心——栅格系统的使用,需要的朋友可以参考下
Bootstrap栅格系统简单实现代码
08-31
Bootstrap栅格系统是Bootstrap框架中的一种布局系统，它可以帮助开发者快速创建响应式的网页布局。栅格系统的主要功能是将页面拆分为多个部分，各个部分可以根据不同的屏幕尺寸和设备类型进行调整。Bootstrap栅格...
Bootstrap系列之栅格系统
Debug的博客
02-26 2191
【代码】Bootstrap栅格系统。
BootStrap(栅格系统)
magic_818的博客
11-03 4666
BootStrap常用标签
使用 Sass 开发一个栅格系统
wkj1206的博客
12-24 267
确定样式 一个栅格系统所有的样式分为： 容器类：.container-* 行：.row、.row--flex 列：.col-*、.col-*-* 响应式工具类：.hidden-*、.visible-*-* 定义基本数据 $grid-columns: 12; // 每行的列数 $medias-list: xs, sm, md, lg, xl; // 媒体类型 // 媒体尺寸断点 $screen-breakpoints-list: ( xs: (max: 575px), sm: (mi.
BootStrap--使用栅格系统
weixin_43750811的博客
05-05 196
简介 栅格系统是指，将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。 Bootstrap的栅格系统采用了1-12列的模式，并且通过比例计算来设置你定义的列宽,可以随着屏幕分辨率的不同来改变块级元素样式的, Bootstrap有几种栅格类可以使用： .col-xs-* 这是超小屏幕类（<576px），类似手机等设备。 .col-sm-* 这是小屏幕设备类（≥576px且<...
栅格系统开发入门-基于Bootstrap
weixin_43203591的博客
08-18 253
应用场景 基于Bootstrap框架尝试栅格系统入门。 实现 效果 代码实现-基于Bootstrap <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device
Bootstrap4 之栅格系统
两个月亮
01-21 2460
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统。栅格系统实现的原理非常简单，仅仅是通过定义容器大小，平分为 12 份，再调整内外边距，最后结合媒体查询，即制作出强大的响应式栅格系统。
【Bootstrap Learning】-4 栅格系统
一叶君
04-24 778
1. 栅格系统 container/container-fluid row column 2. 选择Documentation -- 选择 Layout -- Container container 有两种： container 响应式容器。随着屏幕的宽度自适应变化。 container-fluid 非响应式容器。 一直是100%。...
Bootstrap栅格系统概述
橘猫吃不胖的博客
01-15 4680
Bootstrap栅格系统概述1 栅格系统简介1.1 栅格系统概述1.2 实现简单版栅格系统2 Bootstrap布局容器2.1 布局容器2.2 .container-fluid类2.3 container类3 栅格系统的基本使用3.1 栅格系统的行和列3.2 学生信息表格案例4 栅格系统的屏幕适配4.1 栅格系统的类前缀4.3 利用栅格系统实现导航栏效果5 栅格系统中列的操作5.1 栅格系统中的列嵌套5.2 栅格系统中的列偏移 1 栅格系统简介 1.1 栅格系统概述 栅格系统（Grid Systems），
bootstrap4 网格布局实例_使用Scss敲一个响应式网格布局
weixin_33034651的博客
01-10 379
使用Scss敲一个响应式网格布局bootstarp 许多人都用过，是一个非常丰富的框架，那么，现在闲来无事，模仿 bootstrap 敲一个简单的响应式布局框架。1. 确定响应确立需要响应的屏幕设备宽度，仿 bootstrap 设计 超小屏幕的手机 576px 小型屏幕的平板电脑 768px 中型屏幕的台式电脑 992px 大型屏幕的台式电脑 1200px// 需响应屏幕宽度的变量 $xs: 57...
属于Bootstrap栅格中设置的布局容器类的有什么
最新发布
06-08
Bootstrap中栅格系统是...通过使用这些栅格布局的类，可以快速地搭建起网页的基本布局，从而节省开发时间和成本。同时，Bootstrap还提供了多种响应式断点和栅格列偏移、列排序等高级功能，使得栅格布局更加灵活和实用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值