bootstrap网格系统中col-xs-*，col-sm-*，col-md-*，col-lg-* 的意义及列重置，偏移列，嵌套列和列排序...

最新推荐文章于 2022-01-17 08:54:00 发布
转载 最新推荐文章于 2022-01-17 08:54:00 发布 · 1.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://my.oschina.net/u/3627873/blog/1499736
文章标签：

#java #javascript #ViewUI

本文详细介绍了Bootstrap网格系统的基础概念及使用方法，包括不同设备下的响应式布局调整、列的分配与重置、列的偏移与嵌套以及列的排序等关键特性。

摘要: bootstrap网格系统中col-xs-*，col-sm-*，col-md-*，col-lg-* 的意义，列重置，偏移列，嵌套列和列排序

网格选项

下表总结了 Bootstrap 网格系统如何跨多个设备工作：

 超小设备手机（<768px）小型设备平板电脑（≥768px）中型设备台式电脑（≥992px）大型设备台式电脑（≥1200px）
网格行为一直是水平的以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的
最大容器宽度None (auto)750px970px1170px
Class 前缀.col-xs-.col-sm-.col-md-.col-lg-
列数量和12121212
最大列宽Auto60px78px95px
间隙宽度30px
（一个列的每边分别 15px）		30px
（一个列的每边分别 15px）		30px
（一个列的每边分别 15px）		30px
（一个列的每边分别 15px）
可嵌套YesYesYesYes
偏移量YesYesYesYes
列排序YesYesYesYes

基本的网格结构

下面是 Bootstrap 网格的基本结构：

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

说明：

1、col-列；

2、xs-maxsmall，超小； sm-small，小型； md-medium，中型；  lg-large，大型

3、-*表示占列，即占自动每行row分12列栅格系统比；

4、不管在哪种屏幕上，栅格系统都会自动的每行row分12列。col-xs-*,col-sm-* ,col-md-*和col-lg-* 后面跟的参数（此时用*表示）表示在当前的屏幕中每个div所占列数。例如 <div class="col-xs-6 col-md-3"> 这个div在屏幕中占的位置是： .col-xs-6 在超小屏幕中占6列 也就是屏幕的一半（12/6列=2个div） ，.col-md-3 在中单屏幕中占3列也就是1/4（12/3列=4个div）。

5、反推，如果我们要在小屏幕上并排显示3个div(12/3个=每个占4 列 )，则col-xs-4；在大屏幕上显示6个div(12/6个=每个占2列 ) ，则 col-md-2；这样我们就可以控制我们自己想要的什么排版了。

6、案例说明：

<div class="container">
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        <!-- 说明：每row行共12列，分个3div，每个div平占4列，即3个*4列=12列 -->
    </div>
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-8">col-md-8</div>
        <!-- 说明：每row行共12列，分个2div，第1个div占4列，第2个div则占8列，即4列+8列=12列 -->
    </div>
    <div class="row">
        <div class="col-md-3">col-md-3</div>
        <div class="col-md-6">col-md-6</div>
        <div class="col-md-3">col-md-3</div>
        <!-- 说明：每row行共12列，分个3div，每1,3个div占3列，第2个div则占6列，即3列+6列+3列=12列 -->
    </div>

响应式的列重置

以下实例包含了4个网格，但是我们在小设备浏览时无法确定网格显示的位置。

为了解决这个问题，可以使用 .clearfix class和 响应式实用工具来解决，如下面实例所示：

偏移列

偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如，.col-xs-* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。

为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 *范围是从 1 到 11。

在下面的实例中，我们有 <div class="col-md-6">..</div>，我们将使用 .col-md-offset-3 class 来居中这个 div。

结果如下所示：

网格系统偏移列

嵌套列

为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。

在下面的实例中，布局有两个列，第二列被分为两行四个盒子。

结果如下所示：

网格系统嵌套列

列排序

Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。

您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。

在下面的实例中，我们有两列布局，左列很窄，作为侧边栏。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。

结果如下所示：

网格系统排序列

案例

<%@ page language="java" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
%>
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <title>栅格</title>
        <meta content="IE=edge" http-equiv="X-UA-Compatible">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="Content-Language" content="zh-cn" />
        <meta name="author" content="linjiqin218@126.com" />
        <meta name="Copyright" content="parami|厦门波罗密网络科技有限公司" />

        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        <jsp:include page="/demo/base/js_bootstrap.jsp" />
        <style type="text/css">
        .show-grid [class ^="col-"] {
            padding-top: 10px;
            padding-bottom: 10px;
            background-color: #eee;
            border: 1px solid #ddd;
            background-color: rgba(86, 61, 124, .15);
            border: 1px solid rgba(86, 61, 124, .2);
        }
        </style>
        <script type="text/javascript">
        $(function(){
        });
        </script>
    </head>
    <body>
        <b>col-lg-*用法</b>  
        <br/> 
        <div class="row show-grid">
          <div class="col-lg-8">.col-lg-8</div>
          <div class="col-lg-4">.col-lg-4</div>
        </div>
        <br/>         
        <b>col-md-*用法</b>
        <div class="row show-grid">
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
          <div class="col-md-1">.col-md-1</div>
        </div>
        <br/> 
        <div class="row show-grid">
          <div class="col-md-8">.col-md-8</div>
          <div class="col-md-4">.col-md-4</div>
        </div>
        <br/> 
        <b>col-sm-*用法</b>
        <div class="row show-grid">
          <div class="col-sm-8">.col-sm-8</div>
          <div class="col-sm-4">.col-sm-4</div>
        </div>
        <br/>             
        <b>col-xs-*用法</b>
        <div class="row show-grid">
          <div class="col-xs-8">.col-xs-8</div>
          <div class="col-xs-4">.col-xs-4</div>
        </div>    
        <br/>     
        <b>列偏移: col-md-offset-*</b>
        <div class="row show-grid">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row show-grid">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
        </div>
        <div class="row show-grid">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <br/>     
        <b>嵌套列: 嵌套row所包含的列加起来应该等于12</b>
        <div class="row show-grid">
            <div class="col-md-9">
                Level 1: .col-md-9
                <div class="row show-grid">
                    <div class="col-md-6">Level 2: .col-md-6</div>
                    <div class="col-md-6">Level 2: .col-md-6</div>
                </div>
            </div>
        </div>
        <br/>     
        <b>列排序: .col-md-push-*和.col-md-pull-*</b>    
        <div class="row show-grid">
          <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
          <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
        </div>        
    </body>
</html>

演示效果

 

转载于:https://my.oschina.net/u/3627873/blog/1499736

cii1929
关注
前端必知必会-Bootstrap 5 网格系统
qq_24018193的博客
10-20 965
本文介绍了Bootstrap 5 网格系统的使用，如有问题欢迎私信和评论。
Bootstrap4 网格系统
xiaoaque的博客
12-29 999
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动重新排列。
使用Bootstrap重新排序CSS列
culiu9261的博客
07-18 414
Bootstrap has a great many features. One of the main features that is used in pretty much every Bootstrap project I've ever seen is the grid system. The grid system provides a great tool to scaffold ...
bootstrape栅格样式偏移简单使用
渣渣的博客
10-17 1576
bootstrap默认一行等比划分12列 col-xs-* 设置元素占 * 列 col-xs-x和col-xs-y使用时x+y=12 左移右移不占栅格比例 col-xs-push-* 右移 col-xs-pull-* 左移 若x+y&amp;gt;12会重叠而不会被挤到第二行 col-xs-offset-* 右移 * 列 col-xs-x 和col-xs-offset...
BootStrap笔记-栅格系统
IT1995的博客
01-17 1575
BootStrap中把视口分为12列。 BootStrap4中栅格有5类： .col 所有设备 .col-sm 平板-屏幕宽度>=576px .col-md 桌面显示器-屏幕宽度>=768px .col-lg 大桌面显示器-屏幕宽度>=992px .col-xl 超大桌面显示器-屏幕宽度>=1200px 如：.col-sm-4就是后面的数值加起来要小于等于12就可以了。 如下代码： <!DOCTYPE html&g
Bootstrap 栅栏布局中 col-xs-*、col-sm-*、col-md-*、col-lg-* 区别及使用方法
weixin_30908707的博客
05-31 496
（1）概括 一句话概括：根据显示屏幕宽度的大小，自动的选用对应的类的样式。 （2）关键字段 1、col是column简写：列； 2、xs是maxsmall简写：超小，sm是small简写：小， md是medium简写：中等，lg是large简写：大； 3、-* 表示占列数，即占每行row分12列栅格系统比； 4、.col-xs-* 超小屏幕如手机 （&...
bootstrap里col-xs , col-sm ,col-md,col-lg的区别
weixin_38383877的博客
07-28 6422
前言         对于一些初学boostrap的同学来说，肯定也像我一样傻傻的搞不懂col-××-*都是要怎么使用吧，我刚开始也表示一脸懵逼，后来查阅了这篇文章才搞懂了他们之间的区别，我整理了一下供大家一起学习。 摘要: bootstrap栅栏系统css中的col-xs-*、col-sm-*、col-md-* 、col-lg-*的意义： .col-xs-* 超小屏幕 手机 (&lt;76...
通过col-sm和col-xs生成页面，生成四列三行，第一行三列分开，第二行前两列合并，第三列占三行
最新发布
10-16
要使用 `col-sm` 和 `col-xs` 类实现四列三行的页面布局，其中第一行三列分开，第二行前两列合并，第三列占三行，可以使用 Bootstrap 的网格系统。以下是实现该布局的 HTML 代码示例： ```html <!DOCTYPE html> ...
col-xs-offset-4类可以将列向左移动4列
06-01
每个列具有相同的宽度，可以通过添加 `col-xs-*`、`col-sm-*`、`col-md-*` 或 `col-lg-*` 类来指定不同的列宽。例如，`col-xs-4` 将元素分配为 4 列宽度，占据其父元素的 1/3 宽度。 如果你想将某个列向左移动 n 列...
Web-前端html+css从入门到精通 211. bootstrap4之grid（上）.zip
05-23
- Bootstrap 4支持五种响应式断点：`xs`(超小屏幕)，`sm`(小屏幕)，`md`(中等屏幕)，`lg`(大屏幕)和`xl`(额外大屏幕)。开发者可以使用预定义的类如`.col-sm-4`，在不同屏幕尺寸下调整列的宽度。 4. **Flexbox支持*...
瀑布流/媒体查询/栅格化布局/导航条
你还有我
12-24 953
设备： 屏幕：PC ~screen 手机端 打印机~print 屏幕阅读器 尺寸： 常见尺寸 320-420之间 响应式网页：同一个网页，在不同的条件下，使用不同的样式。 rem/百分比 网页：等比例缩放方式。 【注】 使用min-width时，通常将小的条件放在前面。 使用max-width时，通常将大的条件放在前面 实现方式： 内嵌式 格式：@media 设备名 逻辑关键词（and ，（逗号） not）（条件）{ 样式； } 屏幕设备宽度大于等于1200px时生效
Boostrap栅格源码含五格栅格
萌芽萌芽子
03-08 669
Boostrap栅格源码，扒出来给不是很理解响应式的小伙伴们看看，中间加入了萌芽自己的5格栅格【 moyako-col-2 】，方便学习使用哟~ 关于栅格布局：主要就是媒体查询media方法，意思是只要满足括号内条件即可执行！ *{ box-sizing: border-box; } .container { margin-right: auto; margin-left: au...
boostrap demo
修也
02-19 696
我的第一个 Bootstrap 页面 重置窗口大小，查看响应式效果！ 第一列 学的不仅是技术，更是梦想！ 再牛逼的梦想,也抵不住你傻逼似的坚持！ 第二列 学的不仅是技术，更是梦想！ 再牛逼的梦想,也抵不住你傻逼似的坚持！ 第三列
深入理解BootStrap Item7 -- 栅格系统（布局）
小平果的欢乐谷
11-14 7299
1、栅格系统（布局） Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。 我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理：
Bootstrap-栅格系统
sofia92的博客
03-25 3165
一、栅格参数是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 .col-xs- 和 .col-md-。请看下面的实例，研究一下这些是如何工作的。 比如HTML代码：<div class="row"> <div class="col-xs-12 col-sm-9 col-md-6 col-lg-3"> content
响应式网格（栅格化）布局
weixin_30722589的博客
08-08 490
响应式网格系统 响应式网格系统的概念 把网页划分成列、行、外边距、隔离带（各列与各行之间的空白）等由一系列相交的水平轴和垂直轴组成的网格。 网格布局的作用在于更有效地控制元素在网页中所占比例的大小。比如，博客中有一个留言板模块，在比较大的屏幕上，我们希望它占了右边 25% 的宽度，在手机等比较小的屏幕上，我们希望它占 100% 的宽度，出现在博客文章下方。网格布局是一种实现这一需求的办法，它的...
Bootstrap页面缩小布局改变的问题
weixin_42881147的博客
02-10 4079
Bootstrap作为一个广泛使用的前端框架，其核心响应式布局更是受到很多人喜爱，但在使用的同时，很多人被其页面缩小时会改变布局所困扰，下面我就向大家说说应该怎样解决这个问题（亲测完美解决）。 少扯淡，多干货！ ——————————————原代码—————————————— <style type="text/css"> header{ background-color:#d9534f...
响应式布局（一）——bootstrap栅格系统
weixin_30606669的博客
11-28 364
bootstrap根据不同屏幕尺寸，选择不同的栅格选项。一共有四种栅格选项，超小屏（手机）、小屏（平板）、中屏（桌面）、大屏（超大桌面）。栅格系统分为12列，即每行最多可容纳12列。若<HTML>里，一个.row内包含的列（column）大于12个（即，一行中的栅格单元超过12个单元），则会自动排版，总之，一行只能最多12列，具体分析往后阅读。 一、 栅格系统的使用...
常用的前端布局模式
qq_42859627的博客
06-18 727
这里写自定义目录标题常用的几种布局模式栅格布局布局（col-）Flex布局一、Flex 布局是什么？二、基本概念三、容器的属性 常用的几种布局模式 你好！ 作为一个优秀的前端工程师在开始一个项目之前，你是否有能力知道怎么去搭建网页的骨架。接下来我会带你去了解一下网页常用的几种布局模式 栅格布局布局（col-） 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理： “行（row）”必须包含
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值