使用BootStrap制作网页页面

最新推荐文章于 2024-06-14 14:47:22 发布

客行.

最新推荐文章于 2024-06-14 14:47:22 发布

阅读量9k

点赞数 9

文章标签： bootstrap web

本文链接：https://blog.csdn.net/m0_65725031/article/details/124584069

版权

今天主要是大家使用BootStrap制作网页页面，在上一篇文章中我们的网页制作就使BootStrap，但是由于涉及的不是很多，也没有和大家讲解，今天主要是教大家BootStrap 5,该版本是最新的相对4来说更加简单，方便我们使用。

BootStrap的基本使用

在百度上面搜索BootStrap的官网，去到官网，官网上有各种我们需要在页面上使用的代码。
我们只需要将代码复制，放置到页面上使用，大家根据需求去对代码进行更改。
BootStrap上手是非常简单的。

BootStrap实操

将我们所需要的包导进去 bootstrap-5.0.0-beta3-dist.zip和jquery-3.3.1.js

在项目中我们需要带入该三条语句

<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstap css -->
<link rel="stylesheet" href="bootstrap-5.0.0-beta3-dist/css/bootstrap.css">
<!-- Bootstap js -->
<script src="bootstrap-5.0.0-beta3-dist/js/bootstrap.js"></script>

<script src="js/jquery-3.3.1.js"></script>

top01.jsp代码

该代码中是一个导航栏，由于增加界面和首页都有导航栏就把导航栏写到一个jsp文件中，这样子在首页和增加界面之需要包含该界面就可以使用，减少代码量

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstap css -->
<link rel="stylesheet" href="bootstrap-5.0.0-beta3-dist/css/bootstrap.css">
<!-- Bootstap js -->
<script src="bootstrap-5.0.0-beta3-dist/js/bootstrap.js"></script>
<script src=""></script>
<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>

最低0.47元/天解锁文章

客行.

关注

9
点赞
踩
68

收藏

觉得还不错? 一键收藏
0
评论
使用BootStrap制作网页页面

今天主要是大家使用BootStrap制作网页页面，在上一篇文章中我们的网页制作就使BootStrap，但是由于涉及的不是很多，也没有和大家讲解，今天主要是教大家BootStrap 5,该版本是最新的相对4来说更加简单，方便我们使用。BootStrap的基本使用在百度上面搜索BootStrap的官网，去到官网，官网上有各种我们需要在页面上使用的代码。我们只需要将代码复制，放置到页面上使用，大家根据需求去对代码进行更改。 BootStrap上手是非常简单的。BootStrap实操将我...
复制链接

扫一扫