内容 参数
  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">

    <!-- 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">

        <form>

            <!--

                最开始，我是<span class="input-group-addon glyphicon glyphicon-envelope"></span>

                结果出现了错位的情况。。。完全不知道该如何解决这种Bug

                注意：这个span的嵌套，妙呀！

                https://v3.bootcss.com/components/#glyphicons

                注：<span class="glyphicon glyphicon-envelope"></span> 里面不要加内容

                -->

            <div class="form-group input-group">

                <span class=""><span class="glyphicon glyphicon-envelope"></span> 邮箱</span>

                <input type="search" name="sc" id="sc" class="form-control" />

            </div>

            <hr />

            <div class="form-group input-group">

                <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span> 邮箱</span>

                <input type="search" name="sc" id="scNew" class="form-control" />

            </div>

        </form>

        <span class="glyphicon glyphicon-apple">s</span>

    </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

祝愿图标做的越来越漂亮。

 

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基础 input-group glyphicon 输入框组与glyphicon图标的更多相关文章

  1. Bootstrap3基础 form-control 圆角的输入框，光标放入后边框变色

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

  2. Bootstrap3基础 input-group-btn 按钮与输入框 横向组合

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

  3. Bootstrap<基础十五> 输入框组

    Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输 ...

  4. Bootstrap3系列：输入框组

    1. 基本实例 通过在文本输入框 <input> 前面.后面或是两边加上文字或按钮,实现对表单控件的扩展. .input-group包含.input-group-addon给 .form- ...

  5. Bootstrap输入框组

    前面的话 有时,我们需要将文本输入框(input group)和文件或者小icon组合在一起进行显示, 我们称之为addon.也就是通过在文本输入框 <input> 前面.后面或是两边加上 ...

  6. 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除-改进版

    上一次说到了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除 ,初始状态下只有一个输入框组,可以通过点击输入框组的右侧“+”(或自定义的文字)可以在原输入框组的下面 ...

  7. bootstrap之输入框组

    向输入域添加前缀和后缀的内容 <div style="padding: 100px 100px 10px;"> <form class="bs-exam ...

  8. Bootstrap历练实例：基本输入框组

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. bootstrap历练实例：复选框或单选按钮作为输入框组的前缀或后缀

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

随机推荐

  1. UVA 11178 Morley's Theorem(几何)

    Morley's Theorem [题目链接]Morley's Theorem [题目类型]几何 &题解: 蓝书P259 简单的几何模拟,但要熟练的应用模板,还有注意模板的适用范围和传参不要传 ...

  2. React项目中使用Mobx状态管理（一）

    1.安装 $ yarn add mobx mobx-react 2.新建store/index.js,存放数据(以下思路仅限于父子组件的简单应用) 注意:这里暂时没使用装饰器@observable,装 ...

  3. word论文文献引用上标括号

    参考 http://jingyan.baidu.com/article/c45ad29c310734051753e20d.html 在插入参考文献引用的尾注时,默认为上标数据且没有中括号.现在要统一加 ...

  4. [3]传奇3服务器源码分析一 DBServer

    留存 服务端下载地址: 点击这里

  5. python selenium设置chrome的下载路径

    python可以通过ChromeOptions设置chrome参数,如下载路径等,代码如下(python 3.6.7): #-*-coding=utf-8-*- from selenium impor ...

  6. 2017-2018-2 java红茶第二周作业

    详见团队博客:http://www.cnblogs.com/javahc/p/9033816.html

  7. 转：控制ComboBox下拉框的下拉部分宽度，使内容能够显示完全

    一般的情况下,如果下拉框的选项的文字太长,下拉框ComboBox的Width宽度属性我们又不想要改变(默认不变),下拉选项的文字内容就会被截剪,如下图所示: 解决办法: 1.自动判断下拉选项的文字长度 ...

  8. PIVOT(透视转换)和UNPIVOT(逆透视转换)

    一.原数据状态 二.手动写透视转换1 三.手动写透视转换2 四.PIVOT(透视转换)和UNPIVOT(逆透视转换)详细使用 使用标准SQL进行透视转换和逆视转换 --行列转换 create tabl ...

  9. 以太坊智能合约介绍，Solidity介绍

    以太坊智能合约介绍,Solidity介绍 一个简单的智能合约 先从一个非常基础的例子开始,不用担心你现在还一点都不了解,我们将逐步了解到更多的细节. Storage contract SimpleSt ...

  10. Python之pytest 基础

    pytest是一个非常成熟的全功能的Python测试框架,主要特点有以下几点:1.简单灵活,容易上手:2.支持参数化:3.能够支持简单的单元测试和复杂的功能测试,还可以用来做selenium/appn ...