bootstrap之栅格化

最新推荐文章于 2023-10-20 22:53:02 发布
最新推荐文章于 2023-10-20 22:53:02 发布
阅读量400 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ximirensen/article/details/116905182
版权

bootstrap之栅格化

栅格化布局基本原理：栅格化把页面在水平方向等分为一定数目（假设为n）的基本宽度列
然后开发人员可根据需要给页面里的相应元素设置它应占据m个列宽。（m<=n）

我的理解：栅格化就是把浏览器的一行分为12列，自己去分配列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>栅格化</title>
</head>
<body>
<!--css比较灵活，但是也是有缺陷的，那就是容易错位

栅格特性：设置了宽度，如果字太多，会换行，但是如果是数字就不会自动换行
-->

<link rel="stylesheet" href="../../bootstrap-3.4.1-dist/css/bootstrap.css">
<style>
    .row{color: #dca7a7}
    .aaa{background-color: yellow}
    .bbb{background-color: blueviolet}
    .ccc{background-color: orangered}
    .ddd{background-color: deeppink}
</style>
<!-- 列元素是指class属性值含：col-lg-*，col-md-*，col-sm-*，col-xs-*，摆放界限不一样-->
<div class="container">
    <div class="row">
<!-- 列元素是指class属性值含：col-lg-*，col-md-*，col-sm-*，col-xs-*，-->
        <!--col-md低于992就会被竖着摆放，高于992才横着摆放-->
        <div class="col-md-4 aaa">111111111</div>

        <div class="col-md-3 bbb">左边的朋友，右边的朋友</div>
        <div class="col-md-2 ccc">333333333</div>
        <div class="col-md-3 ddd">444444444</div>
    </div>
</div>
<div class="container">
    <div class="row">

        <!--col-lg低于1200就会被竖着摆放，高于1200才横着摆放-->
        <div class="col-lg-4 aaa">111111111</div>

        <div class="col-lg-3 bbb">左边的朋友，右边的朋友</div>
        <div class="col-lg-2 ccc">333333333</div>
        <div class="col-lg-3 ddd">444444444</div>
    </div>
</div>
<div class="container">
    <div class="row">
<!-- 列元素是指class属性值含：col-lg-*，col-md-*，col-sm-*，col-xs-*，-->
        <!--col-xs不会堆叠摆放-->
        <div class="col-xs-4 aaa">111111111</div>

        <div class="col-xs-3 bbb">左边的朋友，右边的朋友</div>
        <div class="col-xs-2 ccc">333333333</div>
        <div class="col-xs-3 ddd">444444444</div>
    </div>
</div>
<div class="container">
    <div class="row">
<!-- 列元素是指class属性值含：col-lg-*，col-md-*，col-sm-*，col-xs-*，-->
        <!--col-sm低于768就会被竖着摆放，高于768才横着摆放-->
        <div class="col-sm-4 aaa">111111111</div>

        <div class="col-sm-3 bbb">左边的朋友，右边的朋友</div>
        <div class="col-sm-2 ccc">333333333</div>
        <div class="col-sm-3 ddd">444444444</div>
    </div>
</div>

<!--<div class="container">-->
<!--    <div class="row">-->
<!--        &lt;!&ndash; 列元素是指class属性值含：col-lg-*，col-md-*，col-sm-*，col-xs-*，&ndash;&gt;-->
<!--        <div class="col-md-4 aaa">111111111</div>-->

<!--        <div class="col-md-4 bbb">左边的朋友，右边的朋友，山上的朋友，左边的朋友，右边的朋友，山上的朋友，左边的朋友，右边的朋友，山上的朋友</div>-->
<!--        <div class="col-md-4 ccc">333333333</div>-->
<!--        <div class="col-md-4 ddd">444444444</div>-->
<!--    </div>-->
<!--</div>-->

</body>
</html>
ximirensen
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
03-bootstrap-响应式布局-栅格系统
记录java学习日常~
05-25 2800
行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。通过“行（row）”在水平方向创建一组“列（column）”。你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。
浅析BootStrap栅格系统
11-24
Bootstrap栅格系统是一种广泛应用于网页布局的工具，它允许开发者创建响应式的网页设计，使得页面在不同尺寸的设备上都能自适应地展示。这个系统基于一个12列的网格结构，能够灵活地调整元素的宽度，以适应从小屏幕...
Bootstrap系列之栅格系统
Debug的博客
02-26 2270
【代码】Bootstrap栅格系统。
响应式开发原理及Bootstrap栅格布局详解
qq_49900295的博客
03-27 3372
文章目录响应式开发原理响应式布局容器Bootstarp简介优点Bootstarp的使用Bootstarp使用四部曲bootstrap的应用布局容器container类栅格系统简介栅格系统参数案例列嵌套列偏移 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。 响应式布局容器 响应式需要一个父级做为布局容器 ,来配合子级元素来实现变化效果。 原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面元素的排列方式和大小,从而实现不同屏幕下,看到不同的
【Java 进阶篇】深入了解 Bootstrap 栅格系统
最新发布
繁依Fanyi的博客
10-20 479
Bootstrap 栅格系统是一种基于12列网格的布局系统。这意味着您可以将页面划分为12个等宽的列，然后将内容放入这些列中。通过在不同的屏幕宽度上定义不同的列宽，您可以轻松创建响应式布局，以适应不同设备的屏幕大小，例如桌面、平板和手机。栅格系统的核心思想是将页面划分为行（row）和列（col每行可以包含一个或多个列，列的宽度总和不能超过12列。这使得网页布局变得非常灵活，同时确保内容在各种屏幕上以一致的方式呈现。
bootstrap栅格化框架
qq_41729237的博客
01-14 350
bootstrap栅格化框架 1．Bootstrap引用方法：使用链接在线引用，或将dist文件夹下的文件复制到开发文件夹下引用。 2．Bootstrap栅格化系统：Bootstrap 的栅格化系统采用将页面布局分为12列，再根据页面宽度采用预定义类控制模块占用宽度比例的思想，实现响应式布局。 布局容器：container或container-fluid(占据100%窗口)先声明一个盒子作为容器，注意由于padding等属性，两个容器不能互相嵌套。 3．一个container可以包含多个row，每个row被
Bootstrap表格和栅格分页实例详解
09-02
接下来，我们讨论Bootstrap栅格系统。栅格系统是Bootstrap的核心特性之一，它允许开发者通过简单的类名创建灵活的布局。栅格系统基于12列的网格，通过`.row`和`.col-*-*`类来实现内容的响应式布局。例如，如果你想在...
Bootstrap栅格系统使用方法及页面调整变形的解决方法
08-31
在Bootstrap栅格系统中，页面布局被划分为等宽的列，然后通过列数的定义来模块化页面布局。 Bootstrap栅格系统的栅格类可以分为四种：超小屏幕类（）、小屏幕设备类（≥768px且）、中型设备类（≥992px且）和大型...
Bootstrap栅格系统的使用详解
11-27
Bootstrap栅格系统是Web开发框架Bootstrap的核心组成部分，主要用于构建响应式和移动设备优先的网页布局。栅格系统基于HTML、CSS和JavaScript，旨在简化页面的布局设计，使其能够适应不同尺寸的屏幕，从手机到桌面...
深入理解BootStrap Item7 -- 栅格系统（布局）
小平果的欢乐谷
11-14 7101
1、栅格系统（布局） Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。 我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理：
Bootstrap的栅格化布局样式
UniqueDavid的博客
02-19 1624
今天在做尺寸的时候遇到了一些问题，这里做个笔记以免以后忘记！超小设备：尺寸小于768px，class的前缀是col-xs-，12列小型设备：尺寸位于768px和992px之间，class的前缀是col-sm-,12列中型设备：尺寸位于992px和1200px之间，class的前缀是col-md-,12列小型设备：尺寸大于等于1200px，class的前缀是col-lg-,12列
bootstrap栅格系统错位问题
10-19 905
在项目中div可以设置属性class=“col-size-x” //size取值为xs，sm，md，lg；x取值为1-12 可以让此div占据本行的 x/12 .col-xs- 超小屏幕 手机 (<768px).col-sm- 小屏幕 平板 (≥768px).col-md- 中等屏幕 桌面显示器 (≥992px).col-lg- 大屏幕 大桌面显示器 (≥1200px) ...
bootstrap栅格化布局
04-09 191
这几天研究了bootstrap响应式布局，其实现原理如下 ： 首先用@media查询当前屏幕的大小，然后根据屏幕大小显示不同样式，样式都是用%定义的。 自己模仿也实现了类似的布局，代码如下： //html文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
Bootstrap3的栅格化样式
kendyhj9999的专栏
06-10 1659
from:http://caibaojian.com/bootstrap3-grid.html Bootstrap2.3的时候还支持IE7，到了3之后，就跟IE7以下说拜拜了。前面已经发过一篇：Bootstrap 3.0的扁平化来了，有兴趣的童鞋可以了解Bootstrap3有哪些特色。 Bootstrap3依旧是支持IE8的，只是同时需要加入Respond.js ，通过这个JS来让
Bootstrap栅格系统概述
橘猫吃不胖的博客
01-15 4721
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），
Bootstrap栅格布局使用
weixin_34308389的博客
12-03 1006
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【Bootstrap栅格布局使用】 大家好，我是IT修真院北京分院第29期学员吴昊杰，一枚正直善良的web程序员。 今天给大家分享一下，修真院官网 CSS任...
Bootstrap 栅格系统初识
weixin_33681778的博客
12-13 339
以下理论内容copy自bootstrap中文网（一个不错的bootstrap学习网站）。 栅格系统 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。 简介 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面...
浅谈栅格化布局
热门推荐
suxiaotie的博客
04-06 2万+
Bootsrtap这个框架的栅格化布局很有意思，可以做到响应式布局。一直很好奇原理，后来在参加百度前端学院时看到导师推荐的一篇自己设计栅格化布局的文章，很有意思，所以就试着翻译一下。如果有不对的地方，希望指正。   css的栅格化布局存在已久，他们经常被绑定在如bootstrap之类的框架上。虽然我不是一个讨厌bootstrap的人，但是有时候需要的仅仅是栅格化布局而不是整个框架。这里会展示如何
bootstrap栅格系统布局
涂涂
07-19 4170
学习笔记 一．移动设备优先 在HTML5 的项目中，我们做了移动端的项目。它有一份非常重要的meta，用于设置屏幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。 //分别为：屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放 二．布局容器 Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器（固定宽度布局容器）container-fluid
java实现栅格化布局
08-17
一个常用的前端框架是Bootstrap，它提供了栅格系统的支持，可以在网页上实现栅格化布局。你可以使用Java生成网页，并在网页中引入Bootstrap的样式和脚本，从而实现栅格化布局。 另外，Java的GUI库如Swing或JavaFX也...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值