响应式布局页面：即同一套页面可以兼容不同分辨率的设备。

Bootstrap依赖于栅格系统实现响应式布局，将一行均分为12个格子，可以指定元素占几个格子。

实现过程

　　1、定义容器，相当于之前的table

　　　　* 容器分类：

　　　　　　1）containe：固定宽度，可能存在留白

　　　　　　2）container-fluid ：100%宽度，无留白

　　2、定义行：相当于之前的tr，样式：row

　　3、定义元素，指定该元素在不同的设备上所占的格子数目。样式：col-设备代号-格子数目

　　　　* 设备代号

　　　　　　xs：超小屏幕    手机（<768px） col-xs-12

　　　　　　sm：小屏幕      平板  （>=768px）

　　　　　　md：中等屏幕   桌面显示器（>=992px）

　　　　　　lg：大屏幕    大桌面显示器（>=1200px）

　　注意事项：

　　　　1）一行中格子数目超过12，则超出部分自动换行

　　　　2）栅格类向上兼容：栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类

　　　　3）若真实设备宽度小于设置栅格类属性设备代码最小值，则一个元素沾满一整行。

　　

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->

    <script src="js/jquery-3.3.1.min.js"></script>

    <!-- 加载 Bootstrap 的所有 JavaScript 插件-->

    <script src="js/bootstrap.min.js"></script>

    <style>

        .inner{

            border: 1px solid blue;

        }

    </style>

</head>

<body>

    <!--定义容器-->

    <div class = "container">

        <!--定义行-->

        <div class = "row">

            <!--定义元素-->

            <div class = "col-lg-1 col-sm-2 inner">栅格1</div>

            <div class = "col-lg-1 col-sm-2 inner">栅格2</div>

            <div class = "col-lg-1 col-sm-2 inner">栅格3</div>

            <div class = "col-lg-1 col-sm-2 inner">栅格4</div>

            <div class = "col-lg-1 col-sm-2 inner">栅格5</div>

            <div class = "col-lg-1 col-sm-2 inner">栅格6</div>

            <div class = "col-lg-1 col-sm-2 inner">栅格7</div>

            <div class = "col-lg-1 col-sm-2 inner">栅格8</div>

            <div class = "col-lg-1 col-sm-2 inner">栅格9</div>

            <div class = "col-lg-1 col-sm-2 inner">栅格10</div>

            <div class = "col-lg-1 col-sm-2 inner">栅格11</div>

            <div class = "col-lg-1 col-sm-2 inner">栅格12</div>

        </div>

    </div>

</body>

</html>

　　

Bootstrap学习--栅格系统的更多相关文章

  1. MVC5 + EF6 + Bootstrap3 (7) Bootstrap的栅格系统

    文章来源: Slark.NET-博客园http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-grid.html 上一节:ASP.NET MVC ...

  2. Bootstrap的栅格系统

    Bootstrap的栅格系统 上一节:ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用 源码下载:点我下载 要做一个完整的系统,除了需要MVC这样的B/S框架及EF这 ...

  3. Bootstrap 12 栅格系统

    栅格系统简介 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列.它包含了易于使用的预定义类,还有强大的mix ...

  4. bootstrap中栅格系统的原理

    1.基本结构 Bootstrap采取12列的栅格体系,根据主流设备的尺寸进行分段,每段宽度固定,通过百分比和媒体查询实现响应式布局. Bootstrap划分了四种尺寸:超小屏(手机).小屏(平板竖屏) ...

  5. bootstrap课程2 bootstrap的栅格系统的主要作用是什么

    bootstrap课程2  bootstrap的栅格系统的主要作用是什么 一.总结 一句话总结:响应式布局(就是适应不同的屏幕,手机,平板,电脑) 1.bootstrap的栅格系统如何使用? row ...

  6. bootstrap 学习笔记（1）---介绍bootstrap和栅格系统

    学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...

  7. Bootstrap之栅格系统

    bootstrap 移动优先 中文官网  http://www.bootcss.com/ 1.基本模板 <!DOCTYPE html> <html lang="en&quo ...

  8. BootStrap学习------栅格

    使用Bootstrap前端框架-栅格 要点 1.使用Bootstrap需要引入的css和js: (1)bootstrap.min.js (2)bootstrap.min.css 2.栅格系统需要通过& ...

  9. 深入理解BootStrap之栅格系统（布局）

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

随机推荐

  1. Sublime Text 自动生成文件头部注释（版权信息）：FileHeader 插件的使用

    (一)安装步骤 1.先安装一个 Package Control 插件.相信大家使用 Sublime 的话都有安装这个了2.Preference -> Package Control -> ...

  2. Java代码输出到txt文件(申请专利贴源码的必备利器)

    最近公司在申请专利,编写不少文档,项目的代码量实在是过于庞大.如果一个一个的复制粘贴虽然能够完成,但是对于程序员而言实在没有这个必要.shell或者python就能解决这个问题.由于我个人对于shel ...

  3. Spring源码分析（七）bean标签的解析及注册

    摘要:本文结合<Spring源码深度解析>来分析Spring 5.0.6版本的源代码.若有描述错误之处,欢迎指正. 在上一篇中提到过Spring中的标签包括默认标签和自定义标签两种,而两种 ...

  4. HDU1753 （大正小数相加）

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1753 大明A+B Time Limit: 3000/1000 MS (Java/Others)    ...

  5. Linux Shell常用技巧(三)

    八. 流编辑器sed: sed一次处理一行文件并把输出送往屏幕.sed把当前处理的行存储在临时缓冲区中,称为模式空间(pattern space).一旦sed完成对模式空间中的行的处理,模式空间中的行 ...

  6. 机器学习练习（一）-使用jupyter notebook

    一个简单的分类机器学习练习,基于sklearn.sklearn是Python中的一个机器学习模块.它其中有数据.非常方便我们用它来训练机器学习的模型,和验证我们的想法.(官方网站:https://sc ...

  7. WPF 绑定StaticResource到控件的方法

    原文:WPF 绑定StaticResource到控件的方法 资源文件内的属性能否直接通过绑定应用到控件?答案是肯定的. 比如,我们要直接把下面的<SolidColorBrush x:Key=&q ...

  8. UOJ UR#9 App管理器

    题目传送门 题目大意大概就是给你一个混合图(既有有向边又有无向边),对于每条无向边,u-v,问删去u->v,或删去v->u那条可以使新图强连通.(保证数据有解). 这道题前几个数据点送分. ...

  9. 洛谷 P1939 【模板】矩阵加速（数列）

    题目描述 a[1]=a[2]=a[3]=1 a[x]=a[x-3]+a[x-1] (x>3) 求a数列的第n项对1000000007(10^9+7)取余的值. 输入输出格式 输入格式: 第一行一 ...

  10. 在ns2.35下完成柯老师lab18实验

    说明:柯志亨老师<ns2仿真实验-----多媒体和无线网络通信>这本书lab18实验为“无线网络封包传输遗失模型”的实验.该无线传输遗失模型是柯老师自己开发的,原始的ns-allinone ...