100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > bootstrap制作一个优美的导航栏

bootstrap制作一个优美的导航栏

时间:2019-12-16 20:49:35

相关推荐

bootstrap制作一个优美的导航栏

制作这个导航栏需要知道

导航栏是bootstrap网站的一个突出特点。导航栏在移动设备的视图中是折叠的,随着可用视图的增加,导航栏也会水平展开。

实例如下所示:

<!DOCTYPE html><html><head><title></title><link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css"></head><body><nav class="nanbar navbar-inverse navbar-fixed-top" 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"></span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="index.html" class="navbar-brand">Front College</a></div><div class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-right"><li class="active"><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Study</a></li><li><a href="#">Contact</a></li></ul><form class="navbar-form navbar-right"><input type="text" name="" class="form-control" placeholder="you can search content"></form></div></div></nav></body></html>

效果图如下:

相比较于传统的css制作导航栏是不是简单很多呢

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。
相关阅读
Bootstrap 导航栏

Bootstrap 导航栏

2022-03-17

Bootstrap导航栏示例

Bootstrap导航栏示例

2020-12-06

Bootstrap导航栏注释

Bootstrap导航栏注释

2020-05-29

Bootstrap 导航栏设置

Bootstrap 导航栏设置

2023-11-15