bootstrap之栅格系统

最新推荐文章于 2025-09-13 09:06:35 发布
最新推荐文章于 2025-09-13 09:06:35 发布
阅读量53 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/Harold-Hua/p/5253553.html
本文详细介绍了Bootstrap中的栅格系统，包括不同屏幕尺寸下的列布局、列偏移、列交换等功能，并通过实例展示了如何使用这些功能来创建响应式的网页布局。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>栅格系统</title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<style type="text/css">
    .a{
        height: 50px;
        border: 1px solid #ccc;
        background-color: #eee;
    }

</style>
<body>
    <!-- 布局容器 -->
    <!--
    固定宽度：container
    100%宽度：container-fluid
     -->

    <div class="container a">
         固定宽度
     </div>
     <div class="container-fluid a">
         100%宽度
     </div>

<hr>
    <div class="container">
        <p>创建响应行</p>
        <!--
                                        类前缀：    栅格系统行为：                                 container最大宽值：    最大列宽：     槽宽：
        超小屏幕手机（<768px）           .col-xs-    总是水平排列                                   None(自动)            自动          30px
        小屏幕平板（>=768px）            .col-sm-    开始是堆叠在一起的，当大于这些值时将变为水平排列    750px                ~62px         30px
        中等屏幕桌面显示器（>=992px）     .col-md-    开始是堆叠在一起的，当大于这些值时将变为水平排列    970px                ~81px         30px
        大屏幕大桌面显示器（>=1200px）    .col-lg-    开始是堆叠在一起的，当大于这些值时将变为水平排列    1170px                ~97px        30px
         -->
        <div class="row">
            <div class="col-md-1 a">1</div>
            <div class="col-md-1 a">1</div>
            <div class="col-md-1 a">1</div>
            <div class="col-md-1 a">1</div>
            <div class="col-md-1 a">1</div>
            <div class="col-md-1 a">1</div>
            <div class="col-md-1 a">1</div>
            <div class="col-md-1 a">1</div>
            <div class="col-md-1 a">1</div>
            <div class="col-md-1 a">1</div>
            <div class="col-md-1 a">1</div>
            <div class="col-md-1 a">1</div>
        </div>
        <div class="row">
            <div class="col-md-9 a">9</div>
            <div class="col-md-3 a">3</div>
        </div>
        <div class="row">
            <div class="col-md-4 a">4</div>
            <div class="col-md-4 a">4</div>
            <div class="col-md-4 a">4</div>
        </div>


<hr>
        <p>
        激活四种屏幕分类
         </p>
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
        </div>


<hr>
            <p>设置列偏移，保持空隙</p>
        <!--
            col-md-offset-1：设置列偏移，保持空隙
         -->
            <div class="row">
                <div class="col-md-8 a">8</div>
                <div class="col-md-3 col-md-offset-1 a">3</div>
            </div>
            <div class="row">
                <div class="col-md-9 a" style="padding:0;">
                    <div class="col-md-4 a">
                        4
                    </div>
                    <div class="col-md-4 a">
                        4
                    </div>
                    <div class="col-md-4 a">
                        4
                    </div>
                </div>
                <div class="col-md-3 a">3</div>
            </div>

<hr>
            <p>交换两列的位置</p>
            <!--
            交换两个列的位置，push向左移动，pull向右移动
            -->

            <div class="row">
                <div class="col-md-9 col-md-push-3 a">9</div>
                <div class="col-md-3 col-md-pull-9 a">3</div>
            </div>


    </div>



    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>

 

转载于:https://www.cnblogs.com/Harold-Hua/p/5253553.html

Bootstrap之栅格系统布局
weixin_45846303的博客
05-01 488
我们在使用Bootstrap的时候，可以使用栅格系统对网页进行布局。接下来我们就一起来学习一下栅格系统布局的方法。 container类 特点： container类（class）能创建一个居中的区域，然后我们能够把其他位置的内容放到里面。 带有container类的div框等价于一个具有静态宽度并且margin值为auto的居中的div框。 container类的优点在于它是响应式的,它会以当前...
Bootstrap、栅格系统布局
m0_68618659的博客
08-18 9068
组件是一个抽象的概念，是对数据和方法的简单封装。用面向对象思想来说，将一些符合某种规范的类组合在—起就构成了组件，通过组件可以为用户提供某些特定的功能。组件是构成页面中独立结构单元，是对结构的抽象，它主要以页面结构形式存在，可复用性很强。组件的使用并不复杂，每个组件拥有自己的作用域，每个组件区域之间独立工作，并且互不影响。组件可以有自己的属性和方法。不同组件之间也具有基本的交互功能，能够根据业务逻辑来实现复杂的项目功能。...
Bootstrap之栅格系统
干掉熊猫我就是国宝
10-16 2753
1、栅格系统（布局） Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。 我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理： 网格系统...
Bootstrap之栅格系统偏移
机器猫不吃鱼的博客
09-04 7743
Bootstrap之栅格系统偏移         Bootstrap之栅格系统偏移：           在Bootstrap中可能会使用到offset（偏移），具体语法格式如下：                 1  //适合在pc端向右偏移一格         col-xs-1  offset-xs-offset-1">1  //适合在手机端向右偏移一格         <div
BootStrap-栅格系统
盐书的博客
01-20 1293
栅格系统将整体划分为了12个格子。
Bootstrap框架之栅格系统
weixin_42146366的博客
07-19 581
一、简介 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。 二、工作原理 “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligmen...
Bootstrap 之栅格系统与常用样式
weixin_50828895的博客
01-19 5737
一、Bootstrap简介 Bootstrap来自Twitter(推特)，是目前最受欢迎的前端框架，Bootstrap是基于HTML,CSS和JavaScrpit 的，它简洁灵活，使得web开发更加快捷。 中文官网：http://www.bootcss.com/ 官网：http://getbootstrap.com/ 优点 标准化的html+css编码规范 提供了一套简洁、直观、强悍的组件 有自己的生态圈，不断的更新迭代 让开发更简单，提高了开发的效率 二、Bootstrap 栅格系统 1、栅格系统
Bootstrap：栅格系统
2401_84097393的博客
04-19 666
给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里免费领取，先到先得哦。给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里免费领取，先到先得哦。[外链图片转存中…(img-AJliVhA6-1713471737266)][外链图片转存中…(img-qtTPH6wg-1713471737266)]
BootStrap(栅格系统)
magic_818的博客
11-03 5163
BootStrap常用标签
Bootstrap栅格系统.pptx
03-10
Bootstrap栅格系统
Bootstrap栅格系统的使用详解
10-19
Bootstrap栅格系统是基于响应式设计原则开发的一套用于页面布局的网格系统。它允许开发者快速地创建一个响应式的网站布局，这个系统适应不同尺寸的屏幕设备，包括手机、平板、笔记本电脑和台式机等。Bootstrap栅格...
Bootstrap布局之栅格系统学习笔记
08-30
Bootstrap布局之栅格系统学习笔记 Bootstrap 是一个流行的前端框架，它提供了一个响应式的栅格系统，用于快速创建响应式的网页布局。栅格系统是Bootstrap布局的核心组件之一，今天我们将详细介绍栅格系统的学习笔记...
响应式框架Bootstrap栅格系统的实例
08-28
Bootstrap栅格系统实例详解 Bootstrap栅格系统是Bootstrap框架中的一种响应式布局系统，它可以根据不同的屏幕尺寸和设备类型来调整页面的布局和样式。下面我们来详解Bootstrap栅格系统的实例。 一、Bootstrap栅格...
《Linux运维总结：Redis7.4.5哨兵集群开启ACL并配置用户》
东城绝神
09-12 587
《Linux运维总结：Redis7.4.5哨兵集群开启ACL并配置用户》
前后端开发Mock作用说明，mock.ts
循环编织时间年轮，递归叩问存在本质，谁能在硅基荒原上，种出思想的玫瑰……
09-12 475
mock.ts是前端开发中用于模拟后端接口的TypeScript文件，通过生成虚假数据使前端无需等待后端即可独立开发。它定义数据结构、模拟请求响应，并提供与真实接口一致的调用方式。示例展示了如何生成用户数据并模拟分页接口，使用vite-plugin-mock等工具实现。前端代码调用Mock接口与调用真实接口方式相同，待后端完成时只需替换接口地址即可平滑切换，实现了前后端并行开发。
JavaScript 对象：一份全面的回顾
最新发布
低代码布道师的博客
09-13 361
JavaScript 对象是基础的数据结构，是更复杂数据类型的基石。它们是一个由组成的集合，每个属性都包含一个键和一个值。掌握它们是精通 JavaScript 的关键。🔑。
JavaScript的功能和作用
2402_83164836的博客
09-10 531
JavaScript（简称 JS）是一种​​，最初设计用于为网页添加动态交互功能。经过多年发展，其应用场景已远超浏览器，成为覆盖前端、后端、移动端、桌面端甚至物联网等领域的“全场景语言”。
深入理解Bootstrap3.0栅格系统：案例解析
"Bootstrap3.0的学习笔记专注于栅格系统，通过详细案例深入解析该系统的工作原理和用法。" Bootstrap3.0的栅格系统是响应式网页设计的关键组件，它允许开发者创建灵活且适应不同设备尺寸的布局。在本篇笔记中，我们...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值