今天主要跟大家讲解下bootstrap的栅格布局,以及使用过程中应该注意的问题

首先我们要使用bootstrp的栅格布局就必须使用HTML正确的基本结构

如下图:

必须给要使用栅格布局的盒子定义class为container。目的一是为了在响应式的布局上给宽度约束,二是提供padding以至于不让内容贴住浏览器的边缘。

Class为row的盒子是指行的容器,bootstrap把一行分成了12等分,下面讲解下col-xx-是怎么使用的吧。

Bootstrap栅格布局中css中有四个类,分别是col-xs-, col-sm-, col-md-, col-lg-;

col-xs-是指超小屏幕 手机 <768px

col-sm-是指小屏幕 平板 >=768px

col-md-是指中等屏幕  桌面显示器  >=992px

Col-lg- 是指大屏幕  大桌面显示器 >=1200px

不管在哪种屏幕上,栅格系统都会自动的将每行分为12列,每个类后面接的值表示当前的屏幕中给个盒子所占的个数,

如:

该div在屏幕中占的位置是:col-xs-6是在超小屏幕中占6列,也就是整屏幕的一半(因为一共是12列)。col-md-3是在桌面显示器中占1/4的大小。

更多参考:https://v3.bootcss.com/css/

(php开发,web前端,ui设计,vr开发专业培训机构,v客学院版权所有,转载请注明出路,谢谢!!!)

bootstrap栅格布局-v客学院知识分享的更多相关文章

  1. 5分钟搞定一个网页特效----v客学院技术分享

    这是我们v客学院基础班的童鞋都做完的一个超简单炫酷的特效demo,今天我来带大家用最快的速度和最简单的方法制作一个音乐抖动条,大家有兴趣不妨一起来试试~~~~~~~ 做这个demo之前我们得有一些ht ...

  2. 前端工程师在实现支付功能的时候能做些什么(V客学院技术分享)?

    现在最流行的两种支付微信支付和支付宝支付,在日常开发的过程中肯定离不开支付功能的开发,有很多人第一次接触时会有些措手不及. 一.业务逻辑 (电商平台为例子) 支付大部分用在电商平台,各种打赏,游戏充值 ...

  3. HBuilder android 打包指南(V客学院技术分享)

    前提:确保配置文件(manifest.json)已配置完,没有异常. 打包选项如下: Android 包名 :在Android系统中是判断一个App的唯一标识,不同的App可以有同样的名字,但是它的包 ...

  4. Echarts快速入门---------v客学院技术分享

    ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) ...

  5. 正则表达式的模式匹配----V客学院技术分享

    正则表达式是由一个字符序列形成的搜索模式. 你在文本中搜索数据时,你可以用搜索模式来描述你要查询的内容. 正则表达式可以是一个简单的字符,或一个更复杂的模式. 正则表达式可用于所有文本搜索和文本替换的 ...

  6. window对象之计时器--v客学院技术分享

    setTimeout()和setInterval()可以用来注册在指定的时间之后单次或者重复调用的函数.因为它们都是客户端JavaScript中重要的全局函数,所以定义为window对象的方法,但是作 ...

  7. Javascript闭包解析----------------v客学院技术分享

    跟java,php等编程语言一样,javascript也采用词法作用域,简单的来说就是函数的执行依赖于变量的作用域,这个作用域是在函数定义时决定的,而不是函数调用时决定的.为了实现这种词法作用域,还必 ...

  8. 数组去重汇总—v客学院技术分享

    上周基础班结束了数组的学习内容,这几天有时间整理了下几种比较常用的数组去重的方法供大家查阅!!!!! 话不多说,直接贴代码吧~~~~~~~ 欢迎大家指正,共同学习,一同进步!!! (php开发,web ...

  9. DIV+css排版问题技巧总结---v客学院技术分享

                DIV+css排版问题技巧总结 一.排版思路 1.从上到下,从左到右,从大到小. 2.首先确定排版分区,排除色块分布,然后再从简单的部分开始. 3.在某一块内将HTML部分写好 ...

随机推荐

  1. 四、SSL虚拟证书

    沿用练习三,配置基于加密网站的虚拟主机,实现以下目标: 域名为www.c.com 该站点通过https访问 通过私钥.证书对该站点所有数据加密 4.2 方案 源码安装Nginx时必须使用--with- ...

  2. 基于Docker安装常用软件

    基于Docker安装常用软件 本实验介绍如何基于Docker安装常用的软件,具体包括: Ubuntu Cetnos Nginx Node.js PHP MySQL Tomcat Redis Mongo ...

  3. 【dp】10-15题解 snake vs block

    snake vs block 题目描述 Tgopknight最近迷上了一款叫做Snake vs Block的游戏,他总觉得他自己玩出的不是最优解,但是他忙于享受游戏的乐趣,只好请你帮忙找出最优解. S ...

  4. 『动善时』JMeter基础 — 49、使用JMeter自身代理录制APP测试脚本

    目录 1.测试计划内包含的元件 2.HTTP代理服务器的设置内容 3.设置手机的代理服务器 4.录制脚本 5.查看录制的脚本 6.HTTP代理服务器的排除模式 7.保存脚本 8.注意坑点 录制脚本只不 ...

  5. Springboot集成Spring Security实现JWT认证

    我最新最全的文章都在南瓜慢说 www.pkslow.com,欢迎大家来喝茶! 1 简介 Spring Security作为成熟且强大的安全框架,得到许多大厂的青睐.而作为前后端分离的SSO方案,JWT ...

  6. 在vue中下拉框切换事件中改新建表单中的一个值,页面不显示

    事件中改新建表单中的一个值,页面不显示,当另一个对象值发生改变时,这个页面上的值才会显示 由于新建表单是弹窗,在弹出时会重新给每个字段重新赋值,在赋值时没给这个字段赋值(常见新加功能时,加了一个字段, ...

  7. MVC,MVVM模式的理解

    基本上,我们的产品就是通过接口从数据库中读取数据,然后将数据经过处理展示到用户看到的视图上.当然我们还可以从视图上读取用户的输入,然后通过接口写入到数据库.但是,如何将数据展示到视图上,又如何将用户的 ...

  8. 二、RabbitMQ 进阶特性及使用场景 [.NET]

    前言 经过上一篇的介绍,相信大家对RabbitMQ 的各种概念有了一定的了解,及如何使用RabbitMQ.Client 去发送和消费消息. 特性及使用场景 1. TTL 过期时间 TTL可以用来指定q ...

  9. AWS上创建EKS(K8S)集群

    1.注意事项及准备工作 EKS分为EKS Master和EKS Node两种角色;EKS Master为全托管,EKS Node为CloudFormation创建 EKS Node若在NAT网络里,一 ...

  10. Linux中cut,sort,uniq和wc的用法

    一.cut是一个选取命令,就是将一段数据经过分析,取出我们想要的.一般来说,选取信息通常是针对"行"来进行分析的,并不是整篇信息分析的.1.语法格式为:cut [-bn] [fil ...