在Angular中利用Bootstrap4的固定导航栏制作一个粘性页脚

最新推荐文章于 2021-01-30 17:41:33 发布

爱果冻真是太好了

最新推荐文章于 2021-01-30 17:41:33 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/ren19950410/article/details/83420037

版权

Angular的版本为6.1.10，Bootstrap版本为4.1.3，引入的jquery版本是3.3.1。
最终的效果如下图所示：
页脚效果图

安装Bootstrap4

安装步骤如下：

npm install bootstrap ，安装bootstrap；
npm install jquery ，bootstrap的运行有时会依赖jquery；
在 angular.json 中配置以下引用，注意，有个坑在于要先引用Jqurey的js文件，再引用bootstrap的js文件：

	"styles": [
             "src/styles.scss",
             "./node_modules/bootstrap/dist/css/bootstrap.css"
           ],
           "scripts": [
             "./node_modules/jquery/dist/jquery.js",
             "./node_modules/bootstrap/dist/js/bootstrap.js"
           ]

在组件中引入标签和样式

footer.component.html

<footer class="footer">
   <span>
       Zhengzhou University & Machine learning and data mining laboratory @ 2018
   </span>
</footer>

footer.component.scss
注意height: 60px;定义了页脚的高度，line-height: 60px;控制文本垂直居中。

 .footer {
   position: absolute;
   bottom: 0;
   width: 100%;
   /* Set the fixed height of the footer here */
   height: 60px;
   background-color: #f5f5f5;
   text-align: center;
   line-height: 60px;
 }

修改index.html

给html标签和body增加如下样式：

具体如下：

<!doctype html>
<html lang="en" style="position: relative; min-height: 100%;">

<head>
 <meta charset="utf-8">
 <title>WebWord</title>
 <base href="/">

 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body style="margin-bottom: 60px;">
 <app-root></app-root>
</body>

</html>

三个知识点

html的最小高度为100%
html的位置为relative（相对），而footer的位置为absolute（绝对），非常关键
body的margin-bottom为footer的高度

参考网址

https://getbootstrap.com/docs/4.1/examples/sticky-footer-navbar/
http://getbootstrap.com/docs/4.1/examples/sticky-footer/

爱果冻真是太好了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在Angular中利用Bootstrap4的固定导航栏制作一个粘性页脚

在Angular中利用bootstrap4的固定导航栏制作一个粘性页脚Angular的版本为6.1.10，Bootstrap版本为4.1.3，引入的jquery版本是3.3.1。最终的效果如下图所示：安装Bootstrap4安装步骤如下：npm install bootstrap ，安装bootstrap；npm install jquery ，bootstrap的运行有时会依赖j...
复制链接

扫一扫