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

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

安装Bootstrap4

安装步骤如下:

  1. npm install bootstrap ,安装bootstrap;
  2. npm install jquery ,bootstrap的运行有时会依赖jquery;
  3. 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>

三个知识点

  1. html的最小高度为100%
  2. html的位置为relative(相对),而footer的位置为absolute(绝对),非常关键
  3. body的margin-bottom为footer的高度

参考网址

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

你可能感兴趣的:(在Angular中利用Bootstrap4的固定导航栏制作一个粘性页脚)