内容 参数
  OS   Windows 10 x64
  browser   Firefox 65.0.2
  framework     Bootstrap 3.3.7
  editor   Visual Studio Code 1.32.1  
  typesetting   Markdown

 

code

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <!-- IE将使用最新的引擎渲染网页 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 页面的宽度与设备屏幕的宽度一致

         初始缩放比例 1:1 -->

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

    <title>Demo</title>

    <meta name="author" content="www.cnblogs.com/kemingli">

    <!-- 引入外部bootstrap的css文件(压缩版)，版本是3.3.7 -->

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

    <style type="text/css">

        div.top {

            margin: 0px auto;

            background-color: gray;

            width: 600px;

        }

        div.pull-left {

            background-color: aquamarine;

            width: 200px;

            height: 260px;

        }

        div.pull-right {

            background-color: coral;

            width: 300px;

            height: 260px;

        }

    </style>

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->

    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->

    <!--[if lt IE 9]>

        <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>

        <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

    <![endif]-->

</head>

<body>

    <!-- start : demo -->

    <div class="container">

        <!--

            clearfix：清除浮动

            给父div块加的，恢复其自然高度

            -->

        <div class="top clearfix">

            <div class="pull-left">

                左浮动

            </div>

            <div class="pull-right">

                右浮动

            </div>

        </div>

    </div>

    <!-- end : demo -->

    <!-- NO.1 加载框架依赖的jQuery文件(压缩版)，版本是1.12.4 -->

    <script src="bootstrap/js/jquery.min.js"></script>

    <!-- NO.2 加载Bootstrap的所有JS插件，版本是3.3.7 -->

    <script src="bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

 

result

 

more knowledge

  • bootstrap是响应式框架。

    如果对其中的div块设置固定宽度(宽度数值较大)的话，那么通过变动浏览器的宽度会发现Bug的。

    对此篇博文中的代码进行测试，改动浏览器的宽度，在浏览器很窄的时候，会发现Bug。

 

resource

  • [ 文档 ] getbootstrap.com/docs/3.3
  • [ 源码 ] github.com/twbs/bootstrap
  • [ 源码 ] archive.mozilla.org/pub/firefox/releases/65.0/source/
  • [ 平台 ] www.cnblogs.com
  • [ 平台 ] github.com
  • [ 扩展 - 平台] www.bootcss.com
  • [ 扩展 - 浏览器 ] www.mozilla.org/zh-CN/firefox/developer

 

Bootstrap是前端开源框架，优秀，值得学习。

博文讲述的是V3版本，更为先进的是V4版本。学有余力的话，可作简单地了解。

Firefox是开源的浏览器，优秀，值得关注。

面对开源框架，分析、领悟与应用，能对其进行加减裁化，随心所欲而不逾矩。

博文的质量普通，仅供参考。盲目复制，处处是坑。Think twice before you act(三思而后行)！

Bootstrap3基础 clearfix pull-left/right 辅助类样式 快速左右浮动的更多相关文章

  1. bootstrap-响应式图片、辅助类样式

    响应式图片: <div class="container"> <!-- img-responsive 响应式图片 --> <div class=&qu ...

  2. css基础-css选择器和css文本样式相关

    css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 : ...

  3. Html 常见标签,css基础样式,css的浮动和清流,浏览器的兼容

    1.html模板<!DOCTYPE html><html><head> <meta charset="UTF-8"> <tit ...

  4. CSS样式快速入门

    CSS样式快速入门 前言 前端基础的博客主要分为HTML.CSS和JavaScript,本类博客主要用于记录博主的学习过程和分享学习经验,由于博主学识浅薄,经验不足,难免会出现错误,欢迎大家提出问题. ...

  5. Bootstrap3基础 text-muted/success... 辅助类样式 情景文本颜色

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  6. Bootstrap3基础 caret 辅助类样式 下拉的小三角

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  7. Bootstrap3基础 bg-danger/info... 辅助类样式 背景文本颜色

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  8. Bootstrap3基础 栅格系统 col-md-push/pull 向左、右的浮动偏移

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  9. Bootstrap3基础 btn-primary/warning... 三类按钮的六种样式

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

随机推荐

  1. Python记录6：函数2，函数参数

    # 一. 函数参数分为两大类 # 形参:在函数定义阶段括号定义的参数(变量名),称之为形式参数         #因为函数定义阶段只是用一个符号表示表示一个参数,并没有具体的值,所以称之为形式参数,形 ...

  2. [15]Windows内核情景分析 --- 权限管理

    Windows系统是支持多用户的.每个文件可以设置一个访问控制表(即ACL),在ACL中规定每个用户.每个组对该文件的访问权限.不过,只有Ntfs文件系统中的文件才支持ACL. (Ntfs文件系统中, ...

  3. Day11 多进程与多线程编程

    一.进程与线程 1.什么是进程(process)? An executing instance of a program is called a process. Each process provi ...

  4. UIView的背景颜色

    一个UIColor代表一种颜色,通过UIColor的类方法,可以获得很多常用的颜色 + (UIColor *)blackColor;      // 0.0 white 黑色 + (UIColor * ...

  5. 【Scala学习之二】 Scala 集合 Trait Actor

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk1.8 scala-2.10.4(依赖jdk1.8) spark ...

  6. CBV源码解析

    1.CBV(class based view) 首先定义一个视图函数,用类的方式定义: 举例: class LoginView(View): def get(self,request): return ...

  7. Google Analytics for Firebase 是一款免费的应用评估解决方案，可提供关于应用使用和用户互动情况的数据分析

    Google Analytics for Firebase Google Analytics for Firebase 是一款免费的应用评估解决方案,可提供关于应用使用和用户互动情况的数据分析.Fir ...

  8. Django框架----路由系统（详细）

    Django的路由系统 Django 1.11版本 URLConf官方文档 URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表. ...

  9. multer中间件

    1.Multer是node.js的一个中间件,用于处理multipart/form-data类型的表单数据,它主要用于上传文件.(Multer不会处理任何非multipart/form-data类型的 ...

  10. 基于spring框架的jt项目分页查询知识点(一)

    知识点汇总(一) 1. 点击事件函数 $(function(){ //事件注册,(表示在#pageId对应容器对象的相关子元素中注册click事件) $("#pageId").on ...