内容 参数
  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. ****************VS编码操作实践******************

    下面是今天主要练习的内容: 运用到的内容有 {运算符.强制转换.数据类型的运用.转义字符.变量与常量.基本类型的转换等} 1) 首先我们来看  下列的编码是由三大类组成的 ① 定制变量与常量  蓝色部 ...

  2. HTML5特效收录-不定时更新

    在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.希望能给大大家启发,并且学习. HTML5 Canvas粒 ...

  3. clear/reset select2，重置select2，恢复默认

    4.0 version //方法一$('#yourButton').on('click', function() { $('#yourfirstSelect2').val(null).trigger( ...

  4. tp命名空间

    namespace   Home\Controller;  命名空间   根命名空间下的类所在的文件夹use Think\Controller; 使用   根命名空间下的controller类 顶头写 ...

  5. caffe深度学习进行迭代的时候loss曲线开始震荡原因

    1:训练的batch_size太小 1.       当数据量足够大的时候可以适当的减小batch_size,由于数据量太大,内存不够.但盲目减少会导致无法收敛,batch_size=1时为在线学习. ...

  6. sqlserver字符集问题（中文出乱码，排序错误等）

    在创建sqlserver 数据库时未指定排序字符集,databases则会使用instances的排序规则.为了支持中文,需要设置成Chinese_PRC_CI_AS. (1)通过sql脚本修改 -- ...

  7. vm虚拟机出现Disk启动失败

    https://jingyan.baidu.com/article/a501d80c0e45b8ec630f5ed6.html

  8. 转自大神的KM想法

    我第一次理解KM算法看到大神的讲解不胜感激这km挺神奇的接下来就见识一下这个大牛的吧 转自 http://blog.csdn.net/wuxinxiaohuangdou/article/details ...

  9. Python 1.安装

    Python是一种开源语言,有很多第三方库. 1. Python3 及相关组件下载及安装 a. Python3下载:https://www.python.org/downloads/->点击以下 ...

  10. Python 字典(Dictionary) values()方法

    描述 Python 字典(Dictionary) values() 函数以列表返回字典中的所有值. 语法 values()方法语法: dict.values() 参数 NA. 返回值 返回字典中的所有 ...