代码：

 <!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. Spring Security（二）：一、Preface（前言）

    Spring Security is a powerful and highly customizable authentication and access-control framework. I ...

  2. Vue bus的使用（兄弟｜非父子组件传值）-->可以使用一个空的Vue实例作为中央事件总线new Vue()

    1.在main.js中注册全局的bus  Vue.prototype.bus=new Vue(); 2.在组建中使用 子组建使用:this.bus.$emit('自定义事件名',data) metho ...

  3. 面试(一)-HashMap

    一.前言       其实这一面来的挺突然,也是意想不到的,这个要起源于BOSS直聘,很巧,其实也算是一种缘分吧,谢谢BOSS那个哥们,还是那句话来滨江我请你吃饭,身怀感激你总会遇到帮助你的人,只是这 ...

  4. Centos7 安装 Redis

    关闭防火墙:systemctl stop firewalld.service #停止firewallsystemctl disable firewalld.service #禁止firewall开机启 ...

  5. 【转载】KETTLE集群搭建

    一.集群的原理与优缺点 1.1集群的原理 Kettle集群是由一个主carte服务器和多个从carte服务器组成的,类似于master-slave结构,不同的是’master’处理具体任务,只负责任务 ...

  6. hibernate坑边闲话2

    threw exception [Request processing failed; nested exception is org.springframework.orm.hibernate5.H ...

  7. Python之列表

    一.列表的特点 列表也是一种数据类型 列表元素是有序的,有编号的 列表元素的下标从0开始 列表中的每一个值叫一个元素,编号叫下标(索引/角标): stu_name=['崔海龙','杨帆','lrx', ...

  8. 牛客OI周赛8-普及组

    https://ac.nowcoder.com/acm/contest/543#question A. 代码: #include <bits/stdc++.h> using namespa ...

  9. vue 开发依赖安装

    安装element-ui yarn add element-ui --save 使用element-ui main.js import Vue from 'vue'; import ElementUI ...

  10. Failure to transfer org.apache.maven:maven-archiver:pom:2.5 from https://repo.maven.apache.org/maven2 was cached in the local repository, resolution will not be reattempted until the update interval o

    pom.xml报错: Failure to transfer org.apache.maven:maven-archiver:pom:2.5 from https://repo.maven.apach ...