bootstarp页脚代码

当前很多web页面都有一个好看的页脚,如果你觉得直接写的页脚不好看,就看一下我的吧。
使用的是bootstarp巨幕组件拼接而成的,代码如下:
<div class="container-fluid" style="padding-top: 40px;">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="jumbotron">
                <div class="container">
                    <center>

                        <p>Copyright© 2020 All Rights Reserved. </p>
                        <p>广西科技师范学院--数学与计算机科学学院理科楼实验室</p>
                        地址:来宾校区(主校区)来宾市铁北大道966号 邮编:546199&nbsp;&nbsp;&nbsp; 电话:0772-6620787
                        柳州校区(分校区)柳州市柳北区沙塘镇君武路170号
                        邮编:545004 电话:0772-2046337
                    </center>

                </div>
            </div>
        </div>
    </div>
</div>
  • 样式 container-fluid 类是用于支持响应式布局的容器,与其同兄弟的还有container
  • 它俩的区别是前者没有内边距,后者div 左右两边有一个15px的padding的内边距。更详细。。。。找其他吧。 在使用列时,先定义行
  • row 类 然后就可以写我们的 列了(col-md-12
    这个是把一行里面占多少比例的定义),然后就是巨幕组件了。不细讲,细讲也是复制粘贴给你。。。。
  • 有解释错误的地方还请多多指教。多多包涵哈。页脚效果如下。。。

在这里插入图片描述

<div class="com-md-12"  style="">
			<div class="com-md-3"></div>
			<div class="com-md-6" style="margin-top: 80px;" >
				<div class="row">
					<div class="col-md-12">
						<a href=""><span><font size="2" color="">&nbsp;关于我们&nbsp;</font></span></a><span><font size="1" color=""> | </font></span>
						<a href=""><span><font size="2" color="">&nbsp;加入我们&nbsp;</font></span></a><span><font size="1" color=""> | </font></span>
						<a href=""><span><font size="2" color="">&nbsp;联系我们&nbsp;</font></span></a>
					</div>
					<div class="col-md-12">
						<font size="2" color="">
							<center>
						
								<p>Copyright© 2020 All Rights Reserved. </p>
								<p>广西科技师范学院--数学与计算机科学学院理科楼实验室</p>
								地址:来宾校区(主校区)来宾市铁北大道966号 邮编:546199&nbsp;&nbsp;&nbsp; 电话:0772-6620787
								 柳州校区(分校区)柳州市柳北区沙塘镇君武路170号
								邮编:545004 电话:0772-2046337
							</center>
						</font>
					</div>
				</div>
			</div>
			<div class="com-md-3"></div>
		</div>

页面效果:
在这里插入图片描述

Bootstrap 是一个流行的前端框架,用于快速开发响应式、移动优先的网站和Web应用程序。它基于HTMLCSS和JavaScript,提供了大量的预设样式、组件和网格系统,简化了布局和设计过程。 在Bootstrap中,基本的HTML代码结构通常包括以下几个部分: 1. `<!DOCTYPE html>`: 定义文档类型为HTML5。 2. `<html>`: HTML文档的根元素,包含`<head>`和`<body>`。 3. `<head>`: 包含元信息(如标题、字符集、链接到CSS和JavaScript文件)。 - `<title>`: 面标题,显示在浏览器标签上。 - `<meta>`: 元数据,比如charset设置编码。 - `<link rel="stylesheet" href="bootstrap.min.css">`: 引入Bootstrap CSS文件。 4. `<body>`: 面主体内容,包含导航、主要内容区域和可能的页脚等。 5. `<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>` 和 `<footer>`: Bootstrap提供的可复用元素,用来组织面结构。 6. `<div class="container">`: 用于设置面容器,保持内容在视口内的适配。 下面是一个简单的Bootstrap面示例: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap 示例</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> </head> <body> <header> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Logo</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> </ul> </div> </nav> </header> <main> <section class="py-5"> <h1>Hello, Bootstrap!</h1> <p>This is a simple example.</p> </section> </main> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </body> </html> ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值