代码：

 <!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. java xml文件中相同Id遍历

    import java.io.File;import java.util.List;import org.dom4j.Document;import org.dom4j.DocumentExcepti ...

  2. PHP 5 全局变量 - 超全局变量

    PHP 全局变量 - 超全局变量 PHP 中的许多预定义变量都是“超全局的”,这意味着它们在一个脚本的全部作用域中都可用.在函数或方法中无需执行 global $variable; 就可以访问它们. ...

  3. ORA-27154: post/wait create failed ORA-27300 ORA-27301 ORA-27302

    今天刚装了Oracle 11g,配制好了之后启动数据库时遇到下面的错误:SQL> startupORA-27154: post/wait create failedORA-27300: OS s ...

  4. Python 绑定 C，C++ 参考工具介绍

    https://wiki.python.org/moin/IntegratingPythonWithOtherLanguages 完.

  5. upper_bound

    头文件: #include<algorithm> 作用: 查找第一个大于给定数的元素或位置 在从小到大的排序数组中, 1.容器 (1).返回元素 #include<cstdio> ...

  6. # 20175329 2018-2019-2 《Java程序设计》 第二周学习总结

    学号 2018-2019-3<Java程序设计>第二周学习总结 教材学习内容总结      第二三章与我们所学习的C语言有很多的相似点,在这里我想主要就以我所学习的效果来讨论一下JAVA与 ...

  7. Java多线程（十）——线程优先级和守护线程

    一.线程优先级的介绍 java 中的线程优先级的范围是1-10,默认的优先级是5.“高优先级线程”会优先于“低优先级线程”执行. java 中有两种线程:用户线程和守护线程.可以通过isDaemon( ...

  8. 给大家推荐8个SpringBoot精选项目

    前言 2017年,曾在自己的博客中写下这样一段话:有一种力量无人能抵挡,它永不言败生来倔强.有一种理想照亮了迷茫,在那写满荣耀的地方. 如今2018年已过大半,虽然没有大理想抱负,但是却有自己的小计划 ...

  9. 微信小程序—如何获取用户输入文本框的值

    我们就拿简单常用的登录来举例子吧,先看最终效果图片

  10. centos7 安装phpmyadmin

    1.先安装epel,不然安装pgpmyadmin时会出现找不到包. yum install epel-release rpm -ivh http://rpms.famillecollet.com/en ...