内容 参数
  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. c#winform，知道图像路径，怎么在程序运行时往image里面添加图片

    貌似可以直接添加啊 ,要改变显示的图片,就是将图片的路径赋值给picturebox即可pictureBox1.ImageLocation="图片路径"动态的改变这个值就行了.

  2. tp视图模板

    <?php namespace Home\Controller; use Think\Controller; class IndexController extends Controller { ...

  3. Support For C++11/14/17 Features (Modern C++)

    Visual Studio编译器对 C++11 特性的支持 具体参考网址:https://msdn.microsoft.com/en-us/library/hh567368.aspx 截至目前为止,V ...

  4. 区别JS中类的静态方法，静态变量，实例方法，实例变量

    1.类的静态方法 先来段代码之后分析 // JS类静态函数 function BaseClass() { } // 类添加add函数 BaseClass.add = function() { cons ...

  5. Mybatis Generator 使用com.mysql.cj.jdbc.Driver遇到的问题

    Mybatis Generator 使用com.mysql.cj.jdbc.Driver遇到的问题 今天闲来无事,准备搭一套SSM的环境,当然所有的jar包都用最新的. Mybatis使用3.4.6, ...

  6. Spring源码阅读（一）

    Spring通过配置文件或者注解对类实例进行加载管理.稍微思考,可以猜测spring加载过程肯定先把配置转化为统一的配置对象,再把通过配置对象生产类实例.阅读源码,我们也可以发现这个逻辑. sprin ...

  7. 分布式系统ID生成方案

    自增ID 不错,可以限度抑制ID的大小.但需要有一个中心化的节点作为解决原子性问题.可以选用Redis,MySQL,Zookeeper.成本有点高. UUID 分布式,而且唯一!缺点是生产的ID太长. ...

  8. 按渠道计算 PV 和 UV

    按渠道计算 PV 和 UV: ------------------按指定channel_id按月求PV.UV------------ drop table if exists tmp_pvuv; cr ...

  9. [转载]用纯css改变下拉列表select框的默认样式

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终 ...

  10. Java技术学习路线笔记：Maven安装和作用

    Maven是一个基于项目对象模型(POM)的概念的纯java开发的开源的项目管理工具.主要用来管理java项目,进行依赖管理(jar包管理,能自动分析项目所需的依赖软件包,并到Maven仓库区下载)和 ...