代码：

 <!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. 2、原生jdbc的dao模式

    一.dao模式 (data access object)1.作用:持久层,专门操作数据的层次结构,不掺杂任何的业务和其他内容2.dao组成部分: a.数据库工厂类 b.数据实体类 javabean p ...

  2. 吴恩达课后作业学习2-week2-优化算法

    参考:https://blog.csdn.net/u013733326/article/details/79907419 希望大家直接到上面的网址去查看代码,下面是本人的笔记 我们需要做以下几件事:  ...

  3. Java 中常见的数据结构

    1.数据结构有什么作用? 当使用 Java 里面的容器类时,你有没有想过,怎么 ArrayList 就像一个无限扩充的数组,也好像链表之类的.很好使用,这就是数据结构的用处,只不过你在不知不觉中使用了 ...

  4. ModelViewSet 路由 / django logging配置 / django-debug-toolbar使用

    一.ModelViewSet 路由 因为我们正在使用ViewSet代替View,实际上已经不再需要自己来设计URL的配置了.将资源和视图.URL绑定到一起是一个可以自动完成的过程,只需要使用Route ...

  5. ajax全局事件

    作用:当你的页面存在很多ajax事件的话,我们有一些信息是公共的,可以复用,我们可以用全局事件进行编写,因为每一个ajax事件调用,都会触发ajax全局事件. jquery的ajax方法的全部全局事件 ...

  6. ASP.NET Core 与支付宝开发文档

    一.目录 ASP.NET Core 2.0 使用支付宝PC网站支付 ASP.NET Core 2.0 支付宝当面付之扫码支付 常见使用问题解答 已有多个公司数个项目用本组件并上线,稳定使用. 二.项目 ...

  7. 从 0 到 1 实现 React 系列 —— 4.setState优化和ref的实现

    看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...

  8. H5 69-清除浮动方式四

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Achievements

    看了Suma,觉得懂了85%以上. 两个月可以学这么多.方法是不懂的就学就行了. 最近学了:字符串,网络流,线段树,斯特林反演,多项式与生成函数,一些数论等.

  10. JS 作用域及作用域链

    一.作用域 在 Javascript 中,作用域分为 全局作用域 和 函数作用域 全局作用域: 代码在程序的任何地方都能被访问,window 对象的内置属性都拥有全局作用域. 函数作用域: 在固定的代 ...