【前端】Bootstrap案例：导航栏

已于 2022-10-18 20:18:24 修改
阅读量911 收藏 6
点赞数
分类专栏： 前端案例 文章标签： bootstrap 前端 css
于 2022-10-17 21:01:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/karshey/article/details/127372691
版权

bootstrap框架系列案例

案例网址
【前端】Bootstrap案例：导航栏https://blog.csdn.net/karshey/article/details/127372691
【前端】Bootstrap案例：轮播图https://blog.csdn.net/karshey/article/details/127388528
【前端】Bootstrap案例：网格系统、鼠标悬浮动画显示、响应式布局https://blog.csdn.net/karshey/article/details/127392879

文章目录

目标

在这里插入图片描述

  • 鼠标放上去要变色
  • 右边的联系电话鼠标放上去不能有小手
  • 要有响应式

在这里插入图片描述

代码

0.公共css

reset
html, body, ul, li, ol, img, p, h1, h2, h3{
  margin: 0;
  padding: 0;
} 

ul, ol, li{
  list-style: none;
}
common
:root {
  --theme-color: #5354ff;
  --text-color: #333333;
  
  --title-color: #212224;
  --sub-title-color: #666666;

  --bg-color: #f0f0f0;
  --bg-target-color: #f6f7f9;
  --bg-nav-color: #090909;

  --border-color: #e2e2e2;

  --font-size: 14px;
  --font-size-title: 30px;

  --content-width: 1200px;
}

.wrapper{
  max-width: 1200px;
  margin: 0 auto;
}

1.引入bootstrap

中文文档

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--这个很重要！-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- 引入bootstrap-css -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
        integrity="sha384-p1KAotb3W9ndluCsqePPYnjRm3c6abdnIjo0tQwYUv83VsbsYd43RuofnFAaDo0E" crossorigin="anonymous">
    <!-- 引入bootstrap-js -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-E5Sj1saJVFNzWWK3YIJB4LEDEEVEGaOdfmCprPDkfWUo+xkb6Ep52Q1TMEtgcFwi"
        crossorigin="anonymous"></script>
    <!-- 引入css -->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/reset.css">
    <title>导航demo</title>
</head>

<body>

</body>

</html>

接下来开始“裁缝”工作。

2.复制粘贴：得到结构

点击组件-导航条，找一个类似的。就是你了！
在这里插入图片描述

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </div>
  </div>
</nav>

3.debug1

为什么会变成这样？
在这里插入图片描述
答：学习Bootstrap时碰到错误Failed to find a valid digest in the ‘integrity‘ attribute for resource
省流：把报错的地方的integrity和crossorigin删掉。

显然，现在不报错了，这就是我们要的整体的结构。而且响应式bootstrap已经帮我们写好了。
在这里插入图片描述
注意，要把内容都放到一个容器里。

Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width.

4.Navbar:logo

把图放进去，对比大小，写一下它的css。

html：

<!-- logo -->
<a class="navbar-brand" href="#">
    <img class="logo" src="img/logo.png" alt="">
</a>

css：

.navbar .navbar-brand .logo{
    width: 136px;
    height: 26px;
    padding-right: 25px;
}

5.导航栏

大概样子：
在这里插入图片描述
html：

<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <ul class="navbar-nav">
        <li class="text-link">
            <span>首页</span>
        </li>
        <li class="text-link">
            <span>API</span>
        </li>
        <li class="text-link">
            <span>解决方案</span>
        </li>
        <li class="text-link">
            <span>案例</span>
        </li>
        <li class="text-link">
            <span>新闻</span>
        </li>
        <li class="text-link">
            <span>关于我们</span>
        </li>
    </ul>
</div>

css：

/*不要加.navbar-nav，因为右边的咨询热线也要用这个样式 */
.navbar .text-link{
    /* 没有这两个反而不会换行 */
    /* width: 78px;
    height: 37px; */
    padding: 8px 25px;
    font-size: var(--font-size);
}

加一些鼠标悬停效果：

/* active或者鼠标悬停 */
.navbar .navbar-nav .text-link.active,
.navbar .navbar-nav .text-link:hover{
    color:var(--theme-color);
    /* 鼠标放上去要有小手 */
    cursor: pointer;
}

/* 下划线 */
.navbar .navbar-nav .text-link.active span{
    border-bottom: 2px solid var(--theme-color);
}

效果：鼠标悬停会有颜色且有小手。
在这里插入图片描述

6.咨询热线

跟ul是兄弟节点。

html：

<p class="text-link hot-line">
   <span>咨询热线：4009910008</span>
</p>

7.button

实现一下红色方框部分：

在这里插入图片描述
html：

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
   <!-- <span class="navbar-toggler-icon"></span> -->
    <img class="expand-icon" src="img/show-icon.png" alt="">
</button>

css：

/* 响应式布局：媒体查询 */
@media (max-width:992px) {
    .navbar-toggler {
        padding: 0px;
    }

    .navbar-toggler .expand-icon {
        width: 22.7px;
        height: 20px;
    }

    /* 下拉背景 */
    #navbarNav {
        background-color: var(--bg-nav-color);
        color: #fff;
        /* 拉开左右没有缝隙 */
        width: 100%;
        margin: 0 -16px;

        /* 下拉框和导航栏不能紧贴 */
        position: absolute;
        /*16是父级元素的margin*/
        top: calc(100% + 16px);

        /* 下拉框的层级比较高 */
        z-index: 100;
    }

    /* 点击时按钮会半透明 */
    .navbar-toggler .expand-icon:active {
        opacity: .6;
    }
}

效果：
在这里插入图片描述

总体代码

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- 引入bootstrap-css -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
    <!-- 引入bootstrap-js -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 引入css -->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/navbar.css">
    <title>导航demo</title>
</head>

<body>
    <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
            <!-- logo -->
            <a class="navbar-brand" href="#">
                <img class="logo" src="img/logo.png" alt="">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
                <!-- <span class="navbar-toggler-icon"></span> -->
                <img class="expand-icon" src="img/show-icon.png" alt="">
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mr-auto">
                    <li class="text-link active">
                        <span>首页</span>
                    </li>
                    <li class="text-link">
                        <span>API</span>
                    </li>
                    <li class="text-link">
                        <span>解决方案</span>
                    </li>
                    <li class="text-link">
                        <span>案例</span>
                    </li>
                    <li class="text-link">
                        <span>新闻</span>
                    </li>
                    <li class="text-link">
                        <span>关于我们</span>
                    </li>
                </ul>

                <p class="text-link hot-line">
                    <span>咨询热线：4009910008</span>
                </p>
            </div>
        </div>
    </nav>
</body>

</html>

css

.navbar {
    margin: 16px 0;
}

.navbar .container-fluid {
    max-width: var(--content-width);
}

.navbar .navbar-brand .logo {
    width: 136px;
    height: 26px;
    padding-right: 25px;
}

.navbar .text-link {
    /* 没有这两个反而不会换行 */
    /* width: 78px;
    height: 37px; */
    padding: 8px 25px;
    font-size: var(--font-size);
}

/* active或者鼠标悬停 */
.navbar .navbar-nav .text-link.active,
.navbar .navbar-nav .text-link:hover {
    color: var(--theme-color);
    /* 鼠标放上去要有小手 */
    cursor: pointer;
}

/* 下划线 */
.navbar .navbar-nav .text-link.active span {
    border-bottom: 2px solid var(--theme-color);
}

/* 响应式布局：媒体查询 */
@media (max-width:992px) {
    .navbar-toggler {
        padding: 0px;
    }

    .navbar-toggler .expand-icon {
        width: 22.7px;
        height: 20px;
    }

    /* 下拉背景 */
    #navbarNav {
        background-color: var(--bg-nav-color);
        color: #fff;
        /* 拉开左右没有缝隙 */
        width: 100%;
        margin: 0 -16px;

        /* 下拉框和导航栏不能紧贴 */
        position: absolute;
        /*16是父级元素的margin*/
        top: calc(100% + 16px);

        /* 下拉框的层级比较高 */
        z-index: 100;
    }

    /* 点击时按钮会半透明 */
    .navbar-toggler .expand-icon:active {
        opacity: .6;
    }
}

参考

HTML属性crossorigin和integrity有什么用
学习Bootstrap时碰到错误Failed to find a valid digest in the ‘integrity‘ attribute for resource

karshey
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Bootstrap-html渐变顶部固定自适应导航栏
12-12
web前端开发例子，基于Bootstrap样式实现的html渐变顶部固定自适应导航栏，效果很不错！网上搜集，供参考学习。
bootstrap如何实现左侧导航栏，右侧网页
热门推荐
lantingyue11的博客
03-26 5万+
方式一：采用iframe,即将网页放入iframe这个容器中。 方式二：采用div的话绑定a或者li的点击事件 阻止a的默认行为，用jquery的load（）可以来加载这个div，即将网页放入div中。 方式三：angular的嵌套路由也可以实现。不过本人对angular不是很了解，所以这种方式没有去试。 方式四：采用ajax技术，实现局部刷新。（本人觉得该方式比较麻烦，就不
BootstrapBlazor实战 Menu 导航菜单使用(1)
alex_zoucn的博客
04-25 1329
实战BootstrapBlazorMenu 导航菜单的使用, 以及整合Freesql orm快速制作菜单项数据库后台维护页面
Bootstrap - 详细实现导航栏组件源码，常见网站导航条效果完整代码（导航栏在移动设备的视图中是折叠的，具备响应式！）
最新发布
王佳斌
02-27 793
导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap+JQuery 项目中，实现导航栏功能效果。
Boot快速制作导航栏应用详解
技术圈
06-09 632
**ul作为导航栏部分最外层的父元素，其基本类是nav；li基本类为nav-item；li中包含有a，a的基本类为nav-link**。 创建ul>li>a架构，填充基本类，再填充一个控制ul位置的类，如nav-justified(项目等宽显示)，就可以构成一个水平导航栏。 值得说明的是，__nav类的本质为以x为主轴可换行的弹性盒子__，故作用与弹性盒子的类都可以与之替换，如可用ustify-content-end(项目右对齐)来代替nav-justified来控制导航栏的位置。
Bootstrap CSS入门初步学习---导航栏设计、代码展示
qq_46304554的博客
11-21 1787
1.基础导航栏制作步骤： 1.添加一个容器<nav>或<div>标签，使用.navbar类和.navbar-default类，并且添加role=“navigation”，增加访问性。 2.向<div>标签添加一个标题，使用.navbar-header类，内部包含有带有.navbar-brand类的<a>标签，用于定义品牌图标，或文字。 3.向导航栏添加链接，简单添加带有.nav类、 .navbar-nav类的无须列表即可。 下面进行代码展示： <!DOC
【Bootstrap】Bootstrap v5 nav导航条实现部分居左，部分居右布局
微雨停了的博客
04-26 4769
文章目录一、效果二、修改后代码三、分析3.1 修改前效果3.2 修改前代码3.3 方法四、学习网址 一、效果 在同一行中，资产收集、信息探测等内容居左对齐，而测试与退出登录居右对齐。 二、修改后代码 <!-- nav --> <nav class="navbar navbar-expand-sm bg-light navbar-light"> <!-- div1 start --> <div class="colla
Bootstrap移动端导航（简易）
weixin_44681697的博客
08-19 8660
点击查看效果
Bootstrap（标准顶部导航条）
dibisha5159的博客
05-22 281
<!DOCTYPE html><html lang="en"><head> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-s...
Bootstrap 导航栏
杨欢博的博客
04-02 5754
一、Bootstrap 导航栏 1.1 基本导航栏 导航栏一般放在页面的顶部。 我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。 导航栏上的选项可以使用<ul>元素并添加 class="navbar-nav"类。 然后在 <li> 元素上添加 .nav-item 类， <a> 元素上使用 .nav-link 类: <nav class
3D导航页前端模板
07-29
一个很绚的导航页模板，学习参考使用不错，适合学生用
Web前端开发-简单导航栏实例
05-17
关于HTML中的导航栏的设计(夏季风格)~可以出现鼠标悬停效果变化~用div框起来，使用ul标签包含a。
BootStrap实现响应式布局导航栏折叠隐藏效果（在小屏幕、手机屏幕浏览时自动折叠隐藏）
09-01
主要介绍了BootStrap实现导航栏的响应式布局，当在小屏幕、手机屏幕浏览时自动折叠隐藏的效果，非常不错，具有参考借鉴价值,对bootstrap 响应式布局导航栏功能感兴趣的朋友一起学习吧
bootstrap常用组件之头部导航实现代码
08-30
主要介绍了bootstrap常用组件之头部导航实现代码，然后对个别常用属性进行了解释，需要的的朋友参考下吧
bootstrap自定义样式之bootstrap实现侧边导航栏功能
12-02
bootstrap自带的响应式导航栏是向下滑动的，有时满足不了个性化的需求，需要做一个类似于android drawerLayout 侧滑的菜单，这就是我要实现的bootstrap自定义侧滑菜单，参考了很多官网的侧滑，实现方法各有不同，优...
bootstrap3 侧边导航栏
11-15
这是一个 bootstrap3 的侧边导航栏,东西大家应该都很熟习。希望对大家有所帮助
Bootstrap实现默认导航栏效果
09-03
主要介绍了Bootstrap实现默认导航栏效果，导航栏是一个很好的功能，是Bootstrap网站的一个突出特点，本文带领大家学习实现Bootstrap导航栏,需要的朋友可以参考下
Bootstrap实现响应式导航栏效果
11-22
为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-...
bootstrap好看的导航栏
10-15
对于很多网站来说，导航栏是网页设计中非常重要的一部分。Bootstrap是一款流行的前端开发框架，提供了丰富的组件和样式，包括了很多漂亮的导航栏设计。 首先，Bootstrap的导航栏具有现代简洁的外观。导航栏通常位于网页的顶部，作为整个页面的首要内容，因此它的外观设计非常关键。Bootstrap提供了各种样式和颜色的导航栏，可以根据不同的网站风格进行选择。不论是扁平风格还是渐变颜色，都能满足不同网站的需求。 其次，Bootstrap的导航栏具有响应式设计。随着移动设备的普及，越来越多的用户会通过手机或平板电脑浏览网页。Bootstrap的导航栏可以自动适应不同的屏幕尺寸，确保在不同设备上都能够良好显示。这样，用户无论使用手机还是电脑，都可以方便地浏览导航栏的内容。 此外，Bootstrap的导航栏还具有灵活的布局。导航栏可以根据需要包含不同的元素，如品牌logo、导航链接、下拉菜单等。这些元素可以通过Bootstrap提供的CSS类来快速构建和定制。同时，导航栏的位置和样式也可以进行自由的调整，以适应不同网站的布局和需求。 总结而言，Bootstrap提供了很多好看的导航栏设计，它们具有现代简洁、响应式和灵活布局等特点。不仅能美化网站的外观，还能提升用户的体验和网站的易用性。如果你想要一个好看的导航栏，不妨考虑使用Bootstrap来实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

karshey

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值