ssm框架中引入bootstrap.css后样式不生效问题

ssm框架中引入bootstrap.css后样式不生效问题

引入的bootstrap.css

<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

解决方案:
在页面body标签中加入代码,此代码可导入jquery及bootstrap.js

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  • 8
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用Bootstrap的Modal组件来实现悬浮弹窗关注效果。 首先,在页面引入Bootstrap和jQuery库: ```html <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script> ``` 然后,创建一个按钮,并为其添加点击事件,点击按钮后弹出悬浮弹窗: ```html <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#subscribeModal">关注</button> <div class="modal fade" id="subscribeModal" tabindex="-1" role="dialog" aria-labelledby="subscribeModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="subscribeModalLabel">关注我们</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>关注我们,获取更多精彩内容!</p> <form> <div class="form-group"> <label for="email">邮箱地址:</label> <input type="email" class="form-control" id="email" placeholder="请输入您的邮箱地址"> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary">提交</button> </div> </div> </div> </div> ``` 其,按钮的`data-toggle`和`data-target`属性指定了点击后要弹出的悬浮弹窗,弹窗的内容在`<div class="modal">`标签定义。 最后,添加一些CSS样式,使弹窗浮在页面上方: ```css .modal { position: fixed; z-index: 1050; overflow: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 这样,当用户点击关注按钮时,就会弹出一个悬浮弹窗,让用户填写邮箱地址并提交。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值