Bootstrap3基础 clearfix pull-left/right 辅助类样式快速左右浮动

内容	参数
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 辅助类样式快速左右浮动的更多相关文章

bootstrap-响应式图片、辅助类样式
响应式图片: <div class="container">  <div class=&qu ...
css基础-css选择器和css文本样式相关
css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式链接伪类的顺序 : ...
Html 常见标签,css基础样式,css的浮动和清流,浏览器的兼容
1.html模板<!DOCTYPE html><html><head> <meta charset="UTF-8"> <tit ...
CSS样式快速入门
CSS样式快速入门前言前端基础的博客主要分为HTML.CSS和JavaScript,本类博客主要用于记录博主的学习过程和分享学习经验,由于博主学识浅薄,经验不足,难免会出现错误,欢迎大家提出问题. ...
Bootstrap3基础 text-muted/success... 辅助类样式情景文本颜色
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
Bootstrap3基础 caret 辅助类样式下拉的小三角
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
Bootstrap3基础 bg-danger/info... 辅助类样式背景文本颜色
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
Bootstrap3基础栅格系统 col-md-push/pull 向左、右的浮动偏移
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
Bootstrap3基础 btn-primary/warning... 三类按钮的六种样式
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...

随机推荐

React-Native组件之Text内文字垂直居中方案
style: { height: 100, textAlign: 'center', textAlignVertical: 'center', } 以上方法在Android上显示水平垂直居中, 但在I ...
c#Stream学习笔记
C# 温故而知新:Stream篇(—) http://www.cnblogs.com/JimmyZheng/archive/2012/03/17/2402814.html 基本概念重点看这一篇. 什么 ...
Unity shader学习之标准的Unity shader
包含光照,可处理多个光源,有光照衰减和阴影的shader,代码如下: 转载请注明出处:http://www.cnblogs.com/jietian331/p/7199311.html Shader & ...
《大话设计模式》c++实现抽象工厂模式
为了更清晰地理解工厂方法模式,需要先引入两个概念: 产品等级结构 :产品等级结构即产品的继承结构,如一个抽象类是电视机,其子类有海尔电视机.海信电视机.TCL电视机,则抽象电视机与具体品牌的电视机之间 ...
hdu1757 构造矩阵
Lele now is thinking about a simple function f(x). If x < 10 f(x) = x.If x >= 10 f(x) = a0 * f ...
Java基础(basis)-----关键字break、continue、return的区别
1.break break只能用于switch语句和循环语句中,跳出当前循环:但是如果是嵌套循环, 则只能跳出当前的这一层循环,只有逐层break才能跳出所有循环 for (int i ...
Java基础语法（二）
五.运算符 *算术运算符 *赋值运算符 *关系运算符 *逻辑运算符 *位运算符 *三目运算符算术运算符 *+,-,*,/都是比较简单的操作 *+的几种作用: 加法正数字符串连接符 *除法的时候要 ...
最小二乘法的Java实现
最小二乘法原理十分简单,这里不再赘述.对于预测公式y' = a * x + b,最优解如下 double a = Sxy / Sxx; double b = yAvg - a * xAvg; doub ...
PHP 取302跳转后真实 URL 的两种方法
1 . 第一种,CURL形式[感觉处理略慢,代码偏多] $url = '将跳转的URL'; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url) ...
RBAC
什么是rbac? -- 基于角色的权限控制 Role-Based Access Control 一个url就代表一个权限 // url分配给角色,角色分配给用户 -- 6个model,4张表菜单表 ...

Bootstrap3基础 clearfix pull-left/right 辅助类样式 快速左右浮动

code

result

more knowledge

resource

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

随机推荐

热门专题

Bootstrap3基础 clearfix pull-left/right 辅助类样式快速左右浮动

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