BootStrap格栅系统
格栅参数分为
超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C
.container 最大宽度 None (自动) 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列(column)数 12
最大列(column)宽 自动 ~62px ~81px ~97px
槽(gutter)宽 30px (每列左右均有 15px)
可嵌套 是
偏移(Offsets) 是
列排序 是
实例代码:
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
这一行 是大屏幕的样式 后面的6是占据的格子数量
格子的数量一行总数是12 那么这个能放连个 然而可以在这个样式中追加(并集选择器)
例如(代码):
<div class="row">
<div class="col-md-6 col-sm-12">.col-md-6</div>
<div class="col-md-6 col-sm-12">.col-md-6</div>
</div>
该段落代码 后方的class 添加是为了自动适应较小屏幕 类似于column的排列方式
图片的自适应样式类为:img-responsive
按钮的样式
<button class="btn btn-primary">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-warning">按钮</button>
<button class="btn btn-danger">按钮</button>
col-md-offset-8 位移列数
更多样式尽在V3.bootstrap.com
BootStrap格栅系统的更多相关文章
- 使用Less/Sass生成Bootstrap格栅样式系统
熟悉Bootstrap的同学应该了解其中的格栅系统,用来排版非常方便.他将页面分为12等分,并且适用不同的尺寸屏幕.超小xs(小于768px),小屏sm(大于等于768px),中屏md(大于等于992 ...
- Bootstrap栅格系统详解,响应式布局
Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...
- Bootstrap 栅格系统(转载)
源地址:http://www.cnblogs.com/linjiqin/p/3559800.html Bootstrap 栅格系统 目录1.简介2.栅格选项3.列偏移4.嵌套列5.列排序 1.简介Bo ...
- Bootstrap栅格系统(布局)
栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...
- 初学bootstrap ---栅格系统
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- bootstrap栅栏系统css中的col-xs-*、col-sm-*、col-md-* 的意义以及 bootstrap一个标签中,同时有 col-xs , col-sm , col-md , col-lg的理解
摘要: bootstrap栅栏系统css中的col-xs-*.col-sm-*.col-md-* 的意义: .col-xs- 超小屏幕 手机 (<768px) .col-sm- 小屏幕 平板 ( ...
- 巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!
摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...
- 入门——Bootstrap栅格系统
作为刚接触到Bootstrap框架的新手一枚,刚开始对Bootstrap中的栅格系统一脸懵逼,后来经过反复的上网查找资料以及自己一直在练习,总算对栅格系统了解个差不多,所以我将我所了解的当成是日记写下 ...
- Bootstrap栅格系统基本使用
1.什么是栅格系统: 在Bootstrap中,它提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.栅格系统用于通过一系列的行(row ...
随机推荐
- 基于Cmake+QT+VS的C++项目构建开发编译简明教程
目录 一.工具下载与安装 1. Qt 2. Visual Studio 2015 3. Cmake 二.C++及Qt项目构建 1. 基于VS构建Qt项目 2. ...
- MySql由于编码问题,存储过程执行出错。
在存储过程后面加了一段话.红色部分 DELIMITER $$ USE `mysql_wispeed01-test1`$$ DROP PROCEDURE IF EXISTS `sp_crebillno` ...
- preventDefault()、stopPropagation()、return false 的区别
preventDefault() e.preventDefault()阻止浏览器默认事件 stopPropagation() e.stopPropagation()阻止冒泡 return false ...
- Springboot 2.x 无法读取yml配置值的问题:Could not resolve placeholder xxx value '${xxx}'
最近在用Springboot2.1 新建demo工程的时候,在DataSourceConfig类中通过 @Value("${spring.datasource.url}") 的方式 ...
- myeclipse中配置自己安装的Tomcat
myeclipse中配置自己安装的Tomcat 在myeclipse中配置好jdk,Tomcat之后,如果是web项目需要部署运行,但在部署时发现配置好的Tomcat没有显示,只显示了myeclips ...
- cnn神经网络入门
1.神经网络最基本的原理也是函数拟合,所以lose function就显得非常重要了,我们训练的目的之一就是减小损失函数,常用的损失函数参考:https://www.cnblogs.com/hypnu ...
- Go语言基础之反射
Go语言基础之反射 本文介绍了Go语言反射的意义和基本使用. 变量的内在机制 Go语言中的变量是分为两部分的: 类型信息:预先定义好的元信息. 值信息:程序运行过程中可动态变化的. 反射介绍 反射是指 ...
- CSS-单位em 和 rem
1,em单位(css3新增单位) em:就是一种长度单位,它是参照当前元素的字号,如果没有设置,就参照父容器,一直到浏览器的默认字号大小 em 是相对长度单位(参照父元素),其参照当前元素字号大小,如 ...
- 四、蛋炒饭(Egg fried rice)
蛋炒饭,是一种常见菜肴.最早的记载见于1972年湖南长沙马王堆汉墓出土的竹简上有关"卵火高"的资料.经专家考证,"卵熇"是一种用黏米饭加鸡蛋制成的食品.有人推断 ...
- 小程序----选择地理位置 ( wx.chooseLocation ) 和 获取地理位置 (wx.getSetting)
问题来了:假如我第一次使用wx.chooseLocation()获取权限被拒绝,然后使用wx.getSetting()来重新获取权限该怎么做呢? 思路:wx.chooseLocation()有fail ...