Bootstrap栅格布局系统的特点
栅格布局系统的特点:
(1)所有的行必须放在容器中: .container或.container-fluid
(2)分为多行(row),一行中平均分为12列(col)
(3)网页内容只能放在列(col)中,不能直接放在行(row)
(4)可以在col中再嵌套row
(5)col分为四大类: col-xs col-sm col-md col-lg
(6)col-md- 值可为1~12,值就为某个列的宽度( */12 )
(7)可以为一个列指定不同屏幕下的不同宽度
(8) col-lg-* 只对大PC屏幕有效
col-md-* 对普通PC和大PC屏幕都有效col-sm-* 对平板、PC、大PC屏幕都有效col-xs-* 对手机、平板、PC大PC屏幕都有效
(9) .hidden-lg 当前列只在大PC屏幕下隐藏
.hidden-md 当前列只在PC屏幕下隐藏
.hidden-sm 当前列只在平板屏幕下隐藏
.hidden-xs 当前列只在手机屏幕下隐藏
Bootstrap栅格布局系统的特点相关推荐
- Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理) - willian12345...
Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理) - willian12345 时间 2014-02-20 17:58:00 博客园-原创精华区 原 ...
- HTML栅格布局container,(Bootstrap3.0的栅格布局系统实现原理)
这个标题取的有点奇怪,怪我翻译的有问题吧.英文学平有限,有道词典和google翻译齐上阵是必须的.还好翻译的不是小说,对于技术文章,还是能勉强翻过来的. 本文主要讲解了Bootstrap3.0的栅格布 ...
- [译] 你不需要基于 CSS Grid 的栅格布局系统
本文讲的是[译] 你不需要基于 CSS Grid 的栅格布局系统, 原文地址:You do not need a CSS Grid based Grid System 原文作者:Rachel Andr ...
- Vue Grid Layout -️ 适用Vue.js的栅格布局系统(保姆级使用教程)
目录 一. Vue Grid Layout 简介 二.vue-grid-layout 的安装与使用 三. 属性 3.1 gridItem 的必须属性 3.2 框架元素的实际宽度高度计算方式 3.3 元 ...
- Bootstrap栅格布局
1.栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin ...
- Bootstrap栅格布局分析grid源码
前言 此为本人自学经验和某站博主经验,与其他简书作者经验共同写出. 如有侵权请联系. 布局 首选布局前,大家要明白bootstrap几种布局方式 栅格&flex 这篇文章先讲解栅格,flex以 ...
- Bootstrap栅格布局解析
文章目录 栅格布局 初始栅格 栅格布局源码 grid.less mixin中的grid.less clearfix.less 栅格布局源码分析 流体容器&固定容器公共样式 @grid-gutt ...
- [bootstrap]栅格布局与flex的区别以及栅格布局的响应式应用
栅格布局的特点以及与flex的区别 HTML <body><!-- 一行4个 --><div class="container"><div ...
- 响应式设计-Bootstrap栅格布局
响应式布局:就是一个网站为了兼容多个终端,而不是为每个终端制定特定的版本.这个概念是为解决移动互联网浏览而诞生的. 全面了解Bootstrap可以看:http://v3.bootcss.com/css ...
最新文章
- insert into与insert ignore以及replace into的区别
- 网络推广关键词布局仍需网络推广专员时刻“运筹帷幄”
- ARM汇编 beq和bne
- jquery-1 jquery几个小实例
- 联想 facebook android,Lenovo Vantage
- JavaSE(二十四)——冒泡排序、选择排序、直接插入排序以及二分查找
- debian jessie install note
- .NET Core快速入门教程 4、使用VS Code开发.NET Core控制台应用程序
- 论文浅尝 - 计算机工程 | 大规模企业级知识图谱实践综述
- 界面设计方法(2) — 2.界面的布局
- C#LeetCode刷题之#118-杨辉三角(Pascal‘s Triangle)
- VMware下Ubuntu图形界面切换到命令行终端模式
- jave使用corenlp
- 算法同学从学校到实习,需要改变什么
- DNS在企业网络中的应用(一)
- l如何更新linux内核,WSL更新Linux内核版本
- java screenframe_一个关于JFrame的问题
- 计算机组成原理 唐朔飞 知识点,计算机组成原理知识点总结(唐朔飞版)
- 清华OS前置知识:80386处理器
- Diss 暴雪爸爸,炉石是否还是“良心”游戏?
热门文章
- matlab多径误差包络,MIMO-OFDM系统添加多径信道仿真结果误差很大
- 达摩院2022年十大科技趋势发布:AI for Science刚开始,大模型进入冷静期
- 马斯克:4年内,SpaceX的第一艘火星飞船将发射
- 给GPT-2加上“人类偏好”补丁,它说的话就越来越有人情味了丨代码已开源
- SQL连接查询和嵌套查询详解
- Centos 6 克隆导致网卡eth0变成eth1、及修改网卡名的方法
- 推荐 查公司信息的一个网站
- POI导入大excel文件
- 【译】①JWS之Java[tm] Web Start开发者指南目录
- ContactG,基于Spark IM组织联络人插件