栅格系统（使用最新版本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. MySQL&ES连接池

    数据库的连接池建议放在类似settings.py的配置模块中,因为基本都是配置项,方便统一管理. 1) 连接池类#settings.py import os from DBUtils.PooledDB ...

  2. YbtOJ#631-次短路径【左偏树,最短路】

    正题 题目链接:https://www.ybtoj.com.cn/contest/114/problem/1 题目大意 给出\(n\)个点\(m\)条边的一张无向图,对于每个点\(i\)求不经过\(i ...

  3. 关于mysql基础

    早就想把自己的数据库基础巩固一下,然而一直没有时间,今天终于抽出时间对mysql数据库基础进行了学习与扩展. mysql与其他数据库的区别 Sqlite: 开源免费,体积小,单文件,没有进程.磁盘读性 ...

  4. 浏览器输入URL之后，HTTP请求返回的完整过程

    1.输入url,按下回车时,先做一个redirect(重定向),因为浏览器可能记录本机的地址已经永久跳转成新的地址,所以一开始浏览器就先要判断下需不需要重定向,以及重定向到哪里:2.然后第二步就是看A ...

  5. Go语言之数组与切片基础

    一.数组 数组是同一类型元素的集合,可以放多个值,但是类型一致,内存中连续存储 Go 语言中不允许混合不同类型的元素,而且数组的大小,在定义阶段就确定了,不能更改 1.数组的定义 // 定义一个大小为 ...

  6. 前端规范之Git工作流规范（Husky + Comminilint + Lint-staged）

    代码规范是软件开发领域经久不衰的话题,几乎所有工程师在开发过程中都会遇到或思考过这一问题.而随着前端应用的大型化和复杂化,越来越多的前端团队也开始重视代码规范.同样,前段时间,笔者所在的团队也开展了一 ...

  7. Linux下Electron loadURL报错 ERR_FAILED(-2) Not allowed to load local resource

    Linux下Electron loadURL报错 ERR_FAILED(-2) Not allowed to load local resource 背景 使用electron-vue的时候,窗体创建 ...

  8. linux启动redis命令

    首先进入到/usr/local/bin目录下(因为你redis安装的目录绝大多数都在这里) root@xxxx:/usr/local/bin#:redis-server wangconfig/redi ...

  9. 学习笔记——不带修序列莫队 （luogu2079）小B的询问

    莫队是一种对于询问的离线算法 时间复杂度:O(\(n \sqrt n\)) 大致思想就是 首先将询问离线,然后对原序列分块,使得每一个\(l和r\)都在一个块里 然后按照左节点排序,若所在的块相等,就 ...

  10. 每日一题，是否存在（c语言）

    每日一题:1.是否存在 是否存在描述猫咪非常喜欢饼干,尤其是字母饼干.现在,她得到一些字母饼干,她希望选择他们中的一些拼写某些单词. 你的任务是确定她是否可以拼出自己想要的单词. 输入输入包含若干测试 ...