<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>导航栏的字形图标</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Bootstrap -->

        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

        <style>

            body {

                padding-top: 50px;

                padding-left: 50px;

            }

        </style>

        <!--[if lt IE 9]>

                <script src="https://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>

        <![endif]-->

    </head>

    <body>

        <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">

            <div class="container">

                <div class="navbar-header">

                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                        <span class="sr-only">Toggle navigation</span>

                        <span class="icon-bar"></span>

                        <span class="icon-bar"></span>

                        <span class="icon-bar"></span>

                    </button>

                    <a class="navbar-brand" href="#">Project name</a>

                </div>

                <div class="collapse navbar-collapse">

                    <ul class="nav navbar-nav">

                        <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>

                        <li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart"></span> Shop</a></li>

                        <li><a href="#support"><span class="glyphicon glyphicon-headphones"></span> Support</a></li>

                    </ul>

                </div><!-- /.nav-collapse -->

            </div><!-- /.container -->

        </div>

        <!-- jQuery (Bootstrap 插件需要引入) -->

        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

        <!-- 包含了所有编译插件 -->

        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </body>

</html>

吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：带有字体图标的导航栏的更多相关文章

  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)：glyphicon glyphicon-play-circle

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

随机推荐

  1. Java基础 -5.3

    方法的递归调用 指的是一个方法自己调用自己的情况,利用递归调用可以解决一些重复且麻烦的问题 在进行我们递归调用的时候一般要考虑如下几点问题 一定要设置方法递归调用的结束条件 每一次调用的过程之中一定要 ...

  2. onContextItemSelected 与 onMenuItemSelected 的那些事

    Android 的activity中onCreateOptionsMenu onMenuItemSelected onOptionsItemSelected onCreateContextMenu o ...

  3. 9.2.3 hadoop reduce端连接-分区分组聚合

    1.1.1         reduce端连接-分区分组聚合 reduce端连接则是利用了reduce的分区功能将stationid相同的分到同一个分区,在利用reduce的分组聚合功能,将同一个st ...

  4. 「NOI2005」维护数列

    「NOI2005」维护数列 传送门 维护过程有点像线段树. 但我们知道线段树的节点并不是实际节点,而平衡树的节点是实际节点. 所以在向上合并信息时要加入根节点信息. 然后节点再删除后编号要回退(栈), ...

  5. 【JAVA蓝桥杯】基础练习2 十六进制转十进制

    资源限制 时间限制:1.0s   内存限制:512.0MB 问题描述 从键盘输入一个不超过8位的正的十六进制数字符串,将它转换为正的十进制数后输出. 注:十六进制数中的10~15分别用大写的英文字母A ...

  6. linux----Nginx能做什么

    linux----Nginx能做什么 标签: nginx负载均衡代理服务器 2017-04-01 14:15 588人阅读 评论(0) 收藏 举报 .embody{ padding:10px 10px ...

  7. 本机连接虚拟机中docker启动的mysql数据库

    首先要保证本机能访问虚拟机的网络 并且虚拟机开通了mysql的访问端口 进入容器 docker exec -it 容器id /bin/bash 进入mysql数据库开启远程访问权限 mysql -ur ...

  8. JSON传输图片帮助类

    JSON传输图片帮助类 2014-05-27 16:11:22|  分类: Java |  标签:解决方案  java  json  |举报|字号 订阅     原理:将图片转换为字节流,再将字节流用 ...

  9. MySQL操作之DML

    目录 SQL语句的分类 DML语句 SQL语句的分类 DDL(Data Definition Languages)语句:数据定义语言.这些语句定义了不同的数据段. 数据库.表.列.索引等数据库对象的定 ...

  10. 简单易懂之python 中的map，filter，reduce用法

    map(function,sequence) 把sequence中的值当参数逐个传给function,返回一个包含函数执行结果的list. 重点是结果返回一个列表,这样对返回的列表就可以干很多的活了. ...