مشکل در اجرا گزفتن از bootstrap

سوال

سلام وقتتون بخیر . خسته نباشید

من در سایتم از منو و image caarocel استفاده کردم کد هارو هم از w3 کپی کردم

مشکلی که  در منو برام به وجود اومد اینه که وفتی صفحه رو xs میکنم و دکمه منو ظاهر میشه .

روش که کلیک میکنم هیچ چیزی نشون نمیده ولی در حالت عادی درست کار میکنه.

 

مشکل بعدی در مورد carocel که با وجود اندازه یکسان عکس ها. عکس ها زیرهم قرار میگیره و یک جا روی هم قرار نمیگیره.

ولی بقیه کد درسته و اعمال میشه

. کد ها چه کپی شده و چه نوشته شده توسط خودم این مشکل رو داره!!!!!

لطفا کمک کنید مشکل حل شه.

ممنون

در حال بررسی 0
۱۳۹۵/۱۰/۲۳ ۱۰:۳۰:۱۴ 3 پاسخ کاربر تازه 0

پاسخ ها ( 3 )

    0
    ۱۳۹۵/۱۰/۲۳ ۱۴:۰۵:۳۳

    از بوت استرپ Bootstrap استفاده می کنید؟

    کدها رو قرار بدید لطفن و اگر میشه دمو آنلاین یا فایل اون قسمت رو

    0
    ۱۳۹۵/۱۰/۲۴ ۱۲:۳۰:۱۵

    تشکر از لطفتون

    بله از bootstrap استفاده کردم

    این کد ها درسته و مشکلی نداره فکر میکنم ایراد از  jquery باشه یا درست لود نشده تلاش کردم درستش کنم ولی موفق نشدم
    این کدها
    <!doctype html>
    <html>
    <head>
    <meta charset=”utf-8″>
    <meta name=”viewport” content=”width-device-width,initial-scale-1.0″>
    <!– bootstrap –>
    <script src=”js/respond.js”></script>
    <script src=”js/bootstrap.js”></script>
    <link href=”css/bootstrap.css” rel=”stylesheet” />
    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>

    <style>
    @media (min-width:768px) {
    #main {
    clear: both;
    position: relative;
    padding: 0;
    margin: 0;
    }
    .top-menu-xs {
    width: 100%;
    margin-top: 0;
    z-index: 1000;
    margin-bottom: 0;
    padding-top: 0;right: 0 !important;
    float: right;
    list-style: outside none none;
    background: #4BBBD1;
    position: absolute;
    }
    .navbar-xs {
    padding: 0px;
    height: 50px;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    }
    .top-menu-xs li {
    float: right;
    margin: 0;
    font-size: 1em;
    height: 50px;
    }
    .top-menu-xs li:hover {
    background: #70C9EC;
    }
    .top-menu-xs li a {
    width: 100%;
    color: #fff;
    height: 52px;
    float: right;
    text-decoration: none;
    font-family: tahoma;
    padding: 15px 15px 0 15px;
    }
    .top-menu-xs li a:hover {
    color: #FFF;
    }
    .zirmenu-xs {
    display: none;
    list-style: outside none none;
    position: absolute;
    width: 200px;
    padding: 0px;
    background: #FBFBFB;
    float: right;
    margin: 52px 0px 0px;
    border-right: 2px solid #F6A1A1;
    }
    .top-menu-xs li:hover .zirmenu-xs {
    display: block;
    }
    .zirmenu-xs li {
    width: 100%;
    height: auto !important;
    float: right;
    padding: 0;
    }
    .zirmenu-xs li a {
    color: #666;
    height: auto !important;
    padding: 6px 7px 6px 7px;
    font-size: 12px;
    border-bottom: 1px sdolid #eee;
    width: 100%;
    }
    .zirmenu-xs li a:hover {
    color: #fff;
    height: auto !important;
    padding: 6px 7px 6px 7px;
    font-size: 12px;
    background: #F6A1A1;
    border-bottom: 1px sdolid #eee;
    }
    }
    @media (max-width:768px) {
    /*———–xs————-*/
    #main {
    clear: both;
    position: relative;
    padding: 0;
    margin: 0;
    }
    .menu-koochak {
    float: right;
    background: transparent;
    border-radius: 3px;
    margin-top: 1.7em;
    border: 1px solid #fff;
    margin-right: 10px;
    margin-left: 0;
    }
    .icon-bar {
    background-color: #fff;
    }
    .top-menu-xs {
    background: #E4E7E7;
    width: 200px;
    margin-top: -2px;
    height: 100%;
    z-index: 1000;
    padding-top: 10px;
    float: right;
    right: -26%;
    position: fixed;
    display: none;
    list-style: none;
    overflow-y: scroll;
    overflow-x: hidden;
    }
    .navbar-xs {
    background: #5FC1E7;
    }
    .top-menu-xs li {
    background: #E1E1E1;
    float: right;
    width: 200px;
    border-bottom: 1px solid #DADADA;
    margin-right: -40px;
    font-size: 0.8em;
    }
    .top-menu-xs li a {
    width: 100%;
    color: #333;
    padding: 5px 15px 5px 0;
    float: right;
    text-decoration: none;
    font-family: tahoma;
    }
    .top-menu-xs li a:focus {
    background: #666;
    color: #FFF;
    }
    .zirmenu-xs {
    display: none;
    list-style: none;
    }
    .zirmenu-xs li a {
    color: #666;
    }
    .navbar-xs {
    float: right;
    width: 100%;
    }
    #black {
    display: none;
    background: #000;
    opacity: 0.4;
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 1000;
    }
    }
    </style>
    </head>
    <body>
    <div id=”main”>
    <a href=”#”><div id=”black”></div><!–black–></a>

    <nav class=”navbar navbar-light navbar-xs “>
    <button  id=”xsmenu” type=”button” class=”navbar-toggle menu-koochak”> <span class=”icon-bar”></span> <span class=”icon-bar”></span> <span class=”icon-bar”></span> </button>
    <div class=”sub” id=”myNavbar”>
    <ul class=”top-menu-xs”>
    <li> <a href=”http://webtoaster.ir”>صفحه اصلی</a></li>
    <li> <a href=”http://webtoaster.ir/ads”>تبلیغات</a></li>
    <li> <a href=”http://webtoaster.ir/contact”>تماس با ما</a></li>
    <li id=”flipxs”><a href=”#”>متن لینک </a>
    <ul class=”zirmenu-xs”>
    <li><a href=”url”>متن لینک اول زیرمنو</a></li>
    <li><a href=”url”>متن لینک دوم زیرمنو</a></li>
    </ul>
    </li>
    </ul>
    <!–nav navbar-nav–>
    </div>
    </nav>

    <div id=”myCarousel” class=”carousel slide” data-ride=”carousel”>
    <!– Indicators –>
    <ol class=”carousel-indicators”>
    <li data-target=”#myCarousel” data-slide-to=”0″ class=”active”></li>
    <li data-target=”#myCarousel” data-slide-to=”1″></li>
    <li data-target=”#myCarousel” data-slide-to=”2″></li>
    <li data-target=”#myCarousel” data-slide-to=”3″></li>
    </ol>

    <!– Wrapper for slides –>
    <div class=”carousel-inner” role=”listbox”>

    <div class=”item active”>
    <img src=”img/Slider4.png” alt=”Chania”>
    <div class=”carousel-caption”>
    <h3>Chania</h3>
    <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
    </div>
    </div>

    <div class=”item”>
    <img src=”img/Slider4.png” alt=”Flower”>
    <div class=”carousel-caption”>
    <h3>Flowers</h3>
    <p>Beatiful flowers in Kolymbari, Crete.</p>
    </div>
    </div>

    <div class=”item”>
    <img src=”img/Slider4.png” alt=”Flower”>
    <div class=”carousel-caption”>
    <h3>Flowers</h3>
    <p>Beatiful flowers in Kolymbari, Crete.</p>
    </div>
    </div>
    </div>

    <!– Left and right controls –>
    <a class=”left carousel-control” href=”#myCarousel” role=”button” data-slide=”prev”>
    <span class=”glyphicon glyphicon-chevron-left” aria-hidden=”true”></span>
    <span class=”sr-only”>Previous</span>
    </a>
    <a class=”right carousel-control” href=”#myCarousel” role=”button” data-slide=”next”>
    <span class=”glyphicon glyphicon-chevron-right” aria-hidden=”true”></span>
    <span class=”sr-only”>Next</span>
    </a>
    </div>

    <script src=”https://code.jquery.com/jquery-3.1.1.min.js”></script>
    <script src=”js/bootstrap.min.js”></script>

    </div><!–main–>

    <script>
    <!– $(document).ready(function(){ –>
    <!– <!–menus–> –>
    <!– $(“.sub ul li”).click(function(){ –>
    <!– $(this).children(“ul”).slideToggle(“fast”); –>
    <!– }); –>
    <!– $(“#xsmenu”).click(function(){ –>
    <!– $(“#main”).animate({left:’-200px’}); –>
    <!– $(“#black”).css(“display”,”block”); –>
    <!– $(“.top-menu-xs”).css(“display”,”block”); –>
    <!– $(“.top-menu-xs”).animate({right:’0%’}); –>
    <!– }); –>
    <!– $(“#black,.removeicon”).click(function(){ –>
    <!– $(“#main”).animate({left:’0px’}); –>
    <!– $(“#black”).css(“display”,”none”); –>
    <!– $(“.top-menu-xs”).animate({right:’-200px’}); –>
    <!– $(“.search-box”).animate({width:’0px’,height:’0px’,margin:’20% 50%’},[,’fast’]); –>
    <!– }); –>
    <!– <!–menus–> –>
    <!– }); –>

    </script>
    </div><!–main–>
    </body>
    </html>
    ممنونم از وکمکتون و وقتی که میگذارید

      0
      ۱۳۹۵/۱۰/۲۵ ۱۴:۱۰:۳۰

      لطفا یا قالب را به صورت کامل آپلود کنید، یا دمویی آنلاین قرار بدید تا بتونیم بررسی کنیم
      و همچنین آدرس صفحه ی سایت w3 که ازش کدها رو کپی کردید قرار بدید.

      موفق باشید

    0
    ۱۳۹۵/۱۰/۲۷ ۹:۵۸:۱۰

    سلام ممنونم از توجه تون

    متوجه شدم که پروژه م  jquery.jsوbootstrap.js  رو نمیشناسه و وجودشون رو ارور میده.

    با این که فکر میکنم ادرس دهی درسته!!!

    تونستم مشکل قبل رو بااستفاده از ادرس دهی انلاین حل کنم

    ولی برای اضافه کردن چیز های دیگه به مشکل میخورم.

      0
      ۱۳۹۵/۱۰/۲۷ ۱۳:۵۰:۰۶

      فقط برای فراخوانی فایل های js قالب به مشکل بر میخورید؟
      در فراخوانی فایل های Css مشکلی ندارید؟

ارسال یک پاسخ