Bootstrap学习笔记--导航栏

最新推荐文章于 2022-10-05 15:43:20 发布

codingCoge

最新推荐文章于 2022-10-05 15:43:20 发布

阅读量477

点赞数 1

分类专栏：网页前端

本文链接：https://blog.csdn.net/qq_38409944/article/details/80466176

版权

本文介绍了Bootstrap导航栏的创建与定制，包括响应式设计、固定定位、颜色样式、下拉菜单和折叠导航栏的实现。通过源码展示，详细解释了如何根据需求调整导航栏的外观和行为。

摘要由CSDN通过智能技术生成

本文来自于：W3school

默认导航栏下：
这里写图片描述
因为Bootsrap是具有响应式的

所以当屏幕缩小的时候效果是这样的
这里写图片描述

那如何实现呢？

 <nav class="navbar navbar-default">  //导航栏

注意：是在页面的顶部：
源码：

<body>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

</body>

要是不喜欢这一款怎么办换呀！还有一种黑色的模式：
只需将.navbar-default课程改为.navbar-inverse

源码：

<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      &l

最低0.47元/天解锁文章

codingCoge

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap学习笔记--导航栏

本文来自于：W3school默认导航栏下：因为Bootsrap是具有响应式的所以当屏幕缩小的时候效果是这样的那如何实现呢？ &lt;nav class="navbar navbar-default"&gt; //导航栏注意：是在页面的顶部：源码：&lt;body&gt;&lt;nav class="navbar navbar-default"&...
复制链接

扫一扫

专栏目录