代码：

 <!DOCTYPE html>

 <html lang="zh">

 <head>

     <meta charset="UTF-8">

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

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

     <title>Bootstrap Demo</title>

 </head>

 <body>

 <h1>Bootstrap网格类</h1>

 <!--默认分为12格-->

 <div>

     <div class="row">

         <div class="col-sm-6">

             <h1 class="page-header">Bootstrap</h1>

             <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>

         </div>

         <div class="col-sm-6">

             <h1 class="page-header">Bootstrap</h1>

             <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>

         </div>

     </div>

     <div class="row">

         <div class="col-sm-8">

             <h1 class="page-header">Bootstrap</h1>

             <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>

         </div>

         <div class="col-sm-4">

             <h1 class="page-header">Bootstrap</h1>

             <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>

         </div>

     </div>

     <!--网格嵌套-->

     <div class="row">

         <div class="col-sm-3">

             <h1 class="page-header">Bootstrap</h1>

             <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>

         </div>

         <div class="col-sm-9">

             <h1 class="page-header">Bootstrap</h1>

             <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>

             <div class="row">

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

                     <h1 class="page-header">Bootstrap</h1>

                     <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>

                 </div>

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

                     <h1 class="page-header">Bootstrap</h1>

                     <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>

                 </div>

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

                     <h1 class="page-header">Bootstrap</h1>

                     <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>

                 </div>

             </div>

         </div>

     </div>

 </div>

 </body>

 </html>

截图：

Bootstrap之网格类的更多相关文章

  1. Bootstrap 4 网格的基本结构

    Bootstrap 4 网格的基本结构 网格类 Bootstrap 4 网格系统有以下 5 个类: .col- 针对所有设备 .col-sm- 平板 - 屏幕宽度等于或大于 576px .col-md ...

  2. bootstrap之排版类

    bootstrap之排版类

  3. 第二百三十六节，Bootstrap辅组类和响应式工具

    Bootstrap辅组类和响应式工具 学习要点: 1.辅组类 2.响应式工具 本节课我们主要学习一下 Bootstrap 的辅组类和响应式工具,辅助类提供了一组类来辅 组页面设计,而响应式工具则利用媒 ...

  4. bootstrap 表单类

    bootstrap 表单类 表单美化 用法: 向父元素 <form role="form"></form>     添加 role="form&q ...

  5. Bootstrap 辅组类和响应式工具

    1.情景文本颜色 //各种色调的字体 <p class="text-muted">Bootstrap 视频教程</p> <p class=" ...

  6. bootstrap中container 类和container-fluid类的区别container类所谓的自适应也是通过margin的改变来完成，container-fluid类的百分百宽度是指在固有的15px的padding前提下宽度总是当前视口的宽度。

    container 类和container-fluid类的区别体现在是否有随视口宽度改变的margin存在. container类所谓的自适应也是通过margin的改变来完成,container-fl ...

  7. Bootstrap常见的类

    一.标题 h1,h2,h3,h4,h5,h6

  8. bootstrap的网格控制

    <div class="container-fluid row m-0 p-0"> <div class="col-2 border"> ...

  9. 【读书笔记《Bootstrap 实战》】6.单页营销网站

    我们已经掌握了很多实用 Bootstrap  的重要技能.现在,是时候拿出更多的创意来帮助客户实现他们全方位在线营销的愿望了.此次将带领大家做一个漂亮的单页高端营销网站. 主要任务如下: □ 一个大型 ...

随机推荐

  1. 6.oop-类和对象

    一.如何抽象对象1.创建一个类2.给该描述属性 属性就是java中所有的数据类型3.给该类定义行为方法 方法的签名是:public void 方法名(){方法体} 公共的 无返回类型 二.如何使用类和 ...

  2. C语言中指针变量的加减运算

    1.指针变量中存放的是地址值,也就是一个数字地址,例如某指针变量中的值是0x20000000,表示表示此指针变量存放的是内存中位于0x20000000地方的内存地址.指针变量可以加减,但是只能与整型数 ...

  3. Java入门篇（五）——字符串/String类

    前面在举例时有出现过String的例子,当时肯定有一部分朋友不知道这个是做什么用的.其实String类是Java中一个比较特殊的类,字符串即String类,它不是Java的基本数据类型之一,但可以像基 ...

  4. SQL Server连接查询之Cross Apply和Outer Apply的区别及用法（转载）

    先简单了解下cross apply的语法以及会产生什么样的结果集吧!示例表: SELECT * FROM tableA CROSS APPLY tableB 两张表直接连接,不需要任何的关联条件,产生 ...

  5. vue引入css的两种方式

    方案1.在main.js中引入方式    import '@/assets/css/reset.css' 方案2.在.vue文件的<style/>标签里面引入    @import &qu ...

  6. 记录一次.Net框架Bug发现和提交过程：.Net Framework和.Net Core均受影响

    SmtpClient一处代码编写错误导致异步发送邮件时DeliveryFormat配置项无法正确工作,异步操作已经完全不受我们设置属性控制了,UTF-8内容(如中文)转不转码完全看对方邮件服务器心情! ...

  7. POST BOY : Restful API 调试工具

    在使用asp.net webapi开发中,一般情况下会使用一些工具来模拟请求. 其中有一款chrome浏览器插件POST MAN比较不错. 但是由于国内google服务使用不稳定,所以我自己写了一个简 ...

  8. 剑指offer--3.从头打印链表

    题目:输入一个链表,按链表值从尾到头的顺序返回一个ArrayList. 思路:可以利用push 和unshift /*function ListNode(x){ this.val = x; this. ...

  9. [loadrunner]通过检查点判定事务是否成功

    //检查点设置语句 //tmp在此时为临时参数  web_reg_find("SaveCount=tmp",   "Text=xxx",   LAST);   ...

  10. Python入门-字符串常用方法

    Python 字符串 字符串是 Python 中最常用的数据类型.我们可以使用引号('或")来创建字符串. 创建字符串很简单,只要为变量分配一个值即可. var1 = 'Hello Worl ...