2020-03-13 22:02:00 qq_42581650 阅读数 22
  • 基于SSM技术的在线商城系统[实战视频]

    本课程基于【SSM】【Maven】【BootStrap】【MySQL】【BootStrap】技术,使用IntelliJ IDEA开发工具。 主要是锻炼SSM技术的运用,通过项目实战,加强对框架技术的理解和运用,如果你是SSM的初学者,这套视频课程适合你!!

    3563 人正在学习 去看看 汤小洋

今天刚在IDEA中引用了Bootstrap后 按照按开发文档开始使用Bootstrap创建第一个页面后开始使用格栅

检查引用没有任何问题
鼠标放在引用连接时也能正常变看到引用的路径正确在这里插入图片描述
但是却无法正常加载,用了浏览器调试之后发现,导入文件并没有被加载
在这里插入图片描述
可能的解决方案为更改引入文件的地址。
在这里插入图片描述
在路径从 src="/js/jquery-3.4.1.min.js"变为src="…/js/jquery-3.4.1.min.js"即可解决问题
在这里插入图片描述

此外引用时把代码

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <script  src="../js/jquery-3.4.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../js/bootstrap.min.js"></script>

写成

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <script  src="../js/jquery-3.4.1.min.js"/>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../js/bootstrap.min.js"/>

也会导致无法正确加载文件

2020-02-03 23:22:28 weixin_42288943 阅读数 18
  • 基于SSM技术的在线商城系统[实战视频]

    本课程基于【SSM】【Maven】【BootStrap】【MySQL】【BootStrap】技术,使用IntelliJ IDEA开发工具。 主要是锻炼SSM技术的运用,通过项目实战,加强对框架技术的理解和运用,如果你是SSM的初学者,这套视频课程适合你!!

    3563 人正在学习 去看看 汤小洋

1、写在前面

项目中有时候需要使用一些简单的FORM表单或者其他页面,总是不能快速的进行生成,刚好好久没有劫持到前端的学习了,在此记录学习过程


2、核心操作


3、操作步骤

3.1、编写BootStrap 表格demo

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 模板</title>
    <!-- 避免中文乱码 -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意: 如果通过 file://  引入 Respond.js 文件,则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="jumbotron text-center">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>重置浏览器大小查看效果!</p>
</div>

<table class="table table-striped table-bordered table-hover    ">
    <thead>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
    </tr>
    <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
    </tr>
    <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
    </tr>
    </tbody>
</table>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 【本地】包括所有已编译的插件 -->
<!--<script src="js/bootstrap.min.js"></script>-->
<!-- 【远程】直接实用远程的bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
1096351-7554affc2f2ee9d3.png
2020-02-03 21:52:02 weixin_42288943 阅读数 44
  • 基于SSM技术的在线商城系统[实战视频]

    本课程基于【SSM】【Maven】【BootStrap】【MySQL】【BootStrap】技术,使用IntelliJ IDEA开发工具。 主要是锻炼SSM技术的运用,通过项目实战,加强对框架技术的理解和运用,如果你是SSM的初学者,这套视频课程适合你!!

    3563 人正在学习 去看看 汤小洋

1、写在前面

项目中有时候需要使用一些简单的FORM表单或者其他页面,总是不能快速的进行生成,刚好好久没有劫持到前端的学习了,在此记录学习过程


2、核心操作

  • 了解BootStrap基础知识
  • 下载BootStrap
  • 编写BootStrap基础demo
  • 【当前文件可以直接拷贝,然后运行,不需要下载BootStrap依赖】

3、操作步骤

3.1、了解BootStrap基础知识

参考网址:


3.2、下载BootStrap

  • 进入BootStrap官网
1096351-5102026d6ccf6004.png
  • 下载已经编译的CSS+JS
1096351-93d5fcc3786cc63d.png
  • 在当前页面继续下拉,可以看到CDN文件【当前demo是CDN文件,没有进行软件下载】
1096351-4b350b53ad5e156b.png

3.3、编写BootStrap基础demo

  • 按理说要在官网下载BootStrap的CSS和JS,但是我在官网,找到了CDN加速文件,所以我在本案例中使用远程CDN文件进行演示
  • 更多样式参考菜鸟教程BootStrap
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 模板</title>
    <!-- 避免中文乱码 -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意: 如果通过 file://  引入 Respond.js 文件,则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<div class="jumbotron text-center">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>重置浏览器大小查看效果!</p>
</div>

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <h3>第一列</h3>
            <p>菜鸟教程</p>
            <p>学的不仅是技术,更是梦想!!!</p>
        </div>
        <div class="col-sm-4">
            <h3>第二列</h3>
            <p>菜鸟教程..</p>
            <p>学的不仅是技术,更是梦想!!!</p>
        </div>
        <div class="col-sm-4">
            <h3>第三列</h3>
            <p>菜鸟教程..</p>
            <p>学的不仅是技术,更是梦想!!!</p>
        </div>
    </div>
</div>

<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 【本地】包括所有已编译的插件 -->
<!--<script src="js/bootstrap.min.js"></script>-->
<!-- 【远程】直接实用远程的bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
1096351-756f378379b1f64d.png
2019-03-15 18:15:43 qq_43223996 阅读数 583
  • 基于SSM技术的在线商城系统[实战视频]

    本课程基于【SSM】【Maven】【BootStrap】【MySQL】【BootStrap】技术,使用IntelliJ IDEA开发工具。 主要是锻炼SSM技术的运用,通过项目实战,加强对框架技术的理解和运用,如果你是SSM的初学者,这套视频课程适合你!!

    3563 人正在学习 去看看 汤小洋

JSP IDEA中引用bootstrap,图标显示不正常

最近写javaweb,在jsp中使用本地的bootstrap,css文件,图标无法正常显示,大概是如下的一个图标样子。
在这里插入图片描述
但是如果不是本地bootstrap文件,而是引用网上的,则能够正常显示。
一开始还以为是bootstrap版本不对,但试了各个版本都没有用。
最后在F12开发者工具中发现了问题,提示缺少了wolf2字体文件。原来bootstrap的图标引用是用的wolf2字体,而之前写Web的时候一直都是只加了个bootstrap.min.css文件,不过却没有出现过这种问题,不知道是不是因为用的是新服务器和站点的问题,哈哈。
在这里插入图片描述
在css同级目录下引入fonts文件夹,成功解决问题。
在这里插入图片描述

2020-02-03 22:53:51 weixin_42288943 阅读数 20
  • 基于SSM技术的在线商城系统[实战视频]

    本课程基于【SSM】【Maven】【BootStrap】【MySQL】【BootStrap】技术,使用IntelliJ IDEA开发工具。 主要是锻炼SSM技术的运用,通过项目实战,加强对框架技术的理解和运用,如果你是SSM的初学者,这套视频课程适合你!!

    3563 人正在学习 去看看 汤小洋

1、写在前面

项目中有时候需要使用一些简单的FORM表单或者其他页面,总是不能快速的进行生成,刚好好久没有劫持到前端的学习了,在此记录学习过程


2、核心操作

  • 编写BootStrap网格demo
  • 编写BootStrap使用媒体查询【当前文件可以直接拷贝,然后运行,不需要下载BootStrap依赖】

3、操作步骤

3.1、编写BootStrap网格demo

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 模板</title>
    <!-- 避免中文乱码 -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意: 如果通过 file://  引入 Respond.js 文件,则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<div class="jumbotron text-center">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>重置浏览器大小查看效果!</p>
</div>

<div class="container">
    <div class="row">
        <div class="col-sm-4" style="border: 1px solid green">
            <h3>第一列</h3>
            <p>菜鸟教程</p>
            <p>学的不仅是技术,更是梦想!!!</p>
        </div>
        <div class="col-sm-4" style="border: 1px solid gray">
            <h3>第二列</h3>
            <p>菜鸟教程..</p>
            <p>学的不仅是技术,更是梦想!!!</p>
        </div>
        <div class="col-sm-4" style="border: 1px solid blue">
            <h3>第三列</h3>
            <p>菜鸟教程..</p>
            <p>学的不仅是技术,更是梦想!!!</p>
        </div>
    </div>
</div>
<div class="container" style="border: 1px solid gold">
    <div class="row">
        <div class="col-sm-4" style="border: 1px solid red">左</div>
        <div class="col-sm-4" style="border: 1px solid red ">中</div>
        <div class="col-sm-4" style="border: 1px solid red ">右</div>
    </div>
    <div class="row">
        <div class="col-sm-4" style="border: 1px solid green">左</div>
        <div class="col-sm-4" style="border: 1px solid green ">中</div>
        <div class="col-sm-4" style="border: 1px solid green ">右</div>
    </div>
</div>
<div class="container" style="border: 1px solid rebeccapurple">
    <div class="row">
        <div class="col-sm-6" style="border: 1px solid red">左</div>
        <div class="col-sm-6" style="border: 1px solid red ">右</div>
    </div>
    <div class="row">
        <div class="col-sm-6" style="border: 1px solid green">左</div>
        <div class="col-sm-6" style="border: 1px solid green ">右</div>
    </div>
</div>

<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 【本地】包括所有已编译的插件 -->
<!--<script src="js/bootstrap.min.js"></script>-->
<!-- 【远程】直接实用远程的bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
1096351-f8d482a227e81ef6.png

3.2、编写BootStrap使用媒体查询

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 模板</title>
    <!-- 避免中文乱码 -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意: 如果通过 file://  引入 Respond.js 文件,则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <style type="text/css">
        .my_div{
            border: 1px solid red;
        }
        /*屏幕小于780时,边框变成黑色*/
        @media screen and (max-width:780px) {
            .my_div {
                border: 1px solid black !important;
            }
        }
    </style>
</head>
<body>
<h1>Hello, world!</h1>
<div class="jumbotron text-center">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>重置浏览器大小查看效果!</p>
</div>

<div class="my_div">
进行自定义div展示,使用【媒体查询功能】,屏幕小于780时,边框变成黑色
</div>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 【本地】包括所有已编译的插件 -->
<!--<script src="js/bootstrap.min.js"></script>-->
<!-- 【远程】直接实用远程的bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
1096351-9ef55344ae6524f1.png
1096351-fa7d787829e51570.png
没有更多推荐了,返回首页