栅格系统（使用最新版本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. css布局宽度自适应

    随着各种终端的不断涌现,网页中的元素适应不同的分辨率变得特别重要,根据经验,涉及到宽度自适应的一共有四种情况: 左端固定,右边自适应:右端固定,左边自适应:两端固定,中间自适应:中间固定,两端自适应. ...

  2. 整理常用的 vim 命令

    vim 是一款功能强大的文本编辑器,它是Linux下常用的编辑器之一,对于熟练掌握了 vim 的人来说,用它编辑文件,方便又快捷,能极大的提高工作效率 vim 功能强大,对应的命令也非常的多,对于初学 ...

  3. Visual Studio Code (VSCode) 配置 C/C++ 开发编译环境

    前言 工作多年,突然发现很多C++的基础都忘记了,加之C++不断更新换代后的各种新特性,于是想重拾C++的基础学习.虽然现在工作都是Linux平台,但考虑到个人方便,自己也仅仅想重温语法,家里家外都可 ...

  4. 10-Java中共享内存可见性以及synchronized和volatile关键字

    Java中共享变量的内存可见性 我们首先来看一下在多线程下处理共享变量时Java的内存模型,如图所示 Java内存模型规定,将所有的变量都存放在主存中,当线程使用变量的时候,会把主内存里面的变量赋值到 ...

  5. 如何基于Jupyter notebook搭建Spark集群开发环境

    摘要:本文介绍如何基于Jupyter notebook搭建Spark集群开发环境. 本文分享自华为云社区<基于Jupyter Notebook 搭建Spark集群开发环境>,作者:apr鹏 ...

  6. Ysoserial Commons Collections2分析

    Ysoserial Commons Collections2分析 About Commons Collections2 CC2与CC1不同在于CC2用的是Commons Collections4.0; ...

  7. SpringBoot如何实现定时任务

    写在前面 SpringBoot创建定时任务的方式很简单,主要有两种方式:一.基于注解的方式(@Scheduled)二.数据库动态配置.实际开发中,第一种需要在代码中写死表达式,如果修改起来,又得重启会 ...

  8. React Native之新架构中的Turbo Module实现原理分析

    有段时间没更新博客了,之前计划由浅到深.从应用到原理,更新一些RN的相关博客.之前陆续的更新了6篇RN应用的相关博客(传送门),后边因时间问题没有继续更新.主要是平时空余时间都用来帮着带娃了,不过还是 ...

  9. 看动画学算法之:平衡二叉搜索树AVL Tree

    目录 简介 AVL的特性 AVL的构建 AVL的搜索 AVL的插入 AVL的删除 简介 平衡二叉搜索树是一种特殊的二叉搜索树.为什么会有平衡二叉搜索树呢? 考虑一下二叉搜索树的特殊情况,如果一个二叉搜 ...

  10. 如何做好 NodeJS 框架选型？

    作为一个有一定工作经验的工程师,工作中经常会遇到技术选型的问题.比如当我们在工作中需要使用到 NodeJS 时,第一个要解决的问题就是如何选择一个合适的框架. 不同的框架有不同的特点,如果我们仅仅从框 ...