代码：

 <!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. P2251 质量检测--洛谷luogu

    传送门 题目描述 为了检测生产流水线上总共N件产品的质量,我们首先给每一件产品打一个分数A表示其品质,然后统计前M件产品中质量最差的产品的分值Q[m] = min{A1, A2, ... Am},以及 ...

  2. express+vue+mongodb+session 实现注册登录

    上个月写了一篇文章是 express+mongodb+vue 实现增删改查. 只是简单的实现了增删改查功能,那么今天是在那个基础之上做了扩展,首先实现的功能有如下: 1. 支持注册,登录功能,用户可以 ...

  3. Ubuntu18.04安装英伟达显卡驱动

    前几天买了一张RTX2060显卡,想自学一下人工智能,跑一些图形计算,安装Ubuntu18.04后发现英伟达显卡驱动安装还是有点小麻烦,所以这里记录一下安装过程,以供参考: 1.卸载系统里低版本的英伟 ...

  4. git pull 解决 refusing to merge unrelated histories 错误

    解决办法: 1.cmd进入项目的根目录. 2.执行下面的命令:git pull origin master --allow-unrelated-histories.可以提交成功. 3.再次push.

  5. ML.NET 示例：推荐之场感知分解机

    写在前面 准备近期将微软的machinelearning-samples翻译成中文,水平有限,如有错漏,请大家多多指正. 如果有朋友对此感兴趣,可以加入我:https://github.com/fei ...

  6. 如果IBM再给我一次实习机会

    2014年,我拿到了IBM斯图加特R&D的实习机会.在连续被索尼和博世拒掉之后,这个实习对我来说弥足珍贵.我学的是通信专业,在这之前与编程相关的活动只有一学期的安卓Lab,还是靠抱队友大腿才及 ...

  7. 【Java并发.5】基础构建模块

    本章会介绍一些最有用的并发构建模块,有丶东西(最后一小节,纯干货). 5.1 同步容器类 同步容器类包括 Vector 和 Hashtable ,这些类实现线程安全的方式是:将它们的状态封装起来,并对 ...

  8. vue 生产环境 background 背景图不显示原因

    通常我们使用img标签引入文件,npm run build 打包后 ,因为img为html标签,打包后他的路径是由index.html开始访问的,他走static/img/'图片名'是能正确访问到图片 ...

  9. koa服务器搭建基础

    之前我一直使用rails搭建网站.rails与koa的基本理念很相似,都是基于中间件提供一层层的服务.所不同的是,rails有很多内置的中间件,这使得开发者只需要关注MVC模块以及页面路由.而Koa这 ...

  10. Mysql多实例之mysql服务脚本

    1. #init port=3306 mysql_user="root" mysql_pwd="cancer" CmdPath="/applicati ...