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 ...
随机推荐
- linux 启动springboot项目
1.启动 nohup java -jar train-manager.jar --spring.profiles.active=test > out.log & 2.查看进程 ps -e ...
- asp.net core1.1的PlatformAbstraction源码
PlatformAbstraction类在现在的asp.net core中已经废弃了,但是此类的设计还是不错的,可以借鉴,源码如下: namespace Microsoft.Extensions.Pl ...
- selenium3 调用IE Unable to get browser
本地环境开发,移至服务器上出现Unable to get browser的问题.经过查找找到问题所在(第六点,需要修改注册表增加键): 1.下载IEDriverServer.进入索引页,首先选择版本号 ...
- Android应用程序支持不同屏幕(尺寸、密度)
how to build a user interface using Android layouts for all types of devices 使用Android布局设计的UI接口用于不同的 ...
- MyBatis(10)使用association进行分步查询
(1)接口中编写方法 public Emp getEmpByStep(Integer id); public Dept getDeptById(Integer id); (2)Mapper文件 < ...
- linux的一些基础命令
Linux是基于Unix的开源免费的操作系统,是部署服务器的很好选择. 系统:win10 工具:vm虚拟机+Xshell/CRT 虚拟机的系统为linux centos 7 首先看一下linux的基 ...
- textarea--去掉空格的办法
我在初次用到textarea多行文本框时,遇到的问题是:默认出现了两行空格,如图: 代码是(错误的写法): 最后才发现,原来是: textarea标签是需要写在同一行,不能换行,正确的写法:
- php7安装php-redis扩展
注:操作系统10.13.3 版本,其他版本的Mac系统应该也是可以的 先安装 按照顺序在命令行执行下面命令,如果当前用户权限不够的话,执行命令加上 sudo cd /usr/local/Cellar ...
- List集合和JSON互转工具类
public class JsonListUtil { /** * List<T> 转 json 保存到数据库 */ public static <T> String list ...
- Java基础实训