使用BootStrap搭建主页

最新推荐文章于 2023-04-05 16:36:46 发布

VIP文章绥彼岸

最新推荐文章于 2023-04-05 16:36:46 发布

阅读量1.2k

点赞数 1

分类专栏：笔记文章标签： bootstrap web

本文链接：https://blog.csdn.net/qq_62217605/article/details/124565940

版权

使用BootStrap搭建主页

介绍：
主页代码：
- top.jsp：
- index.jsp：主页界面

介绍：

让我们使用Bootstrap来制作一个简单的主页

那么一般的主页具有什么东西呢？

页面最上面的导航栏

导航栏下面得有一个好看的轮播图

轮播图下面可以来一个搜索栏

搜索栏下面就可以放上我们的一个内容了

最后再来一个分页

知道我们需要什么东西之后，我们就可以开始了

几乎所有的代码都来自Bootstrap5（点一下进入网站）

我们只需要将它修改成我们需要的样子就好了

我们的项目底下要有这么一些文件夹和文件

在这里插入图片描述

现在，上代码！

主页代码：

top.jsp：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Top</title>
</head>
<body>
<%--导航栏--%>
<nav class="navbar navbar-dark bg-primary mb-2">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">
            彼岸商城
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#linkText"
                aria-controls="navbarText" aria-expanded="false">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="linkText">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link" href="index.jsp" id="index">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="insert.jsp" id="insert">增加商品</a>
                </li>
            </ul>