bootstrap学习（一)栅格、布局

栅格：

栅格将整个屏幕分为12份，当使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内，所有的row必须在container内。

clo-md-* ：中等分辨率
<!-- 第一行分了12份  1:1:1、、、-->

<div class="row">

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

</div>

<!-- 第二行分了两份  8:4   如果屏幕为小屏是，第二份将为等分6:6-->

<div class="row">

  <div class="col-md-8 col-sm-6">.col-md-8</div>

  <div class="col-md-4 col-sm-6">.col-md-4</div>

</div>

<!-- 第三行分了3份  4:4:4 -->

<div class="row">

  <div class="col-md-4">.col-md-4</div>

  <div class="col-md-4">.col-md-4</div>

  <div class="col-md-4">.col-md-4</div>

</div>

<!-- 递四行分了2份  6:6 -->

<div class="row">

  <div class="col-md-6">.col-md-6</div>

  <div class="col-md-6">.col-md-6</div>

</div>

媒体查询：（在特定分辨率的屏幕下显示不同的效果）

//当屏幕（浏览器）宽度大于767时，div的背景颜色就改为red

@media(min-width: 767px){

      div{

          background: red;

      }

}

或

//当屏幕宽度在767px和1176px之间时，div的背景染色为red

@media(min-width: 767px) and (mxa-width: 1176px)

{

    div{ background: red; }

}

栅格的用法：

bootstrap布局

container：会自动更具屏幕的大小调整宽度（具体显示参数，看栅格参数图）

container-fluid：不管什么分辨率，都将会铺满整个屏幕

1、固定布局<div class="container">

<body>

  <div class="container">

    ...

  </div>

</body>

//bootstrap.min.js中的具体代码

//默认外边界左右宽度为自动

.container {

    padding-right: 15px;

    padding-left: 15px;

    margin-right: auto;

    margin-left: auto

}

//屏幕宽度大于768是 container显示宽度为750

@media (min-width: 768px) {

    .container {

        width: 750px

    }

}

//屏幕宽度打野992时，container显示宽度为970

@media (min-width: 992px) {

    .container {

        width: 970px

    }

}

@media (min-width: 1200px) {

    .container {

        width: 1170px

    }

}

2、流式布局<div class="container-fluid">

<div class="container-fluid">

  <div class="row-fluid">

    <div class="span2">

      <!--Sidebar content-->

    </div>

    <div class="span10">

      <!--Body content-->

    </div>

  </div>

</div>

//container-fluid 没有媒体查询，宽度都是自动调整

.container-fluid {

    padding-right: 15px;

    padding-left: 15px;

    margin-right: auto;

    margin-left: auto

}

2、响应式设计

通过在文档中的<head>标签里边添加合适的meta标签并引入一个额外的样式表，即可启用响应式css

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Bootstrap 所支持的几个media queries都放在了一个文件中， 可以让你的项目更灵活的去适应不同设备和屏幕分辨率。包括：

类型    　　布局宽度    　　　　列宽    间隙宽度

大屏幕    　大于等于1200px    70px    30px

默认    　　大于等于980px    　60px    20px

平板    　　大于等于768px      42px    20px

手机到平板  小于等于767px    　　流式列，无固定宽度

手机    　　小于等于480px    　　流式列，无固定宽度

/* 大屏幕 */

@media (min-width: 1200px) { ... }

/* 平板电脑和小屏电脑之间的分辨率 */

@media (min-width: 768px) and (max-width: 979px) { ... }

/* 横向放置的手机和竖向放置的平板之间的分辨率 */

@media (max-width: 767px) { ... }

/* 横向放置的手机及分辨率更小的设备 */

@media (max-width: 480px) { ... }

清除浮动：

//以下情况： md-6 在超小屏幕下，显示为两行（显示为两行是因为浮动）；在小屏幕内显示为1行

<div class="container">

    <div class="row">

        <div class="col-xs-6 col-sm-3">aaa</div>

        <div class="col-xs-6 col-sm-3">aaa</div>

        <div class="col-xs-6 col-sm-3">aaa</div>

        <div class="col-xs-6 col-sm-3">aaa</div>

    </div>

</div>
以上为正常显示

//当第一个div中的内容过长时，他会向下扩展，会占用第三个div的位置，导致第三个div占用第四个div的位置。整体显示为三行内容

<div class="container">

    <div class="row">

        <div class="col-xs-6 col-sm-3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

        <div class="col-xs-6 col-sm-3">aaa</div>

        <div class="col-xs-6 col-sm-3">aaa</div>

        <div class="col-xs-6 col-sm-3">aaa</div>

    </div>

</div>
想要清除这种情况  ，需要在第三个div前加入清除浮动样式

<div class="clearfix visible-xs"></div>

官方：https://v3.bootcss.com/css/#grid

bootstrap学习（一)栅格、布局的更多相关文章

BootStrap学习之栅格布局
Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的改变,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin用于生成更具语 ...
bootstrap（关于栅格布局）
栅格系统是通过行(.row)与列(column)的组合一起来创建页面布局的,所以只有列(column)可以作为行(row)的直接子元素,我们所要写的内容可以放在列里(column),不过在行的外层还需 ...
【Bootstrap】框架栅格布局系统设计原理
前提条件(Bootstrap 自带) 首先使用这个布局之前要定义一下代码: 这行代码如果不懂,可以搜索一下,总之大致意思就是,被定义的元素的内边距和边框不再会增加它的宽度,不加入的话排版会有问题. 不 ...
BootStrap学习02栅格系统
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Bootstrap学习笔记-栅格系统
栅格系统的原理就是在这个界面中这个栅格被分成12个格子,你根据自己的想要的布局就把这个界面分割成你想要的部分就行了.一般如果我们用电脑作为显示器的我们用的样式是col-md 如果你用的显示期变小的情况 ...
bootstrap -- 学习之流动布局
Grid是什么? Grid 翻译成中文是格栅系统,不过还是不好理解,理解为一行12个格子可能更容易些.Grid可以把一行内容最多分成12个格子,而且可以根据需要来合并这12个格子中的其中某些格子.下面 ...
bootstrap栅格布局学习历程
了解一个东西.他叫什么?他由什么组成,能做什么? 现在响应式的网站(在不同分辨率下有不同的布局)很瘦欢迎.优点:1.解决设备之间的差异化展示缺点:a.兼容性代码多,工作量大,加载速度受到影响;b.用户 ...
bootstrap 学习笔记（1）---介绍bootstrap和栅格系统
学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...
bootstrap学习总结-02 网格布局
1 网格布局 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. <!DOCTYPE html> ...
Bootstrap 框架栅格布局系统设计原理
如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下 ...

随机推荐

配置spring的监听器让spring随项目的启动而启动
 <listener> <listener-class>org.springframew ...
linux shell通配符及if语句判断
$# 是传给脚本的参数个数 $0 是脚本本身的名字$1 是传递给该shell脚本的第一个参数$2 是传递给该shell脚本的第二个参数$@ 是传给脚本的所有参数的列表$* 是以一个单字符串显示所有向脚 ...
【CSA49G】【XSY3315】jump DP
题目大意有一个数轴.yww 最开始在位置 $0$.yww 总共要跳跃很多次.每次 yww 可以往右跳 $1$ 单位长度,或者跳到位置 $1$. 定义位置序列为 yww 在每次跳跃之后所在 ...
PWA 渐进式Web应用程序 - 解释
想象一下,如果一个网站上所有的功能都能够作为一个移动应用程序为用户所用——任何设备上都可以使用.可接收所有的通知.离线模式可用,为了实现这个愿景,2015年,谷歌创造了渐进式Web应用程序(PWA). ...
Centos下MariaDB操作
MariaDB简介 MariaDB是mysql数据库的一个分支,操作几乎和mysql一样 MariaDB安装.启动.停止 # 安装 yum -y install mariadb mariadb-ser ...
webp图片技术调研最终结论(完全真实数据可自行分析)
关于webp图片格式调研及测试资料收集什么是 WebP? WebP(发音 weppy),是一种支持有损压缩和无损压缩的图片文件格式,派生自图像编码格式 VP8.根据 Google 的测试,无损压缩 ...
GWAS群体分层校正，该选用多少个PCA
前言关于选用多少个PCA做群体分层校正,各大期刊并没有一个统一的说法. 故做了如下综述. 1 随心所欲型,想选多少就选多少 PCA想选多少就选多少,这个真的不是开玩笑.有文献出处有真相! 比如下面文 ...
二、Tensorflow的作用域和图
作用域主要用来不用重复定义变量,另外就是用与画图 import tensorflow as tf ''' 可视化 tf.summary.scalar 添加一个标量 tf.summary.audio 添 ...
mysql全局权限账户%登录不上ERROR 1045 (28000): Access denied for user 'mhz'@'localhost' (using password: YES)
mysql全局权限账户%登录不上ERROR 1045 (28000): Access denied for user 'mhz'@'localhost' (using password: YES) 解 ...
DirectX11--深入理解与使用缓冲区资源
前言在Direct3D 11中,缓冲区属于其中一种资源类型,它在内存上的布局是一维线性的.根据HLSL支持的类型以及C++的使用情况,缓冲区可以分为下面这些类型: 顶点缓冲区(Vertex Buff ...