栅格布局

最新推荐文章于 2024-08-21 19:42:22 发布
最新推荐文章于 2024-08-21 19:42:22 发布
阅读量1.1k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rainy_killer/article/details/89097647
版权
本文探讨了栅格布局的概念，重点介绍了导入相关包后的一个实战案例，展示了如何实现和使用栅格布局。
摘要由CSDN通过智能技术生成
栅格布局

导入包

<script  src="jquery-3.0.0.js"></script>
<script src="bootstrap/bootstrap-3.3.7-dist/js/bootstrap.js"></script>

下面是栅格布局的一段案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Raines</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="bootstrap/bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        .navbar-default {
            background-color: #000;
            padding-left: 40px;
            border-color: #000;
        }
        .navbar-default .navbar-nav > li > a {
            color: #efefef;
        }
        .navbar-default .navbar-nav > li > a:hover {
            background-color: #55a532;
            color: #fff;
        }
        .navbar {
            margin-bottom: 0;
        }
       .carousel-inner  .item  img {

           width: 100%;
           height:470px ;



        }
        .carousel-caption {
            font-size: 100px;
        }
        .personSection {
           margin: 20px  50px;
            border-bottom: 2px solid #ccc;

        }
        .casePlay {
            margin: 20px  50px;
            border-bottom: 2px solid #ccc;
            padding-bottom: 30px;
        }







    </style>

</head>
<body>
<!--顶部导航-->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">微信公众号管家</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">关于</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">登录 </a>

                </li>
            </ul>


        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators 小圆点-->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        <li data-target="#carousel-example-generic" data-slide-to="4"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="images/zhutu1.jpg" alt="...">
            <div class="carousel-caption">
                轮播图01
            </div>
        </div>
        <div class="item">
            <img src="images/zhutu3.jpg" alt="...">

        </div>
        <div class="item">
            <img src="images/zhutu4.jpg" alt="...">

        </div>
        <div class="item">
            <img src="images/zhutu5.jpg" alt="...">

        </div>
        <div class="item">
        <img src="images/zhutu6.jpg" alt="...">

    </div>

    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
<!--个人展示区域  栅格系统-->
<div class="container-fluid personSection">

    <!--text-center  文本居中-->
    <div class="row">
        <div class="col-lg-4 text-center  personDetail" >
            <img src="images/p1.png" alt="">
            <p class="h1">案例01</p>
            <span>我是最胖的  不是 你是 到底谁是  你是</span>
        </div>
        <div class="col-lg-4 text-center personDetail">
            <img src="images/p2.png" alt="">
            <p class="h1">案例01</p>
            <span>我是最胖的  不是 你是 到底谁是  你是</span>
        </div>
        <div class="col-lg-4 text-center personDetail">
            <img src="images/p3.png" alt="">
            <p class="h1">案例01</p>
            <span>我是最胖的  不是 你是 到底谁是  你是</span>
        </div>



    </div>


</div>
<!--案例展示区-->

<div class="container-fluid casePlay">


    <div class="row">

        <div class="col-lg-4 text-center">

            <img src="images/case01.png" alt="">

        </div>
        <div class="col-lg-8">
            <p class="h1">案例01案例01</p>
            <p>代表四个换热管他人即可我供热过几天如果科技投入街我感觉换热管  </p>
        </div>
    </div>


</div>
<div class="container-fluid casePlay">


    <div class="row">


        <div class="col-lg-8">
            <p class="h1">案例01案例01</p>
            <p>代表四个换热管他人即可我供热过几天如果科技投入街我感觉换热管  </p>
        </div>
        <div class="col-lg-4 text-center">

            <img src="images/case02.png" alt="">

        </div>
    </div>


</div>
<div class="container-fluid casePlay">


    <div class="row">

        <div class="col-lg-4 text-center">

            <img src="images/case03.png" alt="">

        </div>
        <div class="col-lg-8">
            <p class="h1">案例01案例01</p>
            <p>代表四个换热管他人即可我供热过几天如果科技投入街我感觉换热管  </p>
        </div>
    </div>


</div>

<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>
<p>egre</p>


<script  src="jquery-3.0.0.js"></script>
<script src="bootstrap/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
</html>
何须执手问年华丶
关注
grid栅格布局
yanyihan16的博客
05-27 494
一、使用 .grid{ display: grid } .grid{ display: inline-grid } 二、容器划分 定义横、纵网格轨道。 <style> .grid { display: grid; grid-template-columns: 60px 60px 60px 60px; grid-template-rows: 60px...
uniapp栅格布局
m0_73410230的博客
07-26 918
利用uniapp自带的组件可以进行快速的造页面
css【详解】grid布局—— 网格布局（栅格布局）
热门推荐
朝阳39的博客
04-11 5万+
目录 gird布局 和 flex布局的区别 Grid 布局的基本术语 网格布局的使用方法 启用网格布局display: grid 划分列grid-template-columns 绝对值 px 百分比值 % 比例值 fr auto值 minmax()函数值 repeat()函数值 划分行grid-template-rows 自动填充auto-fill 给网格线命名 [] 设置行/列的间距 指定区域 不属于任何区域的单元格，用.表示 多个单元格合并成一个区域 改...
栅格布局在 HarmonyOS 中的应用及扩展
最新发布
A1551143530的博客
08-21 1176
栅格布局在 HarmonyOS 中提供了丰富的定制化能力，能够应对多种复杂的布局需求。通过合理地设置栅格布局的各项属性，开发者可以创建出高度灵活和响应式的用户界面，无需考虑设备的具体类型或状态。在未来的开发中，栅格布局将继续发挥其强大的适应性，为移动端用户提供更加流畅和一致的体验。
栅格布局（GridRow/GridCol）
01-11 2750
栅格布局是一种通用的辅助定位工具，对移动设备的界面设计有较好的借鉴作用。提供可循的规律：栅格布局可以为布局提供规律性的结构，解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数，可以方便地对页面元素进行定位和排版。统一的定位标注：栅格布局可以为系统提供一种统一的定位标注，保证不同设备上各个模块的布局一致性。这可以减少设计和开发的复杂度，提高工作效率。灵活的间距调整方法：栅格布局可以提供一种灵活的间距调整方法，满足特殊场景布局调整的需求。
栅格布局（ 栅格 ）
AI-fisher的博客
07-20 1万+
文章目录一、开启栅格布局（display）——父容器二、配置行和列（grid-template-rows/grid-template-columns）——父容器三、配置行和列（grid-template）——父容器四、控制网格项的位置与大小（grid-row/grid-column）——子元素五、网格区域命名（grid-template-areas——父容器&&grid-area——子元素） 一、开启栅格布局（display）——父容器 栅格布局能将网页分成简单属性的行和列；Grid(网格)
css 栅格布局
lamp专栏
08-21 1444
css 栅格 css布局
使用React代码动态生成栅格布局的方法
10-15
在React开发中，动态生成栅格布局是一种常见的需求，它能根据数据变化或者用户操作灵活地调整页面元素的展示方式。本篇文章将详细介绍如何利用React和Ant Design Pro框架，通过简洁的代码实现动态生成栅格布局。 ...
简单实现栅格布局的两种方式
09-25
在现代Web开发中，栅格布局是一种常用的布局方式，它可以让我们把页面划分成多个网格，然后将内容放置在这些网格之中。栅格布局可以实现响应式设计，使得网页在不同屏幕尺寸的设备上都能保持良好的布局效果。本文将...
[bootstrap]栅格布局与flex的区别以及栅格布局的响应式应用
weixin_48047636的博客
04-25 1015
栅格布局的特点以及与flex的区别 HTML <body> <!-- 一行4个 --> <div class="container"> <div class="row"> <!-- 问题: 这样写会有一个问题,就是只要加一点外边距之类的\ 它就会有col块被挤到下一行 解决方法:利用方块自带天沟的特性
栅格系统布局
HertzDL的博客
07-03 3466
.col-xs-超小屏幕 手机 (<768px), .col-sm-小屏幕 平板 (≥768px), .col-md-中等屏幕 .col-lg-桌面显示器 (≥992px)(栅格参数) 什么是栅格系统 栅格系统英文为 Grid Systems，也有翻译为网格系统。 定义：运用固定的格子，遵循一定的规则，进行页面的布局设计，使布局规范简洁有规则。 网页栅格 ...
栅格布局的使用
weixin_52120405的博客
05-28 3280
栅格布局 1）四种栅格布局 a.手机端 .col-xs-* （屏宽768px以下） b.平板电脑端 .col-sm-* （屏宽768px-992px之间）版心最大宽度750px c.中型PC端 .col-md-* （屏宽992px-1200px之间）版心最大宽度970px d.大型PC端 ...
CSS Grid布局：什么是网格布局
01-03 358
CSS Grid现在已经被W3C纳入到CSS3的一个布局模块当中，被称为CSS Grid Layout Module。而我们较为熟悉的还是将其想像成网格或者栅格，也就是早期的960gs。不管是网格还是栅格或者现在的CSS Grid Layout Module，我想掌握这些技术对于我们将来在Web项目中实现布局只有好处没有坏处。那么从今天开始我将和大家一起探讨CSS中的网格布局。 为什么我们需
2.栅格布局
007的博客
07-14 4329
    字进行页面开发,最头疼的问题在于:页面写完了,发现换个浏览器不支持了(显示风格瞬间改变).        如果要真想实现栅格,那么就必须有一个可以容纳第一个栅格的行,而多个栅格行最终就组成了一个页面.在整个bootstrap之中最多只能够存在有12个栅格        如果现在是一个宽容器的窗口,那么整个栅格都会按照宽屏幕的方式完整显示显示,而到了窄屏的页面,那么会自动改变现实的风格.栅格...
CSS Grid 栅格布局
Amy_cloud的博客
06-27 4593
简介 栅格布局能将网页分成简单属性的行和列； Grid(网格) 模块为 display 属性提供了一个新的值：grid。当你将任何元素的 display 属性设置为 grid 时，那么这个元素就是一个 网格容器(grid container)，它的所有直接子元素就成了 网格项(grid items)。 举个栗子： 制作一个九宫格的布局展示： 第一步：HTML ...
CSS栅格布局（Grid）
ct5211314的博客
12-05 7488
今天写页面布局，突然想到了栅格布局，以往习惯了弹性布局，然后发现栅格布局有点香，然后就简单的整理了一下，用于学习与分享。 可以理解为将一个元素分成行列，然后可以设置对应的大小、布局、位置。 划分行列 使用 grid-template-columns 划分列数使用 grid-template-rows 划分行数假定一个需求，在一个容器内，左右列表，默认展示4列2行。（画的有点丑，哈哈哈哈）通过栅格布局进行页面的绘制。 上面代码发现，页面超出部分，高度不是25%了，那是因为容器外
qlabel栅格布局
10-14
qlabel栅格布局是指使用QGridLayout布局管理器来管理多个QLabel控件的位置和大小。在QGridLayout中，可以通过设置行和列的大小以及控件所在的行和列来实现栅格布局。 例如，以下代码将创建一个包含两个QLabel控件的窗口，并使用QGridLayout将它们放置在栅格布局中： ``` #include <QtWidgets> int main(int argc, char *argv[]) { QApplication app(argc, argv); QWidget *window = new QWidget; QGridLayout *layout = new QGridLayout; QLabel *label1 = new QLabel("Label 1"); QLabel *label2 = new QLabel("Label 2"); layout->addWidget(label1, 0, 0); layout->addWidget(label2, 0, 1); window->setLayout(layout); window->show(); return app.exec(); } ``` 在上面的代码中，QLabel控件label1和label2被添加到QGridLayout中，并分别放置在第0行第0列和第0行第1列。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值