栅格系统（使用最新版本bootstrap）

　　　　Grid options(网格配置)

　　　　Responsive classes（响应式class）

　　　　Gutters（间距）

　　　　Alignment（对齐方式）

　　　　Reordering（排序）

　　　　Offsetting（位置间距）

<html>

    <head>

        <meta charset="utf-8">

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

        <title></title>

        <style type="text/css">

            .col{

                border:1px solid black;

            }

        </style>

    </head>

    <body>

        <div id="" class="container">

            <div id="" class="row" >

                <div id="" class="col">aaa</div>

                <div id="" class="col">bbb</div>

                <div id="" class="col">ccc</div>

            </div>

            <div class="row">

                <!--sm、md、lg、xl-->

                <div class="col-sm">ddd</div>

                <div class="col-sm">eee</div>

                <div class="col-sm">fff</div>

            </div>

        </div>

    </body>

</html>

　　效果如下：

　　

　　

　　

　　

　　　　...

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

  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之栅格系统

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

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

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

  8. Bootstrap(5)栅格系统

    一．移动设备优先 在 HTML5 的项目中,我们做了移动端的项目.它有一份非常重要的 meta,用于设置屏幕和设备等宽以及是否运行用户缩放,及缩放比例的问题. //分别为:屏幕宽度和设备一致.初始缩放 ...

  9. Bootstrap学习--栅格系统

    响应式布局页面:即同一套页面可以兼容不同分辨率的设备. Bootstrap依赖于栅格系统实现响应式布局,将一行均分为12个格子,可以指定元素占几个格子. 实现过程 1.定义容器,相当于之前的table ...

  10. BootStrap的栅格系统的基本写法（布局）

    代码如下: <!DOCTYPE html> <html> <head> <title>BootStrap的基础入门</title> < ...

随机推荐

  1. 常用的jquery 中一些js

    目录: 1.验证用户登录信息 2. 获取下拉框所选中的元素 3.  动态获取 id 和对应文本框的值  4. table 中 tr  的隐藏 5 . 更换图片  6. ajax  进行提交 7. 判断 ...

  2. 彻底关闭Windows自动更新

    win+r--输入services.msc(服务管理窗口)停止windows update服务并禁用同时在恢复里,改为无操作 win + r --输入gpedit.msc(本地组策略编辑器)家庭版没有 ...

  3. supervisor + celery 的简单配置与报错处理

    ubuntu服务器下使用 supervisor 和 celery supervisor 的卸载过程: sudo apt purge supervisor whereis supervisord如果有用 ...

  4. P3971-[TJOI2014]Alice and Bob【贪心】

    正题 题目链接:https://www.luogu.com.cn/problem/P3971 题目大意 一个\(1\sim n\)的一个排列,设\(a_i\)表示以\(i\)结尾的最长上升子序列长度, ...

  5. HCNP Routing&Switching之路由引入导致的问题及解决方案

    前文我们了解了路由引入相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15359902.html:今天我们来讨论下由于路由引入所导致的问题以及怎么避免此 ...

  6. openlayer 4326与3857坐标互转之Java版

    public class Transform { private static final double PI = Math.PI; private static final double merca ...

  7. （Java）面向对象的三大特征

    封装.继承与多态 封装 封装的作用(好处) 提高程序安全性,保护数据 隐藏代码的实现细节 统一接口 增加系统可维护性 属性私有(关键字private) 加上Private可使该属性私有于一个类,在其他 ...

  8. 洛谷3783 SDOI2017 天才黑客（最短路+虚树+边转点+线段树优化建图）

    成功又一次自闭了 怕不是猪国杀之后最自闭的一次 一看到最短路径. 我们就能推测这应该是个最短路题 现在考虑怎么建图 根据题目的意思,我们可以发现,在本题中,边与边之间存在一些转换关系,但是点与点之间并 ...

  9. 洛谷4103 HEOI2014大工程（虚树+dp）

    又是一道虚树好题啊 我们建出来虚树,然后考虑dp过程,我们分别令\(sum[x],mndis[x],mxdis[x],size[x]\)为子树内的路径长度和,最短链,最长链,子树内关键点个数. 对于一 ...

  10. 2020.3.28-ICPC训练联盟周赛，选用试题：UCF Local Programming Contest 2016

    A.Majestic 10 签到题. #include<iostream> #include<cstdio> #include<cstring> #include& ...