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>

bootstrap之栅格化相关推荐

Bootstrap的栅格化系统
目录: 1.Bootstrap栅格化系统 1.1 描述 1.2 代码示例 1.3 媒体查询 2.Bootstrap基本css样式的使用 1.Bootstrap栅格化系统 1.1 描述 ...
Bootstrap3的栅格化布局样式
栅格化布局,又称"网格系统",是一种使用规则的网格阵列来指导和规范网页中的版面布局以及信息分布原文来自:http://caibaojian.com/bootstrap3-grid. ...
bootstrap怎么在移动端横向布局_前端知道分享，移动端布局
一.下面我将简单的介绍移动端布局的八种方式: 1.固定布局 2.流动布局 3.浮动布局 4.定位布局 5.混合布局 6.flex布局 7.rem布局 8.响应式布局 9.**圣杯布局10.**双飞翼 ...
用Flask开发Web版日历应用
Python Calender模块 python的日历模块Calender提供了多种日历展示模式: 参数说明示例 calendar.calendar(year) 输出某一年的日历 calendar ...
使用Flask制作美观的网页日历
Python Calender模块 python的日历模块Calender提供了多种日历展示模式: 参数说明示例 setfirstweekday(firstweekday) 0是星期一,-,6为星 ...
HTML栅格布局container,布局栅格
布局方式先聊聊布局方面的知识,先列据一个实现三栏水平布局(左右定宽,中间自适应)案列,目前有圣杯布局.双飞翼布局.Flex布局和绝对定位布局的几种经典布局. 圣杯布局 & 双飞翼布局(都是三 ...
#千峰逆战班，拼搏永向前#
bootstrap和easyUI的区别首先我们来分别看看bootstrap和easyUI实现的页面效果 bootstrap: easyUI: easyUI整体上看中规中矩,方方正正.在视觉上,谈不上 ...
Bootstrap学习之二：栅格化布局
目录导言 1.什么是栅格化布局 2.开始栅格化布局 @(Bootstrap) 导言前面我们讲了如何安装使用bootstrap框架,下面我们将会学习bootstrap的各种框架结构,布局.在这篇文章 ...
Bootstrap 关于背景图像的自适应和行的栅格化
Bootstrap 是基于列来栅格化网页的,因此使用它,麻烦就在于行坐标难以确定,bootstrap 是根据列坐标来实现页面编辑的. Bootstrap 在初次使用时的一些感受它在行编辑的同时,实现 ...
Bootstrap源码解读之栅格化篇
本文纯属自己研究所写笔记,如果有错误还请多多指教提出版心(container) 版心:class名为.container的容器,其版心的宽度在各个屏幕设备下是不一样的值,版心两边就是留白. 各尺寸 ...

bootstrap之栅格化

bootstrap之栅格化

bootstrap之栅格化相关推荐

最新文章

热门文章