文章目录
-
- Bootstrap 字体图标(Glyphicons)
- Bootstrap 下拉菜单（Dropdowns）
- Bootstrap 导航元素
- Bootstrap 导航栏
- 具体练习
- 效果图展示
Bootstrap 字体图标(Glyphicons)
Bootstrap 捆绑了 200 多种字体格式的字形。
在线定制图标：https://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm
<span class="glyphicon glyphicon-sort-by-attributes"></span>
Bootstrap 下拉菜单（Dropdowns）
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Java <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Swing</a></li><li><a href="#">jMeter</a></li><li><a href="#">EJB</a></li><li class="divider"></li><li><a href="#">分离的链接</a></li></ul></li>
Bootstrap 导航元素
nav ：普通导航样式
nav-pills ：胶囊导航样式
nav-stacked：垂直导航样式
nav-tabs ：基本的基于标签的导航
nav-justified：两端对齐的导航标签
Bootstrap 导航栏
navbar ：普通导航栏
navbar-inverse ： 黑色导航栏
具体练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Fonts</title><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body><div class="container"><h1>Bootstrap Fonts</h1><p><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-sort-by-attributes"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-sort-by-attributes-alt"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-sort-by-order"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-sort-by-order-alt"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-ok"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-phone"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-qrcode"></span></button></p><button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-user"></span> User</button><button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-user"></span> User</button><button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-user"></span> User</button><span class="glyphicon glyphicon-heart" style="color: rgb(255, 140, 60);"> Heart</span></div><br/><div class="container"><h1>基本的胶囊式导航菜单</h1><ul class="nav nav-pills"><li class="active"><a href="#">Home</a></li><li><a href="#">SVN</a></li><li><a href="#">iOS</a></li><li class="disabled"><a href="#">VB.Net（禁用链接）</a></li><li><a href="#">Java</a></li><li><a href="#">PHP</a></li><li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Java <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Swing</a></li><li><a href="#">jMeter</a></li><li><a href="#">EJB</a></li><li class="divider"></li><li><a href="#">分离的链接</a></li></ul></li><li><a href="#">PHP</a></li></ul><br/><h1>垂直的胶囊式导航菜单</h1><ul class="nav nav-pills nav-stacked"><li class="active"><a href="#">Home</a></li><li><a href="#">SVN</a></li><li><a href="#">iOS</a></li><li><a href="#">VB.Net</a></li><li><a href="#">Java</a></li><li><a href="#">PHP</a></li></ul><br/><h1>两端对齐的导航元素</h1><ul class="nav nav-tabs nav-justified"><li class="active"><a href="#">Home</a></li><li><a href="#">SVN</a></li><li><a href="#">iOS</a></li><li><a href="#">VB.Net</a></li><li><a href="#">Java</a></li><li><a href="#">PHP</a></li></ul></div><br/><div class="container"><h1>导航栏</h1><nav class="navbar navbar-inverse" role="navigation"><div class="container-fluid"><div class="navbar-header"><a class="navbar-brand" href="#">菜鸟教程</a></div><div><ul class="nav navbar-nav"><li class="active"><a href="#">iOS</a></li><li><a href="#">SVN</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b></a><ul class="dropdown-menu"><li><a href="#">jmeter</a></li><li><a href="#">EJB</a></li><li><a href="#">Jasper Report</a></li><li class="divider"></li><li><a href="#">分离的链接</a></li><li class="divider"></li><li><a href="#">另一个分离的链接</a></li></ul></li></ul></div></div></nav></div><div class="container"><h1>面包屑导航</h1><ul class="breadcrumb"><li><a href="#">Home</a></li><li><a href="#">电气信息系</a></li><li class="active">计算机17-4</li></ul></div><script type="text/javascript" src="../js/jquery-3.4.1.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
效果图展示
