格栅参数分为
超小屏幕 手机 (<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格栅系统的更多相关文章

  1. 使用Less/Sass生成Bootstrap格栅样式系统

    熟悉Bootstrap的同学应该了解其中的格栅系统,用来排版非常方便.他将页面分为12等分,并且适用不同的尺寸屏幕.超小xs(小于768px),小屏sm(大于等于768px),中屏md(大于等于992 ...

  2. Bootstrap栅格系统详解,响应式布局

    Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...

  3. Bootstrap 栅格系统(转载)

    源地址:http://www.cnblogs.com/linjiqin/p/3559800.html Bootstrap 栅格系统 目录1.简介2.栅格选项3.列偏移4.嵌套列5.列排序 1.简介Bo ...

  4. Bootstrap栅格系统(布局)

    栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...

  5. 初学bootstrap ---栅格系统

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 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- 小屏幕 平板 ( ...

  7. 巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!

    摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...

  8. 入门——Bootstrap栅格系统

    作为刚接触到Bootstrap框架的新手一枚,刚开始对Bootstrap中的栅格系统一脸懵逼,后来经过反复的上网查找资料以及自己一直在练习,总算对栅格系统了解个差不多,所以我将我所了解的当成是日记写下 ...

  9. Bootstrap栅格系统基本使用

    1.什么是栅格系统: 在Bootstrap中,它提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.栅格系统用于通过一系列的行(row ...

随机推荐

  1. Linux-网络综合实验

    题目要求:财务部门有俩台机器acc-1和acc-2,it部门有俩台机器it-2和it-2,要求acc机器互通,it机器互通,财务部和it部机器通过路由器互通

  2. Linux入门级

    Linux及其发行版 我安装过的Linux发行版centOS.Kali.Ubuntu.rebHat. Reference Linux发行版排行榜 开源协议 Reference 开源协议 场景 说明一个 ...

  3. 本地的jar包添加到maven库中 jdbc举例

    1.配置(检查)Java环境变量 2.配置(检查)maven环境变量 3.找到maven文件的根目录下的config目录,修改setting.xml文件 配置maven本地仓库 <!-- loc ...

  4. Windows10用fiddler抓包Android应用(解决手机设置代理后无法上网,设置只抓app包)

    1.环境准备 1.电脑上安装fiddler 2.手机和电脑在同一个局域网内 2.设置 1.fiddler>Tools>Fiddler Options>Connections 勾选Al ...

  5. 执行grunt命令报错 Cannot find module 'coffee-script'

    Failed to list grunt tasks in yudian-frontend-salesplatform\Gruntfile.js: process finished with exit ...

  6. Go语言基础之结构体

    Go语言基础之结构体 Go语言中没有“类”的概念,也不支持“类”的继承等面向对象的概念.Go语言中通过结构体的内嵌再配合接口比面向对象具有更高的扩展性和灵活性. 类型别名和自定义类型 自定义类型 在G ...

  7. 读取Excel文件存储在实体类中

    1.Maven文件 <!--读取Excel的架包--> <dependency> <groupId>org.apache.poi</groupId> & ...

  8. Vue(MVVM)、React(MVVM)、Angular(MVC)对比

    前言 昨天阿里内推电面一面,面试官了解到项目中用过Vue,就问为什么前端框架使用Vue而不适用其他的框架,当时就懵了.因为只用过Vue,不了解其他两个框架,今天就赶紧去了解一下他们之间的区别.大家发现 ...

  9. vue三级联动

    <select @change="getArea(province_id,1)" v-model="province_id"> <option ...

  10. Hadoop 学生平均成绩

    1.实例描述 通过一个计算学生平均成绩的例子来讲解开发MapReduce程序的流程.输入文件都是纯文本文件,输入文件中的每行内容均为一个学生的姓名和他相应的成绩,如果有多门学科,则每门学科为一个文件. ...