标签归档:bootstrap

Bootstrap 5常见错误我该如何解决?

我正在通过 Flask 开发一个 Web 应用程序。 我也使用 Bootstrap 5。在那里添加 JS 后,所有按钮都完全停止运行。 这是 JS 控制台中的这样一个错误:

没有JS,下拉内容对我不起作用,所以我真的需要这个错误消失。 谢谢!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/fontello.css') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/style1.css') }}">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=League+Gothic&display=swap" rel="stylesheet">
    {% block title %}
    <title>Document</title>
    {% endblock %}
</head>
<body>
  {% block upnav %}
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <span class="text-white fs-4 navbar-brand" style="font-family: 'League Gothic', sans-serif;">Your watchlist</span>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            {% if not current_user.is_authenticated %}
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
              <li class="nav-item"><a class="nav-link" href="{{ url_for('login') }}" data-bs-toggle="modal" data-bs-target="#exampleModal">Login</a></li>
              <li class="nav-item"><a class="nav-link" href="{{ url_for('reg') }}" data-bs-toggle="modal" data-bs-target="#MyModal">Sign up</a></li>
            </ul>
            {% else %}
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item"><a class="nav-link" href="#recently-watched">Недавно просмотренные</a></li>
                <li class="nav-item"><a class="nav-link" href="#popular">Популярные</a></li>
                <li class="nav-item"><a class="nav-link" href="#fav">Любимые</a></li>
            </ul>

暴力修复 bootstrap.css 在手机端 滑动时右侧出现空白的问题

最近的一个项目 前台使用了 bootstrap.css + angularjs, 后台只处理数据(用的php,处理结果直接 json_encode($arr),非常爽)。一直在Chrome的仿真机测试非常完美, 没有进行真机测试。完成后,到手机测试时傻了,左右滑动页面时,竟然出现了一个 空白的竖条(如下图所示)。判断是margin-right 设置的长度所致,检查css,并没有相关代码。看来问题出现在了 bootstrap 。 继续阅读

bootstrap glyphicons 字体实现方法

2017/02/24更新,感谢猪圈圈(bruce_zxy#163.com)指出,glyphicon 多了个s的问题,文章已经修正
================
使用bootstrap很久了,内置的 glyphicon 图标,足以满足 小型项目的需求。只需要使用一个样式,即可调出图标。虽然感觉很神奇,一直没有分析他是怎么实现的,通过Chrome 开发者工具,定位到 对应的elment 后,得知他是 继续阅读