使用bootstrap排版

最新推荐文章于 2023-09-05 11:21:09 发布

m0_61083409

最新推荐文章于 2023-09-05 11:21:09 发布

阅读量74

点赞数

分类专栏：面试学习路线阿里巴巴文章标签： android 前端后端

本文链接：https://blog.csdn.net/m0_61083409/article/details/124790719

版权

本文介绍了如何使用Bootstrap5框架来构建响应式和移动设备优先的前端页面。内容包括顶部、主页面和增加界面的代码展示，以及各部分的效果图。通过下载Bootstrap的CSS和JS文件，开发者可以方便地引入组件并自定义样式。

摘要由CSDN通过智能技术生成

今天用bootstrap框架排出主页面和增加界面，我们这使用的是bootstrap5，以下是bootstrap5官网链接。

简介 · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网Bootstrap 是全球最受欢迎的前端框架，用于构建响应式、移动设备优先的网站。利用 jsDelivr 和我们提供的入门模板帮助你快速掌握 Bootstrap。[这里是图片001]https://v5.bootcss.com/docs/getting-started/introduction/

进入官网后，先下载bootstrap的css和js，也就是我圈起来那个，下好是个文件夹，我们要使用bootstrap需要导入这个文件夹

在左侧的目录栏中可找你所需要的组件，然后找你喜欢的样式，把代码复制粘贴到项目中，然后改一下就好了。

话不多说，以下是页面排版的展示。

一、目录展示

以下是在webapp文件夹底下的文件，记得将你下好的bootstrap导入到webapp中哦，images文件夹中放入你所需要的图片。

二、代码展示

顶部界面：top.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</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 language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<title>Title</t

最低0.47元/天解锁文章

m0_61083409

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用bootstrap排版

今天用bootstrap框架排出主页面和增加界面，我们这使用的是bootstrap5，以下是bootstrap5官网链接。简介 · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网Bootstrap 是全球最受欢迎的前端框架，用于构建响应式、移动设备优先的网站。利用 jsDelivr 和我们提供的入门模板帮助你快速掌握 Bootstrap。[这里是图片001]https://v5.bootcss.com/docs/getting-started/introduction/目录
复制链接

扫一扫

专栏目录