您现在的位置是:首页 > 正文

使用BootStrap搭建主页

2024-01-30 23:53:17阅读 0

介绍:

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

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

  1. 页面最上面的导航栏
  2. 导航栏下面得有一个好看的轮播图
  3. 轮播图下面可以来一个搜索栏
  4. 搜索栏下面就可以放上我们的一个内容了
  5. 最后再来一个分页

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

几乎所有的代码都来自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>
            <script>
                $("#<%=request.getParameter("type")%>").addClass("active")
            </script>
        </div>
    </div>
</nav>
</body>
</html>

index.jsp:主页界面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>彼岸商城</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="bootstrap-5.0.0-beta3-dist/css/bootstrap.css">
    <script src="bootstrap-5.0.0-beta3-dist/js/bootstrap.js"></script>
    <style>
        .carousel-item img{
            height: 350px;
        }
    </style>
</head>
<body>
<jsp:include page="component/top.jsp">
    <jsp:param name="type" value="index"/>
</jsp:include>
<%--容器--%>
<div class="container">
    <%--轮播图--%>
    <div id="myCarousel" class="carousel slide mb-3" data-bs-ride="carousel" data-bs-interval="2000">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></button>
            <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1"></button>
            <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="images/t1.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>First slide label</h5>
                    <p>Some representative placeholder content for the first slide.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="images/t2.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>First slide label</h5>
                    <p>Some representative placeholder content for the first slide.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="images/t3.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>First slide label</h5>
                    <p>Some representative placeholder content for the first slide.</p>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </button>
    </div>
    <div class="row">
        <div class="col-3">
            <div class="input-group mb-3">
                <label class="input-group-text" for="rows">显示个数</label>
                <select class="form-select" id="rows">
                    <option value="4">4</option>
                    <option value="8">8</option>
                    <option value="12">12</option>
                </select>
            </div>
        </div>
        <div class="col-3">
            <div class="input-group mb-3">
                <label class="input-group-text" for="rows">排序规则</label>
                <select class="form-select" >
                    <option value="4">根据商品价格</option>
                    <option value="8">根据商品库存</option>
                    <option value="12">根据商品销量</option>
                </select>
            </div>
        </div>
        <div class="col-3">
            <div class="input-group mb-3">
                <label class="input-group-text" for="rows">搜索商品</label>
                <input type="text" class="form-control">
            </div>
        </div>
    </div>
    <%--商品网格显示--%>
    <div class="row">
        <%--一行显示4个商品 每个card占用三格--%>
        <div class="card col-md-3 mb-2">
            <img src="images/love.jpg" class="card-img-top" alt="">
            <div class="card-body">
                <h5 class="card-title">爱上你</h5>
                <p class="card-text">用一朵花开的时间</p>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-primary">🔍</button>
                    <button type="button" class="btn btn-warning">🛒</button>
                    <button type="button" class="btn btn-danger">🙅‍</button>
                </div>
            </div>
        </div>
            <div class="card col-md-3 mb-2">
                <img src="images/love.jpg" class="card-img-top" alt="">
                <div class="card-body">
                    <h5 class="card-title">爱上你</h5>
                    <p class="card-text">用一朵花开的时间</p>
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-primary">🔍</button>
                        <button type="button" class="btn btn-warning">🛒</button>
                        <button type="button" class="btn btn-danger">🙅‍</button>
                    </div>
                </div>
            </div>
            <div class="card col-md-3 mb-2">
                <img src="images/love.jpg" class="card-img-top" alt="">
                <div class="card-body">
                    <h5 class="card-title">爱上你</h5>
                    <p class="card-text">用一朵花开的时间</p>
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-primary">🔍</button>
                        <button type="button" class="btn btn-warning">🛒</button>
                        <button type="button" class="btn btn-danger">🙅‍</button>
                    </div>
                </div>
            </div>
            <div class="card col-md-3 mb-2">
                <img src="images/love.jpg" class="card-img-top" alt="">
                <div class="card-body">
                    <h5 class="card-title">爱上你</h5>
                    <p class="card-text">用一朵花开的时间</p>
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-primary">🔍</button>
                        <button type="button" class="btn btn-warning">🛒</button>
                        <button type="button" class="btn btn-danger">🙅‍</button>
                    </div>
                </div>
            </div>
    </div>
    <ul class="pagination pagination-lg">
        <li class="page-item active" aria-current="page">
            <span class="page-link">1</span>
        </li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
    </ul>
</div>
</body>
</html>

在这里插入图片描述

网站文章

  • 在eclipse中安装Spring Tool Suite(STS)

    在eclipse中安装Spring Tool Suite(STS)

    1.打开eclipse,Help→Eclipse Marketplace 2. 3.全选,点击confirm 4.接受协议 5.等待安装完成,下载完成后会自动弹出一个弹窗,点击确认重启,安装过程比较久 6.安装完成后,在window→preference中查看由spring选项,则安装完成 ...

    2024-01-30 23:53:01
  • js 替换字符串中所有满足条件的字符

    js 替换字符串中所有满足条件的字符

    网上找材料时,趴下来的文件是带其他条件的(我们不需要的),需要替换掉很明显我需要将去掉,用node进行了replace(‘’,‘\r\n’),做了个换行处理,发现跟我想要的不太一样。原来这是常规的replace这时候就需要用到正则了需要注意的是,用正则的话是不要引号的!!!...

    2024-01-30 23:52:54
  • C++模板-29-什么是模板和一个简单的例子

    C++模板-29-什么是模板和一个简单的例子

    这篇开始进入模板的学习,接下来要学习模板,各种函数模板和类模板,然后学习几个标准的类,例如string类的,然后过度到学习各种容器。1.什么是模板模板就是建立通用模具,大大提高代码复用性。2.没有模板...

    2024-01-30 23:52:24
  • 基于redis+lua实现抢红包业务(java实现附代码)

    基于redis+lua实现抢红包业务(java实现附代码)

    抢红包的关键 我认为在抢红包业务里面,主要有以下几个关键问题: 1、多个人同时抢一个红包存在的数据竞争问题(并发问题) 2、判断一个人是否已抢过该红包 (可见性问题) 3、拼手气红包的分配算法 4、红...

    2024-01-30 23:52:17
  • 技术分享 | 关于 MySQL 自增 ID 的事儿

    作者:贲绍华 爱可生研发中心工程师,负责项目的需求与维护工作。其他身份:柯基铲屎官。 本文来源:原创投稿 *爱可生开源社区出品,原创内容未经授权不得随意使用,转载请联系小编并注明来源。 当我们使用 M...

    2024-01-30 23:52:10
  • Ansible自动化运维之常用模块的ad-hoc应用

    Ansible自动化运维之常用模块的ad-hoc应用

    文章目录1. yum模块2. service模块3. firewalld模块4. copy模块5. uri模块6. file模块7. user模块8. mysql_db模块9. mysql_user模块Ansible中的内置模块非常的多,一般使用ansible-doc来获取模块相关帮助; 可以直接查看doc帮助文档尾部 的example例子 仿照应用ansible默认模块为comma...

    2024-01-30 23:51:42
  • 计算机实现加减乘除 ----- 二进制

    二进制四则运算

    2024-01-30 23:51:35
  • ARM v8 简介

    ARM v8 简介

    ARMv8 Registers General Purpose Registers ARMv8提供了31个64-bit的通用寄存器。分别是X0-X30。 每个64-bit的寄存器低32位又包含32-b...

    2024-01-30 23:51:28
  • CTF相关之代码py报错 from secret import FLAG ImportError: cannot import name ‘FLAG‘ from ‘secret‘

    CTF相关之代码py报错 from secret import FLAG ImportError: cannot import name ‘FLAG‘ from ‘secret‘

    运行python代码时报错: from secret import FLAG ImportError: cannot import name &#39;FLAG&#39; from &#39;secret&#39; (D:\python.10\lib\site-packages\secret\__init__.py)

    2024-01-30 23:50:58
  • struct device中消失的bus_id的取代方法

    <br />编写总线设备驱动程序的时候,发现2.6.33.2内核中的struct device已经没有bus_id的成员了,发现了const char *init_name成员。但是,这个成员是不能直...

    2024-01-30 23:50:51