Bootstrap实战---header处理

最新推荐文章于 2023-09-05 11:21:09 发布
最新推荐文章于 2023-09-05 11:21:09 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： HTML/CSS/JS/Bootstrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46629123/article/details/118594062
版权

Bootstrap实战—header处理
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>融职教育</title>
    <!--移动设备优先-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--引入Bootstrap CSS-->
    <link rel="stylesheet" href="css/bootstrap.css">

    <style>

    </style>

</head>
<body>
    <!--顶部导航开始-->
    <nav>
        <div class="container">
            <div class="row">
                <div class="col shadow-sm">
                    <nav class="navbar p-1  navbar-expand-lg navbar-light bg-white">
                        <!--navbar-toggler:导航栏不展开时显示以下a和button-->
                        <a class="navbar-brand navbar-toggler border-0" href="#">
                            <img src="images/logo.png" class="img-fluid" style="max-width:90px" alt="">
                        </a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                          <span class="navbar-toggler-icon"></span>
                        </button>
                      
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                          <ul class="navbar-nav mr-auto">
                            <li class="nav-item active">
                              <a class="nav-link" style="padding-left: 25px;background: url('images/hl.png') no-repeat 0 center;" href="#">融职教育</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" style="padding-left: 25px;background: url('images/llt.png') no-repeat 0 center;" href="#">学习猿地</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" style="padding-left: 25px;background: url('images/zzt.png') no-repeat 0 center;" href="#">智校云</a>
                              </li>
                            <li class="nav-item dropdown">
                              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                培养模式
                              </a>
                              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Something else here</a>
                              </div>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                  培养方向
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                  <a class="dropdown-item" href="#">Action</a>
                                  <a class="dropdown-item" href="#">Another action</a>
                                  <div class="dropdown-divider"></div>
                                  <a class="dropdown-item" href="#">Something else here</a>
                                </div>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
                                Web全栈就业班 <i class="mark text-danger">￥9800</i> <s>￥19800</s>
                              </a>
                            </li>
                          </ul>
                          <form class="form-inline my-2 my-lg-0">
                            <a class="nav-link dropdown-toggle" style="padding-left: 25px;background: url('images/wx.jpg') no-repeat 0 center;" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                咨询微信
                              </a>
                              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Something else here</a>
                              </div>
                          </form>
                        </div>
                      </nav>
                </div>
            </div>
        </div>
    </nav>

    <!--顶部导航结束-->




    <!--引入jQuery, 再引入poppper.js 最后再引入Bootstrap.js-->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.bundle.js"></script>
</body>
</html>
i see the future
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap4-项目
02-18
Bootstrap 4 是一个广泛使用的前端开发框架，专为构建响应式、移动优先的网页而设计。这个"bootstrap4-项目"是你在JAMStack课程中所面临的挑战，目标是使用Bootstrap 4来创建一个网站。在这样的项目中，你将学习如何...
利用Bootstrap制作汉堡按钮（header部分）
夏天De风ly
05-15 2107
页面展示：本次网页header部分的页面效果。 技术要求：Bootstrap布局容器、Bootstrap导航栏 制作汉堡按钮的固定写法： 同时需要安装Bootstrap下载安装，下载地址：https://www.bootcss.com/ 解压之后会有css、js、fonts,但是js中没有jQuery文件。 这时复制此地址在网页打开：https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js，看到了版本信息后，在页面右击另存为之后会弹出
3.13 Bootstrap 页面标题(Page Header)
梁辰兴的博客
07-18 356
页面标题（Page Header）是个不错的功能，它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时，页面标题这个功能就显得特别有用。
#人丑多学习#之Bootstrap header
qq_29279803的博客
06-06 387
选用软件：webstrom 不要问为什么，其实就是为了跟B站视频用一个软件好对应学习，可以选择其他的。 下载：https://getbootstrap.com/docs/4.5/getting-started/download/ 1. Compiled CSS and JS 2. Examples 因为是只基于Bootstrap的框架进行修改，所以暂时下载以上2个文件。 Compiled CSS and JS，框架基础，必要不可少 Examples，提供多种参考样式，如：登陆，导航栏等等，既可以免费套用.
前端开发：Bootstrap开发框架
阿甘正传
09-17 7242
1）Bootstrap入门。 Bootstrap官网网站 官方网站：https://getbootstrap.com/ 中文网站：http://www.bootcss.com/ Bootstrap 库的下载 这里我们以 Bootstrap V3.3.7 为例。 进入中文官网，下载 用于生产环境的 Bootstrap，如下图所示： 下载之后，解压 bootstrap-3.3.7-...
BootStrap使用
lmz的博客
12-20 3511
BootStrap使用
手把手教你springboot整合bootstrap-table、pagehelper实现表格生成、页面美化、客户端和服务端分页
04-24
内容：手把手教你springboot整合bootstrap-table、pagehelper实现表格生成、页面美化、客户端和服务端分页（实战项目），博客原文讲解：https://blog.csdn.net/weixin_50369395/article/details/124334085
html-css-bootstrap-freelancer
03-19
3. Bootstrap框架：理解Bootstrap的基本结构，如网格系统、导航栏、模态框、卡片等组件的使用，以及如何引入Bootstrap库并定制主题。 4. 响应式设计：学习如何使用Bootstrap的预设断点和媒体查询来创建适应不同屏幕...
请求headers处理（代码带有详细注释）
m0_74322086的博客
07-16 162
我在学习headers处理方式时遇到了一些问题，报错，说我的头部信息无法识别，经过一系列试错后，我发现头部信息无法识别与编码有关，我对其进行了改动，就可以正常识别了。,将 response.content进行解码的字符串,解码需要指定一个编码方式, requests会根据自己的猜测来判断编码的方式,response.content这个是直接从网络上面抓取的数据,没有经过任何解码。然后，对其进行了改动，以encoding指定的编码格式编码字符串。但是，手动解码无法识别，可能是计算机的问题。
Bootstrap的行、列布局设计(网络-网格系统设计)
昊虹AI笔记
09-05 2959
Bootstrap的行、列布局设计(网络系统设计)
Bootstrap菜单点击显示改成经过显示
weixin_34087503的博客
10-14 593
2019独角兽企业重金招聘Python工程师标准>>> ...
Bootstrap使用前必须在head 标签内导入bootstrap的链接，否则bootstrap无效
eli的博客
03-28 1415
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--...
Bootstrap 页面标题（Page Header）
shengyin714959的博客
08-15 68
页面标题（Page Header）是个不错的功能，它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时，页面标题这个功能就显得特别有用。如需使用页面标题（Page Header），请把您的标题放置在带有 class。
bootstap4-如何正确的引用资源文件
@siye
04-25 466
资源文件引用的最低标准 bootstrap.min.css jquery.min.js popper.js bootstrap.min.js (1) 以上列出的也是资源文件引用的顺序,无论引用本地的文件,还是引用在线的 CDN,都应当遵循这个顺序.一般情况下,推荐在head元素内放置 css 文件,在</body>元素之前引用 js 文件,注意!jquery 必须放在首位,然后...
Bootstrap学习笔记 07 - Page Header
Cynhard的专栏
11-02 287
Page Header div class="page-header"> h1>String classh1> div> p>Strings are objects that represent sequences of characters.p> p>The standard string class provides support for such objects with a
BootstrapTable使用教程
牧小七的博客
09-01 1596
文章目录1. 服务端分页功能 1. 服务端分页功能 sidePagination 属性: data-side-pagination 类型: String 细节: 定义表的侧面分页，只能是 ‘client’ 或 ‘server’。使用 ‘server’ 端需要设置 ‘url’ 或 ‘ajax’ 选项。 请注意，所需的服务器响应格式不同，具体取决于 ‘sidePagination’ 选项设置为 ‘client’ 还是 ‘server’。请参见以下示例： 使用客户端分页 使用服务端分页 默认: ‘client’
BootstrapTable中文文档
weixin_43924353的博客
01-17 1854
表格参数： 名称 标签 类型 默认 描述 - data-toggle String ‘table’ 不用写 JavaScript 直接启用表格。 classes data-classes String ‘table table-hover’ 表格的类名称。默认情况下，表格是有边框的，你可以添加 ‘table-no-bordered’ 来删除表格的边框样式。 sortClass data-sort-class S
boostrapTable 表头双行字体并颜色不一致
hjy170314的博客
09-08 807
这是我的设计图的样式,在表格里面存在两个表头,并且在第一个表头里面有不同颜色的字体存在, 然后我看了一下boostrapTable的文档 如果设置的样式是表头里所有的属性都是一样的话可以使用 headerStyle (跟columns同级) 但是我这个是每几个之间就有区别所以不能这样用,于是我就试了一下我下面这个操作没想到这样子就可以了,达到了我需要的效果 html部分 <table id="Table" class="table table-hover table-striped">.
前端页面如何引入公用的页面header和footer
热门推荐
datouniao1的博客
04-04 1万+
很多时候我们做网站开发的时候会遇到一个比较有趣的问题，那就是我们每个页面使用的footer和header，于是当然我们有办法在每个页面都相同的html标签，显然这样代码的复用程度是很低的，我们需要想到的是能不能仅仅在页面上仅仅引用一个div就可以把整个页面的头都引用过来，当然是可以实现的那么应该怎样来实现这样的效果，首先我们要引用公共的页面也是模板，我们是不是应该有一个有一个模板:header.t...
bootstrap-table-fixed-header下载
最新发布
10-14
bootstrap-table-fixed-header是一个用于固定表头的插件，可以使得表格的表头在滚动时保持固定。下载该插件可以按照以下步骤进行： 1. 打开浏览器，进入bootstrap-table-fixed-header插件的官方网站或者在Github上...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值