吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):带有字体图标的导航栏
2024-08-29 21:01:58
<!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>
最新文章
- H2数据库攻略
- WebView的基本使用方法
- BZOJ3226: [Sdoi2008]校门外的区间
- Android加载网络图片的工具类
- Notes of the scrum meeting(10/30)
- 【原创】birt 报表工具 不能运行 不能预览问题
- ios开发入门篇(四):UIWebView结合UISearchBar的简单用法
- Echarts数据可视化series-map地图,开发全解+完美注释
- PHP5.6+7代码性能加速-开启Zend OPcache-优化CPU
- function string类型的参数传递
- nodejs之mock与跨域代理的三两事
- CS萌新的汇编学习之路02 Learning of Assembly Language
- vue-router传递参数的几种方式
- [Vue warn]: Cannot find element: #main
- k8s网络之calico学习
- POJ-2253 Frogger(最短路)
- 【原】使用Eclipse远程Debug测试环境
- 转移wordpress到另一台主机
- HTML的CoreText流畅度超过WebView。CoreText第三方框架DTCoreText的介绍
- Delphi的FIFO实现