Question

我在我的php项目中使用mdbootstrap（Bootstrap 4）免费版。所以它不允许我使用类型文件的输入。所以我想在该项目中使用bootstrap 3来进行文件上传功能。

代码详情如下：我创建了一个模板文件。因此，我将在以下行呈现所需的视图：<?php require_once ("content/" . $content . ".php"); ?>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Material Design Bootstrap</title>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Bootstrap core CSS -->
    <link href="<?=base_url()?>assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="<?=base_url()?>assets/css/bootstrap-datepicker3.min.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="<?=base_url()?>assets/css/mdb.min.css" rel="stylesheet">
    <!-- Your custom styles (optional) -->
    <link href="<?=base_url()?>assets/css/style.css" rel="stylesheet">

    <link rel="stylesheet" href="<?=base_url()?>assets/css/jquery.mCustomScrollbar.css">
    <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="<?=base_url()?>assets/js/jquery-3.1.1.min.js"></script>

</head>
<body>
<?php require 'common/cust_loader.php'; ?>
<?php require 'common/header.php'; ?>
<?php require 'common/popup.php'; ?>
<?php require_once ("content/" . $content . ".php"); ?>
<?php require 'common/footer.php'; ?>
    <script type="text/javascript" src="<?=base_url()?>assets/js/bootstrap-datepicker.min.js"></script> 
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="<?=base_url()?>assets/js/tether.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="<?=base_url()?>assets/js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="<?=base_url()?>assets/js/mdb.min.js"></script>

    <!-- custom scrollbar plugin -->
    <script src="<?=base_url()?>assets/js/jquery.mCustomScrollbar.concat.min.js"></script>
    <script type="text/javascript">
    (function($){   
        $(window).on("load",function(){
            $.mCustomScrollbar.defaults.scrollButtons.enable=true; //enable scrolling buttons by default
            $.mCustomScrollbar.defaults.axis="yx"; //enable 2 axis scrollbars by default
            $("#content-md").mCustomScrollbar({theme:"minimal-dark"});
            $(".all-themes-switch a").click(function(e){
                    e.preventDefault();
                    var $this=$(this),
                        rel=$this.attr("rel"),
                        el=$(".content");
                    switch(rel){
                        case "toggle-content":
                            el.toggleClass("expanded-content");
                            break;
                    }
                });         
        });
    })(jQuery);    
    </script>            
</body>
</html>

所以在这个文件中我实现了mdbootstrap（bootstrap 4）所以对于文件上传，我想使用bootstrap 3。

简而言之，我想在bootstrap 4代码中使用bootstrap 3。

任何人都可以帮助我。提前谢谢。

Answer 1

Bootstrap 4的材料设计

<form>
  <div class="file-field">
    <div class="btn btn-primary btn-sm">
        <span>Choose file</span>
        <input type="file">
    </div>
    <div class="file-path-wrapper">
       <input class="file-path validate" type="text" placeholder="Upload your file">
    </div>
  </div>
</form>

Bootstrap 3 - 输入文件格式

 <div class="form-group">
  <label for="exampleInputFile">File input</label>
  <input type="file" id="exampleInputFile">
  <p class="help-block">Example block-level help text here.</p>
</div>

使用这两种解决方案之一尝试时会发生什么？你在控制台中有错误信息吗？

Bootstrap 4文件输入无效

1 个答案: