内容 参数
  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. win10 修改root文件

    1.进入Win10系统的hosts文件所在位置,我们直接输入C:\Windows\System32\Drivers\etc后回车就可以打开了,右键hosts文件,选择属性 2.点击hosts属性对话框 ...

  2. Git branch 分支与合并分支

    Git branch 分支 查看当前有哪些branch bixiaopeng@bixiaopengtekiMacBook-Pro xmrobotium$ git branch * master 新建一 ...

  3. strlen实现

    1.strlen函数. 普通版实现方法, int strlen( char *s) { int length = 0; while(*s++) length++; return length; } 优 ...

  4. 《Semantic Sentence Matching with Densely-connected Recurrent and Co-attentive Information》DRCN 句子匹配

    模型结构 首先是模型图: 传统的注意力机制无法保存多层原始的特征,根据DenseNet的启发,作者将循环网络的隐层的输出与最后一层连接. 另外加入注意力机制,代替原来的卷积.由于最后的特征维度过大,加 ...

  5. Knowing is not enough; we must apply. Willing is not enough; we must do.

    Knowing is not enough; we must apply. Willing is not enough; we must do. 仅限于知道是不够的,我们必须去实践:单纯的希望是不够的 ...

  6. 【转】ETL讲解（很详细！！！）

    ETL是将业务系统的数据经过抽取.清洗转换之后加载到数据仓库的过程,目的是将企业中的分散.零乱.标准不统一的数据整合到一起,为企业的决策提供分析依据. ETL是BI项目重要的一个环节. 通常情况下,在 ...

  7. JAVA基础1---Object类解析

    1.Object简介 众所周知,Object类是Java所有类的万类之源,所有Java类都是继承之Object类,而默认就直接忽略了extends Object这段代码. 2.Object类的源码 话 ...

  8. SpringMVC中的自定义参数绑定案例

    由于日期数据有很多种格式,所以springmvc没办法把字符串转换成日期类型.所以需要自定义参数绑定.前端控制器接收到请求后,找到注解形式的处理器适配器,对RequestMapping标记的方法进行适 ...

  9. Android4.0 主线程不能访问网络异常解决办法

    从两个方面说下这个问题: 1. 不让访问网络的原因 2. 解决该问题的办法 不让访问网络的原因: 由于对于网络状况的不可预见性,很有可能在网络访问的时候造成阻塞,那么这样一来我们的主线程UI线程 就会 ...

  10. Pony 编程语言介绍

    Pony,一种“Rust 遇上 Erlang”的语言,让开发快捷.安全.高效.高并发的程序更简单. 在 Wallaroo Labs,我是工程副总裁,我们正在构建一个用 Pony 编程语言编写的 高性能 ...