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/