<!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. 物联网协议CoAP协议学习

    CoAP:Constrained Application Protocol协议是为物联网中资源受限的设备制定的应用层协议,即简化版的基于UDP的HTTP协议.其核心内容为资源抽象.REST式交互可扩展 ...

  2. FF获6亿美元投资九城或许比贾跃亭更着急

    互联网企业第九城市(以下简称"九城")确认,已透过旗下子公司与总部位于美国加州的法拉第未来公司签定协议,双方共同建立合资公司,在中国制造.营销及运营电动汽车.根据合资公司协议条款, ...

  3. SELinux永久关闭

    目录 SELinux永久关闭 参考 SELinux三种模式 永久关闭方法 SELinux永久关闭

  4. virtual column make sqlserver using function index

    In sqlserver, it is impossible that if we want to create an function index. Doesn`t means we can not ...

  5. 「POJ1734」Sightseeing trip

    「POJ1734」Sightseeing trip 传送门 这题就是要我们求一个最小环并且按顺序输出一组解. 考虑 \(O(n^3)\) 地用 \(\text{Floyd}\) 求最小环: 考虑 \( ...

  6. spring boot中扩展spring mvc 源码分析

    首先,确认你是对spring boot的自动配置相关机制是有了解的,如果不了解请看我spring boot相关的源码分析. 通常的使用方法是继承自org.springframework.boot.au ...

  7. mysql学习指令

    mysql 用户管理和权限设置 参考文章:http://www.cnblogs.com/fslnet/p/3143344.html Mysql命令大全 参考文章: http://www.cnblogs ...

  8. dropdownlist select的用法

    <tr>        <td></td>        <td>@Html.DropDownList("ddlSex",@Mode ...

  9. PyCharm底部控制台console界面开启/取消自动换行

    File --> Settings --> Editor --> General --> Console中 勾选右侧第一项Use soft wraps in console(选 ...

  10. 详述ThreadLocal

    ThreadLocal的作用和目的:用于实现线程内的数据共享,即对于相同的程序代码,多个模块在同一个线程中运行时要共享一份数据,而在另外线程中运行时又共享另外一份数据. 举一个反面例子,当我们使用简单 ...