zoukankan      html  css  js  c++  java
  • 一. 响应式网站结构搭建 jsp + bootstrap4

    注意点:

    1.<!DOCTYPE html>

    2.<html lang="zh-cn">  ---en

    3.<meta charset="UTF-8">

    4.<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">

    5.引入bootstrap.css

    6.引入要用到jquery-3.3.1.js" ;popover.js;bootstrap.js;

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">

    <title>首页</title>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/bootstrap4/dist/css/bootstrap.css">
    <link rel='shortcut icon' type='image/x-icon' href='<%=request.getContextPath()%>/zivi/assets/img/favicon.ico' />
    </head>
    <body>
    <div class="container">
    <!-- 页头-begin -->
    <header id="lk-header">页头菜单</header>
    <!-- 页头-end -->

    <!-- 图片切换-begin -->
    <section id="lk-img">图片切换</section>
    <!-- 图片切换-end -->

    <!-- 热门课程-begin -->
    <section id="lk-hot">热门课程</section>
    <!-- 热门课程-end -->

    <!-- 产品中心-begin -->
    <section id="lk-product">产品中心</section>
    <!-- 产品中心-end -->

    <!-- 关于我们-begin -->
    <section id="lk-about">关于我们</section>
    <!-- 关于我们-end -->

    <!-- 友情链接-begin -->
    <section id="lk-link">友情链接</section>
    <!-- 友情链接-end -->

    <!-- 页底-begin -->
    <footer id="lk-footer">页底</footer>
    <!-- 页底-end -->
    </div>

    <!-- bootstrap 依赖于JQ-js -->
    <script src="<%=request.getContextPath()%>/bootstrap4/jquery3/jquery-3.3.1.js"></script>
    <!-- 提示,弹窗,下拉菜单要用到js -->
    <script src="<%=request.getContextPath()%>/bootstrap4/js/dist/tooltip.js"></script>
    <script src="<%=request.getContextPath()%>/bootstrap4/js/dist/popover.js"></script>
    <!-- 提示,弹窗,下拉菜单要用到js -->
    <script src="<%=request.getContextPath()%>/bootstrap4/dist/js/bootstrap.js"></script>
    </body>
    </html>

  • 相关阅读:
    OAuth2.0标准类库汇总
    RabbitMQ:Docker环境下搭建rabbitmq集群
    WCF&AppFabric :异常消息: 内存入口检查失败
    前端框架Vue、Angular、React
    串口驱动开发
    组合而不是继承,单一职责
    项目管理的一个月
    软件架构的一个设想以及谈一下过去两年开发软件的过失
    TCP中需要了解的东西
    C++编程新思维中的技巧
  • 原文地址:https://www.cnblogs.com/gzhbk/p/12487606.html
Copyright © 2011-2022 走看看