<!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. go笔记（go中的方法调用）

    最近接触go语言  发现和java的方法调用有些类似但又有自己的注意点 go的包我理解为则是隔离的最小模块 先在src目录下创建main.go文件  package为main,然后在src下创建mod ...

  2. 阿里分布式开放消息服务(ONS)原理与实践——笔记整理

    1.MQ场景    1)订单异步解耦    2)解决分布式事务问题    3)应用于聊天平台    4)大规模机器的Cache同步    5)MySQL BinLog订阅数据分发2.ONS应用场景  ...

  3. 「AT2021」キャンディーとN人の子供 / Children and Candies

    前言 今天练习赛出了这道题,由于我太菜没有在考场上做出来. 翻了题解后,感觉题解讲的并不是十分直观,所以自己写一篇. 题目大意 太长了,不讲了. 数据范围: \(1\leq N\leq 400\) \ ...

  4. Centos7 设置自定义安装nginx的systemctl启动方式

    一.systemctl方式启动设置过程 1.首先创建服务配置文件(名字和路径就是这个) vim /usr/lib/systemd/system/nginx.service 2.添加配置内容 [Unit ...

  5. Python Web 框架原理

    Web Socket 所谓 Web 服务,本质上就是用户使用一个 socket 客户端(浏览器)去访问一个 socket 服务端. 下面是一个最基础的基于 socket 的 Python Web 服务 ...

  6. python中sorted方法和列表的sort方法使用

    一.基本形式 列表有自己的sort方法,器对列表进行原值排序,既然是原址排序,那显然元组不可能拥有这个方法,因为元组是不可修改的. 排序,数字.字符串按照ASCII,中文按照unicode从小到大排序 ...

  7. sklearn实现决策树算法

    1.决策树算法是一种非参数的决策算法,它根据数据的不同特征进行多层次的分类和判断,最终决策出所需要预测的结果.它既可以解决分类算法,也可以解决回归问题,具有很好的解释能力.另外,对于决策树的构建方法具 ...

  8. ajax请求Controller，返回信息乱码问题

    参考:https://blog.csdn.net/hgg923/article/details/53610548 @RequestMapping(value = "changeMobile& ...

  9. storm正常任务数据量过大时造成定时任务不执行的问题

    在执行storm的定时任务时,发现storm普通任务数据量过大时造成定时任务不执行, 同时设置了storm的普通任务和定时任务,定时任务设置5秒执行1次. 普通任务的数据时从spout中不停发射字符串 ...

  10. jq的链式调用.end();

    先上code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...