1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1">
  6.         <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  7.     </head>
  8.  
  9.     <body>
  10.         <div class="container">
  11.             <h2>Lock Glyph</h2>
  12.             <p>Lock icon: <span class="glyphicon glyphicon-lock"></span></p>
  13.             <p>Lock icon as a link:
  14.                 <a href="#">
  15.                     <span class="glyphicon glyphicon-lock"></span>
  16.                 </a>
  17.             </p>
  18.             <p>Lock icon on a button:
  19.                 <button type="button" class="btn btn-default btn-sm">
  20.                     <span class="glyphicon glyphicon-lock"></span> Lock
  21.                 </button>
  22.             </p>
  23.             <p>Lock icon on a styled link button:
  24.                 <a href="#" class="btn btn-info btn-lg">
  25.                     <span class="glyphicon glyphicon-lock"></span> Lock
  26.                 </a>
  27.             </p>
  28.         </div>
  29.  
  30.         <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  31.         <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  32.     </body>
  33.  
  34. </html>

吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-lock的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母

    <!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-envelope

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-cloud

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-euro

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-minus

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-plus

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-asterisk

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：带有字体图标的导航栏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-play-circle

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

随机推荐

  1. Vue中img标签src属性绑定

    最近刚刚完成了自己的毕业设计项目,整理一下过程中遇到的问题吧~~~ 我做的是一个基于Vue的信息资讯展示与管理平台,显示首页.详情页等的文章内容时就涉及到了图片展示,项目初始时我搭建的是静态网页结构, ...

  2. 带你了解后渗透工具Koadic

    前言: 在朋友的博客上看到推荐的一款工具Koadic,我接触了以后发现很不错这款工具的强大之处我觉得就是拿到shell后的各种模块功能,我就自己写出来发给大家看看吧. 首先把项目克隆到本地: 项目地址 ...

  3. springMVC List对象转换为json列表对象

    @ResponseBody @RequestMapping("xxx.do") public List<POJO> getList(){ return List< ...

  4. js实现深度拷贝

    js实现拷贝,使用普通赋值对象,在操作其中一个对象值的时候,另一个也会更改,不符合需求 因此引入深度拷贝,以下为实现深度拷贝的几种法: Object.assign // 合并多个对象 var targ ...

  5. 【ABP】从零开始学习ABP_001_新建实体功能

    上一篇文章中介绍了如何下载.运行ABP Zero示例项目,这个示例项目可以直接作为模板进行二次开发,很适合做企业开发框架. 本未介绍基于ABP Zero示例项目,如何新建一个自定义的实体. 此处已Eq ...

  6. English-Names

    English-Names 1. 西方姓名的组成 2. 职业姓氏 3. 更多相关链接 中国的姓名,姓氏在前,名子在后.传统也有中间字(世代字).名子非常多.所谓百家姓,姓氏数量有限,约500个左右. ...

  7. 百度统计数据导出demo的坑

    1.用户名中文的问题 由于demo文件格式的问题,如果用户名使用中文的话,会出现一下问题 ----------------------preLogin----------------------  [ ...

  8. myeclipse汉化

    MyEclipse默认安装在计算机用户目录下面,安装完成后对MyEclipse快捷方式使用鼠标右键属性---打开文件位置--进入安装的目录下面即可看到 zh_CN.7z解压缩将zh_CN目录文件放到 ...

  9. python学习笔记（三）---高级特性

    一.切片 取无数多个list元素 不用一个个取得笨方法就用切片 对这种经常取指定索引范围的操作,用循环十分繁琐,因此,Python提供了切片(Slice)操作符,能大大简化这种操作. 对应上面的问题, ...

  10. 「React Native笔记」在React的 setState 中操作数组和对象的多种方法（合集）

    运用在React 中 setState的对象.数组的操作时是不能用类似array.push()等方法,因为push没有返回值,setState后会出现state变成Number,为了方便他人和自己查看 ...