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>

  • 相关阅读:
    linux环境下的时间编程
    golang1.13中重要的新特新
    vs2019+cmake实现Linux远程开发
    现代c++与模板元编程
    一个commit引发的思考
    golang中判断两个slice是否相等
    c++性能测试工具:计算时间复杂度
    c++性能测试工具:google benchmark入门(二)
    使用vs2019进行Linux远程开发
    智能指针和二叉树(3):图解查找和删除
  • 原文地址:https://www.cnblogs.com/gzhbk/p/12487606.html
Copyright © 2011-2022 走看看