首页 > 网站 > WEB开发 > 正文

18.导航

2024-04-27 15:11:40
字体:
来源:转载
供稿:网友
<!doctype html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap</title> <link rel="stylesheet" href="CSS/bootstrap.css" /></head><body> <div class="container"> <div class="row"> <ul class="nav nav-tabs"><!--nav导航的基础样式--> <li><a href="#">苹果</a></li> <li><a href="#">香蕉</a></li> <li><a href="#">橘子</a></li> </ul> </div> <div class="row" style="margin-top:10px;"> <ul class="nav nav-pills"><!--胶囊式--> <li><a href="#">苹果</a></li> <li><a href="#">香蕉</a></li> <li><a href="#">橘子</a></li> </ul> </div> <div class="row" style="margin-top:10px;"> <ul class="nav nav-justified"><!--两端对齐--> <li><a href="#">苹果</a></li> <li><a href="#">香蕉</a></li> <li><a href="#">橘子</a></li> </ul> </div> <div class="row" style="margin-top:10px;"> <ul class="nav nav-stacked"><!--竖着排--> <li><a href="#">苹果</a></li> <li><a href="#">香蕉</a></li> <li><a href="#">橘子</a></li> </ul> </div> <div class="row" style="margin-top:10px;"> <ul class="nav nav-tabs"><!--导航中加入下拉菜单--> <li><a href="#">苹果</a></li> <li><a href="#">香蕉</a></li> <li><a href="#">橘子</a></li> <li> <a href="#" data-toggle="dropdown">学院课程 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">html</a></li> <li><a href="#">css</a></li> <li><a href="#">javascript</a></li> <li><a href="#">less</a></li> <li><a href="#">bootstrap</a></li> </ul> </li> </ul> </div> </div> <script src="js/jquery-2.1.0.js"></script> <script src="js/bootstrap.js"></script></body></html>

这里写图片描述


上一篇:ionicCSS09_颜色和图标

下一篇:css3 3D按钮

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表